@gcorevideo/player 2.22.15 → 2.22.17

package/lib/plugins/clips/Clips.d.ts

@@ -1,31 +1,34 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/clips/clips.scss';
 /**
- * Configuration options for the {@link ClipsPlugin | clips} plugin.
+ * Configuration options for the {@link ClipsPlugin} plugin.
  * @beta
  */
 export interface ClipsPluginSettings {
     /**
-     * The text to display over the seekbar.
+     * The compiled text of the clips description, one clip per line in format  :
+     * `HH:MM:SS text` or `MM:SS text` or `SS text`
      */
     text: string;
 }
 /**
- * `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}
  */
-export declare class ClipsPlugin extends UICorePlugin {
+export declare class Clips extends UICorePlugin {
+    private barStyle;
     private clips;
-    private duration;
-    private durationGetting;
-    private _oldContainer;
+    private oldContainer;
     private svgMask;
+    private static readonly template;
     /**
      * @internal
      */
@@ -36,22 +39,24 @@ export declare class ClipsPlugin extends UICorePlugin {
     get attributes(): {
         class: string;
     };
+    get version(): string;
+    get supportedVersion(): {
+        min: string;
+    };
     /**
      * @internal
      */
     bindEvents(): void;
-    private _onCoreReady;
-    private _onMediaControlContainerChanged;
+    render(): this;
+    destroy(): import("@clappr/core").UIObject;
+    disable(): void;
+    enable(): void;
+    private onCoreReady;
+    private onMcRender;
+    private onContainerChanged;
     private playerResize;
-    private _bindContainerEvents;
     private onTimeUpdate;
     private parseClips;
-    /**
-     * Returns the text of the current clip.
-     * @param time - The current time of the player.
-     * @returns The text of the current clip.
-     */
-    getText(time: number): string;
     private makeSvg;
     private setSVGMask;
     private setClipText;

package/lib/plugins/clips/Clips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clips.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/Clips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAK,MAAM,cAAc,CAAA;AAKjE,OAAO,kCAAkC,CAAA;AAezC;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,KAAK,CAAmC;IAEhD,OAAO,CAAC,QAAQ,CAAY;IAE5B,OAAO,CAAC,eAAe,CAAQ;IAE/B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,OAAO,CAA2B;IAE1C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACM,UAAU;IAanB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,+BAA+B;IAIvC,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IA4BlB;;;;OAIG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM;IASpB,OAAO,CAAC,OAAO;IA4Bf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,WAAW;CAQpB"}
+{"version":3,"file":"Clips.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/Clips.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAe,MAAM,cAAc,CAAA;AAM3E,OAAO,kCAAkC,CAAA;AAOzC;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAKD;;;;;;;;;;;GAWG;AACH,qBAAa,KAAM,SAAQ,YAAY;IACrC,OAAO,CAAC,QAAQ,CAAgC;IAEhD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,YAAY,CAAuB;IAE3C,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAsB;IAEtD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,IAAI,OAAO,WAEV;IAED,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACM,UAAU;IAUV,MAAM;IAUN,OAAO;IAQP,OAAO;IAQP,MAAM;IAKf,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,WAAW;CAOpB"}

package/lib/plugins/clips/Clips.js

@@ -1,23 +1,30 @@
-import { Events, UICorePlugin, $ } from '@clappr/core';
-import { strtimeToMiliseconds } from '../utils.js';
-import '../../../assets/clips/clips.scss';
+import { Events, UICorePlugin, $, template } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
 import assert from 'assert';
+import '../../../assets/clips/clips.scss';
+import { buildSvg, parseClips } from './utils.js';
+import clipsHTML from '../../../assets/clips/clips.ejs';
+const T = 'plugins.clips';
+const VERSION = '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}
  */
-export class ClipsPlugin extends UICorePlugin {
-    clips = new Map();
-    duration = 0;
-    durationGetting = false;
-    _oldContainer;
+export class Clips extends UICorePlugin {
+    barStyle = null;
+    clips = [];
+    oldContainer;
     svgMask = null;
+    static template = template(clipsHTML);
     /**
      * @internal
      */
@@ -29,130 +36,121 @@ export class ClipsPlugin extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'media-control-clips',
         };
     }
+    get version() {
+        return VERSION;
+    }
+    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() {
+        trace(`${T} render`);
         if (!this.options.clips) {
-            this.destroy();
-            return;
+            return this;
         }
-        this.parseClips();
+        this.$el.html(Clips.template());
+        this.$el.hide();
+        return this;
     }
-    _onMediaControlContainerChanged() {
-        this._bindContainerEvents();
-    }
-    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() {
+        trace(`${T} onCoreReady`);
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.parseClips(this.options.clips.text);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.onMcRender);
+    }
+    onMcRender() {
+        trace(`${T} onMcRender`);
         const mediaControl = this.core.getPlugin('media_control');
-        this._oldContainer = mediaControl.container;
-        this.durationGetting = false;
-        this.listenTo(mediaControl.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        mediaControl.mount('clips', this.$el);
+    }
+    onContainerChanged() {
+        trace(`${T} 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();
         }
     }
 }

package/lib/plugins/clips/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Clip description.
+ * @beta
+ */
+export type ClipDesc = {
+    /**
+     * Start time of the clip in the video timeline, s.
+     */
+    start: number;
+    /**
+     * Text to display over the seekbar.
+     */
+    text: string;
+    /**
+     * End time of the clip (start time of the next clip).
+     */
+    end: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/plugins/clips/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;CAKZ,CAAA"}

package/lib/plugins/clips/types.js

@@ -0,0 +1 @@
+export {};

package/lib/plugins/clips/utils.d.ts

@@ -0,0 +1,4 @@
+import { ClipDesc } from './types.js';
+export declare function parseClips(text: string): ClipDesc[];
+export declare function buildSvg(clips: ClipDesc[], duration: number, barWidth: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/plugins/clips/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/clips/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAQrC,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAmBnD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAwBtF"}

package/lib/plugins/clips/utils.js

@@ -0,0 +1,36 @@
+import { parseClipTime } from '../utils.js';
+export 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,
+    }));
+}
+export 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;
+}

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

@@ -5,7 +5,7 @@ import '../../../assets/media-control/media-control.scss';
  * Media control elements that appear in the left area.
  * @beta
  */
-export type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume';
+export type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume' | 'clips';
 /**
  * Media control elements that appear in main layer, spanning the entire width of the player.
  * @beta
@@ -74,8 +74,6 @@ export declare class MediaControl extends UICorePlugin {
     private userDisabled;
     private userKeepVisible;
     private verticalVolume;
-    private $clipText;
-    private $clipTextContainer;
     private $duration;
     private $fullscreenToggle;
     private $multiCameraSelector;
@@ -241,15 +239,14 @@ export declare 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: MediaControlElement): ZeptoResult | null;
+    mount(name: MediaControlElement, element: ZeptoResult): void;
     putElement(name: MediaControlElement, element: ZeptoResult): void;
     /**
      * Toggle the visibility of a media control element

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

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

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

@@ -22,9 +22,7 @@ import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
 const DEFAULT_SETTINGS = {
     default: [],
-    left: [
-        'dvr'
-    ],
+    left: ['dvr'],
     right: [
         'audiotracks',
         'cc',
@@ -103,8 +101,6 @@ export class MediaControl extends UICorePlugin {
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
-    $clipText = null;
-    $clipTextContainer = null;
     $duration = null;
     $fullscreenToggle = null;
     $multiCameraSelector = null;
@@ -296,7 +292,7 @@ export 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
@@ -755,16 +751,16 @@ export class MediaControl extends UICorePlugin {
             right: [],
         }, this.core.activeContainer.settings);
         trace(`${T} updateSettings`, { newSettings });
+        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} updateSettings removing fullscreen`, {
                 supported: this.fullScreenOnVideoTagSupported,
@@ -811,8 +807,6 @@ export 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();
     }
@@ -827,25 +821,14 @@ export 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);
         trace(`${T} putElement`, { name, panel: !!panel });
         if (panel) {
@@ -864,6 +847,9 @@ export 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
@@ -913,11 +899,11 @@ export 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
@@ -1035,7 +1021,10 @@ export class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded });
+        trace(`${T} render`, {
+            needsUpdate: this.hasUpdate,
+            metadataLoaded: this.metadataLoaded,
+        });
         if (!this.hasUpdate || !this.metadataLoaded) {
             return this;
         }
@@ -1191,8 +1180,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())

package/lib/plugins/utils.d.ts

@@ -1,4 +1,12 @@
 export declare function getLocation(href: string): HTMLAnchorElement;
-export declare function strtimeToMiliseconds(str: string): number;
+/**
+ * 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
+ */
+export declare function parseClipTime(str: string): number;
 export declare function getPageX(event: MouseEvent | TouchEvent): number;
 //# sourceMappingURL=utils.d.ts.map

package/lib/plugins/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/plugins/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,qBAMvC;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAyBxD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAU/D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/plugins/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,qBAMvC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmBjD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAU/D"}

package/lib/plugins/utils.js

@@ -3,7 +3,15 @@ export function getLocation(href) {
     l.href = href;
     return l;
 }
-export 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
+ */
+export function parseClipTime(str) {
     if (!str) {
         return 0;
     }
@@ -12,21 +20,12 @@ export 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);
 }
 export function getPageX(event) {