@gcorevideo/player 2.28.30 → 2.28.36

package/src/playback/dash-playback/DashPlayback.ts

@@ -61,6 +61,8 @@ export default class DashPlayback extends BasePlayback {
 
   _currentLevel: number = AUTO
 
+  _currentTextTrackId: number = -1
+
   // true when the actual duration is longer than hlsjs's live sync point
   // when this is false playableRegionDuration will be the actual duration
   // when this is true playableRegionDuration will exclude the time after the sync point
@@ -248,7 +250,11 @@ export default class DashPlayback extends BasePlayback {
           streaming: {
             text: {
               defaultEnabled: false,
-              dispatchForManualRendering: true,
+              // NOTE: dispatchForManualRendering is not correctly implemented in DASH.js;
+              // it does not work when there are multiple text tracks.
+              // CUE_ENTER and CUE_EXIT events might be dispatched additionally
+              // for a track, other than the currently active one.
+              // dispatchForManualRendering: true, // TODO only when useNativeSubtitles is not true?
             },
           },
         },
@@ -319,29 +325,6 @@ export default class DashPlayback extends BasePlayback {
         this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate)
       },
     )
-
-    this._dash.on(MediaPlayer.events.TRACK_CHANGE_RENDERED, (e: any) => {
-      if ((e as TrackChangeRenderedEvent).mediaType === 'audio') {
-        this.trigger(
-          Events.PLAYBACK_AUDIO_CHANGED,
-          toClapprTrack(e.newMediaInfo),
-        )
-      }
-    })
-
-    this._dash.on(MediaPlayer.events.CUE_ENTER, (e: CueEnterEvent) => {
-      this.oncueenter?.({
-        end: e.end,
-        id: e.id,
-        start: e.start,
-        text: e.text,
-      })
-    })
-    this._dash.on(MediaPlayer.events.CUE_EXIT, (e: CueExitEvent) => {
-      this.oncueexit?.({
-        id: e.id,
-      })
-    })
   }
 
   render() {
@@ -725,6 +708,7 @@ export default class DashPlayback extends BasePlayback {
   }
 
   setTextTrack(id: number) {
+    this._currentTextTrackId = id
     this._dash?.setTextTrack(id)
   }
 
@@ -732,8 +716,7 @@ export default class DashPlayback extends BasePlayback {
    * @override
    */
   get closedCaptionsTracks() {
-    const tt = this.getTextTracks()
-    return tt;
+    return this.getTextTracks()
   }
 
   private getTextTracks() {
@@ -744,7 +727,7 @@ export default class DashPlayback extends BasePlayback {
         id: index,
         label: getTextTrackLabel(t) || "",
         language: t.lang,
-        mode: "hidden",
+        mode: this._currentTextTrackId === index ? "showing" : "hidden",
       },
     })) || []
   }

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

@@ -1135,7 +1135,11 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   setTextTrack(id: number) {
+    if (id === this._hls!.subtitleTrack) {
+      return
+    }
     this._hls!.subtitleTrack = id
+    this.cues = []
   }
 
   /**

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -1,15 +1,15 @@
 import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core'
-import { reportError, trace } from '@gcorevideo/utils'
+import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 import type { TextTrackItem } from '../../internal.types.js'
 
-import '../../../assets/subtitles/style.scss'
+import '../../../assets/cc/style.scss'
 import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg'
 import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg'
-import comboboxHTML from '../../../assets/subtitles/combobox.ejs'
-import stringHTML from '../../../assets/subtitles/string.ejs'
+import comboboxHTML from '../../../assets/cc/combobox.ejs'
+import stringHTML from '../../../assets/cc/string.ejs'
 
 import { isFullscreen } from '../utils/fullscreen.js'
 import type { ZeptoResult } from '../../types.js'
@@ -19,9 +19,10 @@ import { VTTCueInfo } from '../../playback.types.js'
 
 const VERSION: string = '2.19.14'
 
-const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
+// TODO review
+// const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
 
-const T = 'plugins.cc'
+// const T = 'plugins.cc'
 
 /**
  * Configuration options for the {@link ClosedCaptions} plugin.
@@ -35,6 +36,9 @@ export type ClosedCaptionsPluginSettings = {
 
   /**
    * Whether to use builtin subtitles.
+   *
+   * native: video player element renders the subtitles
+   * custom: plugin manages the subtitles rendition
    */
   mode?: 'native' | 'custom'
 }
@@ -75,12 +79,14 @@ export type ClosedCaptionsPluginSettings = {
  * ```
  */
 export class ClosedCaptions extends UICorePlugin {
-  private isPreselectedApplied = false
+  private isSelectedApplied = false
 
   private active = false
 
   private open = false
 
+  private userSelectedItemId: number = -1
+
   private track: TextTrackItem | null = null
 
   private tracks: TextTrackItem[] = []
@@ -162,8 +168,12 @@ export class ClosedCaptions extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount)
+    this.listenTo(mediaControl, Events.MEDIACONTROL_SHOW, () => {
+      this.$line?.removeClass('media-control-cc-pulled')
+    })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
       this.hideMenu()
+      this.$line?.addClass('media-control-cc-pulled')
     })
     this.listenTo(
       mediaControl,
@@ -223,11 +233,10 @@ export class ClosedCaptions extends UICorePlugin {
       }
     })
 
-    this.isPreselectedApplied = false
+    this.isSelectedApplied = false
   }
 
   private onPlaybackReady() {
-    trace(`${T} onPlaybackReady`)
     this.core.activePlayback.oncueenter = (e: VTTCueInfo) => {
       this.setSubtitleText(e.text)
     }
@@ -251,24 +260,28 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private activateTrack(id: number) {
-    if (['dash', 'hls'].includes(this.core.activePlayback?.name)) {
-      this.core.activePlayback.setTextTrack(id)
+    const isManaged = this.core.activePlayback?.name === 'hls'
+    this.core.activePlayback.setTextTrack(id)
+    if (isManaged) {
+      return
+    }
+    if (!this.core.activePlayback?.el.textTracks) {
       return
     }
-    for (const track of this.currentTracks) {
-      if (track.id === id) {
+    for (const [index, track] of (Array.from(this.core.activePlayback?.el.textTracks ?? []) as TextTrack[]).entries()) {
+      if (index === id) {
         if (this.useNativeSubtitles) {
-          track.track.mode = 'showing'
+          track.mode = 'showing'
         } else {
-          track.track.mode = 'hidden'
+          track.mode = 'hidden'
         }
 
-        this.setSubtitleText(this.getSubtitleText(track.track))
+        this.setSubtitleText(this.getSubtitleText(track))
 
-        track.track.oncuechange = (e) => {
+        track.oncuechange = () => {
           try {
-            if (track.track.activeCues?.length) {
-              const html = (track.track.activeCues[0] as VTTCue).getCueAsHTML()
+            if (track.activeCues?.length) {
+              const html = (track.activeCues[0] as VTTCue).getCueAsHTML()
 
               this.setSubtitleText(html)
             } else {
@@ -279,8 +292,8 @@ export class ClosedCaptions extends UICorePlugin {
           }
         }
       } else {
-        track.track.oncuechange = () => { }
-        track.track.mode = 'disabled'
+        track.oncuechange = () => { }
+        track.mode = 'disabled'
       }
     }
   }
@@ -289,7 +302,7 @@ export class ClosedCaptions extends UICorePlugin {
     try {
       // TODO ensure to apply only once
       this.currentTracks = this.core.activePlayback.closedCaptionsTracks
-      this.applyPreselectedSubtitles()
+      this.applySelectedSubtitles()
       this.render()
     } catch (error) {
       reportError(error)
@@ -327,8 +340,10 @@ export class ClosedCaptions extends UICorePlugin {
     this.$el.find('#gplayer-cc-menu').hide()
     this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false')
     this.$line.hide()
-    for (const track of this.currentTracks) {
-      track.track.mode = 'hidden'
+    for (const track of this.core.activePlayback.el.textTracks) {
+      if (track.mode === 'showing') {
+        track.mode = 'hidden'
+      }
     }
   }
 
@@ -342,7 +357,6 @@ export class ClosedCaptions extends UICorePlugin {
       this.core.activeContainer &&
       isFullscreen(this.core.activeContainer.el) &&
       this.currentTrack &&
-      // this.currentTrack.track.mode &&
       (Browser.isiOS || this.useNativeSubtitles)
     ) {
       this.$line.hide()
@@ -393,6 +407,10 @@ export class ClosedCaptions extends UICorePlugin {
     this.clampPopup()
 
     this.core.activeContainer.$el.append(this.$line)
+    const mc = this.core.getPlugin('media_control')
+    if (!mc?.isVisible()) {
+      this.$line?.addClass('media-control-cc-pulled')
+    }
 
     this.updateSelection()
 
@@ -418,29 +436,41 @@ export class ClosedCaptions extends UICorePlugin {
 
   private onItemSelect(event: MouseEvent) {
     // event.target does not exist for some reason in tests
-    const id =
+    const id = Number(
       ((event.target ?? event.currentTarget) as HTMLElement).dataset?.item ??
-      '-1'
+      '-1',
+    )
 
-    localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
-    this.selectItem(this.findById(Number(id)))
+    // 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()
     return false
   }
 
-  private applyPreselectedSubtitles() {
-    if (!this.isPreselectedApplied) {
-      this.isPreselectedApplied = true
-      // if the language is undefined, then let the engine decide
-      // to hide the subtitles forcefully, set the language to 'none'
-      setTimeout(() => {
-        this.selectItem(
-          this.tracks.find((t) =>
-            this.isPreselectedLanguage(t.track.language),
-          ) ?? null,
-        )
-      }, 0)
+  private applySelectedSubtitles() {
+    if (this.isSelectedApplied) {
+      return;
     }
+    this.isSelectedApplied = true
+    // If user selected a language, activate that
+    // Otherwise, if there is no configured language, then let the engine decide
+    // To hide the subtitles initially forcefully, set the language to 'none'
+    let matcher: (track: TextTrackItem) => boolean;
+    if (this.userSelectedItemId !== -1) {
+      matcher = (track: TextTrackItem) => track.id === this.userSelectedItemId;
+    } else if (this.preselectedLanguage) {
+      matcher = (track: TextTrackItem) => this.isPreselectedLanguage(track.track.language);
+    } else {
+      return;
+    }
+
+    setTimeout(() => {
+      this.selectItem(
+        this.tracks.find(matcher) ?? null,
+      )
+    }, 0)
   }
 
   private hideMenu() {
@@ -479,11 +509,9 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private selectSubtitles() {
-    const trackId = this.currentTrack?.id ?? -1
-
-    // TODO find out if this is needed
-    this.core.activePlayback.closedCaptionsTrackId = trackId
-    // this.core.activePlayback.closedCaptionsTrackId = -1
+    if (this.currentTrack) {
+      this.core.activePlayback.closedCaptionsTrackId = this.currentTrack.id
+    }
   }
 
   private getSubtitleText(track: TextTrack) {
@@ -512,7 +540,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private updateSelection() {
-    if (!this.currentTrack) {
+    if (this.core.activePlayback.closedCaptionsTrackId === -1) {
       this.hide()
     } else {
       this.show()