@gcorevideo/player 2.24.0 → 2.24.2

package/docs/api/player.md

@@ -119,6 +119,17 @@ Description
 **_(BETA)_** `PLUGIN` that provides a UI to select the subtitles when available.
 
 
+</td></tr>
+<tr><td>
+
+[CmcdConfig](./player.cmcdconfig.md)
+
+
+</td><td>
+
+**_(BETA)_** A `PLUGIN` that configures CMCD for playback
+
+
 </td></tr>
 <tr><td>
 
@@ -736,6 +747,17 @@ Description
 **_(BETA)_** Configuration options for the [ClosedCaptions](./player.closedcaptions.md) plugin.
 
 
+</td></tr>
+<tr><td>
+
+[CmcdConfigPluginSettings](./player.cmcdconfigpluginsettings.md)
+
+
+</td><td>
+
+**_(BETA)_**
+
+
 </td></tr>
 <tr><td>
 

package/lib/plugins/bottom-gear/BottomGear.d.ts

@@ -156,5 +156,6 @@ export declare class BottomGear extends UICorePlugin {
     private onCoreReady;
     private onMediaControlRendered;
     private mount;
+    private alignSubmenu;
 }
 //# sourceMappingURL=BottomGear.d.ts.map

package/lib/plugins/bottom-gear/BottomGear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkD,MAAM,cAAc,CAAA;AAO3F,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB,OAAO,CAAC,QAAQ,CAAK;IAErB,OAAO,CAAC,SAAS,CAAQ;IAEzB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAInB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA6B1D,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAsBf;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,KAAK;CAOd"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKb,MAAM,cAAc,CAAA;AAOrB,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAU5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB,OAAO,CAAC,QAAQ,CAAI;IAEpB,OAAO,CAAC,SAAS,CAAO;IAExB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAInB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA2B1D,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,YAAY;CASrB"}

package/lib/plugins/bottom-gear/BottomGear.js

@@ -1,4 +1,4 @@
-import { UICorePlugin, template, Events as ClapprEvents, $ } from '@clappr/core';
+import { UICorePlugin, template, Events as ClapprEvents, $, } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
@@ -10,6 +10,8 @@ import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
 import { ExtendedEvents } from '../media-control/MediaControl.js';
 const VERSION = '2.19.12';
 const T = 'plugins.bottom_gear';
+const MENU_VMARGIN = 12;
+const MENU_BACKLINK_HEIGHT = 44;
 /**
  * Events triggered by the plugin
  * @beta
@@ -21,7 +23,6 @@ export 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
@@ -158,7 +159,7 @@ export 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} addItem already exists`, { name });
             return $existingItem;
@@ -173,20 +174,17 @@ export class BottomGear extends UICorePlugin {
                 .hide()
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
-                trace(`${T} 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} bindContainerEvents`);
         this.listenTo(container, ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
         this.listenTo(container, ClapprEvents.CONTAINER_CLICK, () => {
             this.collapse();
@@ -201,7 +199,6 @@ export class BottomGear extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T} render`);
         const mediaControl = this.core.getPlugin('media_control');
         if (!mediaControl) {
             return this; // TODO test
@@ -242,11 +239,11 @@ export 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} toggleMenu`, { hidden: this.collapsed });
+        this.$el
+            .find('#gear-button')
+            .attr('aria-expanded', (!this.collapsed).toString());
     }
     collapse() {
-        trace(`${T} collapse`);
         this.collapsed = true;
         this.$el.find('#gear-options-wrapper').hide();
         this.$el.find('#gear-button').attr('aria-expanded', 'false');
@@ -254,7 +251,6 @@ export class BottomGear extends UICorePlugin {
         this.collapseSubmenus();
     }
     onCoreReady() {
-        trace(`${T} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
@@ -270,14 +266,18 @@ export class BottomGear extends UICorePlugin {
         this.bindContainerEvents(mediaControl.container);
     }
     onMediaControlRendered() {
-        trace(`${T} onMediaControlRendered`);
         this.mount();
     }
     mount() {
-        trace(`${T} 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`);
+    }
 }

package/lib/plugins/cmcd-config/CmcdConfig.d.ts

@@ -8,10 +8,10 @@ export type CmcdConfigPluginSettings = {
      */
     sessionId: string;
     /**
-     * Content ID, either constant or derived from current source.
-     * If ommitted, a SHA-1 hash of current source URL will be used
+     * Content ID,
+     * If ommitted, the pathname part of the first source URL will be used
      */
-    contentId?: string | ((sourceUrl: string, mimeType?: string) => (string | Promise<string>));
+    contentId?: string;
 };
 /**
  * A `PLUGIN` that configures CMCD for playback
@@ -27,19 +27,19 @@ export declare class CmcdConfig extends CorePlugin {
      * @inheritdocs
      */
     get name(): string;
+    get version(): string;
+    get supportedVersion(): string;
     constructor(core: Core);
     /**
      * @inheritdocs
      */
     bindEvents(): void;
-    getIds(): Promise<{
+    exportIds(): {
         sid: string;
         cid: string;
-    }>;
+    };
     private updateSettings;
-    private updateDashjsSettings;
     private updateHlsjsSettings;
-    private ensureContentId;
-    private evalContentId;
+    private generateContentId;
 }
 //# sourceMappingURL=CmcdConfig.d.ts.map

package/lib/plugins/cmcd-config/CmcdConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CmcdConfig.d.ts","sourceRoot":"","sources":["../../../src/plugins/cmcd-config/CmcdConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EAEX,MAAM,cAAc,CAAA;AAyBrB;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAC5F,CAAA;AAED;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,OAAO,CAAC,GAAG,CAAQ;IAEnB,OAAO,CAAC,GAAG,CAAK;IAEhB;;OAEG;IACH,IAAI,IAAI,WAEP;gBAEW,IAAI,EAAE,IAAI;IAKtB;;OAEG;IACM,UAAU;IAMb,MAAM,IAAI,OAAO,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAOrD,OAAO,CAAC,cAAc;YAWR,oBAAoB;YAiBpB,mBAAmB;YAkBnB,eAAe;YAOf,aAAa;CAU5B"}
+{"version":3,"file":"CmcdConfig.d.ts","sourceRoot":"","sources":["../../../src/plugins/cmcd-config/CmcdConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,IAAI,EAAE,UAAU,EAAU,MAAM,cAAc,CAAA;AA6BrE;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAID;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,OAAO,CAAC,GAAG,CAAQ;IAEnB,OAAO,CAAC,GAAG,CAAK;IAEhB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED,IAAI,OAAO,WAEV;IAED,IAAI,gBAAgB,WAEnB;gBAEW,IAAI,EAAE,IAAI;IAMtB;;OAEG;IACM,UAAU;IAMnB,SAAS,IAAI;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;YAO3B,cAAc;IA8B5B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,iBAAiB;CAK1B"}

package/lib/plugins/cmcd-config/CmcdConfig.js

@@ -1,5 +1,7 @@
-import { CorePlugin, Events, } from '@clappr/core';
-import { generateContentId, generateSessionId } from './utils';
+import { $, CorePlugin, Events } from '@clappr/core';
+// import { trace } from '@gcorevideo/utils'
+import { generateSessionId } from './utils';
+import { CLAPPR_VERSION } from '../../build.js';
 const CMCD_KEYS = [
     'br',
     'd',
@@ -20,6 +22,7 @@ const CMCD_KEYS = [
     'st',
     'v',
 ];
+// const T = 'plugins.cmcd'
 /**
  * A `PLUGIN` that configures CMCD for playback
  * @beta
@@ -36,56 +39,62 @@ export class CmcdConfig extends CorePlugin {
     get name() {
         return 'cmcd';
     }
+    get version() {
+        return '0.1.0';
+    }
+    get supportedVersion() {
+        return CLAPPR_VERSION;
+    }
     constructor(core) {
         super(core);
         this.sid = this.options.cmcd?.sessionId ?? generateSessionId();
+        this.cid = this.options.cmcd?.contentId ?? this.generateContentId();
     }
     /**
      * @inheritdocs
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, () => this.updateSettings());
+        this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, () => this.updateSettings(this.core.containers[0]));
     }
-    async getIds() {
+    exportIds() {
         return {
             sid: this.sid,
-            cid: await this.ensureContentId(),
+            cid: this.cid,
         };
     }
-    updateSettings() {
-        switch (this.core.activeContainer.playback.name) {
+    async updateSettings(container) {
+        switch (container.playback.name) {
             case 'dash':
-                this.updateDashjsSettings();
+                $.extend(true, container.playback.options, {
+                    dash: {
+                        cmcd: {
+                            enabled: true,
+                            enabledKeys: CMCD_KEYS,
+                            sid: this.sid,
+                            cid: this.cid,
+                        },
+                    },
+                });
                 break;
             case 'hls':
-                this.updateHlsjsSettings();
+                $.extend(true, container.playback.options, {
+                    playback: {
+                        hlsjsConfig: {
+                            cmcd: {
+                                includeKeys: CMCD_KEYS,
+                                sessionId: this.sid,
+                                contentId: this.cid,
+                            },
+                        },
+                    },
+                });
                 break;
         }
     }
-    async updateDashjsSettings() {
-        const { cid, sid } = await this.getIds();
-        const options = this.core.activePlayback.options;
-        this.core.activePlayback.options = {
-            ...options,
-            dash: {
-                ...(options.dash ?? {}),
-                cmcd: {
-                    enabled: true,
-                    enabledKeys: CMCD_KEYS,
-                    sid,
-                    cid,
-                },
-            },
-        };
-    }
-    async updateHlsjsSettings() {
-        const { cid, sid } = await this.getIds();
-        const options = this.core.activePlayback.options;
-        this.core.activePlayback.options = {
-            ...options,
+    updateHlsjsSettings(options, { cid, sid }) {
+        $.extend(true, options, {
             playback: {
                 hlsjsConfig: {
-                    ...(options.playback?.hlsjsConfig ?? {}),
                     cmcd: {
                         includeKeys: CMCD_KEYS,
                         sessionId: sid,
@@ -93,22 +102,9 @@ export class CmcdConfig extends CorePlugin {
                     },
                 },
             },
-        };
-    }
-    async ensureContentId() {
-        if (!this.cid) {
-            this.cid = await this.evalContentId();
-        }
-        return this.cid;
+        });
     }
-    async evalContentId() {
-        if (!this.core.activeContainer.options.cmcd?.contentId) {
-            return generateContentId(this.core.activePlayback.options.src);
-        }
-        const contentId = this.core.activeContainer.options.cmcd.contentId;
-        if (typeof contentId === 'string') {
-            return contentId;
-        }
-        return Promise.resolve(contentId(this.core.activePlayback.options.src));
+    generateContentId() {
+        return new URL(this.core.options.source ?? this.core.options.sources[0].source).pathname.slice(0, 64);
     }
 }

package/lib/plugins/cmcd-config/utils.d.ts

@@ -1,3 +1,2 @@
 export declare function generateSessionId(): string;
-export declare function generateContentId(sourceUrl: string): Promise<string>;
 //# sourceMappingURL=utils.d.ts.map

package/lib/plugins/cmcd-config/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/cmcd-config/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAQpE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/cmcd-config/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C"}

package/lib/plugins/cmcd-config/utils.js

@@ -1,12 +1,3 @@
 export function generateSessionId() {
     return window.crypto.randomUUID();
 }
-export function generateContentId(sourceUrl) {
-    return window.crypto.subtle.digest('SHA-1', new TextEncoder().encode(sourceUrl))
-        .then(buffer => {
-        const hex = Array.from(new Uint8Array(buffer))
-            .map(b => b.toString(16).padStart(2, '0'))
-            .join('');
-        return hex;
-    });
-}

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

@@ -183,6 +183,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
      */

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

@@ -318,6 +318,15 @@ export 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
      */
@@ -417,11 +426,11 @@ export 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 });

package/lib/testUtils.d.ts

@@ -5,6 +5,7 @@ export declare function createMockCore(options?: Record<string, unknown>, contai
     $el: any;
     activePlayback: any;
     activeContainer: any;
+    containers: any[];
     i18n: {
         t: import("vitest").Mock<(...args: any[]) => any>;
     };

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS,EAAE,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCtF;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;EA6B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS,EAAE,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCtF;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;EA6B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAmB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -9,6 +9,7 @@ export function createMockCore(options = {}, container = createMockContainer(opt
         $el: $(el),
         activePlayback: container.playback,
         activeContainer: container,
+        containers: [container],
         i18n: {
             t: vi.fn().mockImplementation((key) => key),
         },
@@ -111,6 +112,8 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.container = core.activeContainer;
     // @ts-ignore
+    mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300);
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
     core.$el.append(mediaControl.$el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.24.0",
+  "version": "2.24.2",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/bottom-gear/BottomGear.ts

@@ -1,4 +1,10 @@
-import { UICorePlugin, template, Events as ClapprEvents, $, Container } from '@clappr/core'
+import {
+  UICorePlugin,
+  template,
+  Events as ClapprEvents,
+  $,
+  Container,
+} from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
@@ -16,6 +22,9 @@ const VERSION = '2.19.12'
 
 const T = 'plugins.bottom_gear'
 
+const MENU_VMARGIN = 12
+const MENU_BACKLINK_HEIGHT = 44
+
 /**
  * Events triggered by the plugin
  * @beta
@@ -27,8 +36,6 @@ export enum GearEvents {
   RENDERED = 'rendered',
 }
 
-// TODO disabled if no items added
-
 /**
  * `PLUGIN` that adds a button to extend the media controls UI with extra options.
  * @beta
@@ -100,9 +107,9 @@ export enum GearEvents {
 export class BottomGear extends UICorePlugin {
   private hd = false
 
-  private numItems = 0;
+  private numItems = 0
 
-  private collapsed = true;
+  private collapsed = true
 
   /**
    * @internal
@@ -175,7 +182,7 @@ export class BottomGear extends UICorePlugin {
    * ```
    */
   addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult {
-    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} addItem already exists`, { name })
       return $existingItem
@@ -190,21 +197,18 @@ export class BottomGear extends UICorePlugin {
         .hide()
         .appendTo(this.$el.find('#gear-options-wrapper'))
       $item.on('click', (e: MouseEvent) => {
-        trace(`${T} 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.numItems++
+    this.$el.show()
     return $item
   }
 
   private bindContainerEvents(container: Container) {
-    trace(`${T} bindContainerEvents`)
     this.listenTo(
       container,
       ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE,
@@ -225,14 +229,13 @@ export class BottomGear extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`)
     const mediaControl = this.core.getPlugin('media_control')
     if (!mediaControl) {
       return this // TODO test
     }
     const icon = this.hd ? gearHdIcon : gearIcon
-    this.collapsed = true;
-    this.numItems = 0;
+    this.collapsed = true
+    this.numItems = 0
     this.$el
       .html(BottomGear.template({ icon }))
       .hide() // until numItems > 0
@@ -264,19 +267,19 @@ export class BottomGear extends UICorePlugin {
     this.core
       .getPlugin('media_control')
       .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
-    this.collapsed = !this.collapsed;
+    this.collapsed = !this.collapsed
     if (this.collapsed) {
       this.$el.find('#gear-options-wrapper').hide()
     } else {
       this.$el.find('#gear-options-wrapper').show()
     }
-    this.$el.find('#gear-button').attr('aria-expanded', (!this.collapsed).toString())
-    trace(`${T} toggleMenu`, { hidden: this.collapsed })
+    this.$el
+      .find('#gear-button')
+      .attr('aria-expanded', (!this.collapsed).toString())
   }
 
   private collapse() {
-    trace(`${T} collapse`)
-    this.collapsed = true;
+    this.collapsed = true
     this.$el.find('#gear-options-wrapper').hide()
     this.$el.find('#gear-button').attr('aria-expanded', 'false')
     // TODO hide submenus
@@ -284,7 +287,6 @@ export class BottomGear extends UICorePlugin {
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`)
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(
@@ -293,9 +295,13 @@ export class BottomGear extends UICorePlugin {
       this.onMediaControlRendered,
     )
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse)
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_CONTAINERCHANGED, () => {
-      this.bindContainerEvents(mediaControl.container)
-    })
+    this.listenTo(
+      mediaControl,
+      ClapprEvents.MEDIACONTROL_CONTAINERCHANGED,
+      () => {
+        this.bindContainerEvents(mediaControl.container)
+      },
+    )
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
@@ -309,15 +315,21 @@ export class BottomGear extends UICorePlugin {
   }
 
   private onMediaControlRendered() {
-    trace(`${T} onMediaControlRendered`)
     this.mount()
   }
 
   private mount() {
-    trace(`${T} mount`, {
-      numItems: this.numItems,
-    })
     const mediaControl = this.core.getPlugin('media_control')
     mediaControl.mount('gear', this.$el)
   }
+
+  private alignSubmenu($subMenu: ZeptoResult) {
+    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`)
+  }
 }