@gcorevideo/player 2.24.1 → 2.24.2

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.24.1";
+var version$1 = "2.24.2";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43896,6 +43896,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
      */
@@ -43995,11 +44004,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 });
@@ -45091,6 +45100,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 +45113,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 +45249,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 +45264,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 +45289,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 +45329,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 +45341,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 +45356,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`);
+    }
 }
 
 /**

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/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.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;;;;;;;;;;;;;;;;;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,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

@@ -112,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.1",
+  "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`)
+  }
 }

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

@@ -31,6 +31,15 @@ describe('BottomGear', () => {
       bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
       core.emit(Events.CORE_READY)
       bottomGear.addItem('test', null).html('<button>test</button>')
+      const $moreOptions = $(
+        `<div>
+      <button id="more-options-back">&lt; back</button>
+      <ul class="gear-sub-menu" id="more-options"><li>Item</li><li>Item</li><li>Item</li></ul>
+    </div>`,
+      )
+      bottomGear
+        .addItem('more', $moreOptions)
+        .html('<button id="more-button">more options</button>')
     })
     it('should render', () => {
       expect(bottomGear.el.innerHTML).toMatchSnapshot()
@@ -99,6 +108,26 @@ describe('BottomGear', () => {
         )
       })
     })
+    describe('when submenu is open', () => {
+      beforeEach(async () => {
+        mediaControl.getAvailableHeight.mockReturnValue(198)
+        bottomGear.$el.find('#gear-button').click()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        bottomGear.$el.find('#more-button').click()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      })
+      it('should show submenu', () => {
+        expect(
+          bottomGear.$el.find('#more-options').parent().css('display'),
+        ).not.toBe('none')
+      })
+      it('should align nicely within container', () => {
+        const submenu = bottomGear.$el.find('#more-options')
+        const wrapper = submenu.parent()
+        expect(wrapper.css('max-height')).toBe('174px') // available height minus vertical margins
+        expect(submenu.css('max-height')).toBe('130px') // wrapper height minus backlink height
+      })
+    })
   })
   describe('when there are no items', () => {
     beforeEach(() => {
@@ -128,9 +157,9 @@ describe('BottomGear', () => {
         await new Promise((resolve) => setTimeout(resolve, 0))
       })
       it('should collapse the gear menu', () => {
-        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-          'none',
-        )
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).toBe('none')
         expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
           'false',
         )
@@ -140,14 +169,12 @@ describe('BottomGear', () => {
     describe('when submenu is open', () => {
       beforeEach(async () => {
         // bottomGear.$el.find('#test-submenu').click()
-        bottomGear.$el.find('#test-options').show(); // as if it was clicked
+        bottomGear.$el.find('#test-options').show() // as if it was clicked
         await new Promise((resolve) => setTimeout(resolve, 0))
         mediaControl.container.trigger(Events.CONTAINER_CLICK)
       })
       it('should collapse it as well', () => {
-        expect(bottomGear.$el.find('#test-options').css('display')).toBe(
-          'none',
-        )
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe('none')
         expect(bottomGear.$el.find('#gear-options').css('display')).not.toBe(
           'none',
         )

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -5,7 +5,10 @@ exports[`BottomGear > basically > should render 1`] = `
     /assets/icons/new/gear.svg
 </button>
 <div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
-    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li></ul>
-</div>
+    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li><li data-more=""><button id="more-button">more options</button></li></ul>
+<div class="gear-sub-menu-wrapper" style="display: none;">
+      <button id="more-options-back">&lt; back</button>
+      <ul class="gear-sub-menu" id="more-options"><li>Item</li><li>Item</li><li>Item</li></ul>
+    </div></div>
 "
 `;

package/src/plugins/media-control/MediaControl.ts

@@ -531,6 +531,18 @@ export class MediaControl extends UICorePlugin {
     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
    */
@@ -645,12 +657,12 @@ export class MediaControl extends UICorePlugin {
   }
 
   private mousemoveOnSeekBar(event: MouseEvent) {
-    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 })