@playkit-js/transcript 3.5.12 → 3.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.12",
+  "version": "3.5.13",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/transcript-plugin.tsx

@@ -129,7 +129,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       }
     });
     if (captionData.length) {
-      this._addCaptionData(captionData);
+      // take metadata from the first caption, as all captions in captionData have the same language and label
+      const captionMetadata = payload.cues[0].metadata;
+      const captionKey = this._makeCaptionKey(captionMetadata.language, captionMetadata.label);
+      this._addCaptionData(captionData, captionKey);
       this._addTranscriptItem();
     }
   };
@@ -151,9 +154,12 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._updateTranscriptPanel();
   };
 
-  private _addCaptionData = (newData: CuePointData[]) => {
+  private _addCaptionData = (newData: CuePointData[], captionKey: string) => {
     this._activeCaptionMapId = this._getCaptionMapId();
-    this._captionMap.set(this._activeCaptionMapId, this._sanitizeCaptions(newData));
+    const oldData = this._captionMap.get(captionKey);
+    const newSanitizedData = this._sanitizeCaptions(newData);
+    // set the captions data according to the captionKey param
+    this._captionMap.set(captionKey, oldData ? [...oldData, ...newSanitizedData] : newSanitizedData);
     this._isLoading = false;
     clearTimeout(this._loadingTimeoutId);
     this._updateTranscriptPanel();
@@ -168,9 +174,13 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     const activeTextTrack = allTextTracks.find(track => track.active);
     if (activeTextTrack?.language === 'off') {
       // use 1st captions from text-track list
-      return `${allTextTracks[0]?.language}-${allTextTracks[0]?.label}`;
+      return this._makeCaptionKey(allTextTracks[0]?.language, allTextTracks[0]?.label);
     }
-    return `${activeTextTrack?.language}-${activeTextTrack?.label}`;
+    return this._makeCaptionKey(activeTextTrack?.language, activeTextTrack?.label);
+  };
+
+  private _makeCaptionKey = (language?: string, label?: string): string => {
+    return `${language}-${label}`;
   };
 
   private _activatePlugin = (isFirstOpen = false) => {