@gcorevideo/player 2.24.14 → 2.25.0

package/lib/plugins/media-control/MediaControl.d.ts

@@ -2,35 +2,34 @@ import { UICorePlugin, Core } from '@clappr/core';
 import { ZeptoResult } from '../../types.js';
 import '../../../assets/media-control/media-control.scss';
 /**
- * Media control elements that appear in the left area.
- * @beta
- */
-export type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume' | 'clips';
-/**
- * Media control elements that appear in main layer, spanning the entire width of the player.
+ * Built-in media control elements.
  * @beta
  */
-export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' | '_';
+export type StandardMediaControlElement = 'duration' | 'fullscreen' | 'hd-indicator' | 'playpause' | 'playstop' | 'position' | 'seekbar' | 'volume';
 /**
- * Media control elements that appear in the right area.
+ * Identifies a location for mounting custom media control elements.
  * @beta
  */
-export type MediaControlRightElement = 'audiotracks' | 'cc' | 'fullscreen' | 'hd-indicator' | 'gear' | 'multicamera' | 'pip' | 'vr';
+export type MediaControlSlotMountPoint = 'root' | 'base' | 'left' | 'right' | 'center' | 'seekbar';
 /**
- * Built-in media control elements.
+ * Media control element.
+ * Each element's token in the media control layout settings determines where the element is rendered.
  * @beta
+ * @remarks
+ * Standard media control elements are defined in the {@link StandardMediaControlElement} type.
+ * Custom media control elements can be identified by a unique token.
  */
-export type MediaControlElement = MediaControlLeftElement | MediaControlLayerElement | MediaControlRightElement;
-export type MediaControlSlotSelector = 'root' | 'base' | 'left' | 'right' | 'center' | 'seekbar';
+export type MediaControlElement = string;
 /**
- * Specifies the allowed media control elements in each area.
- * Can be used to restrict rendered media control elements.
+ * Specifies the layout of media control elements.
+ * Actual elements will be rendered according to the playback settings. Custom elements rendered by the plugins
+ * will be mounted at the specified locations.
  * @beta
  */
 export type MediaControlSettings = {
-    left: MediaControlLeftElement[];
-    right: MediaControlRightElement[];
-    default: MediaControlLayerElement[];
+    left: MediaControlElement[];
+    right: MediaControlElement[];
+    default: MediaControlElement[];
     seekEnabled: boolean;
 };
 /**
@@ -41,26 +40,30 @@ export declare enum ExtendedEvents {
     MEDIACONTROL_VOLUME = "mediacontrol:volume",
     MEDIACONTROL_MENU_COLLAPSE = "mediacontrol:menu:collapse"
 }
+export type MediaControlPluginSettings = {
+    hideMediaControlDelay?: number;
+};
 /**
- * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+ * `PLUGIN` that provides framework for building media control UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  *
- * Configuration options:
+ * Configuration options (root level)
+ *
+ * - `hideMediaControlDelay`: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
  *
- * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the media control dashboard layout
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
  *
- * - `chromeless`: boolean
+ * - `chromeless`: boolean - `common` option, hides the media control UI
  */
 export declare class MediaControl extends UICorePlugin {
     private buttonsColor;
     private currentDurationValue;
     private currentPositionValue;
     private currentSeekBarPercentage;
-    private disabledClickableList;
     private displayedDuration;
     private displayedPosition;
     private displayedSeekBarPercentage;
@@ -85,7 +88,6 @@ export declare class MediaControl extends UICorePlugin {
     private verticalVolume;
     private $duration;
     private $fullscreenToggle;
-    private $multiCameraSelector;
     private $playPauseToggle;
     private $playStopToggle;
     private $position;
@@ -111,6 +113,42 @@ export declare class MediaControl extends UICorePlugin {
     get supportedVersion(): {
         min: string;
     };
+    /**
+     * @returns  Default media control layout settings
+     * @remark
+     * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
+     * @example
+     * ```ts
+     * const settings = MediaControl.defaultSettings()
+     * settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
+     * ...
+     * new Player({
+     *   mediaControl: settings,
+     * })
+     * ```
+     */
+    static defaultSettings(): any;
+    /**
+     * Extend the default media control layout settings
+     * @param settings - Additional settings
+     * @returns The extended settings
+     * @remarks
+     * This method allows adding custom elements to the media control dashboard.
+     * The default settings are not modified.
+     * @example
+     * ```ts
+     * new Player({
+     *   mediaControl: MediaControl.extendSettings({
+     *     left: ['*'], // add all custom elements to the left panel
+     *   }),
+     * })
+     * ```
+     */
+    static extendSettings(settings: Partial<MediaControlSettings>): {
+        left: string[];
+        right: string[];
+        default: string[];
+    };
     private get disabled();
     /**
      * Use in mediacontrol-based plugins to access the active container
@@ -244,10 +282,33 @@ export declare class MediaControl extends UICorePlugin {
     private onHdUpdate;
     private createCachedElements;
     /**
-     * Get a media control element DOM node
+     * Mount a media control to its configured location
      * @param name - The name of the media control element
      * @param element - The DOM node/fragment to mount
-     * @deprecated Use {@link MediaControl.mount} instead
+     * @remarks
+     * Media controls layout is configured via {@link MediaControlSettings}.
+     * A plugin implementing custom elements on the media control dashboard,
+     * should use this method to mount the element to the correct location.
+     * The actual location is defined by the occurence of the element token in the `left`, `right` or `default` section
+     * of the {@link MediaControlSettings}.
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     // mount the element where it is configured in the layout
+     *     this.core.getPlugin('media_control').slot('my-element', this.$el)
+     *   }
+     * }
+     * ...
+     * Player.registerPlugin(MyPlugin)
+     * ...
+     * // Configuration of the media control layout
+     * new Player({
+     *   mediaControl: {
+     *     left: ['my-element'], // the element will be mounted to the left panel
+     *   },
+     * })
+     * ```
      */
     slot(name: MediaControlElement, element: ZeptoResult): void;
     /**
@@ -267,7 +328,7 @@ export declare class MediaControl extends UICorePlugin {
      * }
      * ```
      */
-    mount(name: MediaControlSlotSelector, element: ZeptoResult): void;
+    mount(name: MediaControlSlotMountPoint, element: ZeptoResult): void;
     private getMountParent;
     /**
      * Toggle the visibility of a media control element
@@ -303,14 +364,6 @@ export declare class MediaControl extends UICorePlugin {
     private hideControllAds;
     private static getPageX;
     private static getPageY;
-    /**
-     * Enable the user interaction disabled earlier
-     */
-    enableControlButton(): void;
-    /**
-     * Disable the user interaction for the control buttons
-     */
-    disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;
     private getElementLocation;
     private onDvrStateChanged;

package/lib/plugins/media-control/MediaControl.d.ts.map

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

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

@@ -20,26 +20,24 @@ 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 MANAGED_ELEMENTS = [
-    'dvr',
+const STANDARD_MEDIA_CONTROL_ELEMENTS = [
     'duration',
     'fullscreen',
     'hd-indicator',
+    'playpause',
+    'playstop',
     'position',
     'seekbar',
     'volume',
 ];
+// TODO export
 const DEFAULT_SETTINGS = {
-    default: [],
-    left: ['dvr'],
+    default: ['seekbar'],
+    left: ['playpause', 'playstop', 'position', 'duration', 'volume'],
     right: [
-        'audiotracks',
-        'cc',
+        '*',
+        // 'hd-indicator',
         'fullscreen',
-        'gear',
-        'multicamera',
-        'pip',
-        'vr',
     ],
     seekEnabled: true,
 };
@@ -50,14 +48,6 @@ const INITIAL_SETTINGS = {
     seekEnabled: false,
 };
 const T = 'plugins.media_control';
-const LEFT_ORDER = [
-    'playpause',
-    'playstop',
-    'volume',
-    'position',
-    'duration',
-    'dvr',
-];
 /**
  * Extended events for the {@link MediaControl} plugin
  * @beta
@@ -68,25 +58,21 @@ export var ExtendedEvents;
     ExtendedEvents["MEDIACONTROL_MENU_COLLAPSE"] = "mediacontrol:menu:collapse";
 })(ExtendedEvents || (ExtendedEvents = {}));
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils;
-function orderByOrderPattern(arr, order) {
-    const arrWithoutDuplicates = [...new Set(arr)];
-    const ordered = order.filter((item) => arrWithoutDuplicates.includes(item));
-    const rest = arrWithoutDuplicates.filter((item) => !order.includes(item));
-    return [...ordered, ...rest];
-}
 /**
- * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+ * `PLUGIN` that provides framework for building media control UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  *
- * Configuration options:
+ * Configuration options (root level)
  *
- * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ * - `hideMediaControlDelay`: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
+ *
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the media control dashboard layout
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
  *
- * - `chromeless`: boolean
+ * - `chromeless`: boolean - `common` option, hides the media control UI
  */
 export class MediaControl extends UICorePlugin {
     // private advertisementPlaying = false
@@ -94,7 +80,7 @@ export class MediaControl extends UICorePlugin {
     currentDurationValue = 0;
     currentPositionValue = 0;
     currentSeekBarPercentage = 0;
-    disabledClickableList = [];
+    // private disabledClickableList: DisabledClickable[] = []
     displayedDuration = null;
     displayedPosition = null;
     displayedSeekBarPercentage = null;
@@ -119,7 +105,6 @@ export class MediaControl extends UICorePlugin {
     verticalVolume = false;
     $duration = null;
     $fullscreenToggle = null;
-    $multiCameraSelector = null;
     $playPauseToggle = null;
     $playStopToggle = null;
     $position = null;
@@ -147,6 +132,46 @@ export class MediaControl extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @returns  Default media control layout settings
+     * @remark
+     * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
+     * @example
+     * ```ts
+     * const settings = MediaControl.defaultSettings()
+     * settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
+     * ...
+     * new Player({
+     *   mediaControl: settings,
+     * })
+     * ```
+     */
+    static defaultSettings() {
+        return $.extend(true, {}, DEFAULT_SETTINGS);
+    }
+    /**
+     * Extend the default media control layout settings
+     * @param settings - Additional settings
+     * @returns The extended settings
+     * @remarks
+     * This method allows adding custom elements to the media control dashboard.
+     * The default settings are not modified.
+     * @example
+     * ```ts
+     * new Player({
+     *   mediaControl: MediaControl.extendSettings({
+     *     left: ['*'], // add all custom elements to the left panel
+     *   }),
+     * })
+     * ```
+     */
+    static extendSettings(settings) {
+        return {
+            left: mergeElements(DEFAULT_SETTINGS.left, settings.left ?? []),
+            right: mergeElements(DEFAULT_SETTINGS.right, settings.right ?? []),
+            default: mergeElements(DEFAULT_SETTINGS.default, settings.default ?? []),
+        };
+    }
     get disabled() {
         const playbackIsNOOP = this.core.activeContainer &&
             this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
@@ -410,9 +435,7 @@ export class MediaControl extends UICorePlugin {
         this.applyButtonStyle(this.$volumeIcon);
     }
     changeTogglePlay() {
-        // assert.ok(this.$playPauseToggle, 'play/pause toggle must be present');
         this.$playPauseToggle?.html('');
-        // assert.ok(this.$playStopToggle, 'play/stop toggle must be present');
         this.$playStopToggle?.html('');
         if (this.container && this.container.isPlaying()) {
             this.$playPauseToggle?.append(pauseIcon);
@@ -778,36 +801,32 @@ export class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
-        const newSettings = $.extend(true, {
+        // TODO use this.options.mediaControl to additionally filter the settings
+        const container = $.extend(true, {
             left: [],
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
-        newSettings.left.push('clips'); // TODO settings
-        // TODO make order controlled via CSS
-        newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], 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 = DEFAULT_SETTINGS.right; // TODO get from the options
+        container.left.push('volume');
+        const setup = this.options.mediaControl ?? DEFAULT_SETTINGS;
         if ((!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
             // remove fullscreen from settings if it is not available
-            removeArrayItem(newSettings.default, 'fullscreen');
-            removeArrayItem(newSettings.left, 'fullscreen');
-            removeArrayItem(newSettings.right, 'fullscreen');
+            removeArrayItem(container.default, 'fullscreen');
+            removeArrayItem(container.left, 'fullscreen');
+            removeArrayItem(container.right, 'fullscreen');
         }
-        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();
+            container.seekEnabled = this.isSeekEnabledForHtml5Playback();
+            // TODO remove seekbar if seek is disabled?
         }
-        const settingsChanged = !isEqualSettings(this.settings, newSettings);
+        container.left = evalSettings(container.left, setup.left);
+        container.right = evalSettings(container.right, setup.right);
+        container.default = evalSettings(container.default, setup.default);
+        const settingsChanged = !isEqualSettings(this.settings, container);
         if (settingsChanged) {
-            this.settings = newSettings;
+            this.settings = container;
             this.hasUpdate = true;
             this.render();
         }
@@ -833,15 +852,37 @@ export class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.resetIndicators();
         this.initializeIcons();
     }
     /**
-     * Get a media control element DOM node
+     * Mount a media control to its configured location
      * @param name - The name of the media control element
      * @param element - The DOM node/fragment to mount
-     * @deprecated Use {@link MediaControl.mount} instead
+     * @remarks
+     * Media controls layout is configured via {@link MediaControlSettings}.
+     * A plugin implementing custom elements on the media control dashboard,
+     * should use this method to mount the element to the correct location.
+     * The actual location is defined by the occurence of the element token in the `left`, `right` or `default` section
+     * of the {@link MediaControlSettings}.
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     // mount the element where it is configured in the layout
+     *     this.core.getPlugin('media_control').slot('my-element', this.$el)
+     *   }
+     * }
+     * ...
+     * Player.registerPlugin(MyPlugin)
+     * ...
+     * // Configuration of the media control layout
+     * new Player({
+     *   mediaControl: {
+     *     left: ['my-element'], // the element will be mounted to the left panel
+     *   },
+     * })
+     * ```
      */
     slot(name, element) {
         const panel = this.getElementLocation(name);
@@ -1061,7 +1102,6 @@ export class MediaControl extends UICorePlugin {
             return this;
         }
         const timeout = this.options.hideMediaControlDelay || 2000;
-        trace(`${T} render`, { settings: this.settings });
         this.$el.html(MediaControl.template({ settings: this.settings }));
         // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
         // this.$el.append(style[0]);
@@ -1158,22 +1198,6 @@ export class MediaControl extends UICorePlugin {
         }
         return 0;
     }
-    /**
-     * Enable the user interaction disabled earlier
-     */
-    enableControlButton() {
-        this.disabledClickableList.forEach((element) => {
-            element.el.css({ 'pointer-events': element.pointerEventValue });
-        });
-    }
-    /**
-     * Disable the user interaction for the control buttons
-     */
-    disabledControlButton() {
-        this.disabledClickableList.forEach((element) => {
-            element.el.css({ 'pointer-events': 'none' });
-        });
-    }
     // TODO drop
     isSeekEnabledForHtml5Playback() {
         if (this.core.getPlaybackType() === Playback.LIVE) {
@@ -1182,13 +1206,14 @@ export class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
-        if (this.settings.right?.includes(name)) {
-            return this.getRightPanel();
-        }
-        if (this.settings.left?.includes(name)) {
+        if (this.settings.left.includes(name) || this.settings.left.includes('*')) {
             return this.getLeftPanel();
         }
-        if (this.settings.default?.includes(name)) {
+        if (this.settings.right.includes(name) ||
+            this.settings.right.includes('*')) {
+            return this.getRightPanel();
+        }
+        if (this.settings.default.includes(name)) {
             return this.getCenterPanel();
         }
         return null;
@@ -1206,7 +1231,8 @@ MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
 function serializeSettings(s) {
-    return s.left.slice()
+    return s.left
+        .slice()
         .sort()
         .concat(s.right.slice().sort())
         .concat(s.default.slice().sort())
@@ -1221,3 +1247,22 @@ function mountTo(parent, element) {
         parent.append(element);
     }
 }
+function isStandardMediaControl(name) {
+    return STANDARD_MEDIA_CONTROL_ELEMENTS.includes(name);
+}
+function evalSettings(container, setup) {
+    return setup.filter((item) => {
+        if (isStandardMediaControl(item)) {
+            return container.includes(item);
+        }
+        return true;
+    });
+}
+function mergeElements(a, b) {
+    return b.reduce((acc, item) => {
+        if (!acc.includes(item)) {
+            acc.push(item);
+        }
+        return acc;
+    }, a);
+}

package/package.json

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

package/src/plugins/clips/Clips.ts

@@ -26,6 +26,8 @@ export interface ClipsPluginSettings {
 const VERSION = '2.22.16'
 const CLAPPR_VERSION = '0.11.4'
 
+const COMPACT_WIDTH = 495;
+
 /**
  * `PLUGIN` that allows marking up the timeline of the video
  * @beta
@@ -61,7 +63,7 @@ export class Clips extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: 'media-control-clips',
+      class: 'media-control-clips gplayer-mc-clips',
     }
   }
 
@@ -145,6 +147,7 @@ export class Clips extends UICorePlugin {
   private onContainerChanged() {
     trace(`${T} onContainerChanged`)
     // TODO figure out the conditions of changing the container (without destroying the previous one)
+    // probably it is the case with the MultiCamera plugin
     if (this.oldContainer) {
       this.stopListening(
         this.oldContainer,
@@ -162,13 +165,25 @@ export class Clips extends UICorePlugin {
       Events.CONTAINER_TIMEUPDATE,
       this.onTimeUpdate,
     )
+    this.toggleCompact()
   }
 
   private playerResize() {
     const duration = this.core.activeContainer.getDuration()
+    // TODO check
     if (duration) {
       this.makeSvg(duration)
     }
+    this.toggleCompact()
+  }
+
+  private toggleCompact() {
+    const elText = this.$el.find('#gplayer-mc-clips-text')
+    if (this.core.activeContainer.el.clientWidth <= COMPACT_WIDTH) {
+      elText.addClass('compact')
+    } else {
+      elText.removeClass('compact')
+    }
   }
 
   private onTimeUpdate(event: TimeProgress) {
@@ -218,7 +233,7 @@ export class Clips extends UICorePlugin {
 
   private setClipText(text: string) {
     if (text) {
-      this.$el.show().find('#clips-text').text(text)
+      this.$el.show().find('#gplayer-mc-clips-text').text(text)
     } else {
       this.$el.hide()
     }

package/src/plugins/clips/__tests__/Clips.test.ts

@@ -57,7 +57,7 @@ describe('Clips', () => {
         })
       })
       it(`text should be "${expected}"`, () => {
-        expect(clips.$el.find('#clips-text').text()).toBe(expected)
+        expect(clips.$el.find('#gplayer-mc-clips-text').text()).toBe(expected)
       })
     })
   })

package/src/plugins/clips/__tests__/__snapshots__/Clips.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Clips > should render indicator 1`] = `
-"<div class="media-clip-text" id="clips-text">Introduction</div><svg width="0" height="0">
+"<div class="gplayer-mc-clips-text compact" id="gplayer-mc-clips-text">Introduction</div><svg width="0" height="0">
 <defs>
 <clipPath id="myClip">
 <rect x="0" y="0" width="148" height="30"></rect>

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

@@ -131,7 +131,7 @@ export class DvrControls extends UICorePlugin {
     // TODO -> to MediaControl (auto hide)
     mediaControl.toggleElement('duration', false)
     mediaControl.toggleElement('position', false)
-    mediaControl.mount('left', this.$el) // TODO use independent mount point
+    mediaControl.slot('dvr', this.$el) // TODO use independent mount point
   }
 
   private onDvrStateChanged(dvrInUse: boolean) {

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

@@ -72,7 +72,7 @@ describe('DvrControls', () => {
         )
       })
       it('should mount to the media control', () => {
-        expect(mediaControl.mount).toHaveBeenCalledWith('left', dvrControls.$el)
+        expect(mediaControl.slot).toHaveBeenCalledWith('dvr', dvrControls.$el)
       })
       if (dvrEnabled) {
         if (dvrInUse) {