@gcorevideo/player 2.22.15 → 2.22.16

package/dist/plugins/index.js

@@ -9765,13 +9765,13 @@ function ifError(err) {
 
 // assert(process.env.CLAPPR_VERSION, 'CLAPPR_VERSION is required');
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
-const CLAPPR_VERSION = '0.11.3';
+const CLAPPR_VERSION$1 = '0.11.3';
 
 const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
 
-const VERSION$6 = '2.22.4';
+const VERSION$7 = '2.22.4';
 // const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
@@ -9796,13 +9796,13 @@ class AudioTracks extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
      */
     static get version() {
-        return VERSION$6;
+        return VERSION$7;
     }
     static template = tmpl(pluginHtml$7);
     /**
@@ -9965,7 +9965,7 @@ class BigMuteButton extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     static template = tmpl(pluginHtml$6);
     /**
@@ -10086,7 +10086,7 @@ const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"n
 
 const gearHdIcon = "<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_1567)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n    <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n    <path\n      d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1567\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
-const VERSION$5 = '2.19.12';
+const VERSION$6 = '2.19.12';
 /**
  * Events triggered by the plugin
  * @beta
@@ -10179,13 +10179,13 @@ class BottomGear extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
      */
     static get version() {
-        return VERSION$5;
+        return VERSION$6;
     }
     static template = tmpl(pluginHtml$5);
     /**
@@ -12483,7 +12483,7 @@ class ClapprNerdStats extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     static template = tmpl(pluginHtml$4);
     /**
@@ -12738,7 +12738,7 @@ class ClapprStats extends ContainerPlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     get _playbackName() {
         return String(this.container.playback.name || '');
@@ -13077,7 +13077,7 @@ class ClickToPause extends ContainerPlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -13127,7 +13127,15 @@ class ClickToPause extends ContainerPlugin {
     }
 }
 
-function strtimeToMiliseconds(str) {
+/**
+ * Parse a time string in the format "hh:mm:ss" or "mm:ss" or "ss" to seconds.
+ * @param str - The time string to parse.
+ * @returns The time in seconds.
+ * @example "01:01:00" -> 3660
+ * @example "01:00" -> 60
+ * @example "33" -> 33
+ */
+function parseClipTime(str) {
     if (!str) {
         return 0;
     }
@@ -13136,21 +13144,12 @@ function strtimeToMiliseconds(str) {
     if (arr.length >= 3) {
         h = parseInt(arr[arr.length - 3]) * 60 * 60;
     }
-    else {
-        h = 0;
-    }
     if (arr.length >= 2) {
         m = parseInt(arr[arr.length - 2]) * 60;
     }
-    else {
-        m = 0;
-    }
     if (arr.length >= 1) {
         s = parseInt(arr[arr.length - 1]);
     }
-    else {
-        s = 0;
-    }
     return (h + m + s);
 }
 function getPageX(event) {
@@ -13163,22 +13162,64 @@ function getPageX(event) {
     return 0;
 }
 
+function parseClips(text) {
+    const clipsArr = text
+        .split('\n')
+        .map((val) => {
+        const matchRes = val.match(/(((\d+:)?\d+:)?\d+) (.+)/i);
+        return matchRes
+            ? {
+                start: parseClipTime(matchRes[1]),
+                text: matchRes[4],
+            }
+            : null;
+    })
+        .filter((clip) => clip !== null)
+        .sort((a, b) => a.start - b.start);
+    return clipsArr.map((clip, index) => ({
+        start: clip.start,
+        text: clip.text,
+        end: index < clipsArr.length - 1 ? clipsArr[index + 1].start : 0,
+    }));
+}
+function buildSvg(clips, duration, barWidth) {
+    let svg = '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n';
+    let rightEdge = 0;
+    clips.forEach((val) => {
+        const end = val.end || duration;
+        const chunkWidth = Math.round(((end - val.start) * barWidth) / duration);
+        svg += `<rect x="${rightEdge}" y="0" width="${chunkWidth - 2}" height="30"/>\n`;
+        rightEdge += chunkWidth;
+    });
+    if (rightEdge < barWidth) {
+        svg += `<rect x="${rightEdge}" y="0" width="${barWidth - rightEdge}" height="30"/>\n`;
+    }
+    svg += '</clipPath>' + '</defs>' + '</svg>';
+    return svg;
+}
+
+const clipsHTML = "<div class=\"media-clip-text\" id=\"clips-text\"></div>";
+
+const VERSION$5 = '2.22.16';
+const CLAPPR_VERSION = '0.11.4';
 /**
- * `PLUGIN` that shows text over the seekbar to indicate the current clip.
+ * `PLUGIN` that allows marking up the timeline of the video
  * @beta
  * @remarks
+ * The plugin decorates the seekbar with notches to indicate the clips of the video and displays current clip text in the left panel
+ *
  * Depends on:
  *
  * - {@link MediaControl}
  *
  * Configuration options - {@link ClipsPluginSettings}
  */
-class ClipsPlugin extends UICorePlugin {
-    clips = new Map();
-    duration = 0;
-    durationGetting = false;
-    _oldContainer;
+class Clips extends UICorePlugin {
+    barStyle = null;
+    clips = [];
+    oldContainer;
     svgMask = null;
+    static template = tmpl(clipsHTML);
     /**
      * @internal
      */
@@ -13190,130 +13231,117 @@ class ClipsPlugin extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'media-control-clips',
         };
     }
+    get version() {
+        return VERSION$5;
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
     /**
      * @internal
      */
     bindEvents() {
-        const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
-        this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady);
-        // TODO listen to CORE_ACTIVE_CONTAINER_CHANGED
-        this.listenTo(mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
-    _onCoreReady() {
+    render() {
         if (!this.options.clips) {
-            this.destroy();
-            return;
+            return this;
         }
-        this.parseClips();
-    }
-    _onMediaControlContainerChanged() {
-        this._bindContainerEvents();
+        this.$el.html(Clips.template());
+        this.$el.hide();
+        return this;
     }
-    playerResize() {
-        this.durationGetting = false;
-        if (this.durationGetting) {
-            this.makeSvg(this.duration);
+    destroy() {
+        if (this.barStyle) {
+            this.barStyle.remove();
+            this.barStyle = null;
         }
+        return super.destroy();
     }
-    _bindContainerEvents() {
-        if (this._oldContainer) {
-            this.stopListening(this._oldContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+    disable() {
+        if (this.barStyle) {
+            this.barStyle.remove();
+            this.barStyle = null;
         }
+        return super.disable();
+    }
+    enable() {
+        this.render();
+        return super.enable();
+    }
+    onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
-        this._oldContainer = mediaControl.container;
-        this.durationGetting = false;
-        this.listenTo(mediaControl.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        assert(mediaControl, 'media_control plugin is required');
+        this.parseClips(this.options.clips.text);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.onMcRender);
+    }
+    onMcRender() {
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.mount('clips', this.$el);
+    }
+    onContainerChanged() {
+        // TODO figure out the conditions of changing the container (without destroying the previous one)
+        if (this.oldContainer) {
+            this.stopListening(this.oldContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        }
+        this.oldContainer = this.core.activeContainer;
+        if (this.svgMask) {
+            this.svgMask.remove();
+            this.svgMask = null;
+        }
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+    }
+    playerResize() {
+        const duration = this.core.activeContainer.getDuration();
+        if (duration) {
+            this.makeSvg(duration);
+        }
     }
     onTimeUpdate(event) {
-        if (!this.durationGetting) {
-            this.duration = event.total;
+        if (!this.svgMask) {
             this.makeSvg(event.total);
-            this.durationGetting = true;
         }
-        for (const value of this.clips.values()) {
-            if (event.current >= value.start && event.current < value.end) {
+        for (const value of this.clips) {
+            if ((event.current >= value.start && !value.end) ||
+                event.current < value.end) {
                 this.setClipText(value.text);
                 break;
             }
         }
     }
-    parseClips() {
-        const textArr = this.options.clips.text.split('\n');
-        const clipsArr = textArr
-            .map((val) => {
-            const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i);
-            return matchRes
-                ? {
-                    start: strtimeToMiliseconds(matchRes[1]),
-                    text: matchRes[2],
-                }
-                : null;
-        })
-            .filter((clip) => clip !== null);
-        clipsArr.sort((a, b) => a.start - b.start);
-        clipsArr.forEach((clip, index) => {
-            this.clips.set(clip.start, {
-                index,
-                start: clip.start,
-                text: clip.text,
-                end: clipsArr[index + 1] ? clipsArr[index + 1].start : null,
-            });
-        });
-    }
-    /**
-     * Returns the text of the current clip.
-     * @param time - The current time of the player.
-     * @returns The text of the current clip.
-     */
-    getText(time) {
-        for (const [key, value] of this.clips.entries()) {
-            if (time >= value.start && time < value.end) {
-                return value.text;
-            }
-        }
-        return '';
+    parseClips(text) {
+        this.clips = parseClips(text);
     }
     makeSvg(duration) {
-        let svg = '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n';
-        const widthOfSeek = this.core.activeContainer.$el.width();
-        let finishValue = 0;
-        this.clips.forEach((val) => {
-            let end = val.end;
-            if (!end) {
-                end = val.end = duration;
-            }
-            const widthChunk = ((end - val.start) * widthOfSeek) / duration;
-            svg += `<rect x="${finishValue}" y="0" width="${widthChunk - 2}" height="30"/>\n`;
-            finishValue += widthChunk;
-        });
-        svg += `<rect x="${finishValue}" y="0" width="${widthOfSeek - finishValue}" height="30"/>\n`;
-        svg += '</clipPath>' + '</defs>' + '</svg>';
+        const svg = buildSvg(this.clips, duration, this.core.activeContainer.$el.width());
         this.setSVGMask(svg);
     }
     setSVGMask(svg) {
-        // this.core.mediaControl.setSVGMask(svg);
         if (this.svgMask) {
             this.svgMask.remove();
         }
-        const mediaControl = this.core.getPlugin('media_control');
-        const $seekBarContainer = mediaControl.getElement('seekBarContainer');
-        if ($seekBarContainer?.get(0)) {
-            $seekBarContainer.addClass('clips');
-        }
         this.svgMask = $(svg);
-        $seekBarContainer?.append(this.svgMask);
+        this.$el.append(this.svgMask);
+        if (!this.barStyle) {
+            this.barStyle = document.createElement('style');
+            this.barStyle.textContent = `
+.bar-container[data-seekbar] {
+  clip-path: url("#myClip");
+}`;
+            this.$el.append(this.barStyle);
+        }
     }
     setClipText(text) {
-        const mediaControl = this.core.getPlugin('media_control');
-        const $clipText = mediaControl.getElement('clipText');
-        if ($clipText && text) {
-            $clipText.show();
-            $clipText.text(`${text}`);
+        if (text) {
+            this.$el.show().find('#clips-text').text(text);
+        }
+        else {
+            this.$el.hide();
         }
     }
 }
@@ -13340,7 +13368,7 @@ class ContextMenu extends UIContainerPlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -13461,7 +13489,7 @@ class DvrControls extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -13567,7 +13595,7 @@ class ErrorScreen extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     static template = tmpl(templateHtml);
     /**
@@ -13688,7 +13716,7 @@ class Favicon extends CorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -13780,7 +13808,7 @@ class GoogleAnalytics extends ContainerPlugin {
         return 'google_analytics';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     constructor(container) {
         super(container);
@@ -13927,7 +13955,7 @@ class Logo extends UIContainerPlugin {
         return 'logo';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     get template() {
         return tmpl(logoHTML);
@@ -14316,7 +14344,7 @@ const FullscreenIOS = {
     },
 };
 
-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        <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 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 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\" || setting === \"clips\") {\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 ([\"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 volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -14406,8 +14434,6 @@ class MediaControl extends UICorePlugin {
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
-    $clipText = null;
-    $clipTextContainer = null;
     $duration = null;
     $fullscreenToggle = null;
     $multiCameraSelector = null;
@@ -14436,7 +14462,7 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     get disabled() {
         const playbackIsNOOP = this.core.activeContainer &&
@@ -14598,7 +14624,7 @@ class MediaControl extends UICorePlugin {
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
-        this.$el.hide();
+        this.$el.hide(); // TODO why?
     }
     /**
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
@@ -15054,16 +15080,16 @@ class MediaControl extends UICorePlugin {
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
+        newSettings.left.push('clips'); // TODO
         // TODO make order controlled via CSS
-        newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
+        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
-        if ((!this.fullScreenOnVideoTagSupported &&
-            !fullscreenEnabled()) ||
+        if ((!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
             trace(`${T$a} updateSettings removing fullscreen`, {
                 supported: this.fullScreenOnVideoTagSupported,
@@ -15109,8 +15135,6 @@ class MediaControl extends UICorePlugin {
         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.$clipText = this.$el.find('.media-clip-text[data-clipstext]'); // TODO
-        this.$clipTextContainer = this.$el.find('.media-clip-container[data-clipstext]');
         this.resetIndicators();
         this.initializeIcons();
     }
@@ -15125,25 +15149,14 @@ class MediaControl extends UICorePlugin {
      * ```ts
      * class MyPlugin extends UICorePlugin {
      *   override render() {
-     *     const mediaControl = this.core.getPlugin('media_control')
-     *     const clipText = mediaControl.getElement('clipText')
-     *     clipText?.el.text('Here we go')
+     *     this.$el.html('<div data-clips>Here we go</div>')
+     *     this.core.getPlugin('media_control').mount('clips', this.$el)
      *     return this
      *   }
      * }
      * ```
      */
-    getElement(name) {
-        switch (name) {
-            case 'audiotracks':
-                return null;
-            case 'clipText':
-                return this.$clipText;
-            case 'seekBarContainer':
-                return this.$seekBarContainer;
-        }
-    }
-    putElement(name, element) {
+    mount(name, element) {
         const panel = this.getElementLocation(name);
         if (panel) {
             const current = panel.find(`[data-${name}]`);
@@ -15161,6 +15174,9 @@ class MediaControl extends UICorePlugin {
             return;
         }
     }
+    putElement(name, element) {
+        this.mount(name, element);
+    }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
@@ -15210,11 +15226,11 @@ class MediaControl extends UICorePlugin {
         if (!this.settings.seekEnabled) {
             return;
         }
-        const currentTime = this.container.getCurrentTime();
-        const duration = this.container.getDuration();
+        const currentTime = this.core.activeContainer.getCurrentTime();
+        const duration = this.core.activeContainer.getDuration();
         let position = Math.min(Math.max(currentTime + delta, 0), duration);
         position = Math.min((position * 100) / duration, 100);
-        this.container.seekPercentage(position);
+        this.core.activeContainer.seekPercentage(position);
     }
     bindKeyAndShow(key, callback) {
         // TODO or boolean return type
@@ -15332,7 +15348,10 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$a} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded });
+        trace(`${T$a} render`, {
+            needsUpdate: this.hasUpdate,
+            metadataLoaded: this.metadataLoaded,
+        });
         if (!this.hasUpdate || !this.metadataLoaded) {
             return this;
         }
@@ -15487,8 +15506,7 @@ 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())
@@ -15520,7 +15538,7 @@ class MultiCamera extends UICorePlugin {
         return 'multicamera';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     static get version() {
         return VERSION$4;
@@ -15873,7 +15891,7 @@ class PictureInPicture extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -16024,7 +16042,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     static buttonTemplate = tmpl(buttonHtml$1);
     static listTemplate = tmpl(listHtml$1);
@@ -16302,7 +16320,7 @@ class Poster extends UIContainerPlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     static template = tmpl(posterHTML);
     get shouldRender() {
@@ -16524,7 +16542,7 @@ class Poster extends UIContainerPlugin {
 
 const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\">\n    <span class=\"gear-option_icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('quality') %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
 
-const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"level-selector-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('quality') %>\n</button>\n<ul class=\"gear-sub-menu quality-levels\" id=\"level-selector-menu\" role=\"menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-id=\"-1\" id=\"level_selector_auto\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= i18n.t('auto') %>\n            </a>\n        </li>\n    <% } %>\n    <% for (const item of levels.slice().reverse()) {\n        var disabled = maxLevel >= 0 && item.level > maxLevel\n        var checked = item.level === current\n    %>\n        <li class=\"<%= disabled ? ' disabled' : ''%><%=checked ? ' current' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\n                data-disabled=\"<%= disabled %>\"\n                data-checked=\"<%= checked %>\"\n                role=\"menuitemradio\"\n                id=\"level_selector_<%= item.width > item.height ? item.height : item.width %>\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[item.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
+const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"level-selector-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('quality') %>\n</button>\n<ul class=\"gear-sub-menu quality-levels\" id=\"level-selector-menu\" role=\"menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color\"\n                data-id=\"-1\"\n                id=\"level_selector_auto\"\n               aria-checked=\"<%= current === -1 %>\"\n               role=\"menuitemradio\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= i18n.t('auto') %>\n            </a>\n        </li>\n    <% } %>\n    <% for (const item of levels.slice().reverse()) {\n        var disabled = maxLevel >= 0 && item.level > maxLevel\n        var checked = item.level === current\n    %>\n        <li class=\"<%= disabled ? ' disabled' : ''%><%=checked ? ' current' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\n                aria-disabled=\"<%= disabled %>\"\n                aria-checked=\"<%= checked %>\"\n                role=\"menuitemradio\"\n                id=\"level_selector_<%= item.width > item.height ? item.height : item.width %>\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[item.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
 
 const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -16574,7 +16592,7 @@ class QualityLevels extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -16806,7 +16824,7 @@ class SeekTime extends UICorePlugin {
         return 'seek_time';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     get template() {
         return tmpl(seekTimeHTML);
@@ -16968,7 +16986,7 @@ class Share extends UICorePlugin {
         return 'share';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     get template() {
         return tmpl(pluginHtml$2);
@@ -17087,7 +17105,7 @@ class SkipTime extends UICorePlugin {
         return 'skip_time';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     get container() {
         return this.core && this.core.activeContainer;
@@ -17226,7 +17244,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -17457,7 +17475,7 @@ class SourceController extends CorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @param core - The Clappr core instance.
@@ -17633,7 +17651,7 @@ class ClosedCaptions extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -17969,7 +17987,7 @@ class Telemetry extends ContainerPlugin {
      * The supported version of the plugin.
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     started = false;
     timeStart = 0;
@@ -18255,7 +18273,7 @@ class Thumbnails extends UICorePlugin {
      * @internal
      */
     get supportedVersion() {
-        return { min: CLAPPR_VERSION };
+        return { min: CLAPPR_VERSION$1 };
     }
     /**
      * @internal
@@ -18750,4 +18768,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };