@gcorevideo/player 2.21.3 → 2.21.6

package/lib/plugins/subtitles/Subtitles.js

@@ -9,8 +9,8 @@ import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
 import stringHTML from '../../../assets/subtitles/string.ejs';
 import { isFullscreen } from '../utils.js';
 const VERSION = '2.19.14';
-const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
-const T = 'plugins.subtitles';
+const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
+const T = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -20,16 +20,16 @@ const T = 'plugins.subtitles';
  *
  * - {@link MediaControl}
  *
- * Configuration options -  {@link SubtitlesPluginSettings}
+ * Configuration options -  {@link ClosedCaptionsPluginSettings}
  * @example
  * ```ts
- * import { Subtitles } from '@gcorevideo/player'
+ * import { ClosedCaptions } from '@gcorevideo/player'
  *
- * Player.registerPlugin(Subtitles)
+ * Player.registerPlugin(ClosedCaptions)
  *
  * new Player({
  *   ...
- *   subtitles: {
+ *   cc: {
  *     language: 'en',
  *   },
  * })
@@ -40,12 +40,12 @@ export class Subtitles extends UICorePlugin {
     isShowing = false;
     track = null;
     tracks = [];
-    $string = null;
+    $line = null;
     /**
      * @internal
      */
     get name() {
-        return 'subtitles';
+        return 'subtitles'; // TODO rename to 'cc'
     }
     /**
      * @internal
@@ -66,8 +66,7 @@ export class Subtitles extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-subtitles',
-            'data-subtitles': '',
+            class: 'media-control-cc',
         };
     }
     /**
@@ -75,12 +74,12 @@ export class Subtitles extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-subtitles-select]': 'onItemSelect',
-            'click [data-subtitles-button]': 'toggleMenu',
+            'click [data-cc-select]': 'onItemSelect',
+            'click [data-cc-button]': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
-        return this.core.options.subtitles?.language ?? '';
+        return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? '';
     }
     /**
      * @internal
@@ -195,7 +194,7 @@ export class Subtitles extends UICorePlugin {
     hide() {
         this.isShowing = false;
         this.renderIcon();
-        this.$string.hide();
+        this.$line.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
                 t.track.mode = 'hidden';
@@ -213,22 +212,22 @@ export class Subtitles extends UICorePlugin {
             this.track &&
             this.track.track.mode &&
             Browser.isiOS) {
-            this.$string.hide();
+            this.$line.hide();
             this.track.track.mode = 'showing';
         }
         else {
-            this.$string.show();
+            this.$line.show();
         }
     }
     shouldRender() {
-        return this.tracks.length > 0;
+        return this.tracks?.length > 0;
     }
     resizeFont() {
-        if (!this.$string) {
+        if (!this.$line) {
             return;
         }
         const skinWidth = this.core.activeContainer.$el.width();
-        this.$string.find('p').css('font-size', skinWidth * 0.03);
+        this.$line.find('p').css('font-size', skinWidth * 0.03);
     }
     /**
      * @internal
@@ -242,11 +241,11 @@ export class Subtitles extends UICorePlugin {
         }
         const mediaControl = this.core.getPlugin('media_control');
         this.$el.html(Subtitles.template({ tracks: this.tracks }));
-        this.core.activeContainer.$el.find('.subtitle-string').remove();
-        this.$string = $(Subtitles.templateString());
+        this.core.activeContainer.$el.find('#cc-line').remove();
+        this.$line = $(Subtitles.templateString());
         this.resizeFont();
-        this.core.activeContainer.$el.append(this.$string);
-        mediaControl.putElement('subtitlesSelector', this.$el);
+        this.core.activeContainer.$el.append(this.$line);
+        mediaControl.putElement('cc', this.el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -261,9 +260,9 @@ export class Subtitles extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.subtitlesSelect ?? '-1';
+        const id = event.target.dataset.ccSelect ?? '-1';
         trace(`${T} onItemSelect`, { id });
-        localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id);
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
         return false;
     }
@@ -280,17 +279,17 @@ export class Subtitles extends UICorePlugin {
     }
     hideMenu() {
         ;
-        this.$('[data-subtitles] ul').hide();
+        this.$('[data-cc] ul').hide();
     }
     toggleMenu() {
-        ;
-        this.$('[data-subtitles] ul').toggle();
+        trace(`${T} toggleMenu`);
+        this.$('[data-cc] ul').toggle();
     }
     itemElement(id) {
-        return this.$(`ul li a[data-subtitles-select="${id}"]`).parent();
+        return this.$(`ul li a[data-cc-select="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('[data-subtitles] li');
+        return this.$('[data-cc] li');
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
@@ -310,7 +309,7 @@ export class Subtitles extends UICorePlugin {
         return lines.join('\n');
     }
     setSubtitleText(text) {
-        this.$string.find('p').html(text);
+        this.$line.find('p').html(text);
     }
     clearSubtitleText() {
         this.setSubtitleText('');
@@ -341,6 +340,6 @@ export class Subtitles extends UICorePlugin {
     }
     renderIcon() {
         const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
-        this.$el.find('span.subtitle-text').html(icon);
+        this.$el.find('span.cc-text').html(icon);
     }
 }

package/lib/testUtils.d.ts

@@ -65,36 +65,43 @@ export declare function createSpinnerPlugin(): Events<string | symbol, any> & {
 export declare function createMockPlayback(name?: string): Events<string | symbol, any> & {
     name: string;
     currentLevel: number;
+    el: HTMLVideoElement;
+    dvrEnabled: boolean;
+    dvrInUse: boolean;
     levels: never[];
     consent(): void;
     play(): void;
     pause(): void;
     stop(): void;
-    destroy(): void;
-    seek(): void;
-    seekPercentage(): void;
-    getDuration(): 100;
-    enterPiP(): void;
-    exitPiP(): void;
-    getPlaybackType(): "live";
-    getStartTimeOffset(): 0;
-    getCurrentTime(): 0;
-    isHighDefinitionInUse(): false;
-    mute(): void;
-    unmute(): void;
-    volume(): void;
-    configure(): void;
-    attemptAutoPlay(): true;
-    canAutoPlay(): true;
-    onResize(): true;
-    trigger(event: string, ...args: any[]): void;
+    destroy: import("vitest").Mock<(...args: any[]) => any>;
+    seek: import("vitest").Mock<(...args: any[]) => any>;
+    seekPercentage: import("vitest").Mock<(...args: any[]) => any>;
+    getDuration: import("vitest").Mock<(...args: any[]) => any>;
+    enterPiP: import("vitest").Mock<(...args: any[]) => any>;
+    exitPiP: import("vitest").Mock<(...args: any[]) => any>;
+    getPlaybackType: import("vitest").Mock<(...args: any[]) => any>;
+    getStartTimeOffset: import("vitest").Mock<(...args: any[]) => any>;
+    getCurrentTime: import("vitest").Mock<(...args: any[]) => any>;
+    isHighDefinitionInUse: import("vitest").Mock<(...args: any[]) => any>;
+    mute: import("vitest").Mock<(...args: any[]) => any>;
+    unmute: import("vitest").Mock<(...args: any[]) => any>;
+    volume: import("vitest").Mock<(...args: any[]) => any>;
+    configure: import("vitest").Mock<(...args: any[]) => any>;
+    attemptAutoPlay: import("vitest").Mock<(...args: any[]) => any>;
+    canAutoPlay: import("vitest").Mock<(...args: any[]) => any>;
+    onResize: import("vitest").Mock<(...args: any[]) => any>;
+    setPlaybackRate: import("vitest").Mock<(...args: any[]) => any>;
+    trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
-    el: HTMLDivElement;
+    el: any;
     playback: any;
     $el: any;
     getDuration: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
+    getPlaybackType: import("vitest").Mock<(...args: any[]) => any>;
+    isDvrInUse: import("vitest").Mock<(...args: any[]) => any>;
+    isDvrEnabled: import("vitest").Mock<(...args: any[]) => any>;
     isPlaying: import("vitest").Mock<(...args: any[]) => any>;
     play: import("vitest").Mock<(...args: any[]) => any>;
     seek: import("vitest").Mock<(...args: any[]) => any>;

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;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;mBA2C7B,MAAM,WAAW,GAAG,EAAE;EAIxC;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;EAcvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAqB/C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C"}

package/lib/testUtils.js

@@ -1,4 +1,4 @@
-import { $, UICorePlugin } from '@clappr/core';
+import { $, Playback, UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
 import { vi } from 'vitest';
 /**
@@ -32,7 +32,7 @@ export class _MockPlayback extends Events {
     enterPiP() { }
     exitPiP() { }
     getPlaybackType() {
-        return 'live';
+        return Playback.LIVE;
     }
     getStartTimeOffset() {
         return 0;
@@ -75,7 +75,7 @@ export function createMockCore(options = {}, container = createMockContainer())
             ...options,
         },
         configure: vi.fn(),
-        getPlaybackType: vi.fn(),
+        getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
         getPlugin: vi.fn(),
         load: vi.fn(),
         trigger: emitter.emit,
@@ -98,51 +98,37 @@ export function createMockPlayback(name = 'mock') {
     return Object.assign(emitter, {
         name,
         currentLevel: -1,
+        el: document.createElement('video'),
+        dvrEnabled: false,
+        dvrInUse: false,
         levels: [],
         consent() { },
         play() { },
         pause() { },
         stop() { },
-        destroy() { },
-        seek() { },
-        seekPercentage() { },
-        getDuration() {
-            return 100;
-        },
-        enterPiP() { },
-        exitPiP() { },
-        getPlaybackType() {
-            return 'live';
-        },
-        getStartTimeOffset() {
-            return 0;
-        },
-        getCurrentTime() {
-            return 0;
-        },
-        isHighDefinitionInUse() {
-            return false;
-        },
-        mute() { },
-        unmute() { },
-        volume() { },
-        configure() { },
-        attemptAutoPlay() {
-            return true;
-        },
-        canAutoPlay() {
-            return true;
-        },
-        onResize() {
-            return true;
-        },
-        trigger(event, ...args) {
-            emitter.emit(event, ...args);
-        },
+        destroy: vi.fn(),
+        seek: vi.fn(),
+        seekPercentage: vi.fn(),
+        getDuration: vi.fn().mockImplementation(() => 100),
+        enterPiP: vi.fn(),
+        exitPiP: vi.fn(),
+        getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
+        getStartTimeOffset: vi.fn().mockImplementation(() => 0),
+        getCurrentTime: vi.fn().mockImplementation(() => 0),
+        isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
+        mute: vi.fn(),
+        unmute: vi.fn(),
+        volume: vi.fn(),
+        configure: vi.fn(),
+        attemptAutoPlay: vi.fn().mockImplementation(() => true),
+        canAutoPlay: vi.fn().mockImplementation(() => true),
+        onResize: vi.fn().mockImplementation(() => true),
+        setPlaybackRate: vi.fn(),
+        trigger: emitter.emit,
     });
 }
 export function createMockContainer(playback = createMockPlayback()) {
-    const el = document.createElement('div');
+    const el = playback.el;
     const emitter = new Events();
     return Object.assign(emitter, {
         el,
@@ -150,6 +136,9 @@ export function createMockContainer(playback = createMockPlayback()) {
         $el: $(el),
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
+        getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+        isDvrInUse: vi.fn().mockReturnValue(false),
+        isDvrEnabled: vi.fn().mockReturnValue(false),
         isPlaying: vi.fn().mockReturnValue(false),
         play: vi.fn(),
         seek: vi.fn(),
@@ -169,10 +158,6 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.putElement = vi.fn();
     // @ts-ignore
-    mediaControl.getLeftPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-left-panel'));
-    // @ts-ignore
-    mediaControl.getRightPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-right-panel'));
-    // @ts-ignore
-    mediaControl.getCenterPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-center-panel'));
+    mediaControl.toggleElement = vi.fn();
     return mediaControl;
 }

package/package.json

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

package/src/index.plugins.ts

@@ -25,7 +25,8 @@ export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";
 export * from "./plugins/spinner-three-bounce/SpinnerThreeBounce.js";
 export * from "./plugins/source-controller/SourceController.js";
-export * from "./plugins/subtitles/Subtitles.js";
+export * from "./plugins/subtitles/ClosedCaptions.js";
+export { ClosedCaptions as Subtitles } from "./plugins/subtitles/ClosedCaptions.js"; // TODO remove in future versions
 export * from "./plugins/telemetry/Telemetry.js";
 export * from "./plugins/thumbnails/Thumbnails.js";
 // _ vast-ads

package/src/index.ts

@@ -6,7 +6,7 @@
  * It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations.
  * Start with {@link Player} for more information.
  *
- * Various plugins (marked with `PLUGIN` keyword) are available to extend the player with additional features.
+ * Various plugins (marked with `PLUGIN` keyword) are available to extend the core functionality with additional features.
  * @example
  * ```ts
  * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'

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

@@ -416,6 +416,7 @@ export default class DashPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_STATS_ADD, { dvr: status })
   }
 
+  // TODO move to the base class
   override _updateSettings() {
     if (this._playbackType === Playback.VOD) {
       // @ts-expect-error

package/src/plugins/audio-selector/AudioSelector.ts

@@ -9,6 +9,7 @@ import pluginHtml from '../../../assets/audio-selector/track-selector.ejs'
 import '../../../assets/audio-selector/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
+import { MediaControl } from '../media-control/MediaControl.js'
 
 const VERSION: string = '0.0.1'
 
@@ -57,8 +58,8 @@ export class AudioSelector extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: 'media-control-audio-tracks',
-      'data-track-selector': '',
+      class: 'media-control-audiotracks',
+
     }
   }
 
@@ -67,8 +68,8 @@ export class AudioSelector extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-track-selector-select]': 'onTrackSelect',
-      'click [data-track-selector-button]': 'onShowLevelSelectMenu',
+      'click [data-audiotracks-select]': 'onTrackSelect',
+      'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
     }
   }
 
@@ -156,12 +157,12 @@ export class AudioSelector extends UICorePlugin {
       return this
     }
 
-    const mediaControl = this.core.getPlugin('media_control')
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
     this.$el.html(
       AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }),
     )
     this.$('.audio-arrow').append(audioArrow)
-    mediaControl.putElement('audioTracksSelector', this.$el)
+    mediaControl.putElement('audiotracks', this.el)
 
     this.updateText()
     this.highlightCurrentTrack()
@@ -179,7 +180,7 @@ export class AudioSelector extends UICorePlugin {
   }
 
   private onTrackSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement)?.dataset?.trackSelectorSelect
+    const id = (event.target as HTMLElement)?.dataset?.audiotracksSelect
     if (id) {
       this.selectAudioTrack(id)
     }
@@ -218,7 +219,7 @@ export class AudioSelector extends UICorePlugin {
     return (
       this.$(
         'ul a' +
-          (id !== undefined ? '[data-track-selector-select="' + id + '"]' : ''),
+          (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : ''),
       ) as ZeptoResult
     ).parent()
   }

package/src/plugins/bottom-gear/BottomGear.ts

@@ -20,7 +20,12 @@ const T = 'plugins.bottom_gear';
  * An element inside the gear menu
  * @beta
  */
-export type GearItemElement = 'quality' | 'rate' | 'nerd';
+export type GearOptionsItem = 'quality' | 'rate' | 'nerd';
+
+/**
+ * @deprecated Use {@link GearOptionsItem} instead
+ */
+export type GearItemElement = GearOptionsItem;
 
 // TODO disabled if no items added
 
@@ -90,10 +95,12 @@ export class BottomGear extends UICorePlugin {
    * @param name - Name of a gear menu placeholder item to attach custom UI
    * @returns Zepto result of the element
    */
-  getElement(name: GearItemElement): ZeptoResult | null {
+  getElement(name: GearOptionsItem): ZeptoResult | null {
     return this.$el.find(`.gear-options-list [data-${name}]`);
   }
 
+  // TODO implement putElement/addElement method
+
   /**
    * Replaces the content of the gear menu
    * @param content - Zepto result of the element
@@ -125,7 +132,7 @@ export class BottomGear extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control');
 
     // TODO use options.mediaControl.gear.items
-    const items: GearItemElement[] = [
+    const items: GearOptionsItem[] = [
       'quality',
       'rate',
       'nerd',
@@ -133,7 +140,7 @@ export class BottomGear extends UICorePlugin {
     const icon = this.isHd ? gearHdIcon : gearIcon;
     this.$el.html(BottomGear.template({ icon, items }));
 
-    mediaControl.putElement('gear', this.$el);
+    mediaControl.putElement('gear', this.el);
     mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -26,7 +26,7 @@ describe('BottomGear', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
   it('should attach to media control', () => {
-    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
+    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.el)
   })
   it('should emit event', () => {
     expect(onGearRendered).toHaveBeenCalled()

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BottomGear > should render 1`] = `
-"<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1">
+"<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1" id="gear-button">
     /assets/icons/new/gear.svg
 </button>
 <div class="gear-wrapper gcore-skin-bg-color">
-    <ul class="gear-options-list">
+    <ul class="gear-options-list" id="gear-options">
         
             <li data-quality=""></li>
         

package/src/plugins/dvr-controls/DvrControls.ts

@@ -56,7 +56,6 @@ export class DvrControls extends UICorePlugin {
   override get attributes() {
     return {
       class: 'dvr-controls',
-      'data-dvr-controls': '',
     }
   }
 
@@ -65,7 +64,6 @@ export class DvrControls extends UICorePlugin {
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
-    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render)
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
@@ -76,48 +74,23 @@ export class DvrControls extends UICorePlugin {
   private onCoreReady() {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
+
     this.listenTo(
       mediaControl,
       Events.MEDIACONTROL_RENDERED,
-      this.settingsUpdate,
+      this.render,
     )
-    this.settingsUpdate()
+    // MediaControl has been rendered
+    this.render()
   }
 
   private bindContainerEvents() {
+    trace(`${T} bindContainerEvents`)
     this.listenToOnce(
       this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
       this.render,
     )
-    this.listenTo(
-      this.core.activeContainer,
-      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-      this.onDvrChanged,
-    )
-  }
-
-  private onDvrChanged(dvrInUse: boolean) {
-    trace(`${T} onDvrChanged`, {
-      dvrInUse,
-    })
-    if (this.core.getPlaybackType() !== Playback.LIVE) {
-      return
-    }
-    this.render()
-    const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.$el.addClass('live')
-    if (dvrInUse) {
-      mediaControl.$el
-        .addClass('dvr')
-        .find(
-          // TODO add API, test
-          '.media-control-indicator[data-position], .media-control-indicator[data-duration]',
-        )
-        .hide()
-    } else {
-      mediaControl.$el.removeClass('dvr')
-    }
   }
 
   private click() {
@@ -128,14 +101,8 @@ export class DvrControls extends UICorePlugin {
     container.seek(container.getDuration())
   }
 
-  private settingsUpdate() {
-    this.core.getPlugin('media_control').$el.removeClass('live')
-    this.render()
-  }
-
   private shouldRender() {
-    const useDvrControls = this.core.options.useDvrControls !== false
-    return useDvrControls && this.core.getPlaybackType() === Playback.LIVE
+    return this.core.getPlaybackType() === Playback.LIVE
   }
 
   /**
@@ -146,18 +113,23 @@ export class DvrControls extends UICorePlugin {
       dvrEnabled: this.core.activePlayback?.dvrEnabled,
       playbackType: this.core.getPlaybackType(),
     })
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    if (!mediaControl) {
+      return this
+    }
     if (!this.shouldRender()) {
       return this
     }
+
+    mediaControl.toggleElement('duration', false)
+    mediaControl.toggleElement('position', false)
+
     this.$el.html(
       DvrControls.template({
-        live: this.core.i18n.t('live'),
-        backToLive: this.core.i18n.t('back_to_live'),
+        i18n: this.core.i18n,
       }),
     )
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    mediaControl.$el.addClass('live')
-    mediaControl.getLeftPanel().append(this.$el)
+    mediaControl.putElement('dvr', this.el)
 
     return this
   }