@gcorevideo/player 2.24.1 → 2.24.3

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.24.1";
+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";
@@ -43896,6 +43900,15 @@ class MediaControl extends UICorePlugin {
         this.bindKeyEvents();
         this.show();
     }
+    /**
+     *
+     * @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() {
+        return (this.core.$el.height() - this.$el.find('.media-control-layer').height());
+    }
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -43907,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
@@ -43995,11 +44009,11 @@ class MediaControl extends UICorePlugin {
         this.applyButtonStyle(this.$playStopToggle);
     }
     mousemoveOnSeekBar(event) {
-        const offset = MediaControl.getPageX(event) -
-            (this.$seekBarContainer.offset().left ?? 0); // TODO check if the result can be negative
-        const hoverOffset = offset -
-            (this.$seekBarHover.width() ?? 0) / 2;
-        const pos = offset ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0)) : 0;
+        const offset = MediaControl.getPageX(event) - (this.$seekBarContainer.offset().left ?? 0); // TODO check if the result can be negative
+        const hoverOffset = offset - (this.$seekBarHover.width() ?? 0) / 2;
+        const pos = offset
+            ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0))
+            : 0;
         if (this.settings.seekEnabled) {
             // TODO test that it works when the element does not exist
             this.$seekBarHover.css({ left: hoverOffset });
@@ -44793,7 +44807,7 @@ class AudioTracks extends UICorePlugin {
     static get version() {
         return VERSION$7;
     }
-    static template = tmpl(pluginHtml$7);
+    static template = tmpl(pluginHtml$6);
     /**
      * @internal
      */
@@ -44934,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
      */
@@ -44960,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',
         };
     }
     /**
@@ -44975,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();
     }
 }
 
@@ -45091,6 +45090,8 @@ const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\
 
 const VERSION$6 = '2.19.12';
 const T$g = 'plugins.bottom_gear';
+const MENU_VMARGIN = 12;
+const MENU_BACKLINK_HEIGHT = 44;
 /**
  * Events triggered by the plugin
  * @beta
@@ -45102,7 +45103,6 @@ var GearEvents;
      */
     GearEvents["RENDERED"] = "rendered";
 })(GearEvents || (GearEvents = {}));
-// TODO disabled if no items added
 /**
  * `PLUGIN` that adds a button to extend the media controls UI with extra options.
  * @beta
@@ -45239,7 +45239,7 @@ class BottomGear extends UICorePlugin {
      * ```
      */
     addItem(name, $subMenu) {
-        const $existingItem = this.$el.find(`#gear-options li[data-${name}`);
+        const $existingItem = this.$el.find(`#gear-options li[data-${name}]`);
         if ($existingItem.length) {
             trace(`${T$g} addItem already exists`, { name });
             return $existingItem;
@@ -45254,20 +45254,17 @@ class BottomGear extends UICorePlugin {
                 .hide()
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
-                trace(`${T$g} addItem submenu clicked`, { name });
                 e.stopPropagation();
+                this.alignSubmenu($subMenu);
                 $subMenu.show();
                 this.$el.find('#gear-options').hide();
             });
         }
         this.numItems++;
-        if (this.numItems > 0) {
-            this.$el.show();
-        }
+        this.$el.show();
         return $item;
     }
     bindContainerEvents(container) {
-        trace(`${T$g} bindContainerEvents`);
         this.listenTo(container, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
         this.listenTo(container, Events$1.CONTAINER_CLICK, () => {
             this.collapse();
@@ -45282,7 +45279,6 @@ class BottomGear extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$g} render`);
         const mediaControl = this.core.getPlugin('media_control');
         if (!mediaControl) {
             return this; // TODO test
@@ -45323,11 +45319,11 @@ class BottomGear extends UICorePlugin {
         else {
             this.$el.find('#gear-options-wrapper').show();
         }
-        this.$el.find('#gear-button').attr('aria-expanded', (!this.collapsed).toString());
-        trace(`${T$g} toggleMenu`, { hidden: this.collapsed });
+        this.$el
+            .find('#gear-button')
+            .attr('aria-expanded', (!this.collapsed).toString());
     }
     collapse() {
-        trace(`${T$g} collapse`);
         this.collapsed = true;
         this.$el.find('#gear-options-wrapper').hide();
         this.$el.find('#gear-button').attr('aria-expanded', 'false');
@@ -45335,7 +45331,6 @@ class BottomGear extends UICorePlugin {
         this.collapseSubmenus();
     }
     onCoreReady() {
-        trace(`${T$g} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
@@ -45351,16 +45346,20 @@ class BottomGear extends UICorePlugin {
         this.bindContainerEvents(mediaControl.container);
     }
     onMediaControlRendered() {
-        trace(`${T$g} onMediaControlRendered`);
         this.mount();
     }
     mount() {
-        trace(`${T$g} mount`, {
-            numItems: this.numItems,
-        });
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.mount('gear', this.$el);
     }
+    alignSubmenu($subMenu) {
+        const availableHeight = this.core.getPlugin('media_control').getAvailableHeight() -
+            MENU_VMARGIN * 2;
+        $subMenu.css('max-height', `${availableHeight}px`);
+        $subMenu
+            .find('.gear-sub-menu')
+            .css('max-height', `${availableHeight - MENU_BACKLINK_HEIGHT}px`);
+    }
 }
 
 /**
@@ -45726,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;
     }
@@ -45753,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,
@@ -45793,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);
     }
@@ -48517,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`);
@@ -51313,6 +51323,7 @@ class SourceController extends CorePlugin {
     currentSourceIndex = 0;
     sourcesDelay = {};
     active = false;
+    autoPlay = false;
     switching = false;
     sync = noSync;
     /**
@@ -51388,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();
@@ -51406,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;
@@ -51423,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);
             });
         });