@gcorevideo/player 2.21.4 → 2.22.0

package/dist/index.js

@@ -43300,7 +43300,7 @@ class Player {
     }
 }
 
-var version$1 = "2.21.4";
+var version$1 = "2.22.0";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43921,7 +43921,7 @@ function getPageX(event) {
     return 0;
 }
 
-const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else if (setting === \"fullscreen\") {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
+const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
 
 const playIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_28_1564)\">\n    <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1564\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -43940,6 +43940,12 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
+const DEFAULT_SETTINGS = {
+    left: [],
+    right: [],
+    default: [],
+    seekEnabled: true,
+};
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -43955,7 +43961,8 @@ const T$e = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'live',
+    // 'live',
+    'dvr',
     'volume',
     'position',
     'duration',
@@ -43989,14 +43996,13 @@ 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;
@@ -44140,8 +44146,6 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        // @ts-ignore
-        this.stopListening();
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
         this.listenTo(this.core, Events$1.CORE_MOUSE_MOVE, this.show);
         this.listenTo(this.core, Events$1.CORE_MOUSE_LEAVE, () => this.hide(this.options.hideMediaControlDelay));
@@ -44178,8 +44182,8 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_SETTINGSUPDATE, this.updateSettings);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.updateSettings);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.onHdUpdate);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MEDIACONTROL_DISABLE, this.disable);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MEDIACONTROL_ENABLE, this.enable);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_ENDED, this.ended);
@@ -44227,7 +44231,13 @@ 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() {
@@ -44236,8 +44246,6 @@ 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();
@@ -44426,17 +44434,18 @@ 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$1.CONTAINER_READY, () => {
-                    this.container.setVolume(value);
+                this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_READY, () => {
+                    this.core.activeContainer.setVolume(value);
                 });
             }
         };
-        if (!this.container) {
+        if (!this.core.activeContainer) {
             this.listenToOnce(this, Events$1.MEDIACONTROL_CONTAINERCHANGED, () => setWhenContainerReady());
         }
         else {
@@ -44446,7 +44455,7 @@ class MediaControl extends UICorePlugin {
     toggleFullscreen() {
         if (!Browser.isMobile) {
             this.trigger(Events$1.MEDIACONTROL_FULLSCREEN, this.name);
-            this.container.fullscreen();
+            this.core.activeContainer.fullscreen();
             this.core.toggleFullscreen();
             this.resetUserKeepVisible();
         }
@@ -44458,6 +44467,7 @@ class MediaControl extends UICorePlugin {
         this.changeTogglePlay();
         this.bindContainerEvents();
         this.updateSettings();
+        // TODO remove
         this.core.activeContainer.trigger(Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -44482,7 +44492,9 @@ class MediaControl extends UICorePlugin {
         seekTimePlugin?.$el.find('span').addClass('gcore-skin-text-color');
     }
     showVolumeBar() {
-        this.hideVolumeId && clearTimeout(this.hideVolumeId);
+        if (this.hideVolumeId) {
+            clearTimeout(this.hideVolumeId);
+        }
         this.$volumeBarContainer?.removeClass('volume-bar-hide');
     }
     hideVolumeBar(timeout = 400) {
@@ -44528,9 +44540,9 @@ 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;
         }
@@ -44557,16 +44569,10 @@ 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;
     }
@@ -44644,7 +44650,12 @@ 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',
@@ -44666,17 +44677,18 @@ 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');
@@ -44739,7 +44751,7 @@ class MediaControl extends UICorePlugin {
         trace(`${T$e} 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) {
@@ -44753,16 +44765,16 @@ 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');
     }
@@ -44961,7 +44973,6 @@ 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();
@@ -45048,10 +45059,27 @@ 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(',');
+}
 
 const VERSION$5 = '2.19.12';
 const T$d = 'plugins.bottom_gear';
@@ -48275,7 +48303,7 @@ class ContextMenu extends UIContainerPlugin {
     };
 }
 
-const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
+const dvrHTML = "<div class=\"live-info\" id=\"media-control-live\"><%= i18n.t('live') %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= i18n.t('back_to_live') %>\" id=\"media-control-back-to-live\"><%= i18n.t('back_to_live') %></button>\n";
 
 const T$b = 'plugins.dvr_controls';
 /**
@@ -48320,7 +48348,6 @@ class DvrControls extends UICorePlugin {
     get attributes() {
         return {
             class: 'dvr-controls',
-            'data-dvr-controls': '',
         };
     }
     /**
@@ -48328,40 +48355,18 @@ class DvrControls extends UICorePlugin {
      */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.render);
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.settingsUpdate);
-        this.settingsUpdate();
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
+        // MediaControl has been rendered
+        this.render();
     }
     bindContainerEvents() {
+        trace(`${T$b} bindContainerEvents`);
         this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.render);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
-    }
-    onDvrChanged(dvrInUse) {
-        trace(`${T$b} 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');
-        }
     }
     click() {
         const container = this.core.activeContainer;
@@ -48370,13 +48375,8 @@ class DvrControls extends UICorePlugin {
         }
         container.seek(container.getDuration());
     }
-    settingsUpdate() {
-        this.core.getPlugin('media_control').$el.removeClass('live');
-        this.render();
-    }
     shouldRender() {
-        const useDvrControls = this.core.options.useDvrControls !== false;
-        return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
+        return this.core.getPlaybackType() === Playback.LIVE;
     }
     /**
      * @internal
@@ -48386,16 +48386,19 @@ class DvrControls extends UICorePlugin {
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
             playbackType: this.core.getPlaybackType(),
         });
+        const mediaControl = this.core.getPlugin('media_control');
+        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');
-        mediaControl.$el.addClass('live');
-        mediaControl.getLeftPanel().append(this.$el);
+        mediaControl.putElement('dvr', this.el);
         return this;
     }
 }