@gcorevideo/player 2.24.2 → 2.24.3

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.24.2";
+var version$1 = "2.24.3";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43327,7 +43327,7 @@ function version() {
     };
 }
 
-const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\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\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$6 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\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\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\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";
 
@@ -43636,6 +43636,10 @@ const LEFT_ORDER = [
     'duration',
     'dvr',
 ];
+/**
+ * Extended events for the {@link MediaControl} plugin
+ * @beta
+ */
 var ExtendedEvents;
 (function (ExtendedEvents) {
     ExtendedEvents["MEDIACONTROL_VOLUME"] = "mediacontrol:volume";
@@ -43916,6 +43920,7 @@ class MediaControl extends UICorePlugin {
     onVolumeChanged() {
         this.updateVolumeUI();
     }
+    // TODO check if CONTAINER_SETTINGSUPDATE handler is sufficient
     onLoadedMetadata() {
         const video = this.core.activePlayback?.el;
         // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
@@ -44802,7 +44807,7 @@ class AudioTracks extends UICorePlugin {
     static get version() {
         return VERSION$7;
     }
-    static template = tmpl(pluginHtml$7);
+    static template = tmpl(pluginHtml$6);
     /**
      * @internal
      */
@@ -44943,20 +44948,25 @@ class AudioTracks extends UICorePlugin {
     }
 }
 
-const pluginHtml$6 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon></div>\n</div>\n";
+const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"gplayer-big-mute-button\">\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon id=\"gplayer-big-mute-icon\"></div>\n</div>\n";
 
 const T$h = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
- * `PLUGIN` that displays a big mute button over the video when it's muted.
- * Once pressed, it unmutes the video.
+ * `PLUGIN` that displays a big mute button over the video when it's being played muted.
  * @beta
+ * @remarks
+ * When pressed, it unmutes the video.
+ * @example
+ * ```ts
+ * import { BigMuteButton } from '@gcorevideo/player'
+ * Player.registerPlugin(BigMuteButton)
+ * ```
  */
 class BigMuteButton extends UICorePlugin {
-    isBigMuteButtonHidden = false;
+    hidden = false;
+    // TODO get back to the ads-related logic later
     _adIsPlaying = false;
-    $bigMuteBtnContainer = null;
-    $bigMuteButton = null;
     /**
      * @internal
      */
@@ -44969,14 +44979,13 @@ class BigMuteButton extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION$1 };
     }
-    static template = tmpl(pluginHtml$6);
+    static template = tmpl(templateHtml$2);
     /**
      * @internal
      */
     get events() {
         return {
-            'click .big-mute-icon': 'clicked',
-            'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
+            'click': 'clicked',
         };
     }
     /**
@@ -44984,111 +44993,92 @@ class BigMuteButton extends UICorePlugin {
      */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
         this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-        trace(`${T$h} bindEvents`, {
-            mediacontrol: !!this.core.mediaControl,
-        });
-        // TOOD use core.getPlugin('media_control')
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
     }
     onCoreReady() {
+    }
+    onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_VOLUME, this.onContainerVolume);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_READY, this.onContainerStart);
+        // this.listenTo(
+        //   this.core.activeContainer,
+        //   Events.CONTAINER_READY,
+        //   this.onContainerReady,
+        // )
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_ENDED, this.onPlaybackEnded);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, this.onPlay);
     }
-    onContainerVolume(value) {
-        if (value !== 0) {
-            this.destroyBigMuteBtn();
+    onPlay(_, { autoPlay }) {
+        const container = this.core.activeContainer;
+        const { volume } = container;
+        const { wasMuted } = this.options;
+        trace(`${T$h} onPlay`, {
+            autoPlay,
+            wasMuted,
+            volume,
+        });
+        if (autoPlay && !wasMuted && volume === 0) {
+            this.mount();
+        }
+        else {
+            this.destroy();
         }
     }
-    onContainerStart() {
-        if (this.isBigMuteButtonHidden) {
-            this.showBigMuteBtn();
+    onContainerVolume(value) {
+        if (value !== 0) {
+            this.destroy();
         }
     }
     onPlaybackEnded() {
-        this.hideBigMuteBtn();
-    }
-    mediaControlRendered() {
-        const container = this.core.activeContainer;
-        trace(`${T$h} mediaControlRendered`, {
-            container: !!container,
-        });
-        if (container) {
-            this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
-                trace(`${T$h} PLAYBACK_PLAY`);
-                this.render();
-            });
-        }
+        this.hide();
     }
     onStartAd() {
         this._adIsPlaying = true;
-        if (this.$bigMuteBtnContainer) {
-            this.$bigMuteBtnContainer.addClass('hide');
-        }
+        this.hide();
     }
     onFinishAd() {
         this._adIsPlaying = false;
-        if (this.$bigMuteBtnContainer) {
-            this.$bigMuteBtnContainer.removeClass('hide');
-        }
-    }
-    shouldRender() {
-        const container = this.core.activeContainer;
-        if (!container) {
-            return false;
-        }
-        const { autoPlay, wasMuted } = this.options;
-        const volume = container.volume;
-        trace(`${T$h} shouldRender`, {
-            autoPlay,
-            wasMuted,
-            volume,
-        });
-        return autoPlay && !wasMuted && volume === 0;
+        this.show();
     }
     /**
      * @internal
      */
     render() {
-        if (this.shouldRender()) {
-            trace(`${T$h} render`, {
-                el: !!this.$el,
-            });
-            this.$el.html(BigMuteButton.template());
-            this.$bigMuteBtnContainer = this.$el.find('.big-mute-icon-wrapper[data-big-mute]');
-            this._adIsPlaying && this.$bigMuteBtnContainer.addClass('hide');
-            this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon');
-            this.$bigMuteButton.append(volumeMuteIcon);
-            const container = this.core.activeContainer;
-            container.$el.append(this.$el.get(0));
-        }
+        trace(`${T$h} render`);
+        this.$el.html(BigMuteButton.template());
+        this.$el.find('#gplayer-big-mute-icon').append(volumeMuteIcon);
+        // TODO
+        // this._adIsPlaying && this.hide()
         return this;
     }
-    hideBigMuteBtn() {
-        this.isBigMuteButtonHidden = true;
-        this.$bigMuteBtnContainer?.addClass('hide');
+    mount() {
+        this.core.activeContainer.$el.append(this.$el);
+        this.show();
     }
-    showBigMuteBtn() {
-        this.isBigMuteButtonHidden = false;
-        if (this.$bigMuteBtnContainer) {
-            this.$bigMuteBtnContainer.removeClass('hide');
-        }
+    hide() {
+        this.hidden = true;
+        this.$el.find('#gplayer-big-mute-button')?.addClass('hide');
     }
-    destroyBigMuteBtn(e) {
-        this.hideBigMuteBtn();
-        if (e && e.stopPropagation) {
-            e.stopPropagation();
-        }
-        this.destroy();
+    show() {
+        this.hidden = false;
+        this.$el.find('#gplayer-big-mute-button')?.removeClass('hide');
     }
     clicked(e) {
+        trace(`${T$h} clicked`);
+        const mediaControl = this.core.getPlugin('media_control');
+        // TODO delegate to media_control plugin
         const localVolume = Utils.Config.restore('volume');
         const volume = !isNaN(localVolume) ? localVolume : 100;
-        // TODO use container.setVolume() instead
-        this.core.mediaControl.setVolume(volume === 0 ? 100 : volume);
-        this.destroyBigMuteBtn(e);
+        const unmuted = volume === 0 ? 100 : volume;
+        if (mediaControl) {
+            mediaControl.setVolume(unmuted);
+        }
+        else {
+            this.core.activeContainer.setVolume(unmuted);
+        }
+        e.stopPropagation?.();
+        this.destroy();
     }
 }
 
@@ -45735,24 +45725,42 @@ const CMCD_KEYS = [
 ];
 // const T = 'plugins.cmcd'
 /**
- * A `PLUGIN` that configures CMCD for playback
+ * A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
  * @beta
  * @remarks
- * Configuration options
- *   `cmcd`: {@link CmcdConfigPluginSettings}
+ * Configuration options - {@link CmcdConfigOptions}.
+ * @example
+ * ```ts
+ * import { CmcdConfig } from '@gcorevideo/player'
+ * Player.registerPlugin(CmcdConfig)
+ *
+ * const player = new Player({
+ *   source: 'https://example.com/video.mp4',
+ *   cmcd: {
+ *     sessionId: '1234567890',
+ *     contentId: 'f572d396fae9206628714fb2ce00f72e94f2258f',
+ *   },
+ * })
+ * ```
  */
 class CmcdConfig extends CorePlugin {
     sid;
     cid = '';
     /**
-     * @inheritdocs
+     * @internal
      */
     get name() {
         return 'cmcd';
     }
+    /**
+     * @internal
+     */
     get version() {
         return '0.1.0';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return CLAPPR_VERSION$1;
     }
@@ -45762,11 +45770,16 @@ class CmcdConfig extends CorePlugin {
         this.cid = this.options.cmcd?.contentId ?? this.generateContentId();
     }
     /**
-     * @inheritdocs
+     * @internal
      */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_CONTAINERS_CREATED, () => this.updateSettings(this.core.containers[0]));
     }
+    /**
+     * Returns the current `sid` and `cid` values.
+     * Useful when the auto-generated values need to be known.
+     * @returns `sid` and `cid` values
+     */
     exportIds() {
         return {
             sid: this.sid,
@@ -45802,19 +45815,6 @@ class CmcdConfig extends CorePlugin {
                 break;
         }
     }
-    updateHlsjsSettings(options, { cid, sid }) {
-        $.extend(true, options, {
-            playback: {
-                hlsjsConfig: {
-                    cmcd: {
-                        includeKeys: CMCD_KEYS,
-                        sessionId: sid,
-                        contentId: cid,
-                    },
-                },
-            },
-        });
-    }
     generateContentId() {
         return new URL(this.core.options.source ?? this.core.options.sources[0].source).pathname.slice(0, 64);
     }
@@ -48526,7 +48526,8 @@ class Clips extends UICorePlugin {
      * @returns The text of the clip at the given time
      */
     getText(time) {
-        return this.clips.find((clip) => clip.start <= time && clip.end >= time)?.text;
+        return this.clips.find((clip) => clip.start <= time && clip.end >= time)
+            ?.text;
     }
     onCoreReady() {
         trace(`${T$d} onCoreReady`);
@@ -51322,6 +51323,7 @@ class SourceController extends CorePlugin {
     currentSourceIndex = 0;
     sourcesDelay = {};
     active = false;
+    autoPlay = false;
     switching = false;
     sync = noSync;
     /**
@@ -51397,6 +51399,7 @@ class SourceController extends CorePlugin {
             if (this.switching) {
                 return;
             }
+            this.autoPlay = !!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay;
             switch (error.code) {
                 case PlaybackErrorCode.MediaSourceUnavailable:
                     this.core.activeContainer?.getPlugin('poster')?.disable();
@@ -51415,6 +51418,12 @@ class SourceController extends CorePlugin {
                 this.core.activeContainer?.getPlugin('spinner')?.hide();
             }
         });
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, (_, { autoPlay }) => {
+            trace(`${T$4} onContainerPlay`, {
+                autoPlay,
+            });
+            this.autoPlay = !!autoPlay;
+        });
     }
     reset() {
         this.active = false;
@@ -51432,17 +51441,20 @@ class SourceController extends CorePlugin {
             trace(`${T$4} retryPlayback syncing...`, {
                 nextSource,
             });
-            const rnd = RETRY_DELAY_BLUR * Math.random();
+            const rnd = Math.round(RETRY_DELAY_BLUR * Math.random());
             this.sync(() => {
-                trace(`${T$4} retryPlayback loading...`);
                 this.switching = false;
                 this.core.load(nextSource.source, nextSource.mimeType);
                 trace(`${T$4} retryPlayback loaded`, {
                     nextSource,
                 });
                 setTimeout(() => {
-                    this.core.activePlayback.play();
-                    trace(`${T$4} retryPlayback playing`);
+                    trace(`${T$4} retryPlayback playing`, {
+                        autoPlay: this.autoPlay,
+                    });
+                    this.core.activeContainer.play({
+                        autoPlay: this.autoPlay,
+                    });
                 }, rnd);
             });
         });

package/dist/player.d.ts

@@ -109,9 +109,15 @@ export { AudioTracks as AudioSelector }
 export { AudioTracks }
 
 /**
- * `PLUGIN` that displays a big mute button over the video when it's muted.
- * Once pressed, it unmutes the video.
+ * `PLUGIN` that displays a big mute button over the video when it's being played muted.
  * @beta
+ * @remarks
+ * When pressed, it unmutes the video.
+ * @example
+ * ```ts
+ * import { BigMuteButton } from '@gcorevideo/player'
+ * Player.registerPlugin(BigMuteButton)
+ * ```
  */
 export declare class BigMuteButton extends UICorePlugin {
     private isBigMuteButtonHidden;
@@ -144,14 +150,16 @@ export declare class BigMuteButton extends UICorePlugin {
     private onContainerVolume;
     private onContainerStart;
     private onPlaybackEnded;
-    private mediaControlRendered;
+    private onMediaControlRendered;
     private onStartAd;
     private onFinishAd;
-    private shouldRender;
+    private isActive;
     /**
      * @internal
      */
     render(): this;
+    private mount;
+    private update;
     private hideBigMuteBtn;
     private showBigMuteBtn;
     private destroyBigMuteBtn;
@@ -302,6 +310,7 @@ export declare class BottomGear extends UICorePlugin {
     private onCoreReady;
     private onMediaControlRendered;
     private mount;
+    private alignSubmenu;
 }
 
 /**
@@ -480,13 +489,17 @@ export declare type ClapprStatsMetrics = {
     };
 };
 
-export declare type ClapprStatsSettings = {
+/**
+ * Config options for the {@link ClapprStats} plugin
+ * @beta
+ */
+export declare interface ClapprStatsSettings {
     /**
      * The interval in milliseconds of periodic measurements.
      * The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.
      */
     runEach?: number;
-};
+}
 
 /**
  * A small `PLUGIN` that toggles the playback state on click over the video container
@@ -578,7 +591,7 @@ export declare class Clips extends UICorePlugin {
  */
 export declare interface ClipsPluginSettings {
     /**
-     * The compiled text of the clips description, one clip per line in format  :
+     * 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;
@@ -704,49 +717,72 @@ export declare type ClosedCaptionsPluginSettings = {
 };
 
 /**
- * A `PLUGIN` that configures CMCD for playback
+ * A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
  * @beta
  * @remarks
- * Configuration options
- *   `cmcd`: {@link CmcdConfigPluginSettings}
+ * Configuration options - {@link CmcdConfigOptions}.
+ * @example
+ * ```ts
+ * import { CmcdConfig } from '@gcorevideo/player'
+ * Player.registerPlugin(CmcdConfig)
+ *
+ * const player = new Player({
+ *   source: 'https://example.com/video.mp4',
+ *   cmcd: {
+ *     sessionId: '1234567890',
+ *     contentId: 'f572d396fae9206628714fb2ce00f72e94f2258f',
+ *   },
+ * })
+ * ```
  */
 export declare class CmcdConfig extends CorePlugin {
     private sid;
     private cid;
     /**
-     * @inheritdocs
+     * @internal
      */
     get name(): string;
+    /**
+     * @internal
+     */
     get version(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): string;
     constructor(core: Core);
     /**
-     * @inheritdocs
+     * @internal
      */
     bindEvents(): void;
+    /**
+     * Returns the current `sid` and `cid` values.
+     * Useful when the auto-generated values need to be known.
+     * @returns `sid` and `cid` values
+     */
     exportIds(): {
         sid: string;
         cid: string;
     };
     private updateSettings;
-    private updateHlsjsSettings;
     private generateContentId;
 }
 
 /**
+ * Config options for the {@link CmcdConfig} plugin
  * @beta
  */
-export declare type CmcdConfigPluginSettings = {
+export declare interface CmcdConfigOptions {
     /**
-     * Session ID. If ommitted, a random UUID will be generated
+     * `sid` value. If ommitted, a random UUID will be generated
      */
-    sessionId: string;
+    sessionId?: string;
     /**
-     * Content ID,
+     * `cid` value.
      * If ommitted, the pathname part of the first source URL will be used
      */
     contentId?: string;
-};
+}
 
 /**
  * @public
@@ -986,6 +1022,10 @@ export declare type ErrorScreenSettings = {
     noReload?: boolean;
 };
 
+/**
+ * Extended events for the {@link MediaControl} plugin
+ * @beta
+ */
 export declare enum ExtendedEvents {
     MEDIACONTROL_VOLUME = "mediacontrol:volume",
     MEDIACONTROL_MENU_COLLAPSE = "mediacontrol:menu:collapse"
@@ -1287,6 +1327,13 @@ export declare class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable(): void;
+    /**
+     *
+     * @returns  Vertical space available to render something on top of the container.
+     * @remarks
+     * This takes into account the container height and excludes the height of the controls bar
+     */
+    getAvailableHeight(): number;
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -2348,7 +2395,11 @@ export declare class Poster extends UIContainerPlugin {
     destroy(): this;
 }
 
-export declare type PosterPluginSettings = {
+/**
+ * Config options for the {@link Poster} plugin
+ * @beta
+ */
+export declare interface PosterPluginSettings {
     /**
      * Custom CSS background
      */
@@ -2362,10 +2413,10 @@ export declare type PosterPluginSettings = {
      */
     url?: string;
     /**
-     * Whether to show the poster after playback has ended @default true
+     * Whether to show the poster after playback has ended, by default `true`
      */
     showOnVideoEnd?: boolean;
-};
+}
 
 /**
  * A level of quality within a media source/representation.

package/docs/api/player.bigmutebutton.md

@@ -7,7 +7,7 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-`PLUGIN` that displays a big mute button over the video when it's muted. Once pressed, it unmutes the video.
+`PLUGIN` that displays a big mute button over the video when it's being played muted.
 
 **Signature:**
 
@@ -16,3 +16,15 @@ export declare class BigMuteButton extends UICorePlugin
 ```
 **Extends:** UICorePlugin
 
+## Remarks
+
+When pressed, it unmutes the video.
+
+## Example
+
+
+```ts
+import { BigMuteButton } from '@gcorevideo/player'
+Player.registerPlugin(BigMuteButton)
+```
+