Do not append 608/WebVTT/IMSC cues that have alreading been appended

Fix 608 CC continuity when seeking and while track is disabled Merges changes from #3321 into master, while maintaining that `config.cueHandler` must append cues to their supplied TextTrack
video-dev · Jan 28, 2021 · 0b11596 · 0b11596
1 parent cc499ec
commit 0b11596
Show file tree

Hide file tree

Showing 7 changed files with 237 additions and 120 deletions.
diff --git a/demo/main.js b/demo/main.js
@@ -42,7 +42,7 @@ let stopOnStall = getDemoConfigPropOrDefault('stopOnStall', false);
 let bufferingIdx = -1;
 let selectedTestStream = null;
 
-const video = document.querySelector('#video');
+let video = document.querySelector('#video');
 const startTime = Date.now();
 
 let lastSeekingIdx;
@@ -340,7 +340,32 @@ function loadSelectedStream() {
 
   logStatus('Loading manifest and attaching video element...');
 
+  const expiredTracks = [].filter.call(
+    video.textTracks,
+    (track) => track.kind !== 'metadata'
+  );
+  if (expiredTracks.length) {
+    const kinds = expiredTracks
+      .map((track) => track.kind)
+      .filter((kind, index, self) => self.indexOf(kind) === index);
+    logStatus(
+      `Replacing video element to remove ${kinds.join(' and ')} text tracks`
+    );
+    const videoWithExpiredTextTracks = video;
+    video = videoWithExpiredTextTracks.cloneNode(false);
+    video.removeAttribute('src');
+    video.volume = videoWithExpiredTextTracks.volume;
+    video.muted = videoWithExpiredTextTracks.muted;
+    videoWithExpiredTextTracks.parentNode.insertBefore(
+      video,
+      videoWithExpiredTextTracks
+    );
+    videoWithExpiredTextTracks.parentNode.removeChild(
+      videoWithExpiredTextTracks
+    );
+  }
   addChartEventListeners(hls);
+  addVideoEventListeners(video);
 
   hls.loadSource(url);
   hls.autoLevelCapping = levelCapping;
@@ -865,7 +890,23 @@ function loadSelectedStream() {
       stats.fpsTotalDroppedFrames = data.totalDroppedFrames;
     }
   });
+}
 
+function addVideoEventListeners(video) {
+  video.removeEventListener('resize', handleVideoEvent);
+  video.removeEventListener('seeking', handleVideoEvent);
+  video.removeEventListener('seeked', handleVideoEvent);
+  video.removeEventListener('pause', handleVideoEvent);
+  video.removeEventListener('play', handleVideoEvent);
+  video.removeEventListener('canplay', handleVideoEvent);
+  video.removeEventListener('canplaythrough', handleVideoEvent);
+  video.removeEventListener('ended', handleVideoEvent);
+  video.removeEventListener('playing', handleVideoEvent);
+  video.removeEventListener('error', handleVideoEvent);
+  video.removeEventListener('loadedmetadata', handleVideoEvent);
+  video.removeEventListener('loadeddata', handleVideoEvent);
+  video.removeEventListener('durationchange', handleVideoEvent);
+  video.removeEventListener('volumechange', handleVolumeEvent);
   video.addEventListener('resize', handleVideoEvent);
   video.addEventListener('seeking', handleVideoEvent);
   video.addEventListener('seeked', handleVideoEvent);
@@ -879,15 +920,7 @@ function loadSelectedStream() {
   video.addEventListener('loadedmetadata', handleVideoEvent);
   video.addEventListener('loadeddata', handleVideoEvent);
   video.addEventListener('durationchange', handleVideoEvent);
-  video.addEventListener('volumechange', (evt) => {
-    localStorage.setItem(
-      STORAGE_KEYS.volume,
-      JSON.stringify({
-        muted: video.muted,
-        volume: video.volume,
-      })
-    );
-  });
+  video.addEventListener('volumechange', handleVolumeEvent);
 }
 
 function handleUnsupported() {
@@ -985,6 +1018,16 @@ function handleVideoEvent(evt) {
   trimEventHistory();
 }
 
+function handleVolumeEvent() {
+  localStorage.setItem(
+    STORAGE_KEYS.volume,
+    JSON.stringify({
+      muted: video.muted,
+      volume: video.volume,
+    })
+  );
+}
+
 function handleLevelError(data) {
   var levelObj = data.context || data;
   hls.removeLevel(levelObj.level, levelObj.urlId || 0);

diff --git a/src/controller/id3-track-controller.ts b/src/controller/id3-track-controller.ts
@@ -2,7 +2,7 @@ import { Events } from '../events';
 import {
   sendAddTrackEvent,
   clearCurrentCues,
-  getCuesInRange,
+  removeCuesInRange,
 } from '../utils/texttrack-utils';
 import * as ID3 from '../demux/id3';
 import type {
@@ -138,12 +138,8 @@ class ID3TrackController implements ComponentAPI {
     if (!type || type === 'audio') {
       // id3 cues come from parsed audio only remove cues when audio buffer is cleared
       const { id3Track } = this;
-      if (!id3Track || !id3Track.cues || !id3Track.cues.length) {
-        return;
-      }
-      const cues = getCuesInRange(id3Track.cues, startOffset, endOffset);
-      for (let i = 0; i < cues.length; i++) {
-        id3Track.removeCue(cues[i]);
+      if (id3Track) {
+        removeCuesInRange(id3Track, startOffset, endOffset);
       }
     }
   }