@gcorevideo/player 2.28.35 → 2.28.36

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -2,18 +2,15 @@ import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.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 { ExtendedEvents } from '../media-control/MediaControl.js';
 import { mediaControlClickaway } from '../../utils/clickaway.js';
 const VERSION = '2.19.14';
-// TODO review
-// const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
-const T = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @public
@@ -115,8 +112,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, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -174,23 +175,27 @@ export class ClosedCaptions extends UICorePlugin {
         this.activateTrack(id);
     }
     activateTrack(id) {
-        if (this.core.activePlayback && ['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 ?? []).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));
-                track.track.oncuechange = (e) => {
+                this.setSubtitleText(this.getSubtitleText(track));
+                track.oncuechange = () => {
                     try {
-                        if (track.track.activeCues?.length) {
-                            const html = track.track.activeCues[0].getCueAsHTML();
+                        if (track.activeCues?.length) {
+                            const html = track.activeCues[0].getCueAsHTML();
                             this.setSubtitleText(html);
                         }
                         else {
@@ -203,8 +208,8 @@ export class ClosedCaptions extends UICorePlugin {
                 };
             }
             else {
-                track.track.oncuechange = () => { };
-                track.track.mode = 'disabled';
+                track.oncuechange = () => { };
+                track.mode = 'disabled';
             }
         }
     }
@@ -247,8 +252,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';
+            }
         }
     }
     /**
@@ -260,7 +267,6 @@ export class ClosedCaptions extends UICorePlugin {
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.currentTrack &&
-            // this.currentTrack.track.mode &&
             (Browser.isiOS || this.useNativeSubtitles)) {
             this.$line.hide();
             this.currentTrack.track.mode = 'showing';
@@ -302,6 +308,10 @@ export class ClosedCaptions extends UICorePlugin {
         this.resizeFont();
         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();
         this.renderIcon();
         return this;
@@ -407,7 +417,7 @@ export class ClosedCaptions extends UICorePlugin {
         this.setSubtitleText('');
     }
     updateSelection() {
-        if (!this.currentTrack) {
+        if (this.core.activePlayback.closedCaptionsTrackId === -1) {
             this.hide();
         }
         else {

package/lib/testUtils.d.ts

@@ -65,6 +65,7 @@ export declare function createMockPlayback(name?: string, options?: Record<strin
     canAutoPlay: import("vitest").Mock<(...args: any[]) => any>;
     onResize: import("vitest").Mock<(...args: any[]) => any>;
     setPlaybackRate: import("vitest").Mock<(...args: any[]) => any>;
+    setTextTrack: import("vitest").Mock<(...args: any[]) => any>;
     switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;;EAuB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAyB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;;EAuB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBA2B/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -71,6 +71,7 @@ export function createMockPlayback(name = 'mock', options = {}) {
         canAutoPlay: vi.fn().mockImplementation(() => true),
         onResize: vi.fn().mockImplementation(() => true),
         setPlaybackRate: vi.fn(),
+        setTextTrack: vi.fn(),
         switchAudioTrack: vi.fn(),
         trigger: emitter.emit,
     });
@@ -122,6 +123,8 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(286);
     // @ts-ignore
+    mediaControl.isVisible = vi.fn().mockReturnValue(true);
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     // @ts-ignore
     mediaControl.setKeepVisible = vi.fn();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.28.35",
+  "version": "2.28.36",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/playback/BasePlayback.ts

@@ -50,4 +50,8 @@ export class BasePlayback extends HTML5Video {
     super._onPlaying()
     this.trigger(Events.PLAYBACK_MEDIACONTROL_ENABLE)
   }
+
+  setTextTrack(id: number) {
+    // noop
+  }
 }

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

@@ -5,11 +5,11 @@ 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'
@@ -22,7 +22,7 @@ const VERSION: string = '2.19.14'
 // 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.
@@ -168,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,
@@ -256,24 +260,28 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private activateTrack(id: number) {
-    if (this.core.activePlayback && ['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 {
@@ -284,8 +292,8 @@ export class ClosedCaptions extends UICorePlugin {
           }
         }
       } else {
-        track.track.oncuechange = () => { }
-        track.track.mode = 'disabled'
+        track.oncuechange = () => { }
+        track.mode = 'disabled'
       }
     }
   }
@@ -332,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'
+      }
     }
   }
 
@@ -347,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()
@@ -398,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()
 
@@ -452,6 +465,7 @@ export class ClosedCaptions extends UICorePlugin {
     } else {
       return;
     }
+
     setTimeout(() => {
       this.selectItem(
         this.tracks.find(matcher) ?? null,
@@ -526,7 +540,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private updateSelection() {
-    if (!this.currentTrack) {
+    if (this.core.activePlayback.closedCaptionsTrackId === -1) {
       this.hide()
     } else {
       this.show()