@gcorevideo/player 2.19.11 → 2.19.13

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

@@ -5,7 +5,7 @@ import assert from 'assert';
 import { Events, UICorePlugin, Browser, Playback, Utils, template, $, } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import { Kibo } from '../kibo/index.js';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { getPageX, isFullscreen } from '../utils.js';
 import '../../../assets/media-control/media-control.scss';
 import '../../../assets/media-control/plugins.scss';
@@ -34,11 +34,17 @@ function orderByOrderPattern(arr, order) {
     return [...ordered, ...rest];
 }
 /**
- * The MediaControl is responsible for displaying the Player controls.
+ * The MediaControl provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
- * This plugin provides a foundation for developing a media controls UI via additional plugins.
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * @example
+ * ```ts
+ * Player.registerPlugin(MediaControl) // <--- This must go first
+ * Player.registerPlugin(LevelSelector) // a media control plugin
+ * Player.registerPlugin(NerdStats) // another media control plugin
+ * ```
  */
 export class MediaControl extends UICorePlugin {
     advertisementPlaying = false;
@@ -64,7 +70,6 @@ export class MediaControl extends UICorePlugin {
     persistConfig;
     rendered = false;
     settings = {};
-    svgMask = null;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -93,9 +98,15 @@ export class MediaControl extends UICorePlugin {
     $volumeContainer = null;
     $volumeIcon = null;
     static template = template(mediaControlHTML);
+    /**
+     * @internal
+     */
     get name() {
         return 'media_control';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
@@ -103,18 +114,32 @@ export class MediaControl extends UICorePlugin {
         const playbackIsNOOP = this.container && this.container.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
+    /**
+     * @internal
+     * @deprecated
+     */
     get container() {
         return this.core && this.core.activeContainer;
     }
+    /**
+     * @internal
+     * @deprecated
+     */
     get playback() {
         return this.core && this.core.activePlayback;
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: 'media-control-skin-1',
             'data-media-control-skin-1': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-play]': 'play',
@@ -145,11 +170,11 @@ export class MediaControl extends UICorePlugin {
         };
     }
     /**
-     * Current volume
+     * Current volume [0..100]
      */
     get volume() {
-        return this.container && this.container.isReady
-            ? this.container.volume
+        return this.core.activeContainer.isReady
+            ? this.core.activeContainer.volume
             : this.intendedVolume;
     }
     /**
@@ -165,7 +190,7 @@ export class MediaControl extends UICorePlugin {
         this.kibo = new Kibo(this.options.focusElement);
         this.bindKeyEvents();
         this.userDisabled = false;
-        if ((this.container && this.container.mediaControlDisabled) ||
+        if (this.core.activeContainer.mediaControlDisabled ||
             this.options.chromeless) {
             this.disable();
         }
@@ -174,12 +199,18 @@ export class MediaControl extends UICorePlugin {
         $(document).bind('touchend', this.stopDrag);
         $(document).bind('touchmove', this.updateDrag);
     }
+    /**
+     * @internal
+     */
     getExternalInterface() {
         return {
             setVolume: this.setVolume,
             getVolume: () => this.volume,
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         // @ts-ignore
         this.stopListening();
@@ -235,12 +266,18 @@ export class MediaControl extends UICorePlugin {
             this.listenToOnce(this.container, Events.CONTAINER_LOADEDMETADATA, this.onLoadedMetadataOnVideoTag);
         }
     }
+    /**
+     * Disables the plugin and unmounts its UI
+     */
     disable() {
         this.userDisabled = true;
         this.hide();
         this.unbindKeyEvents();
         this.$el.hide();
     }
+    /**
+     * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
+     */
     enable() {
         if (this.options.chromeless) {
             return;
@@ -249,24 +286,6 @@ export class MediaControl extends UICorePlugin {
         this.bindKeyEvents();
         this.show();
     }
-    /**
-     * Start the playback
-     */
-    play() {
-        this.container && this.container.play();
-    }
-    /**
-     * Pause the playback
-     */
-    pause() {
-        this.container && this.container.pause();
-    }
-    /**
-     * Stop the playback
-     */
-    stop() {
-        this.container && this.container.stop();
-    }
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -765,14 +784,31 @@ export class MediaControl extends UICorePlugin {
     /**
      * Get a media control element DOM node
      * @param name - The name of the media control element
-     * @returns The DOM node to render the media control element
+     * @returns The DOM node to render to or extend
+     * @remarks
+     * Use this method to render custom media control UI in a plugin
+     * @example
+     * ```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')
+     *     return this
+     *   }
+     * }
+     * ```
      */
     getElement(name) {
         switch (name) {
             case 'clipText':
                 return this.$clipText;
+            case 'bottomGear':
+                return this.$bottomGear;
             case 'pip':
                 return this.$pip;
+            case 'playbackRate':
+                return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
         }
@@ -906,6 +942,9 @@ export class MediaControl extends UICorePlugin {
             element &&
             $(element).find('svg path').css({ fill: this.buttonsColor });
     }
+    /**
+     * @internal
+     */
     destroy() {
         $(document).unbind('mouseup', this.stopDrag);
         $(document).unbind('mousemove', this.updateDrag);
@@ -918,6 +957,9 @@ export class MediaControl extends UICorePlugin {
         this.advertisementPlaying ? this.disable() : this.enable();
         this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE);
     }
+    /**
+     * @internal
+     */
     render() {
         const timeout = this.options.hideMediaControlDelay || 2000;
         const html = MediaControl.template({ settings: this.settings ?? {} });
@@ -1005,10 +1047,6 @@ export class MediaControl extends UICorePlugin {
             this.hide();
         }
     }
-    // TODO
-    setMuted(value) {
-        this.container.options.mute = value;
-    }
     static getPageX(event) {
         return getPageX(event);
     }
@@ -1022,7 +1060,7 @@ export class MediaControl extends UICorePlugin {
         return 0;
     }
     /**
-     * Enable the control button
+     * Enable the user interaction disabled earlier
      */
     enableControlButton() {
         this.disabledClickableList.forEach((element) => {
@@ -1030,7 +1068,7 @@ export class MediaControl extends UICorePlugin {
         });
     }
     /**
-     * Disable the control button
+     * Disable the user interaction for the control buttons
      */
     disabledControlButton() {
         this.disabledClickableList.forEach((element) => {
@@ -1044,7 +1082,6 @@ export class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
 }
-// TODO drop?
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };

package/lib/plugins/multi-camera/MultiCamera.js

@@ -1,13 +1,13 @@
 import { Browser, Events, Playback, template, UICorePlugin } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/multi-camera/multicamera.ejs';
 import '../../../assets/multi-camera/style.scss';
 import streamsIcon from '../../../assets/icons/old/streams.svg';
 import streamsMomentoIcon from '../../../assets/icons/old/language.svg';
 import streamsWhiteNightsIcon from '../../../assets/icons/old/wn.svg';
 const VERSION = '0.0.1';
-const T = 'plugins.multicamera';
+const T = 'plugins.media_control_multicamera';
 export class MultiCamera extends UICorePlugin {
     currentCamera = null;
     currentTime = 0;
@@ -15,7 +15,7 @@ export class MultiCamera extends UICorePlugin {
     multicamera = [];
     noActiveStreams = false;
     get name() {
-        return 'multicamera';
+        return 'media_control_multicamera';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/picture-in-picture/PictureInPicture.js

@@ -1,14 +1,14 @@
 import { UICorePlugin, template, Events } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pipIcon from '../../../assets/icons/new/pip.svg';
 import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
 import '../../../assets/picture-in-picture/button.scss';
 const VERSION = '0.0.1';
-const T = `plugins.picture_in_picture`;
+const T = `plugins.media_control_pip`;
 export class PictureInPicture extends UICorePlugin {
     get name() {
-        return 'picture_in_picture';
+        return 'media_control_pip';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAgCxE,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAoBnB,YAAY;IAOZ,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;IAKN,OAAO,CAAC,YAAY;IAUX,MAAM;IAyCf,SAAS;IAMT,UAAU;IAMV,MAAM;IAWN,MAAM;IAIN,YAAY,CAAC,KAAK,EAAE,UAAU;IAW9B,UAAU;IAaV,MAAM;IAIN,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAI/B,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,QAAQ;IAYR,oBAAoB;CASrB"}
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAiCxE,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAoBnB,YAAY;IAOZ,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;IAKN,OAAO,CAAC,YAAY;IAUX,MAAM;IAyCf,SAAS;IAMT,UAAU;IAMV,MAAM;IAWN,MAAM;IAIN,YAAY,CAAC,KAAK,EAAE,UAAU;IAW9B,UAAU;IAaV,MAAM;IAIN,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAI/B,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,QAAQ;IAYR,oBAAoB;CASrB"}

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -1,5 +1,5 @@
 import { Events, UICorePlugin, Playback, template } from '@clappr/core';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
 import buttonHtml from '../../../assets/playback-rate/button.ejs';
 import listHtml from '../../../assets/playback-rate/list.ejs';
@@ -17,6 +17,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '2.0', label: '2x' }
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
+// TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 export class PlaybackRate extends UICorePlugin {
     currentPlayback = null;
@@ -24,7 +25,7 @@ export class PlaybackRate extends UICorePlugin {
     prevSelectedRate;
     selectedRate = DEFAULT_PLAYBACK_RATE;
     get name() {
-        return 'playback_rate';
+        return 'media_control_playback_rate';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -202,4 +203,3 @@ export class PlaybackRate extends UICorePlugin {
         currentLevelElement.find('a').addClass('gcore-skin-active');
     }
 }
-// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';

package/lib/plugins/poster/Poster.d.ts

@@ -1,27 +1,75 @@
 import { UIContainerPlugin } from '@clappr/core';
 import '../../../assets/poster/poster.scss';
+/**
+ * Displays a poster image in the background and a big play button on top when playback is stopped
+ * @beta
+ * @remarks
+ * When the playback is stopped, media control UI is disabled.
+ *
+ * Configuration options:
+ *
+ * - `poster.custom` - custom CSS background
+ *
+ * - `poster.showForNoOp` - whether to show the poster when the playback is not started
+ *
+ * - `poster.url` - the URL of the poster image
+ *
+ * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 export declare class Poster extends UIContainerPlugin {
     private hasFatalError;
     private hasStartedPlaying;
     private playRequested;
     private $playButton;
     private $playWrapper;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
-    get template(): any;
-    get shouldRender(): boolean;
+    private static readonly template;
+    private get shouldRender();
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-poster': string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         click: string;
     };
-    get showOnVideoEnd(): boolean;
+    private get showOnVideoEnd();
+    /**
+     * @internal
+     */
     bindEvents(): void;
+    /**
+     * Reenables earlier disabled plugin
+     */
     enable(): void;
+    /**
+     * Disables the plugin, unmounting it from the DOM
+     */
     disable(): void;
     private onError;
     private onPlay;
@@ -36,7 +84,13 @@ export declare class Poster extends UIContainerPlugin {
     private updatePoster;
     private showPoster;
     private hidePoster;
+    /**
+     * @internal
+     */
     render(): this;
+    /**
+     * @internal
+     */
     destroy(): this;
 }
 //# sourceMappingURL=Poster.d.ts.map

package/lib/plugins/poster/Poster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Poster.d.ts","sourceRoot":"","sources":["../../../src/plugins/poster/Poster.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAMrB,OAAO,oCAAoC,CAAA;AAO3C,qBAAa,MAAO,SAAQ,iBAAiB;IAC3C,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAI,YAAY,YAef;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;MAIlB;IAED,IAAI,cAAc,YAEjB;IAEQ,UAAU;IAiBV,MAAM;IAMN,OAAO;IAOhB,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAYT,MAAM;IAuCN,OAAO;CAIjB"}
+{"version":3,"file":"Poster.d.ts","sourceRoot":"","sources":["../../../src/plugins/poster/Poster.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,cAAc,CAAA;AAMrB,OAAO,oCAAoC,CAAA;AAO3C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAO,SAAQ,iBAAiB;IAC3C,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,YAAY,CAA2B;IAE/C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD,OAAO,KAAK,YAAY,GAUvB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED;;OAEG;IACM,UAAU;IAiBnB;;OAEG;IACM,MAAM;IAMf;;OAEG;IACM,OAAO;IAOhB,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,UAAU;IAYlB;;OAEG;IACM,MAAM;IAuCf;;OAEG;IACM,OAAO;CAIjB"}

package/lib/plugins/poster/Poster.js

@@ -3,45 +3,78 @@
 // license that can be found in the LICENSE file.
 import { Events, Playback, PlayerError, UIContainerPlugin, template, $, } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import '../../../assets/poster/poster.scss';
 import posterHTML from '../../../assets/poster/poster.ejs';
 import playIcon from '../../../assets/icons/new/play.svg';
 const T = 'plugins.poster_custom';
+/**
+ * Displays a poster image in the background and a big play button on top when playback is stopped
+ * @beta
+ * @remarks
+ * When the playback is stopped, media control UI is disabled.
+ *
+ * Configuration options:
+ *
+ * - `poster.custom` - custom CSS background
+ *
+ * - `poster.showForNoOp` - whether to show the poster when the playback is not started
+ *
+ * - `poster.url` - the URL of the poster image
+ *
+ * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 export class Poster extends UIContainerPlugin {
     hasFatalError = false;
     hasStartedPlaying = false;
     playRequested = false;
     $playButton = null;
     $playWrapper = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'poster_custom';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    get template() {
-        return template(posterHTML);
-    }
+    static template = template(posterHTML);
     get shouldRender() {
         if (!this.enabled) {
             return false;
         }
-        // const showOnError = this.options.poster?.showOnError !== false
-        trace(`${T} shouldRender`, {
-            hasFatalError: this.hasFatalError,
-        });
         const showForNoOp = !!this.options.poster?.showForNoOp;
         return (this.container.playback.name !== 'html_img' &&
             (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
                 showForNoOp));
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: 'player-poster',
             'data-poster': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             click: 'clicked',
@@ -50,6 +83,9 @@ export class Poster extends UIContainerPlugin {
     get showOnVideoEnd() {
         return this.options.poster?.showOnVideoEnd !== false;
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
         this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
@@ -62,11 +98,17 @@ export class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events.CONTAINER_READY, this.render);
         this.listenTo(this.container, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
     }
+    /**
+     * Reenables earlier disabled plugin
+     */
     enable() {
         super.enable();
         this.hasStartedPlaying = this.container.playback.isPlaying();
         this.update();
     }
+    /**
+     * Disables the plugin, unmounting it from the DOM
+     */
     disable() {
         trace(`${T} disable`);
         this.hasStartedPlaying = false;
@@ -197,11 +239,14 @@ export class Poster extends UIContainerPlugin {
             this.$el.hide();
         }
     }
+    /**
+     * @internal
+     */
     render() {
         if (!this.shouldRender) {
             return this;
         }
-        this.$el.html(this.template());
+        this.$el.html(Poster.template());
         const isRegularPoster = this.options.poster && this.options.poster.custom === undefined;
         if (isRegularPoster) {
             const posterUrl = this.options.poster.url || this.options.poster;
@@ -225,6 +270,9 @@ export class Poster extends UIContainerPlugin {
         this.update();
         return this;
     }
+    /**
+     * @internal
+     */
     destroy() {
         this.container.$el.removeClass('container-with-poster-clickable');
         return this;

package/lib/plugins/seek-time/SeekTime.js

@@ -2,13 +2,13 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
 import '../../../assets/seek-time/seek-time.scss';
 const { formatTime } = Utils;
 export class SeekTime extends UICorePlugin {
     get name() {
-        return 'seek_time';
+        return 'media_control_seek_time';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/share/Share.js

@@ -1,5 +1,5 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/share/share.ejs';
 import '../../../assets/share/style.scss';
 import shareIcon from '../../../assets/icons/old/share.svg';
@@ -10,7 +10,7 @@ export class Share extends UICorePlugin {
     hide = false;
     container = null;
     get name() {
-        return 'share';
+        return 'media_control_share';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/skip-time/SkipTime.js

@@ -1,5 +1,5 @@
 import { UICorePlugin as UICorePluginOriginal, Browser, Playback, Events, template } from '@clappr/core';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
 import '../../../assets/skip-time/style.scss';
 export class SkipTime extends UICorePluginOriginal {

package/lib/plugins/source-controller/SourceController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AA4BrB;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAuC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAiB;IAE7B,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;gBAEW,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAMnB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,2BAA2B;IAsCnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,kBAAkB;IAe1B,MAAM,KAAK,OAAO,WAEjB;CACF"}
+{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AA4BrB;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAuC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAiB;IAE7B,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;gBAEW,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAMnB,OAAO,CAAC,OAAO;IAoBf,OAAO,CAAC,2BAA2B;IAsCnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,kBAAkB;IAe1B,MAAM,KAAK,OAAO,WAEjB;CACF"}

package/lib/plugins/source-controller/SourceController.js

@@ -1,7 +1,7 @@
 import { Events as ClapprEvents, CorePlugin, } from '@clappr/core';
 import { PlaybackErrorCode, } from '../../playback.types.js';
 import { trace } from '@gcorevideo/utils';
-import { CLAPPR_VERSION } from '../build';
+import { CLAPPR_VERSION } from '../../build.js';
 const T = 'plugins.source_controller';
 const INITIAL_RETRY_DELAY = 1000;
 const MAX_RETRY_DELAY = 5000;
@@ -109,7 +109,6 @@ export class SourceController extends CorePlugin {
         else {
             this.sync = noSync;
         }
-        // TODO bind to CORE_ACTIVE_CONTAINER_CHANGED
         this.bindContainerEventListeners();
         if (this.active) {
             this.core.activeContainer?.getPlugin('poster_custom')?.disable();

package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js

@@ -6,7 +6,7 @@ import { PlaybackErrorCode } from '../../playback.types.js';
 import { trace } from '@gcorevideo/utils';
 import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';
 import '../../../assets/spinner-three-bounce/spinner.scss';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 const T = 'plugins.spinner';
 export class SpinnerThreeBounce extends UIContainerPlugin {
     get name() {

package/lib/plugins/statistics/Statistics.js

@@ -2,7 +2,7 @@
 import { ContainerPlugin, Events, Playback } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 const CUSTOM_EVENTS_CONTAINER_START = 'container:start';
 const WATCH_CUTOFF = 5;
 const HEATMAP_INTERVAL = 10;