fix(FEC-13437): sanitize tags issue (#166)

kaltura · Nov 6, 2023 · f3f0a92 · f3f0a92
1 parent b3948e0
commit f3f0a92
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@playkit-js/kaltura-player-js": "canary",
+    "@types/sanitize-html": "^2.9.3",
     "conventional-github-releaser": "3.1.3",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",

diff --git a/src/transcript-plugin.tsx b/src/transcript-plugin.tsx
@@ -1,10 +1,9 @@
-// @ts-ignore
 import * as sanitizeHtml from 'sanitize-html';
 import {h} from 'preact';
 import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {ui} from '@playkit-js/kaltura-player-js';
 import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
-import {ObjectUtils, downloadContent, printContent} from './utils';
+import {ObjectUtils, downloadContent, printContent, decodeString} from './utils';
 import {icons} from './components/icons';
 import {PluginButton} from './components/plugin-button/plugin-button';
 import {Transcript} from './components/transcript';
@@ -204,7 +203,12 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _sanitizeCaptions = (data: CuePointData[]) => {
     return data.map(caption => ({
       ...caption,
-      text: sanitizeHtml(caption.text || '', {allowedTags: []})
+      text: decodeString(
+        sanitizeHtml(caption.text || '', {
+          allowedAttributes: {},
+          allowedTags: []
+        })
+      )
     }));
   };
 
@@ -298,7 +302,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
 
   private _handleDownload = () => {
     const {config} = this.player;
-    const captions = this._captionMap.get(this._activeCaptionMapId) || [];
+    const captions = this._sanitizeCaptions(this._captionMap.get(this._activeCaptionMapId) || []);
 
     if (captions) {
       const entryMetadata = get(config, 'sources.metadata', {});
@@ -309,8 +313,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _handlePrint = () => {
-    const captions = this._captionMap.get(this._activeCaptionMapId) || [];
-
+    const captions = this._sanitizeCaptions(this._captionMap.get(this._activeCaptionMapId) || []);
     if (captions) {
       printContent(makePlainText(captions));
     }

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -52,15 +52,12 @@ export function isBoolean(value: any) {
 
 export function makePlainText(captions: Array<CuePointData>): string {
   return captions.reduce((acc: string, next: CuePointData) => {
-    return `${acc} ${next.text}`;
+    return `${acc.trim()} ${next.text.trim()}`;
   }, '');
 }
 
 import {CuePointData, CuePoint} from '../types';
 
-const {toHHMMSS} = KalturaPlayer.ui.utils;
-const MAX_CHARACTERS = 77;
-
 export const decodeString = (content: any): string => {
   if (typeof content !== 'string') {
     return content;
@@ -69,6 +66,7 @@ export const decodeString = (content: any): string => {
     .replace(/&lt;/gi, '<')
     .replace(/&gt;/gi, '>')
     .replace(/&nbsp;/gi, ' ')
+    .replace(/  /gi, ' ')
     .replace(/&amp;/gi, '&')
     .replace(/&quot;/gi, '"');
 };

diff --git a/yarn.lock b/yarn.lock
@@ -413,6 +413,13 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/sanitize-html@^2.9.3":
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.9.3.tgz#eb31abeb496838719014b094b9e647dd7937ce7d"
+  integrity sha512-1rsSdEJLV7utAG+Fms2uP+nSmmYmOhUUSSZvUz4wF2wlA0M5/A/gVgnpWZ7EKaPWsrrxWiSuNJqSBW8dh2isBA==
+  dependencies:
+    htmlparser2 "^8.0.0"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"