feat(FEC-11761): expose stream timed metadata - phase 2

src/engines/html5/html5.js

@@ -8,6 +8,8 @@ import VideoTrack from '../../track/video-track';
 import AudioTrack from '../../track/audio-track';
 import PKTextTrack, {getActiveCues} from '../../track/text-track';
 import ImageTrack from '../../track/image-track';
+import {Cue} from '../../track/vtt-cue';
+import {createCuePoint} from '../../track/cue-point';
 import * as Utils from '../../utils/util';
 import Html5AutoPlayCapability from './capabilities/html5-autoplay';
 import Error from '../../error/error';
@@ -1166,24 +1168,44 @@ export default class Html5 extends FakeEventTarget implements IEngine {
     const listenToCueChange = track => {
       track.mode = PKTextTrack.MODE.HIDDEN;
       this._eventManager.listen(track, 'cuechange', () => {
-        this.dispatchEvent(new FakeEvent(CustomEventType.TIMED_METADATA, {cues: Array.from(track.activeCues), label: track.label}));
+        let activeCues = [];
+        Array.from(this._el.textTracks).forEach((track: TextTrack) => {
+          if (PKTextTrack.isMetaDataTrack(track)) {
+            activeCues = activeCues.concat(getActiveCues(track.activeCues));
+          }
+        });
+        activeCues = activeCues.sort((a: Cue, b: Cue) => {
+          return a.startTime - b.startTime;
+        });
+        this.dispatchEvent(new FakeEvent(CustomEventType.TIMED_METADATA, {cues: activeCues}));
+        if (activeCues.length) {
+          this.dispatchEvent(
+            new FakeEvent(CustomEventType.TIMED_METADATA_CHANGE, {
+              cues: activeCues.map(cue => createCuePoint(cue))
+            })
+          );
+        }
       });
     };
-    const metadataTrack = Array.from(this._el.textTracks).find((track: TextTrack) => PKTextTrack.isMetaDataTrack(track));
-    if (metadataTrack) {
-      listenToCueChange(metadataTrack);
-    } else {
-      this._eventManager.listen(this._el.textTracks, 'addtrack', (event: any) => {
-        if (PKTextTrack.isMetaDataTrack(event.track)) {
-          listenToCueChange(event.track);
+
+    Array.from(this._el.textTracks).forEach((track: TextTrack) => {
+      if (PKTextTrack.isMetaDataTrack(track)) {
+        listenToCueChange(track);
+      }
+    });
+
+    this._eventManager.listen(this._el.textTracks, 'addtrack', (event: any) => {
+      if (PKTextTrack.isMetaDataTrack(event.track)) {
+        listenToCueChange(event.track);
+      }
+    });
+
+    this._eventManager.listen(this._el.textTracks, 'change', () => {
+      Array.from(this._el.textTracks).forEach((track: TextTrack) => {
+        if (PKTextTrack.isMetaDataTrack(track) && track.mode !== PKTextTrack.MODE.HIDDEN) {
+          track.mode = PKTextTrack.MODE.HIDDEN;
         }
       });
-    }
-    this._eventManager.listen(this._el.textTracks, 'change', () => {
-      const metadataTrack = Array.from(this._el.textTracks).find((track: TextTrack) => PKTextTrack.isMetaDataTrack(track));
-      if (metadataTrack && metadataTrack.mode !== PKTextTrack.MODE.HIDDEN) {
-        metadataTrack.mode = PKTextTrack.MODE.HIDDEN;
-      }
     });
   }
 

src/event/event-type.js

@@ -240,6 +240,10 @@ const CustomEventType: PKEventTypes = {
    * Fired when the timed metadata triggered
    */
   TIMED_METADATA: 'timedmetadata',
+  /**
+   * Fired when the timed metadata triggered
+   */
+  TIMED_METADATA_CHANGE: 'timedmetadatachange',
   /**
    * Fires when new timed metadata added
    */

src/player.js

@@ -1921,6 +1921,7 @@ export default class Player extends FakeEventTarget {
       this._eventManager.listen(this._engine, CustomEventType.TEXT_CUE_CHANGED, (event: FakeEvent) => this._onCueChange(event));
       this._eventManager.listen(this._engine, CustomEventType.ABR_MODE_CHANGED, (event: FakeEvent) => this.dispatchEvent(event));
       this._eventManager.listen(this._engine, CustomEventType.TIMED_METADATA, (event: FakeEvent) => this.dispatchEvent(event));
+      this._eventManager.listen(this._engine, CustomEventType.TIMED_METADATA_CHANGE, (event: FakeEvent) => this.dispatchEvent(event));
       this._eventManager.listen(this._engine, CustomEventType.TIMED_METADATA_ADDED, (event: FakeEvent) => this.dispatchEvent(event));
       this._eventManager.listen(this._engine, CustomEventType.PLAY_FAILED, (event: FakeEvent) => {
         this._onPlayFailed(event);

src/playkit.js

@@ -11,7 +11,7 @@ import ImageTrack from './track/image-track';
 import VideoTrack from './track/video-track';
 import AudioTrack from './track/audio-track';
 import TextTrack from './track/text-track';
-import {CuePoint, createTextTrackCue} from './track/cue-point';
+import {CuePoint, createTextTrackCue, createCuePoint} from './track/cue-point';
 import TextStyle from './track/text-style';
 import {Cue} from './track/vtt-cue';
 import Env from './utils/env';
@@ -64,7 +64,7 @@ export {BaseMiddleware};
 export {Track, VideoTrack, AudioTrack, TextTrack, ImageTrack, TextStyle, Cue};
 
 // Export the cue point class and function
-export {CuePoint, createTextTrackCue};
+export {CuePoint, createTextTrackCue, createCuePoint};
 
 // Export utils library
 export {Utils};

src/track/cue-point.js

@@ -13,9 +13,9 @@ class CuePoint {
    * @param {number} endTime - end time.
    * @param {string} id - id.
    * @param {string} type - type.
-   * @param {string|Object} metadata - metadata.
+   * @param {any} metadata - metadata.
    */
-  constructor(startTime: number, endTime: number, id: string, type: string, metadata: string | Object) {
+  constructor(startTime: number, endTime: number, id: string, type: string, metadata: any) {
     this.startTime = startTime;
     this.endTime = endTime;
     this.id = id;
@@ -25,7 +25,9 @@ class CuePoint {
 }
 
 CuePoint.TYPE = {
+  ID3: 'id3',
   EMSG: 'emsg',
+  CUE_POINT: 'cuepoint',
   CUSTOM: 'custom'
 };
 
@@ -50,4 +52,42 @@ function createTextTrackCue(cuePoint: CuePoint): TextTrackCue {
   return cue;
 }
 
-export {CuePoint, createTextTrackCue};
+/**
+ * Create a cue point from a standard TextTrackCue.
+ * @param {TextTrackCue} cue - text track cue.
+ * @returns {?CuePoint} - the created cue point.
+ * @private
+ */
+function createCuePoint(cue: TextTrackCue): ?CuePoint {
+  if (cue) {
+    const {
+      startTime,
+      endTime,
+      id,
+      value: {data}
+    } = cue;
+    return new CuePoint(startTime, endTime, id, _getType(cue), data);
+  }
+  return null;
+}
+
+/**
+ * @param {TextTrackCue} cue - cue
+ * @return {string} - type
+ * @private
+ */
+function _getType(cue: TextTrackCue): string {
+  const {
+    type,
+    track: {label},
+    value: {key}
+  } = cue;
+  let cuePointType = Object.values(CuePoint.TYPE).find(type => type === key);
+  if (!cuePointType) {
+    cuePointType = type === 'org.id3' || label === 'id3' ? CuePoint.TYPE.ID3 : CuePoint.TYPE.CUSTOM;
+  }
+  //$FlowFixMe
+  return cuePointType;
+}
+
+export {CuePoint, createTextTrackCue, createCuePoint};

src/track/text-track.js

@@ -95,7 +95,7 @@ TextTrack.isExternalTrack = (track: any) => {
  * @returns {void}
  * @private
  */
-function getActiveCues(textTrackCueList: TextTrackCueList) {
+function getActiveCues(textTrackCueList: TextTrackCueList): Array<Cue> {
   let normalizedCues: Array<Cue> = [];
   for (let cue of textTrackCueList) {
     //Normalize cues to be of type of VTT model

src/utils/binary-search.js

@@ -0,0 +1,26 @@
+//@flow
+/**
+ * @param {Array<any>} list The array to search.
+ * @param {Function} comparisonFn
+ *      Called and provided a candidate item as the first argument.
+ *      Should return:
+ *          > -1 if the item should be located at a lower index than the provided item.
+ *          > 1 if the item should be located at a higher index than the provided item.
+ *          > 0 if the item is the item you're looking for.
+ *
+ * @return {any} The object if it is found or null otherwise.
+ */
+export function binarySearch(list: Array<any> = [], comparisonFn: Function = () => 1): any {
+  if (list.length === 0 || (list.length === 1 && comparisonFn(list[0]) !== 0)) {
+    return null;
+  }
+  const mid = Math.floor(list.length / 2);
+  if (comparisonFn(list[mid]) === 0) {
+    return list[mid];
+  }
+  if (comparisonFn(list[mid]) > 0) {
+    return binarySearch(list.slice(0, mid), comparisonFn);
+  } else {
+    return binarySearch(list.slice(mid + 1), comparisonFn);
+  }
+}

src/utils/index.js

@@ -1,3 +1,4 @@
 export * from './util';
 export {ResizeWatcher} from './resize-watcher';
 export {MultiMap} from './multi-map';
+export {binarySearch} from './binary-search';