fix #2400 issue - add configuration for browsers with bug on addCue method

docs/API.md

@@ -58,6 +58,7 @@
   - [`abrController`](#abrcontroller)
   - [`timelineController`](#timelinecontroller)
   - [`enableWebVTT`](#enablewebvtt)
+  - [`forceTextTrackCue`](#forceTextTrackCue)
   - [`enableCEA708Captions`](#enablecea708captions)
   - [`captionsTextTrack1Label`](#captionstexttrack1label)
   - [`captionsTextTrack1LanguageCode`](#captionstexttrack1languagecode)
@@ -342,6 +343,7 @@ Configuration parameters could be provided to hls.js upon instantiation of `Hls`
       fpsController: FPSController,
       timelineController: TimelineController,
       enableWebVTT: true,
+      forceTextTrackCue: false,
       enableCEA708Captions: true,
       stretchShortVideoTrack: false,
       maxAudioFramesDrift: 1,
@@ -831,6 +833,14 @@ whether or not to enable WebVTT captions on HLS
 
 parameter should be a boolean
 
+### `forceTextTrackCue`
+
+(default: `false`)
+
+force use on text track cue for specific OS with bug on addCue method
+
+parameter should be a boolean
+
 ### `enableCEA708Captions`
 
 (default: `true`)

src/config.ts

@@ -114,6 +114,7 @@ type TimelineControllerConfig = {
   cueHandler: any, // TODO(typescript-cues): Type once file is done
   enableCEA708Captions: boolean,
   enableWebVTT: boolean,
+  forceTextTrackCue: boolean,
   captionsTextTrack1Label: string,
   captionsTextTrack1LanguageCode: string,
   captionsTextTrack2Label: string,
@@ -256,6 +257,7 @@ function timelineConfig (): TimelineControllerConfig {
     cueHandler: Cues, // used by timeline-controller
     enableCEA708Captions: true, // used by timeline-controller
     enableWebVTT: true, // used by timeline-controller
+    forceTextTrackCue: false, // used by timeline-controller
     captionsTextTrack1Label: 'English', // used by timeline-controller
     captionsTextTrack1LanguageCode: 'en', // used by timeline-controller
     captionsTextTrack2Label: 'Spanish', // used by timeline-controller

src/controller/timeline-controller.js

@@ -290,16 +290,23 @@ class TimelineController extends EventHandler {
       }
       // Add cues and trigger event with success true.
       cues.forEach(cue => {
+        const addTextTrackCue = (track, cue) => {
+          const textTrackCue = new window.TextTrackCue(cue.startTime, cue.endTime, cue.text);
+          textTrackCue.id = cue.id;
+          track.addCue(textTrackCue);
+        };
         // Sometimes there are cue overlaps on segmented vtts so the same
         // cue can appear more than once in different vtt files.
         // This avoid showing duplicated cues with same timecode and text.
         if (!currentTrack.cues.getCueById(cue.id)) {
-          try {
-            currentTrack.addCue(cue);
-          } catch (err) {
-            const textTrackCue = new window.TextTrackCue(cue.startTime, cue.endTime, cue.text);
-            textTrackCue.id = cue.id;
-            currentTrack.addCue(textTrackCue);
+          if (hls.config.forceTextTrackCue) {
+            addTextTrackCue(currentTrack, cue);
+          } else {
+            try {
+              currentTrack.addCue(cue);
+            } catch (err) {
+              addTextTrackCue(currentTrack, cue);
+            }
           }
         }
       }