@gcorevideo/player 2.20.9 → 2.20.11

package/lib/testUtils.d.ts

@@ -39,10 +39,14 @@ export declare function createMockCore(options?: Record<string, unknown>, contai
     $el: any;
     activePlayback: any;
     activeContainer: any;
+    i18n: {
+        t: import("vitest").Mock<(...args: any[]) => any>;
+    };
     options: {
         [x: string]: unknown;
     };
     configure: import("vitest").Mock<(...args: any[]) => any>;
+    getPlaybackType: 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;
@@ -86,10 +90,15 @@ 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: any;
     el: HTMLDivElement;
-    getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     playback: any;
+    $el: any;
+    getDuration: import("vitest").Mock<(...args: any[]) => any>;
+    getPlugin: 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>;
+    trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 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,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"}
+{"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,gBAmB/C"}

package/lib/testUtils.js

@@ -68,10 +68,14 @@ export function createMockCore(options = {}, container = createMockContainer())
         $el: $(el),
         activePlayback: container.playback,
         activeContainer: container,
+        i18n: {
+            t: vi.fn().mockImplementation((key) => key),
+        },
         options: {
             ...options,
         },
         configure: vi.fn(),
+        getPlaybackType: vi.fn(),
         getPlugin: vi.fn(),
         load: vi.fn(),
         trigger: emitter.emit,
@@ -139,19 +143,34 @@ export function createMockPlayback(name = 'mock') {
 }
 export function createMockContainer(playback = createMockPlayback()) {
     const el = document.createElement('div');
-    return Object.assign(new Events(), {
-        $el: $(el),
+    const emitter = new Events();
+    return Object.assign(emitter, {
         el,
-        getPlugin: vi.fn(),
         playback,
+        $el: $(el),
+        getDuration: vi.fn().mockReturnValue(0),
+        getPlugin: vi.fn(),
+        isPlaying: vi.fn().mockReturnValue(false),
+        play: vi.fn(),
+        seek: vi.fn(),
+        trigger: emitter.emit,
     });
 }
 export function createMockMediaControl(core) {
     const mediaControl = new UICorePlugin(core);
+    mediaControl.$el.html(`<div class="media-control-left-panel" data-media-control></div>
+    <div class="media-control-right-panel" data-media-control></div>
+    <div class="media-control-center-panel" data-media-control></div>`);
     const elements = {
         gear: $(document.createElement('div')),
     };
     // @ts-ignore
     mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name]);
+    // @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'));
     return mediaControl;
 }

package/lib/types.d.ts

@@ -5,7 +5,7 @@ import { $, Container, Core } from "@clappr/core";
  * @remarks
  * When the MIME type is provided, it helps the player determine the appropriate playback engine.
  * If omitted, the player will attempt to detect the type from the source URL extension.
- * @beta
+ * @public
  */
 export interface PlayerMediaSourceDesc {
     /**
@@ -20,36 +20,31 @@ export interface PlayerMediaSourceDesc {
 }
 /**
  * A media source to fetch the media data from
- * @beta
+ * @public
  */
 export type PlayerMediaSource = string | PlayerMediaSourceDesc;
 /**
  * Debug output category selector
- * @beta
+ * @public
  */
 export type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none';
 /**
  * @remarks `true` is equivalent to `'all'`, `false` is equivalent to `'none'`
- * @beta
+ * @public
  */
 export type PlayerDebugSettings = PlayerDebugTag | boolean;
 /**
- * Type of a stream playback
- * @beta
+ * Type of a stream
+ * @public
  */
 export type PlaybackType = 'live' | 'vod';
 /**
- * Media delivery protocol
- * @beta
+ * Preferred streaming media delivery protocol
+ * @public
  */
-export type MediaTransport = 'dash' | 'hls';
+export type TransportPreference = 'dash' | 'hls';
 /**
- * Preferred media delivery protocol
- * @beta
- */
-export type TransportPreference = MediaTransport;
-/**
- * @beta
+ * @public
  * @see {@link https://clappr.github.io/classes/UIContainerPlugin.html},
  * {@link https://clappr.github.io/classes/ContainerPlugin.html}
  */
@@ -57,18 +52,18 @@ export type PlayerPlugin = {
     name: string;
 };
 /**
- * @beta
+ * @public
  */
 export type PlayerPluginConstructor = CorePluginConstructor | ContainerPluginConstructor;
 /**
- * @beta
+ * @public
  */
 export type CorePluginConstructor = {
     new (core: Core): PlayerPlugin;
     type: string;
 };
 /**
- * @beta
+ * @public
  */
 export type ContainerPluginConstructor = {
     new (container: Container): PlayerPlugin;
@@ -113,7 +108,7 @@ export type ContainerPluginConstructor = {
  *   },
  * }
  * ```
- * @beta
+ * @public
  */
 export interface PlayerConfig extends Record<string, unknown> {
     /**
@@ -171,16 +166,16 @@ export interface PlayerConfig extends Record<string, unknown> {
 /**
  * An ISO 639-1 language code.
  * @example `pt`
- * @beta
+ * @public
  */
 export type LangTag = string;
 /**
- * @beta
+ * @public
  */
 export type TranslationKey = string;
 /**
  * A plain JS object that must conform to the DASH.js settings schema.
- * @beta
+ * @public
  * {@link https://cdn.dashjs.org/latest/jsdoc/module-Settings.html | DASH.js settings}
  */
 export type DashSettings = Record<string, unknown>;
@@ -206,12 +201,12 @@ export type DashSettings = Record<string, unknown>;
  * }
  * ```
  *
- * @beta
+ * @public
  */
 export type TranslationSettings = Partial<Record<LangTag, Record<TranslationKey, string>>>;
 /**
  * Dimensions of the player container DOM element.
- * @beta
+ * @public
  */
 export type ContainerSize = {
     width: number;
@@ -219,7 +214,7 @@ export type ContainerSize = {
 };
 /**
  * A top-level event on the player object
- * @beta
+ * @public
  */
 export declare enum PlayerEvent {
     /**

package/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/lib/types.js

@@ -1,6 +1,6 @@
 /**
  * A top-level event on the player object
- * @beta
+ * @public
  */
 export var PlayerEvent;
 (function (PlayerEvent) {

package/package.json

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

package/src/Player.ts

@@ -26,7 +26,7 @@ import { registerPlaybacks } from './playback/index.js'
 import { PlaybackError, TimePosition } from './playback.types.js'
 
 /**
- * @beta
+ * @public
  */
 export type PlayerEventParams<E extends PlayerEvent> =
   E extends PlayerEvent.Seek
@@ -46,7 +46,7 @@ export type PlayerEventParams<E extends PlayerEvent> =
 /**
  * Type of a listener callback function for a player event.
  * See the description of the event parameters in {@link PlayerEvent}.
- * @beta
+ * @public
  */
 export type PlayerEventHandler<E extends PlayerEvent> = (
   ...args: PlayerEventParams<E>
@@ -67,15 +67,15 @@ const DEFAULT_OPTIONS: PlayerConfig = {
 
 /**
  * Module to perform the playback.
- * @beta
+ * @public
  */
 export type PlaybackModule = 'dash' | 'hls' | 'html5_video'
 
 type PluginOptions = Record<string, unknown>
 
 /**
- * The main component to use in the application code.
- * @beta
+ * `MAIN` component to use in the application code.
+ * @public
  * @remarks
  * The Player object provides very basic API to control playback.
  * To build a sophisticated UI, use the plugins framework to tap into the Clappr core.

package/src/index.ts

@@ -3,9 +3,26 @@
  *
  * @remarks
  * This package provides a video player for the Gcore streaming platform.
- * It is built on top of the Clappr library and provides a framework for building custom integrations.
+ * 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.
+ * @example
+ * ```ts
+ * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(MediaControl)
+ * Player.registerPlugin(ErrorScreen)
+ *
+ * const player = new Player({
+ *   autoPlay: true,
+ *   mute: true,
+ *   sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],
+ * })
+ *
+ * player.attachTo(document.getElementById('container'))
+ * ```
+ *
  * @packageDocumentation
  */
 export * from './index.core.js'

package/src/playback.types.ts

@@ -1,12 +1,12 @@
 /**
  * Playback time in seconds since the beginning of the stream (or a segment for the live streams)
- * @beta
+ * @public
  */
 export type TimeValue = number
 
 /**
  * Current playback time and total duration of the media.
- * @beta
+ * @public
  */
 export interface TimePosition {
   /**
@@ -35,7 +35,7 @@ export type TimeUpdate = TimePosition & {
 
 /**
  * A level of quality within a media source.
- * @beta
+ * @public
  */
 export interface QualityLevel {
   /**
@@ -58,7 +58,7 @@ export interface QualityLevel {
 
 /**
  * Codes of errors occurring within the playback component.
- * @beta
+ * @public
  */
 export enum PlaybackErrorCode {
   /**
@@ -77,19 +77,19 @@ export enum PlaybackErrorCode {
 
 /**
  * Levels of severity of errors. Non-fatal errors usually can be ignored.
- * @beta
+ * @public
  */
 export type ErrorLevel = 'FATAL' | 'WARN' | 'INFO'
 
 /**
  * Subsystems of a player component.
- * @beta
+ * @public
  */
 export type PlayerComponentType = 'container' | 'core' | 'playback'
 
 /**
  * An error occurred during the playback.
- * @beta
+ * @public
  */
 export interface PlaybackError {
   /**
@@ -127,5 +127,6 @@ export interface PlaybackError {
   UI?: {
     title: string
     message: string
+    icon?: string
   }
 }

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

@@ -43,7 +43,7 @@ type AudioTrackList = {
 }
 
 /**
- * Adds an audio track selector to the media control UI.
+ * `PLUGIN` that adds an audio track selector to the media control UI.
  * @beta
  */
 export class AudioSelector extends UICorePlugin {

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -13,7 +13,7 @@ const T = 'plugins.big_mute_button'
 // TODO rewrite as a container plugin
 
 /**
- * Displays a big mute button over the video when it's muted.
+ * `PLUGIN` that displays a big mute button over the video when it's muted.
  * Once pressed, it unmutes the video.
  * @beta
  */
@@ -56,7 +56,6 @@ export class BigMuteButton extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    super.bindEvents()
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
     this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
     this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)

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

@@ -23,7 +23,7 @@ const T = 'plugins.bottom_gear';
 export type GearItemElement = 'quality' | 'rate' | 'nerd';
 
 /**
- * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
+ * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
  * @remarks
  * The plugins provides a base for attaching custom settings UI in the gear menu

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

@@ -117,7 +117,7 @@ type Metrics = BaseMetrics & {
 // const T = 'plugins.clappr_nerd_stats';
 
 /**
- * PLUGIN that displays useful network-related statistics.
+ * `PLUGIN` that displays useful network-related statistics.
  * @beta
  *
  * @remarks

package/src/plugins/clappr-stats/ClapprStats.ts

@@ -23,7 +23,7 @@ type UriToMeasureBandwidth = {
 const updateMetrics = () => {};
 
 /**
- * PLIGIN that collects useful statistics about playback performance.
+ * `PLUGIN` that collects useful statistics about playback performance.
  * @beta
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -12,7 +12,7 @@ type Timer = ReturnType<typeof setTimeout>
 const T = 'plugins.click_to_pause_custom'
 
 /**
- * Adds a behavior of toggling the playback state on click over the container
+ * `PLUGIN` that adds a behavior of toggling the playback state on click over the container
  * @beta
  */
 export class ClickToPause extends ContainerPlugin {

package/src/plugins/clips/Clips.ts

@@ -30,7 +30,7 @@ export interface ClipsPluginSettings {
 }
 
 /**
- * PLUGIN that shows text over the seekbar to indicate the current clip.
+ * `PLUGIN` that shows text over the seekbar to indicate the current clip.
  * @beta
  * @remarks
  * Depends on:

package/src/plugins/context-menu/ContextMenu.ts

@@ -28,7 +28,7 @@ export interface ContextMenuPluginSettings {
 }
 
 /**
- * Displays a small context menu when clicked on the player container.
+ * `PLUGIN` that displays a small context menu when clicked on the player container.
  * @beta
  * @remarks
  * Configuration options - {@link ContextMenuPluginSettings}

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

@@ -6,11 +6,12 @@ import { CLAPPR_VERSION } from '../../build.js'
 import dvrHTML from '../../../assets/dvr-controls/index.ejs'
 import '../../../assets/dvr-controls/dvr_controls.scss'
 import { trace } from '@gcorevideo/utils'
+import { MediaControl } from '../media-control/MediaControl.js'
 
 const T = 'plugins.dvr_controls'
 
 /**
- * PLUGIN that adds the DVR controls to the media control UI
+ * `PLUGIN` that adds the DVR controls to the media control UI
  *
  * @beta
  *
@@ -19,7 +20,9 @@ const T = 'plugins.dvr_controls'
  *
  * - {@link MediaControl}
  *
- * The plugin renders live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
+ * The plugin renders live stream indicator.
+ * If DVR is enabled, the indicator shows whether the current position is at the live edge of the stream or not.
+ * In the latter case, the indicator can be clicked to seek to the live edge.
  */
 export class DvrControls extends UICorePlugin {
   private static readonly template = template(dvrHTML)
@@ -57,15 +60,20 @@ export class DvrControls extends UICorePlugin {
     }
   }
 
-  constructor(core: Core) {
-    super(core)
-    this.settingsUpdate()
-  }
-
   /**
    * @internal
    */
   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,
+      this.bindContainerEvents,
+    )
+  }
+
+  private onCoreReady() {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(
@@ -73,12 +81,7 @@ export class DvrControls extends UICorePlugin {
       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,
-    )
+    this.settingsUpdate()
   }
 
   private bindContainerEvents() {
@@ -94,57 +97,45 @@ export class DvrControls extends UICorePlugin {
     )
   }
 
-  private onDvrChanged(dvrEnabled: boolean) {
+  private onDvrChanged(dvrInUse: boolean) {
     trace(`${T} onDvrChanged`, {
-      dvrEnabled,
+      dvrInUse,
     })
     if (this.core.getPlaybackType() !== Playback.LIVE) {
       return
     }
-    this.settingsUpdate()
-    this.core.mediaControl.$el.addClass('live')
-    if (dvrEnabled) {
-      // TODO
-      this.core.mediaControl.$el
+    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 {
-      this.core.mediaControl.$el.removeClass('dvr')
+      mediaControl.$el.removeClass('dvr')
     }
   }
 
   private click() {
-    const mediaControl = this.core.getPlugin('media_control')
     const container = this.core.activeContainer
-
     if (!container.isPlaying()) {
       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
-    if (this.shouldRender()) {
-      this.render()
-      this.$el.click(() => this.click())
-    }
-    this.bindEvents()
+    trace(`${T} settingsUpdate`)
+    this.core.getPlugin('media_control').$el.removeClass('live')
+    this.render()
   }
 
   private shouldRender() {
-    const useDvrControls =
-      this.core.options.useDvrControls === undefined ||
-      !!this.core.options.useDvrControls
-
+    const useDvrControls = this.core.options.useDvrControls !== false
     return useDvrControls && this.core.getPlaybackType() === Playback.LIVE
   }
 
@@ -154,6 +145,7 @@ export class DvrControls extends UICorePlugin {
   override render() {
     trace(`${T} render`, {
       dvrEnabled: this.core.activePlayback?.dvrEnabled,
+      playbackType: this.core.getPlaybackType(),
     })
     if (!this.shouldRender()) {
       return this
@@ -164,13 +156,9 @@ export class DvrControls extends UICorePlugin {
         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
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
     mediaControl.$el.addClass('live')
-    mediaControl
-      .$('.media-control-left-panel[data-media-control]')
-      .append(this.$el)
+    mediaControl.getLeftPanel().append(this.$el)
 
     return this
   }