feat(FEC-11632): expose stream timed metadata (#509)

add a new api `getTextTracks` in cue point manager use `createTextTrackCue` from core change all cue point manager api's to consider all metadata tracks Depends on kaltura/playkit-js#618 Related to kaltura/playkit-js-dash#172 Solves FEC-11632
kaltura · Dec 16, 2021 · 9610316 · 9610316
1 parent eee8f49
commit 9610316
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
-    "@playkit-js/playkit-js": "0.75.0",
+    "@playkit-js/playkit-js": "canary",
     "@playkit-js/playkit-js-dash": "1.27.3",
     "@playkit-js/playkit-js-hls": "1.27.3",
     "@playkit-js/playkit-js-ui": "0.69.4",

diff --git a/src/common/cuepoint/cuepoint-manager.js b/src/common/cuepoint/cuepoint-manager.js
@@ -1,5 +1,5 @@
 //@flow
-import {Cue, FakeEvent, TextTrack, EventType} from '@playkit-js/playkit-js';
+import {FakeEvent, TextTrack, EventType, createTextTrackCue} from '@playkit-js/playkit-js';
 import {CUE_POINTS_TEXT_TRACK, CUE_POINT_KEY} from './cuepoint-type';
 
 interface CuePoint {
@@ -20,43 +20,52 @@ export class CuePointManager {
     this._textTrack = this._player.addTextTrack(TextTrack.KIND.METADATA, CUE_POINTS_TEXT_TRACK);
   }
 
-  _createTextTrackCue(data: CuePoint): window.VTTCue | typeof Cue {
-    let cue = {};
-    if (window.VTTCue) {
-      cue = new window.VTTCue(data.startTime, data.endTime, '');
-    } else if (window.TextTrackCue) {
-      // IE11 support
-      cue = new Cue(data.startTime, data.endTime, '');
-    }
-    const cueValue = {key: CUE_POINT_KEY, data};
-    cue.id = data.id;
-    cue.value = cueValue;
-    return cue;
+  _getMetadataTracks(): Array<TextTrack> {
+    return this._player.getTextTracks().filter(track => track.kind === TextTrack.KIND.METADATA);
   }
 
-  getAllCuePoints() {
-    return this._textTrack?.cues || [];
+  _createTextTrackCue(data: CuePoint): TextTrackCue {
+    const {startTime, endTime, id} = data;
+    return createTextTrackCue({startTime, endTime, id, type: CUE_POINT_KEY, metadata: data});
   }
 
-  getActiveCuePoints() {
-    return this._textTrack?.activeCues || [];
+  _cuesSorter(a: TextTrackCue, b: TextTrackCue): number {
+    return a.startTime - b.startTime;
   }
 
-  getCuePointById(id: string) {
-    return this._textTrack?.cues?.getCueById(id);
+  getAllCuePoints(): Array<TextTrackCue> {
+    const metadataTracks = this._getMetadataTracks();
+    return metadataTracks.reduce((cues, track) => cues.concat(...track.cues), []).sort(this._cuesSorter);
   }
 
-  removeCuePoint(cuePoint: window.VTTCue | typeof Cue) {
-    this._textTrack?.removeCue(cuePoint);
+  getActiveCuePoints(): Array<TextTrackCue> {
+    const metadataTracks = this._getMetadataTracks();
+    return metadataTracks.reduce((cues, track) => cues.concat(...track.activeCues), []).sort(this._cuesSorter);
+  }
+
+  getCuePointById(id: string): ?TextTrackCue {
+    const metadataTracks = this._getMetadataTracks();
+    metadataTracks.forEach(track => {
+      const cuePoint = track.cues.getCueById(id);
+      if (cuePoint) {
+        return cuePoint;
+      }
+    });
+  }
+
+  removeCuePoint(cuePoint: TextTrackCue) {
+    const metadataTracks = this._getMetadataTracks();
+    metadataTracks.forEach(track => {
+      track.removeCue(cuePoint);
+    });
   }
 
   addCuePoints(data: CuePoint[]) {
     this._player.ready().then(() => {
       if (!this._textTrack) {
         this._addTextTrack();
       }
-      const newCuePoints: window.VTTCue | typeof Cue = [];
-
+      const newCuePoints: Array<TextTrackCue> = [];
       data.forEach((cuePoint: CuePoint) => {
         const textTrackCue = this._createTextTrackCue(cuePoint);
         const exisedCue = this.getCuePointById(textTrackCue.id);
@@ -71,11 +80,12 @@ export class CuePointManager {
   }
 
   clearAllCuePoints() {
-    if (this._textTrack && this._textTrack.cues.length) {
-      while (this._textTrack.cues.length) {
-        this.removeCuePoint(this._textTrack.cues[0]);
+    const metadataTracks = this._getMetadataTracks();
+    metadataTracks.forEach(track => {
+      while (track.cues.length) {
+        this.removeCuePoint(track.cues[0]);
       }
-    }
+    });
   }
 
   reset() {

diff --git a/src/kaltura-player.js b/src/kaltura-player.js
@@ -1050,6 +1050,16 @@ class KalturaPlayer extends FakeEventTarget {
     return this._localPlayer.addTextTrack(kind, label);
   }
 
+  /**
+   * get text tracks
+   * @function getTextTracks
+   * @returns {Array<TextTrack>} - The TextTracks array.
+   * @public
+   */
+  getTextTracks(): Array<TextTrack> {
+    return this._localPlayer.getTextTracks();
+  }
+
   get remotePlayerManager() {
     return this._remotePlayerManager;
   }

diff --git a/yarn.lock b/yarn.lock
@@ -1150,13 +1150,13 @@
     react-redux "^7.2.0"
     redux "^4.0.5"
 
-"@playkit-js/playkit-js@0.75.0":
-  version "0.75.0"
-  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.75.0.tgz#b0985e14bde4da3e5955b283be38386430c2f1cd"
-  integrity sha512-eXJljn2M4b7p5uTZtC5JNqvca9t3fwUsu+b3kRIRBsO9enXcjyEt8Smx2IUjXy8TCf9YQBdGcBX7MnArBlQMKA==
+"@playkit-js/playkit-js@canary":
+  version "0.76.0-canary.f841b7e"
+  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.76.0-canary.f841b7e.tgz#9c5442e894cc028c689fdfc9399264ae87b9ed08"
+  integrity sha512-S3JO9ymJfcRU/IzgQxLr7MnHNPnLSHbE9VKQz2S8jAlc985bFuhQnlj1D8Z/osJ5YhTDgJDrtvk2+WUJ7HD+Uw==
   dependencies:
     js-logger "^1.6.0"
-    ua-parser-js "^0.7.21"
+    ua-parser-js "1.0.2"
 
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
@@ -9880,10 +9880,10 @@ ua-parser-js@0.7.21:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
   integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
 
-ua-parser-js@^0.7.21:
-  version "0.7.28"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
-  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
+ua-parser-js@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.2.tgz#e2976c34dbfb30b15d2c300b2a53eac87c57a775"
+  integrity sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==
 
 uglify-js@^3.1.4, uglify-js@^3.6.0:
   version "3.10.0"