@gcorevideo/player 2.21.4 → 2.21.6

package/lib/plugins/media-control/MediaControl.js

@@ -19,6 +19,12 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg';
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
+const DEFAULT_SETTINGS = {
+    left: [],
+    right: [],
+    default: [],
+    seekEnabled: true,
+};
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -34,7 +40,8 @@ const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'live',
+    // 'live',
+    'dvr',
     'volume',
     'position',
     'duration',
@@ -68,14 +75,13 @@ export class MediaControl extends UICorePlugin {
     hideId = null;
     hideVolumeId = null;
     intendedVolume = 100;
-    isHD = false;
     keepVisible = false;
     kibo;
     lastMouseX = 0;
     lastMouseY = 0;
     persistConfig;
     rendered = false;
-    settings = {}; // TODO & seekEnabled: boolean, ...
+    settings = DEFAULT_SETTINGS;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -219,8 +225,6 @@ export class MediaControl extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        // @ts-ignore
-        this.stopListening();
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
         this.listenTo(this.core, Events.CORE_MOUSE_MOVE, this.show);
         this.listenTo(this.core, Events.CORE_MOUSE_LEAVE, () => this.hide(this.options.hideMediaControlDelay));
@@ -257,8 +261,8 @@ export class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.updateSettings);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHdUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended);
@@ -306,7 +310,13 @@ export class MediaControl extends UICorePlugin {
         // see https://github.com/clappr/clappr/issues/1127
         if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
             this.fullScreenOnVideoTagSupported = true;
-            this.updateSettings();
+        }
+        this.updateSettings();
+        if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+            this.$el.addClass('live');
+        }
+        else {
+            this.$el.removeClass('live');
         }
     }
     updateVolumeUI() {
@@ -315,8 +325,6 @@ export class MediaControl extends UICorePlugin {
             return;
         }
         assert.ok(this.$volumeBarContainer, 'volume bar container must be present');
-        // update volume bar scrubber/fill on bar mode
-        // this.$volumeBarContainer.find('.bar-fill-2').css({});
         const containerWidth = this.$volumeBarContainer.width();
         assert.ok(this.$volumeBarBackground, 'volume bar background must be present');
         const barWidth = this.$volumeBarBackground.width();
@@ -505,17 +513,18 @@ export class MediaControl extends UICorePlugin {
         // if the container is not ready etc
         this.intendedVolume = value;
         this.persistConfig && !isInitialVolume && Config.persist('volume', value);
+        // TODO
         const setWhenContainerReady = () => {
-            if (this.container && this.container.isReady) {
-                this.container.setVolume(value);
+            if (this.core.activeContainer && this.core.activeContainer.isReady) {
+                this.core.activeContainer.setVolume(value);
             }
             else {
-                this.listenToOnce(this.container, Events.CONTAINER_READY, () => {
-                    this.container.setVolume(value);
+                this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
+                    this.core.activeContainer.setVolume(value);
                 });
             }
         };
-        if (!this.container) {
+        if (!this.core.activeContainer) {
             this.listenToOnce(this, Events.MEDIACONTROL_CONTAINERCHANGED, () => setWhenContainerReady());
         }
         else {
@@ -525,7 +534,7 @@ export class MediaControl extends UICorePlugin {
     toggleFullscreen() {
         if (!Browser.isMobile) {
             this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
-            this.container.fullscreen();
+            this.core.activeContainer.fullscreen();
             this.core.toggleFullscreen();
             this.resetUserKeepVisible();
         }
@@ -537,6 +546,7 @@ export class MediaControl extends UICorePlugin {
         this.changeTogglePlay();
         this.bindContainerEvents();
         this.updateSettings();
+        // TODO remove
         this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -607,9 +617,9 @@ export class MediaControl extends UICorePlugin {
         }
         // default to 100%
         this.currentSeekBarPercentage = 100;
-        if (this.container &&
-            (this.container.getPlaybackType() !== Playback.LIVE ||
-                this.container.isDvrInUse())) {
+        if (this.core.activeContainer &&
+            (this.core.activeContainer.getPlaybackType() !== Playback.LIVE ||
+                this.core.activeContainer.isDvrInUse())) {
             this.currentSeekBarPercentage =
                 (this.currentPositionValue / this.currentDurationValue) * 100;
         }
@@ -636,16 +646,10 @@ export class MediaControl extends UICorePlugin {
         const offsetX = MediaControl.getPageX(event) - this.$seekBarContainer.offset().left;
         let pos = (offsetX / this.$seekBarContainer.width()) * 100;
         pos = Math.min(100, Math.max(pos, 0));
-        this.container && this.container.seekPercentage(pos);
+        this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
         this.setSeekPercentage(pos);
         return false;
     }
-    setKeepVisible() {
-        this.keepVisible = true;
-    }
-    resetKeepVisible() {
-        this.keepVisible = false;
-    }
     setUserKeepVisible() {
         this.userKeepVisible = true;
     }
@@ -723,7 +727,12 @@ export class MediaControl extends UICorePlugin {
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
+        // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
+        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+            this.core.activePlayback.dvrEnabled) {
+            newSettings.left.push('dvr');
+        }
         // actual order of the items appear rendered is controlled by CSS
         newSettings.right = [
             'fullscreen',
@@ -745,17 +754,18 @@ export class MediaControl extends UICorePlugin {
         }
         removeArrayItem(newSettings.default, 'hd-indicator');
         removeArrayItem(newSettings.left, 'hd-indicator');
+        // TODO get from container's settings
         if (this.core.activePlayback.name === 'html5_video') {
             newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback();
         }
-        const settingsChanged = JSON.stringify(this.settings) !== JSON.stringify(newSettings);
+        const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
             this.render();
         }
     }
-    highDefinitionUpdate(isHD) {
-        this.isHD = isHD;
+    onHdUpdate(isHD) {
+        // TODO render?
     }
     createCachedElements() {
         const $layer = this.$el.find('.media-control-layer');
@@ -818,7 +828,7 @@ export class MediaControl extends UICorePlugin {
         trace(`${T} putElement`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
-            element.setAttribute(`data-${name}`, "");
+            element.setAttribute(`data-${name}`, '');
             // TODO test
             if (current.length) {
                 if (current[0] === element) {
@@ -832,16 +842,16 @@ export class MediaControl extends UICorePlugin {
         }
     }
     /**
-     * Get the right panel area to append custom elements to
-     * @returns  ZeptoSelector of the right panel element
+     * Toggle the visibility of a media control element
+     * @param name - The name of the media control element
+     * @param show - Whether to show or hide the element
      */
+    toggleElement(name, show) {
+        this.$el.find(`[data-${name}]`).toggle(show);
+    }
     getRightPanel() {
         return this.$el.find('.media-control-right-panel');
     }
-    /**
-     * Get the left panel area to append custom elements to
-     * @returns  ZeptoSelector of the left panel element
-     */
     getLeftPanel() {
         return this.$el.find('.media-control-left-panel');
     }
@@ -1040,7 +1050,6 @@ export class MediaControl extends UICorePlugin {
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();
-        this.highDefinitionUpdate(this.isHD);
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
@@ -1127,7 +1136,24 @@ export class MediaControl extends UICorePlugin {
         }
         return null;
     }
+    onDvrStateChanged(dvrInUse) {
+        if (dvrInUse) {
+            this.$el.addClass('dvr');
+        }
+        else {
+            this.$el.removeClass('dvr');
+        }
+    }
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
+function serializeSettings(s) {
+    return s.left
+        .slice()
+        .sort()
+        .concat(s.right.slice().sort())
+        .concat(s.default.slice().sort())
+        .concat([s.seekEnabled])
+        .join(',');
+}

package/lib/testUtils.d.ts

@@ -65,7 +65,9 @@ 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;
@@ -92,13 +94,14 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     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;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+B/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;EAgBvE;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,7 +98,9 @@ export function createMockPlayback(name = 'mock') {
     return Object.assign(emitter, {
         name,
         currentLevel: -1,
+        el: document.createElement('video'),
         dvrEnabled: false,
+        dvrInUse: false,
         levels: [],
         consent() { },
         play() { },
@@ -110,7 +112,7 @@ export function createMockPlayback(name = 'mock') {
         getDuration: vi.fn().mockImplementation(() => 100),
         enterPiP: vi.fn(),
         exitPiP: vi.fn(),
-        getPlaybackType: vi.fn().mockImplementation(() => 'live'),
+        getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
         getStartTimeOffset: vi.fn().mockImplementation(() => 0),
         getCurrentTime: vi.fn().mockImplementation(() => 0),
         isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
@@ -126,7 +128,7 @@ export function createMockPlayback(name = 'mock') {
     });
 }
 export function createMockContainer(playback = createMockPlayback()) {
-    const el = document.createElement('div');
+    const el = playback.el;
     const emitter = new Events();
     return Object.assign(emitter, {
         el,
@@ -134,8 +136,9 @@ export function createMockContainer(playback = createMockPlayback()) {
         $el: $(el),
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
-        getPlaybackType: vi.fn().mockReturnValue('live'),
+        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(),
@@ -155,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.4",
+  "version": "2.21.6",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

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
   }

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

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { DvrControls } from '../DvrControls.js'
 import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
+import { Events, Playback } from '@clappr/core'
 // import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 
 // setTracer(new LogTracer('DvrControls.test'))
@@ -28,36 +29,29 @@ describe('DvrControls', () => {
     describe.each([
       ['no DVR', false, false, false],
       ['DVR at live edge', true, false, false],
-      ['DVR behind live edge', true, true, true],
-    ])('%s', (_, dvrEnabled, dvrInUse, indicateDvr) => {
+    ])('%s', (_, dvrEnabled, dvrInUse) => {
       beforeEach(() => {
         core.activePlayback.dvrEnabled = dvrEnabled
-        core.trigger('core:ready')
-        core.trigger('core:active:container:changed')
+        core.activeContainer.isDvrEnabled.mockReturnValue(dvrEnabled)
+        core.trigger(Events.CORE_READY)
+        core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
         if (dvrInUse) {
-          core.activeContainer.trigger('container:dvr', true)
+          core.activePlayback.dvrInUse = true
+          core.activeContainer.isDvrInUse.mockReturnValue(true)
+          core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
         }
       })
       it('should render', () => {
         expect(dvrControls.el.textContent).toBeTruthy()
         expect(dvrControls.el.innerHTML).toMatchSnapshot()
       })
-      it('should render to the media control left panel', () => {
-        expect(mediaControl.$el.find('.media-control-left-panel').text()).toContain('live')
-        expect(mediaControl.el.innerHTML).toMatchSnapshot()
+      it('should hide duration and position indicators', () => {
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith('duration', false)
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith('position', false)
       })
-      it('should indicate live streaming mode', () => {
-        expect(mediaControl.$el.hasClass('live')).toBe(true)
+      it('should render to the media control', () => {
+        expect(mediaControl.putElement).toHaveBeenCalledWith('dvr', dvrControls.el)
       })
-      if (indicateDvr) {
-        it('should indicate DVR mode', () => {
-          expect(mediaControl.$el.hasClass('dvr')).toBe(true)
-        })
-      } else {
-        it('should not indicate DVR mode', () => {
-          expect(mediaControl.$el.hasClass('dvr')).toBe(false)
-        })
-      }
     })
     describe('when back_to_live button is clicked', () => {
       beforeEach(() => {
@@ -78,11 +72,13 @@ describe('DvrControls', () => {
   })
   describe('VOD stream', () => {
     beforeEach(() => {
-      core.getPlaybackType.mockReturnValue('vod')
+      core.getPlaybackType.mockReturnValue(Playback.VOD)
+      core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
+      core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
     })
     beforeEach(() => {
-      core.trigger('core:ready')
-      core.trigger('core:active:container:changed')
+      core.trigger(Events.CORE_READY)
+      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
     })
     it('should not render', () => {
       expect(dvrControls.el.textContent).toBeFalsy()

package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap

@@ -1,43 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DvrControls > live stream > DVR at live edge > should render 1`] = `
-"<div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
+"<div class="live-info" id="media-control-live">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
 
-exports[`DvrControls > live stream > DVR at live edge > should render to the media control left panel 1`] = `
-"<div class="media-control-left-panel" data-media-control=""><div class="dvr-controls" data-dvr-controls=""><div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
-</div></div>
-    <div class="media-control-right-panel" data-media-control=""></div>
-    <div class="media-control-center-panel" data-media-control=""></div>"
-`;
-
 exports[`DvrControls > live stream > DVR behind live edge > should render 1`] = `
-"<div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
+"<div class="live-info" id="media-control-live">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
 
-exports[`DvrControls > live stream > DVR behind live edge > should render to the media control left panel 1`] = `
-"<div class="media-control-left-panel" data-media-control=""><div class="dvr-controls" data-dvr-controls=""><div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
-</div></div>
-    <div class="media-control-right-panel" data-media-control=""></div>
-    <div class="media-control-center-panel" data-media-control=""></div>"
-`;
-
 exports[`DvrControls > live stream > no DVR > should render 1`] = `
-"<div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
+"<div class="live-info" id="media-control-live">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
-
-exports[`DvrControls > live stream > no DVR > should render to the media control left panel 1`] = `
-"<div class="media-control-left-panel" data-media-control=""><div class="dvr-controls" data-dvr-controls=""><div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
-</div></div>
-    <div class="media-control-right-panel" data-media-control=""></div>
-    <div class="media-control-center-panel" data-media-control=""></div>"
-`;