@gcorevideo/player 2.30.0 → 2.30.1

package/src/playback/hls-playback/HlsPlayback.ts

@@ -35,6 +35,7 @@ import { BasePlayback } from '../BasePlayback.js'
 import { CLAPPR_VERSION } from '../../build.js'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
 import { VTTCueInfo } from '../types.js'
+import { RangesList } from './RangesList.js'
 
 const { now } = Utils
 
@@ -70,8 +71,6 @@ type CustomListener = {
 }
 
 export default class HlsPlayback extends BasePlayback {
-  private _ccTracksUpdated = false
-
   private _currentFragment: Fragment | null = null
 
   private _currentLevel: number | null = null
@@ -120,7 +119,9 @@ export default class HlsPlayback extends BasePlayback {
 
   oncueexit: ((e: { id: string }) => void) | null = null
 
-  private cues: VTTCueInfo[] = [] // TODO check the list size and use BST if needed
+  private cues: RangesList<VTTCueInfo> | null = null
+
+  private cuesByTrack: Record<number, RangesList<VTTCueInfo>> = {}
 
   private currentCueId: string | null = null
 
@@ -310,7 +311,7 @@ export default class HlsPlayback extends BasePlayback {
     // added/removed every 5.
     this._extrapolatedWindowNumSegments =
       !this.options.playback ||
-        typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined'
+      typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined'
         ? 2
         : this.options.playback.extrapolatedWindowNumSegments
 
@@ -362,7 +363,6 @@ export default class HlsPlayback extends BasePlayback {
     }
     this._manifestParsed = false
     // this._ccIsSetup = false
-    this._ccTracksUpdated = false
     this._setInitialState()
     this._hls.destroy()
     this._hls = null
@@ -436,9 +436,7 @@ export default class HlsPlayback extends BasePlayback {
       (evt: HlsEvents.LEVEL_SWITCHED, data: { level: number }) =>
         this._onLevelSwitched(evt, data),
     )
-    this._hls.on(HlsEvents.ERROR, (evt, data) =>
-      this._onHLSJSError(evt, data),
-    )
+    this._hls.on(HlsEvents.ERROR, (evt, data) => this._onHLSJSError(evt, data))
     this._hls.on(HlsEvents.AUDIO_TRACKS_UPDATED, (evt, data) =>
       this._onAudioTracksUpdated(evt, data),
     )
@@ -447,12 +445,20 @@ export default class HlsPlayback extends BasePlayback {
     )
     this._hls.on(HlsEvents.CUES_PARSED, (evt, data) => {
       data.cues?.forEach((cue: any) => {
-        this.cues.push({
+        if (!this.cues) {
+          const trackId = this._hls!.subtitleTrack
+          if (!this.cuesByTrack[trackId]) {
+            this.cuesByTrack[trackId] = new RangesList<VTTCueInfo>()
+          }
+          this.cues = this.cuesByTrack[trackId]
+        }
+        const cueInfo = {
           id: cue.id,
           start: cue.startTime,
           end: cue.endTime,
           text: cue.text,
-        } as VTTCueInfo)
+        } as VTTCueInfo
+        this.cues.insert(cue.startTime, cue.endTime, cueInfo)
       })
     })
     this.bindCustomListeners()
@@ -514,7 +520,7 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   // this playback manages the src on the video element itself
-  protected override _setupSrc(srcUrl: string) { } // eslint-disable-line no-unused-vars
+  protected override _setupSrc(srcUrl: string) {} // eslint-disable-line no-unused-vars
 
   private _startTimeUpdateTimer() {
     if (this._timeUpdateTimer) {
@@ -579,7 +585,7 @@ export default class HlsPlayback extends BasePlayback {
     // assume live if time within 3 seconds of end of stream
     this.dvrEnabled && this._updateDvr(time < this.getDuration() - 3)
     time += this._startTime
-      ; (this.el as HTMLMediaElement).currentTime = time
+    ;(this.el as HTMLMediaElement).currentTime = time
 
     this.triggerCues()
   }
@@ -719,7 +725,7 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   private reload() {
-    this.cues = []
+    this.cues = null
     this.currentCueId = null
     this._hls?.startLoad(-1)
   }
@@ -777,12 +783,12 @@ export default class HlsPlayback extends BasePlayback {
           start: Math.max(
             0,
             (this.el as HTMLMediaElement).buffered.start(i) -
-            this._playableRegionStartTime,
+              this._playableRegionStartTime,
           ),
           end: Math.max(
             0,
             (this.el as HTMLMediaElement).buffered.end(i) -
-            this._playableRegionStartTime,
+              this._playableRegionStartTime,
           ),
         },
       ]
@@ -804,9 +810,7 @@ export default class HlsPlayback extends BasePlayback {
 
   private triggerCues() {
     const currentTime = this.getCurrentTime()
-    // const cues = Object.values(this.cues)
-    // TODO build a search tree
-    const cue = this.cues.find((cue: VTTCueInfo) => currentTime >= cue.start && currentTime <= cue.end)
+    const cue = this.cues?.find(currentTime)
     if (cue) {
       this.currentCueId = cue.id
       this.oncueenter?.(cue)
@@ -836,7 +840,7 @@ export default class HlsPlayback extends BasePlayback {
     if (!this._hls) {
       return
     }
-    ; (this.el as HTMLMediaElement).pause()
+    ;(this.el as HTMLMediaElement).pause()
     if (this.dvrEnabled) {
       this._updateDvr(true)
     }
@@ -853,6 +857,8 @@ export default class HlsPlayback extends BasePlayback {
   destroy() {
     this._stopTimeUpdateTimer()
     this._destroyHLSInstance()
+    this.cues = null
+    this.cuesByTrack = {}
     return super.destroy()
   }
 
@@ -865,14 +871,6 @@ export default class HlsPlayback extends BasePlayback {
       data.details.live ? Playback.LIVE : Playback.VOD
     ) as PlaybackType
     this._onLevelUpdated(evt, data)
-    // Live stream subtitle tracks detection hack (may not immediately available)
-    // if (
-    //   this._ccTracksUpdated &&
-    //   this._playbackType === Playback.LIVE &&
-    //   this.hasClosedCaptionsTracks
-    // ) {
-    //   this._onSubtitleLoaded()
-    // }
     if (prevPlaybackType !== this._playbackType) {
       this._updateSettings()
     }
@@ -952,7 +950,7 @@ export default class HlsPlayback extends BasePlayback {
               Math.max(
                 fragments[0].start,
                 previousPlayableRegionStartTime +
-                this._extrapolatedWindowDuration,
+                  this._extrapolatedWindowDuration,
               ) * 1000,
           }
         }
@@ -1139,7 +1137,10 @@ export default class HlsPlayback extends BasePlayback {
       return
     }
     this._hls!.subtitleTrack = id
-    this.cues = []
+    if (!this.cuesByTrack[id]) {
+      this.cuesByTrack[id] = new RangesList<VTTCueInfo>()
+    }
+    this.cues = this.cuesByTrack[id]
   }
 
   /**
@@ -1150,15 +1151,17 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   getTextTracks() {
-    return this._hls?.subtitleTracks.map((t: MediaPlaylist) => ({
-      id: t.id,
-      name: t.name,
-      track: {
+    return (
+      this._hls?.subtitleTracks.map((t: MediaPlaylist) => ({
         id: t.id,
-        label: t.name,
-        language: t.lang,
-      },
-    })) || []
+        name: t.name,
+        track: {
+          id: t.id,
+          label: t.name,
+          language: t.lang,
+        },
+      })) || []
+    )
   }
 }
 

package/src/playback/hls-playback/RangesList.ts

@@ -0,0 +1,45 @@
+
+export class RangesList<T> {
+  // TODO write an efficient implementation
+  private items: Array<[number, number, T]> = [];
+
+  insert(start: number, end: number, value: T) {
+    const index = this.findIndex((start + end) / 2);
+    this.items.splice(index, 0, [start, end, value]);
+  }
+
+  find(position: number): T | null {
+    const index = this.findIndex(position);
+    const item = this.items[index];
+    if (!item || item[0] > position || item[1] < position) {
+      return null;
+    }
+    return item[2];
+  }
+
+  private findIndex(position: number): number {
+    let low = 0;
+    let high = this.items.length;
+    let index = 0;
+    while (low < high) {
+      index = low + Math.floor((high - low) / 2);
+      const item = this.items[index];
+      if (item[0] > position) {
+        if (index === low) {
+          return index
+        }
+        high = index;
+        continue;
+      }
+      if (item[1] <= position) {
+        if (index === high - 1) {
+          return index + 1
+        }
+        low = index + 1;
+        continue;
+      }
+      break;
+    }
+    return index;
+  }
+}

package/src/playback/hls-playback/__tests__/RangesList.test.ts

@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { RangesList } from '../RangesList'
+
+describe('RangesList', () => {
+  let rs: RangesList<number>
+  beforeEach(() => {
+    rs = new RangesList()
+
+  })
+  describe("sequential order", () => {
+    beforeEach(() => {
+      rs.insert(0, 0.5, 1)
+      rs.insert(0.5, 1, 2)
+      rs.insert(1, 2.5, 3)
+      rs.insert(2.5, 3, 4)
+      rs.insert(4, 10, 5)
+      rs.insert(10, 11, 6)
+    })
+    it.each([
+      [-1, null],
+      [0, 1],
+      [0.25, 1],
+      [0.5, 2],
+      [1, 3],
+      [2.5, 4],
+      [4, 5],
+      [10, 6],
+      [11, null],
+      [-100, null],
+      [1020, null],
+    ])('%s -> %s', (pos, expVal) => {
+      expect(rs.find(pos)).toBe(expVal)
+    })
+  })
+  describe("arbitrary order", () => {
+    beforeEach(() => {
+      rs.insert(10, 11, 6)
+      rs.insert(2.5, 3, 4)
+      rs.insert(1, 2.5, 3)
+      rs.insert(0.5, 1, 2)
+      rs.insert(4, 10, 5)
+      rs.insert(0, 0.5, 1)
+    })
+    it.each([
+      [-1, null],
+      [0, 1],
+      [0.25, 1],
+      [0.5, 2],
+      [1, 3],
+      [2.5, 4],
+      [4, 5],
+      [10, 6],
+      [11, null],
+      [-100, null],
+      [1020, null],
+    ])('%s -> %s', (pos, expVal) => {
+      expect(rs.find(pos)).toBe(expVal)
+    })
+  })
+})

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -19,9 +19,6 @@ import { VTTCueInfo } from '../../playback/types.js'
 
 const VERSION: string = '2.19.14'
 
-// TODO review
-// const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
-
 // const T = 'plugins.cc'
 
 /**
@@ -441,8 +438,6 @@ export class ClosedCaptions extends UICorePlugin {
       '-1',
     )
 
-    // TODO review, make configurable, and emit event in addition
-    // localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
     this.userSelectedItemId = id
     this.selectItem(this.findById(id))
     this.hideMenu()