@gcorevideo/player 2.21.4 → 2.22.0

package/dist/plugins/index.js

@@ -10355,7 +10355,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";
 
@@ -10374,6 +10374,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
@@ -10388,7 +10394,8 @@ var MediaControlEvents;
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'live',
+    // 'live',
+    'dvr',
     'volume',
     'position',
     'duration',
@@ -10422,14 +10429,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;
@@ -10573,8 +10579,6 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        // @ts-ignore
-        this.stopListening();
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
         this.listenTo(this.core, Events.CORE_MOUSE_MOVE, this.show);
         this.listenTo(this.core, Events.CORE_MOUSE_LEAVE, () => this.hide(this.options.hideMediaControlDelay));
@@ -10611,8 +10615,8 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.updateSettings);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHdUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended);
@@ -10658,7 +10662,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() {
@@ -10667,8 +10677,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();
@@ -10856,17 +10864,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.CONTAINER_READY, () => {
-                    this.container.setVolume(value);
+                this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
+                    this.core.activeContainer.setVolume(value);
                 });
             }
         };
-        if (!this.container) {
+        if (!this.core.activeContainer) {
             this.listenToOnce(this, Events.MEDIACONTROL_CONTAINERCHANGED, () => setWhenContainerReady());
         }
         else {
@@ -10876,7 +10885,7 @@ class MediaControl extends UICorePlugin {
     toggleFullscreen() {
         if (!Browser.isMobile) {
             this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
-            this.container.fullscreen();
+            this.core.activeContainer.fullscreen();
             this.core.toggleFullscreen();
             this.resetUserKeepVisible();
         }
@@ -10888,6 +10897,7 @@ class MediaControl extends UICorePlugin {
         this.changeTogglePlay();
         this.bindContainerEvents();
         this.updateSettings();
+        // TODO remove
         this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -10912,7 +10922,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) {
@@ -10958,9 +10970,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;
         }
@@ -10987,16 +10999,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;
     }
@@ -11074,7 +11080,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',
@@ -11096,17 +11107,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');
@@ -11168,7 +11180,7 @@ class MediaControl extends UICorePlugin {
         const panel = this.getElementLocation(name);
         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) {
@@ -11182,16 +11194,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');
     }
@@ -11390,7 +11402,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();
@@ -11477,10 +11488,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';
 // TODO disabled if no items added
@@ -14576,7 +14604,7 @@ class ClipsPlugin extends UICorePlugin {
 
 const templateHtml$1 = "<ul class=\"context-menu-list\">\n    <% if(options) { %>\n        <% for (var i = 0; i < options.length; i++) { %>\n        <li class=\"context-menu-list-item <%= options[i].class %>\"\n            data-<%= options[i].name %>><%= options[i].label %></li>\n        <% } %>\n    <% } %>\n</ul>\n";
 
-var version$1 = "2.21.4";
+var version$1 = "2.22.0";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -14709,7 +14737,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';
 /**
@@ -14754,7 +14782,6 @@ class DvrControls extends UICorePlugin {
     get attributes() {
         return {
             class: 'dvr-controls',
-            'data-dvr-controls': '',
         };
     }
     /**
@@ -14762,37 +14789,17 @@ class DvrControls extends UICorePlugin {
      */
     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);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-        this.settingsUpdate();
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        // MediaControl has been rendered
+        this.render();
     }
     bindContainerEvents() {
         this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
-    }
-    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;
@@ -14801,13 +14808,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
@@ -14817,16 +14819,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;
     }
 }

package/lib/plugins/dvr-controls/DvrControls.d.ts

@@ -37,7 +37,6 @@ export declare class DvrControls extends UICorePlugin {
      */
     get attributes(): {
         class: string;
-        'data-dvr-controls': string;
     };
     /**
      * @internal
@@ -45,9 +44,7 @@ export declare class DvrControls extends UICorePlugin {
     bindEvents(): void;
     private onCoreReady;
     private bindContainerEvents;
-    private onDvrChanged;
     private click;
-    private settingsUpdate;
     private shouldRender;
     /**
      * @internal

package/lib/plugins/dvr-controls/DvrControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DvrControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/dvr-controls/DvrControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAY,MAAM,cAAc,CAAA;AAM7E,OAAO,gDAAgD,CAAA;AAMvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;IAKpB;;OAEG;IACM,MAAM;CAoBhB"}
+{"version":3,"file":"DvrControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/dvr-controls/DvrControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAY,MAAM,cAAc,CAAA;AAM7E,OAAO,gDAAgD,CAAA;AAMvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACM,MAAM;CAyBhB"}

package/lib/plugins/dvr-controls/DvrControls.js

@@ -47,7 +47,6 @@ export class DvrControls extends UICorePlugin {
     get attributes() {
         return {
             class: 'dvr-controls',
-            'data-dvr-controls': '',
         };
     }
     /**
@@ -55,40 +54,18 @@ export class DvrControls extends UICorePlugin {
      */
     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);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-        this.settingsUpdate();
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        // MediaControl has been rendered
+        this.render();
     }
     bindContainerEvents() {
+        trace(`${T} bindContainerEvents`);
         this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
-    }
-    onDvrChanged(dvrInUse) {
-        trace(`${T} onDvrChanged`, {
-            dvrInUse,
-        });
-        if (this.core.getPlaybackType() !== Playback.LIVE) {
-            return;
-        }
-        this.render();
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.addClass('live');
-        if (dvrInUse) {
-            mediaControl.$el
-                .addClass('dvr')
-                .find(
-            // TODO add API, test
-            '.media-control-indicator[data-position], .media-control-indicator[data-duration]')
-                .hide();
-        }
-        else {
-            mediaControl.$el.removeClass('dvr');
-        }
     }
     click() {
         const container = this.core.activeContainer;
@@ -97,13 +74,8 @@ export 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
@@ -113,16 +85,19 @@ export 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;
     }
 }

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

@@ -5,7 +5,7 @@ import '../../../assets/media-control/media-control.scss';
  * Media control elements, mount points for additional plugins
  * @beta
  */
-export type MediaControlElement = 'audiotracks' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer' | 'cc';
+export type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'gear' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer';
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -37,7 +37,6 @@ export declare class MediaControl extends UICorePlugin {
     private hideId;
     private hideVolumeId;
     private intendedVolume;
-    private isHD;
     private keepVisible;
     private kibo;
     private lastMouseX;
@@ -198,8 +197,6 @@ export declare class MediaControl extends UICorePlugin {
     private renderSeekBar;
     private drawDurationAndPosition;
     private seek;
-    private setKeepVisible;
-    private resetKeepVisible;
     private setUserKeepVisible;
     private resetUserKeepVisible;
     private isVisible;
@@ -207,7 +204,7 @@ export declare class MediaControl extends UICorePlugin {
     private hide;
     private updateCursorStyle;
     private updateSettings;
-    private highDefinitionUpdate;
+    private onHdUpdate;
     private createCachedElements;
     /**
      * Get a media control element DOM node
@@ -231,16 +228,14 @@ export declare class MediaControl extends UICorePlugin {
     getElement(name: MediaControlElement): ZeptoResult | null;
     putElement(name: MediaControlElement, element: HTMLElement): void;
     /**
-     * Get the right panel area to append custom elements to
-     * @returns  ZeptoSelector of the right panel element
-     */
-    getRightPanel(): any;
-    /**
-     * Get the left panel area to append custom elements to
-     * @returns  ZeptoSelector of the left 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
      */
-    getLeftPanel(): any;
-    getCenterPanel(): any;
+    toggleElement(name: MediaControlElement, show: boolean): void;
+    private getRightPanel;
+    private getLeftPanel;
+    private getCenterPanel;
     private resetIndicators;
     private initializeIcons;
     private setSeekPercentage;
@@ -275,5 +270,6 @@ export declare class MediaControl extends UICorePlugin {
     disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;
     private getElementLocation;
+    private onDvrStateChanged;
 }
 //# sourceMappingURL=MediaControl.d.ts.map

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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"}