@gcorevideo/player 2.20.6 → 2.20.8

package/lib/testUtils.d.ts

@@ -1,3 +1,4 @@
+import { UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
 /**
  * @internal
@@ -35,10 +36,7 @@ export declare class _MockPlayback extends Events {
 }
 export declare function createMockCore(options?: Record<string, unknown>, container?: any): Events<string | symbol, any> & {
     el: HTMLDivElement;
-    $el: {
-        0: HTMLDivElement;
-        append: import("vitest").Mock<(...args: any[]) => any>;
-    };
+    $el: any;
     activePlayback: any;
     activeContainer: any;
     options: {
@@ -47,6 +45,7 @@ export declare function createMockCore(options?: Record<string, unknown>, contai
     configure: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     load: import("vitest").Mock<(...args: any[]) => any>;
+    trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockPlugin(): Events<string | symbol, any> & {
     enable: import("vitest").Mock<(...args: any[]) => any>;
@@ -87,12 +86,10 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     trigger(event: string, ...args: any[]): void;
 };
 export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
-    $el: {
-        html: import("vitest").Mock<(...args: any[]) => any>;
-        0: HTMLDivElement;
-    };
+    $el: any;
     el: HTMLDivElement;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     playback: any;
 };
+export declare function createMockMediaControl(core: any): UICorePlugin;
 //# sourceMappingURL=testUtils.d.ts.map

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,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,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;EAiB3G;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;;;;;;;;EAWvE"}
+{"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,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,SAAS,GAAE,GAA2B;;;;;;;;;;;;EAgB3G;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;;;;;EAQvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAQ/C"}

package/lib/testUtils.js

@@ -1,3 +1,4 @@
+import { $, UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
 import { vi } from 'vitest';
 /**
@@ -61,12 +62,10 @@ export class _MockPlayback extends Events {
 }
 export function createMockCore(options = {}, container = createMockContainer()) {
     const el = document.createElement('div');
-    return Object.assign(new Events(), {
+    const emitter = new Events();
+    return Object.assign(emitter, {
         el,
-        $el: {
-            [0]: el,
-            append: vi.fn(),
-        },
+        $el: $(el),
         activePlayback: container.playback,
         activeContainer: container,
         options: {
@@ -75,6 +74,7 @@ export function createMockCore(options = {}, container = createMockContainer())
         configure: vi.fn(),
         getPlugin: vi.fn(),
         load: vi.fn(),
+        trigger: emitter.emit,
     });
 }
 export function createMockPlugin() {
@@ -140,12 +140,18 @@ export function createMockPlayback(name = 'mock') {
 export function createMockContainer(playback = createMockPlayback()) {
     const el = document.createElement('div');
     return Object.assign(new Events(), {
-        $el: {
-            html: vi.fn(),
-            [0]: el,
-        },
+        $el: $(el),
         el,
         getPlugin: vi.fn(),
         playback,
     });
 }
+export function createMockMediaControl(core) {
+    const mediaControl = new UICorePlugin(core);
+    const elements = {
+        gear: $(document.createElement('div')),
+    };
+    // @ts-ignore
+    mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name]);
+    return mediaControl;
+}

package/package.json

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

package/src/playback/BasePlayback.ts

@@ -11,10 +11,10 @@ export class BasePlayback extends HTML5Video {
   createError(errorData: any, options?: ErrorOptions) {
     const i18n =
       this.i18n ||
-        // @ts-ignore
-        (this.core && this.core.i18n) ||
-        // @ts-ignore
-        (this.container && this.container.i18n)
+      // @ts-ignore
+      (this.core && this.core.i18n) ||
+      // @ts-ignore
+      (this.container && this.container.i18n)
 
     if (
       i18n &&
@@ -34,6 +34,14 @@ export class BasePlayback extends HTML5Video {
     return super.createError(errorData, options)
   }
 
+  /**
+   * Sets the playback rate.
+   * @param rate - The playback rate to set.
+   */
+  setPlaybackRate(rate: number) {
+    ;(this.el as HTMLMediaElement).playbackRate = rate
+  }
+
   override _onPlaying() {
     super._onPlaying()
     this.trigger(Events.PLAYBACK_MEDIACONTROL_ENABLE)

package/src/playback/HTML5Video.ts

@@ -0,0 +1,3 @@
+import { BasePlayback } from './BasePlayback.js'
+
+export default class HTML5Video extends BasePlayback {}

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

@@ -17,7 +17,6 @@ import DASHJS, {
 import {
   PlaybackError,
   PlaybackErrorCode,
-  PlayerComponentType,
   QualityLevel,
   TimePosition,
   TimeUpdate,
@@ -25,6 +24,7 @@ import {
 } from '../../playback.types.js'
 import { isDashSource } from '../../utils/mediaSources.js'
 import { BasePlayback } from '../BasePlayback.js'
+import { PlaybackEvents } from '../types.js'
 
 const AUTO = -1
 
@@ -300,8 +300,8 @@ export default class DashPlayback extends BasePlayback {
       },
     )
 
-    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, () => {
-      this.trigger('dash:playback-rate-changed')
+    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, (e: DASHJS.PlaybackRateChangedEvent) => {
+      this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate)
     })
   }
 
@@ -361,7 +361,7 @@ export default class DashPlayback extends BasePlayback {
     return this._startTime
   }
 
-  seekPercentage(percentage: number) {
+  override seekPercentage(percentage: number) {
     let seekTo = this._duration
 
     if (percentage > 0) {
@@ -376,7 +376,7 @@ export default class DashPlayback extends BasePlayback {
     this.seek(seekTo)
   }
 
-  seek(time: TimeValue) {
+  override seek(time: TimeValue) {
     if (time < 0) {
       // eslint-disable-next-line max-len
       Log.warn(
@@ -478,7 +478,7 @@ export default class DashPlayback extends BasePlayback {
     }, 10)
   }
 
-  _onTimeUpdate() {
+  override _onTimeUpdate() {
     if (this.startChangeQuality) {
       return
     }
@@ -499,7 +499,7 @@ export default class DashPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
-  _onDurationChange() {
+  override _onDurationChange() {
     const duration = this.getDuration()
 
     if (this._lastDuration === duration) {
@@ -540,7 +540,7 @@ export default class DashPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_PROGRESS, progress, {})
   }
 
-  play() {
+  override play() {
     trace(`${T} play`, { dash: !!this._dash })
     if (!this._dash) {
       this._setup()
@@ -550,7 +550,7 @@ export default class DashPlayback extends BasePlayback {
     this._startTimeUpdateTimer()
   }
 
-  pause() {
+  override pause() {
     if (!this._dash) {
       return
     }
@@ -560,7 +560,7 @@ export default class DashPlayback extends BasePlayback {
     }
   }
 
-  stop() {
+  override stop() {
     if (this._dash) {
       this._stopTimeUpdateTimer()
       this._dash.reset()
@@ -569,7 +569,7 @@ export default class DashPlayback extends BasePlayback {
     }
   }
 
-  destroy() {
+  override destroy() {
     this._stopTimeUpdateTimer()
     if (this._dash) {
       this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError)
@@ -638,6 +638,10 @@ export default class DashPlayback extends BasePlayback {
     assert.ok(ret, 'Invalid quality level')
     return ret
   }
+
+  setPlaybackRate(rate: number) {
+    this._dash?.setPlaybackRate(rate)
+  }
 }
 
 DashPlayback.canPlay = function (resource, mimeType) {

package/src/playback/index.ts

@@ -2,9 +2,10 @@ import { Loader } from '@clappr/core'
 
 import DashPlayback from './dash-playback/DashPlayback.js'
 import HlsPlayback from './hls-playback/HlsPlayback.js'
-
+import HTML5Video from './HTML5Video.js'
 // TODO consider allowing the variation of the order of playback modules
 export function registerPlaybacks() {
+  Loader.registerPlayback(HTML5Video) // TODO check it overrides the default HTML5Video
   Loader.registerPlayback(HlsPlayback)
   Loader.registerPlayback(DashPlayback)
 }

package/src/playback/types.ts

@@ -0,0 +1,9 @@
+
+export enum PlaybackEvents {
+  /**
+   * Emitted when the playback rate changes.
+   * Payload:
+   * - playbackRate number
+   */
+  PLAYBACK_RATE_CHANGED = 'playback:rate-changed',
+}

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

@@ -10,22 +10,12 @@ import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import gearIcon from '../../../assets/icons/new/gear.svg';
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
 import { ZeptoResult } from '../../utils/types.js';
+import { MediaControlEvents } from '../media-control/MediaControl';
 
 const VERSION = '2.19.12';
 
 const T = 'plugins.bottom_gear';
 
-/**
- * Custom events emitted by the plugin
- * @beta
- */
-export enum GearEvents {
-  /**
-   * Emitted when the gear menu is rendered
-   */
-  MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
-}
-
 /**
  * An element inside the gear menu
  * @beta
@@ -95,7 +85,6 @@ export class BottomGear extends UICorePlugin {
     assert(mediaControl, 'media_control plugin is required');
 
     this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.listenTo(this.core, 'gear:refresh', this.refresh); // TODO use direct plugin method call
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
   }
@@ -127,13 +116,9 @@ export class BottomGear extends UICorePlugin {
   }
 
   private highDefinitionUpdate(isHd: boolean) {
-    trace(`${this.name} highDefinitionUpdate`, { isHd });
+    trace(`${T} highDefinitionUpdate`, { isHd });
     this.isHd = isHd;
-    if (isHd) {
-      this.$el.find('.gear-icon').html(gearHdIcon);
-    } else {
-      this.$el.find('.gear-icon').html(gearIcon);
-    }
+    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
   }
 
   /**
@@ -153,12 +138,16 @@ export class BottomGear extends UICorePlugin {
     this.$el.html(BottomGear.template({ icon, items }));
 
     mediaControl.getElement('gear')?.html(this.el);
-    this.core.trigger('gear:rendered'); // @deprecated
-    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED);
+    mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
 
-  private refresh() {
+  /**
+   * Re-renders the gear menu.
+   * It fires the {@link MediaControlEvents.MEDIACONTROL_GEAR_RENDERED | MEDIACONTROL_GEAR_RENDERED} event,
+   * which the plugins that attach to the gear menu can listen to to re-render themselves.
+   */
+  refresh() {
     this.render();
     this.$el.find('.gear-wrapper').show();
   }

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

@@ -0,0 +1,36 @@
+import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BottomGear } from '../BottomGear'
+import { createMockCore, createMockMediaControl } from '../../../testUtils'
+import { MediaControlEvents } from '../../media-control/MediaControl'
+
+describe('BottomGear', () => {
+  let mediaControl: any
+  let core: any
+  let bottomGear: BottomGear
+  let onGearRendered: MockedFunction<() => void>
+  beforeEach(() => {
+    core = createMockCore()
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi
+      .fn()
+      .mockImplementation((name) =>
+        name === 'media_control' ? mediaControl : null,
+      )
+    bottomGear = new BottomGear(core)
+    onGearRendered = vi.fn()
+    mediaControl.on(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, onGearRendered, null)
+    bottomGear.render()
+  })
+  it('should render', () => {
+    expect(bottomGear.el.innerHTML).toMatchSnapshot()
+  })
+  it('should attach to media control', () => {
+    const gearElement = mediaControl.getElement('gear')
+    expect(gearElement[0].innerHTML).not.toEqual('')
+    expect(gearElement[0].innerHTML).toMatchSnapshot()
+  })
+  it('should emit event', () => {
+    expect(onGearRendered).toHaveBeenCalled()
+  })
+})

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

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

package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts

@@ -24,8 +24,8 @@ import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss'
 import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs'
 import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs'
 import statsIcon from '../../../assets/icons/new/stats.svg'
-import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
-import { MediaControl } from '../media-control/MediaControl.js'
+import { BottomGear } from '../bottom-gear/BottomGear.js'
+import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js'
 import assert from 'assert'
 
 const qualityClasses = [
@@ -229,7 +229,7 @@ export class ClapprNerdStats extends UICorePlugin {
     this.listenToOnce(this.core, Events.CORE_READY, this.init)
     this.listenTo(
       mediaControl,
-      GearEvents.MEDIACONTROL_GEAR_RENDERED,
+      MediaControlEvents.MEDIACONTROL_GEAR_RENDERED,
       this.addToBottomGear,
     )
   }

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

@@ -1,10 +1,13 @@
-import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core';
-import assert from 'assert';
+import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core'
+import assert from 'assert'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import dvrHTML from '../../../assets/dvr-controls/index.ejs';
-import '../../../assets/dvr-controls/dvr_controls.scss';
+import dvrHTML from '../../../assets/dvr-controls/index.ejs'
+import '../../../assets/dvr-controls/dvr_controls.scss'
+import { trace } from '@gcorevideo/utils'
+
+const T = 'plugins.dvr_controls'
 
 /**
  * Adds the DVR controls to the media control UI
@@ -18,20 +21,20 @@ import '../../../assets/dvr-controls/dvr_controls.scss';
  * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
 export class DvrControls extends UICorePlugin {
-  private static readonly template = template(dvrHTML);
+  private static readonly template = template(dvrHTML)
 
   /**
    * @internal
    */
   get name() {
-    return 'dvr_controls';
+    return 'dvr_controls'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
@@ -39,8 +42,8 @@ export class DvrControls extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .live-button': 'click'
-    };
+      'click .live-button': 'click',
+    }
   }
 
   /**
@@ -48,96 +51,126 @@ export class DvrControls extends UICorePlugin {
    */
   override get attributes() {
     return {
-      'class': 'dvr-controls',
-      'data-dvr-controls': ''
-    };
+      class: 'dvr-controls',
+      'data-dvr-controls': '',
+    }
   }
 
   constructor(core: Core) {
-    super(core);
-    this.settingsUpdate();
+    super(core)
+    this.settingsUpdate()
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
-    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_RENDERED,
+      this.settingsUpdate,
+    )
+    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.bindContainerEvents,
+    )
   }
 
   private bindContainerEvents() {
-    this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
+    this.listenToOnce(
+      this.core.activeContainer,
+      Events.CONTAINER_TIMEUPDATE,
+      this.render,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.onDvrChanged,
+    )
   }
 
-  private dvrChanged(dvrEnabled: boolean) {
+  private onDvrChanged(dvrEnabled: boolean) {
+    trace(`${T} onDvrChanged`, {
+      dvrEnabled,
+    })
     if (this.core.getPlaybackType() !== Playback.LIVE) {
-      return;
+      return
     }
-    this.settingsUpdate();
-    this.core.mediaControl.$el.addClass('live');
+    this.settingsUpdate()
+    this.core.mediaControl.$el.addClass('live')
     if (dvrEnabled) {
-      this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
+      // TODO
       this.core.mediaControl.$el
         .addClass('dvr')
-        .find('.media-control-indicator[data-position], .media-control-indicator[data-duration]')
-        .hide();
+        .find(
+          '.media-control-indicator[data-position], .media-control-indicator[data-duration]',
+        )
+        .hide()
     } else {
-      this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-      this.core.mediaControl.$el.removeClass('dvr');
+      this.core.mediaControl.$el.removeClass('dvr')
     }
   }
 
   private click() {
-    const mediaControl = this.core.getPlugin('media_control');
-    const container = this.core.activeContainer;
+    const mediaControl = this.core.getPlugin('media_control')
+    const container = this.core.activeContainer
 
     if (!container.isPlaying()) {
-      container.play();
+      container.play()
     }
 
     if (mediaControl.$el.hasClass('dvr')) {
-      container.seek(container.getDuration());
+      container.seek(container.getDuration())
     }
   }
 
   private settingsUpdate() {
     // @ts-ignore
-    this.stopListening(); // TODO sort out
-    this.core.getPlugin('media_control').$el.removeClass('live'); // TODO don't access directly
+    this.stopListening() // TODO sort out
+    this.core.getPlugin('media_control').$el.removeClass('live') // TODO don't access directly
     if (this.shouldRender()) {
-      this.render();
-      this.$el.click(() => this.click());
+      this.render()
+      this.$el.click(() => this.click())
     }
-    this.bindEvents();
+    this.bindEvents()
   }
 
   private shouldRender() {
-    const useDvrControls = this.core.options.useDvrControls === undefined || !!this.core.options.useDvrControls;
+    const useDvrControls =
+      this.core.options.useDvrControls === undefined ||
+      !!this.core.options.useDvrControls
 
-    return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
+    return useDvrControls && this.core.getPlaybackType() === Playback.LIVE
   }
 
   /**
    * @internal
    */
   override render() {
-    this.$el.html(DvrControls.template({
-      live: this.core.i18n.t('live'),
-      backToLive: this.core.i18n.t('back_to_live')
-    }));
-    if (this.shouldRender()) {
-      const mediaControl = this.core.getPlugin('media_control');
-      assert(mediaControl, 'media_control plugin is required');
-      // TODO don't tap into the $el directly
-      mediaControl.$el.addClass('live');
-      mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
+    trace(`${T} render`, {
+      dvrEnabled: this.core.activePlayback?.dvrEnabled,
+    })
+    if (!this.shouldRender()) {
+      return this
     }
-
-    return this;
+    this.$el.html(
+      DvrControls.template({
+        live: this.core.i18n.t('live'),
+        backToLive: this.core.i18n.t('back_to_live'),
+      }),
+    )
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    // TODO don't tap into the $el directly
+    mediaControl.$el.addClass('live')
+    mediaControl
+      .$('.media-control-left-panel[data-media-control]')
+      .append(this.$el)
+
+    return this
   }
 }