feat(FEC-11554): delay addCuePoints after media loaded in video (#498)

When adding cue points to video element text track, if they are added before video is loaded to video tag then the cues are cleared. Need to wait for player.ready()
kaltura · Oct 1, 2021 · 10f80e0 · 10f80e0
1 parent 5a6a2c8
commit 10f80e0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/common/cuepoint/cuepoint-manager.js b/src/common/cuepoint/cuepoint-manager.js
@@ -38,6 +38,10 @@ export class CuePointManager {
     return this._textTrack?.cues || [];
   }
 
+  getActiveCuePoints() {
+    return this._textTrack?.activeCues || [];
+  }
+
   getCuePointById(id: string) {
     return this._textTrack?.cues?.getCueById(id);
   }
@@ -47,21 +51,23 @@ export class CuePointManager {
   }
 
   addCuePoints(data: CuePoint[]) {
-    if (!this._textTrack) {
-      this._addTextTrack();
-    }
-    const newCuePoints: window.VTTCue | typeof Cue = [];
-
-    data.forEach((cuePoint: CuePoint) => {
-      const textTrackCue = this._createTextTrackCue(cuePoint);
-      const exisedCue = this.getCuePointById(textTrackCue.id);
-      if (exisedCue) {
-        this.removeCuePoint(exisedCue);
+    this._player.ready().then(() => {
+      if (!this._textTrack) {
+        this._addTextTrack();
       }
-      this._textTrack?.addCue(textTrackCue);
-      newCuePoints.push(textTrackCue);
+      const newCuePoints: window.VTTCue | typeof Cue = [];
+
+      data.forEach((cuePoint: CuePoint) => {
+        const textTrackCue = this._createTextTrackCue(cuePoint);
+        const exisedCue = this.getCuePointById(textTrackCue.id);
+        if (exisedCue) {
+          this.removeCuePoint(exisedCue);
+        }
+        this._textTrack?.addCue(textTrackCue);
+        newCuePoints.push(textTrackCue);
+      });
+      this._player.dispatchEvent(new FakeEvent(EventType.TIMED_METADATA_ADDED, {cues: newCuePoints}));
     });
-    this._player.dispatchEvent(new FakeEvent(EventType.TIMED_METADATA_ADDED, {cues: newCuePoints}));
   }
 
   clearAllCuePoints() {

diff --git a/test/src/common/cuepoints/cuepoint-manager.spec.js b/test/src/common/cuepoints/cuepoint-manager.spec.js
@@ -29,7 +29,9 @@ describe('CuePointManager', () => {
     player.setMedia({sources: SourcesConfig.Mp4});
     expect(player.cuePointManager._textTrack).to.eql(null);
     player.cuePointManager.addCuePoints([]);
-    expect(player.cuePointManager._textTrack).instanceOf(TextTrack);
+    player.ready().then(() => {
+      expect(player.cuePointManager._textTrack).instanceOf(TextTrack);
+    });
   });
 
   it('should add/get/remove/clear-all cue points', function () {
@@ -51,14 +53,16 @@ describe('CuePointManager', () => {
       }
     ];
     player.setMedia({sources: SourcesConfig.Mp4});
-    expect(player.cuePointManager.getAllCuePoints().length).eql(0);
-    player.cuePointManager.addCuePoints(cuePoints);
-    expect(player.cuePointManager.getAllCuePoints().length).eql(3);
-    const cuePoint = player.cuePointManager.getCuePointById('test-id-1');
-    expect(cuePoint.id).to.eql('test-id-1');
-    player.cuePointManager.removeCuePoint(cuePoint);
-    expect(player.cuePointManager.getAllCuePoints().length).eql(2);
-    player.cuePointManager.clearAllCuePoints();
-    expect(player.cuePointManager.getAllCuePoints().length).eql(0);
+    player.ready().then(() => {
+      expect(player.cuePointManager.getAllCuePoints().length).eql(0);
+      player.cuePointManager.addCuePoints(cuePoints);
+      expect(player.cuePointManager.getAllCuePoints().length).eql(3);
+      const cuePoint = player.cuePointManager.getCuePointById('test-id-1');
+      expect(cuePoint.id).to.eql('test-id-1');
+      player.cuePointManager.removeCuePoint(cuePoint);
+      expect(player.cuePointManager.getAllCuePoints().length).eql(2);
+      player.cuePointManager.clearAllCuePoints();
+      expect(player.cuePointManager.getAllCuePoints().length).eql(0);
+    });
   });
 });