@gcorevideo/player 2.23.1 → 2.23.2

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

@@ -82,6 +82,8 @@ export declare enum GearEvents {
  */
 export declare class BottomGear extends UICorePlugin {
     private hd;
+    private numItems;
+    private collapsed;
     /**
      * @internal
      */
@@ -149,9 +151,10 @@ export declare class BottomGear extends UICorePlugin {
      * Should be called by the UI plugin that added a gear item with a submenu when the latter is closed (e.g., when a "back" button is clicked).
      */
     refresh(): void;
-    private toggleGearMenu;
-    private hide;
+    private toggleMenu;
+    private collapse;
     private onCoreReady;
     private onMediaControlRendered;
+    private mount;
 }
 //# 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,EAAuC,MAAM,cAAc,CAAA;AAOhF,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;;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;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,sBAAsB;CAK/B"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,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;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA6B1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAsBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,KAAK;CAOd"}

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

@@ -92,6 +92,8 @@ export var GearEvents;
  */
 export class BottomGear extends UICorePlugin {
     hd = false;
+    numItems = 0;
+    collapsed = true;
     /**
      * @internal
      */
@@ -124,7 +126,7 @@ export class BottomGear extends UICorePlugin {
      */
     get events() {
         return {
-            'click #gear-button': 'toggleGearMenu',
+            'click #gear-button': 'toggleMenu',
         };
     }
     /**
@@ -178,6 +180,10 @@ export class BottomGear extends UICorePlugin {
                 this.$el.find('#gear-options').hide();
             });
         }
+        this.numItems++;
+        if (this.numItems > 0) {
+            this.$el.show();
+        }
         return $item;
     }
     onActiveContainerChanged() {
@@ -191,7 +197,7 @@ export class BottomGear extends UICorePlugin {
     highDefinitionUpdate(isHd) {
         trace(`${T} highDefinitionUpdate`, { isHd });
         this.hd = isHd;
-        this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
+        this.$el.find('#gear-button').html(isHd ? gearHdIcon : gearIcon);
     }
     /**
      * @internal
@@ -203,11 +209,13 @@ export class BottomGear extends UICorePlugin {
             return this; // TODO test
         }
         const icon = this.hd ? gearHdIcon : gearIcon;
+        this.collapsed = true;
+        this.numItems = 0;
         this.$el
             .html(BottomGear.template({ icon }))
-            .find('#gear-sub-menu-wrapper')
+            .hide() // until numItems > 0
+            .find('#gear-options-wrapper')
             .hide();
-        // TODO make non-clickable when there are no items
         setTimeout(() => {
             this.trigger(GearEvents.RENDERED);
         }, 0);
@@ -222,30 +230,46 @@ export class BottomGear extends UICorePlugin {
         this.$el.find('.gear-sub-menu-wrapper').hide();
         this.$el.find('#gear-options').show();
     }
-    toggleGearMenu() {
+    toggleMenu() {
         this.core
             .getPlugin('media_control')
             .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#gear-options-wrapper').toggle();
+        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 });
     }
-    hide() {
+    collapse() {
         trace(`${T} hide`);
+        this.collapsed = true;
         this.$el.find('#gear-options-wrapper').hide();
+        this.$el.find('#gear-button').attr('aria-expanded', 'false');
     }
     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);
-        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide);
+        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse);
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
-                this.hide();
+                this.collapse();
             }
         });
     }
     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);
     }

package/package.json

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

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

@@ -100,6 +100,10 @@ export enum GearEvents {
 export class BottomGear extends UICorePlugin {
   private hd = false
 
+  private numItems = 0;
+
+  private collapsed = true;
+
   /**
    * @internal
    */
@@ -137,7 +141,7 @@ export class BottomGear extends UICorePlugin {
    */
   override get events() {
     return {
-      'click #gear-button': 'toggleGearMenu',
+      'click #gear-button': 'toggleMenu',
     }
   }
 
@@ -197,6 +201,10 @@ export class BottomGear extends UICorePlugin {
         this.$el.find('#gear-options').hide()
       })
     }
+    this.numItems++;
+    if (this.numItems > 0) {
+      this.$el.show()
+    }
     return $item
   }
 
@@ -217,7 +225,7 @@ export class BottomGear extends UICorePlugin {
   private highDefinitionUpdate(isHd: boolean) {
     trace(`${T} highDefinitionUpdate`, { isHd })
     this.hd = isHd
-    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon)
+    this.$el.find('#gear-button').html(isHd ? gearHdIcon : gearIcon)
   }
 
   /**
@@ -230,13 +238,14 @@ export class BottomGear extends UICorePlugin {
       return this // TODO test
     }
     const icon = this.hd ? gearHdIcon : gearIcon
+    this.collapsed = true;
+    this.numItems = 0;
     this.$el
       .html(BottomGear.template({ icon }))
-      .find('#gear-sub-menu-wrapper')
+      .hide() // until numItems > 0
+      .find('#gear-options-wrapper')
       .hide()
 
-    // TODO make non-clickable when there are no items
-
     setTimeout(() => {
       this.trigger(GearEvents.RENDERED)
     }, 0)
@@ -254,16 +263,25 @@ export class BottomGear extends UICorePlugin {
     this.$el.find('#gear-options').show()
   }
 
-  private toggleGearMenu() {
+  private toggleMenu() {
     this.core
       .getPlugin('media_control')
       .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
-    this.$el.find('#gear-options-wrapper').toggle()
+    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 })
   }
 
-  private hide() {
+  private collapse() {
     trace(`${T} hide`)
+    this.collapsed = true;
     this.$el.find('#gear-options-wrapper').hide()
+    this.$el.find('#gear-button').attr('aria-expanded', 'false')
   }
 
   private onCoreReady() {
@@ -275,13 +293,13 @@ export class BottomGear extends UICorePlugin {
       ClapprEvents.MEDIACONTROL_RENDERED,
       this.onMediaControlRendered,
     )
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide)
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse)
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
       (from: string) => {
         if (from !== this.name) {
-          this.hide()
+          this.collapse()
         }
       },
     )
@@ -289,6 +307,13 @@ 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)
   }

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

@@ -5,6 +5,11 @@ import { createMockCore, createMockMediaControl } from '../../../testUtils'
 import { Events } from '@clappr/core'
 import { ExtendedEvents } from '../../media-control/MediaControl'
 
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('BottomGear.test'))
+
 describe('BottomGear', () => {
   let mediaControl: any
   let core: any
@@ -12,72 +17,104 @@ describe('BottomGear', () => {
   let onGearRendered: MockedFunction<() => void>
   beforeEach(() => {
     core = createMockCore()
-    mediaControl = createMockMediaControl(core)
-    core.getPlugin = vi
-      .fn()
-      .mockImplementation((name) =>
-        name === 'media_control' ? mediaControl : null,
-      )
-    bottomGear = new BottomGear(core)
-    onGearRendered = vi.fn()
-    bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-    bottomGear.render()
-    core.emit(Events.CORE_READY)
-  })
-  it('should render', () => {
-    expect(bottomGear.el.innerHTML).toMatchSnapshot()
-  })
-  it('should emit event in the next cycle', async () => {
-    expect(onGearRendered).not.toHaveBeenCalled()
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(onGearRendered).toHaveBeenCalled()
-  })
-  it('should render the gear menu hidden', () => {
-    expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-      'none',
-    )
+      mediaControl = createMockMediaControl(core)
+      core.getPlugin = vi
+        .fn()
+        .mockImplementation((name) =>
+          name === 'media_control' ? mediaControl : null,
+        )
   })
-  describe('until media control is rendered', () => {
-    it('should not attach to media control', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'gear',
-        expect.anything(),
-      )
-    })
-  })
-  describe('when media control is rendered', () => {
+  describe('basically', () => {
     beforeEach(() => {
-      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      bottomGear = new BottomGear(core)
+      onGearRendered = vi.fn()
+      bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
+      bottomGear.render()
+      core.emit(Events.CORE_READY)
+      bottomGear.addItem('test', null).html('<button>test</button>')
     })
-    it('should attach to media control', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+    it('should render', () => {
+      expect(bottomGear.el.innerHTML).toMatchSnapshot()
     })
-  })
-  describe('when clicked', () => {
-    beforeEach(() => {
-      bottomGear.$el.find('#gear-button').click()
+    it('should render the gear menu hidden', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
+      )
     })
-    it('should open the gear menu', () => {
-      expect(
-        bottomGear.$el.find('#gear-options-wrapper').css('display'),
-      ).not.toBe('none')
+    it('should emit event in the next render cycle', async () => {
+      expect(onGearRendered).not.toHaveBeenCalled()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      expect(onGearRendered).toHaveBeenCalled()
     })
-    it('should trigger media control menu collapse', () => {
-      expect(mediaControl.trigger).toHaveBeenCalledWith(
-        ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
-        'bottom_gear',
+    it('should render the gear menu hidden', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
       )
     })
+    describe('until media control is rendered', () => {
+      it('should not attach to media control', () => {
+        expect(mediaControl.mount).not.toHaveBeenCalledWith(
+          'gear',
+          expect.anything(),
+        )
+      })
+    })
+    describe('when media control is rendered', () => {
+      beforeEach(() => {
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should attach to media control', () => {
+        expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+      })
+    })
+    describe('when clicked', () => {
+      beforeEach(() => {
+        bottomGear.$el.find('#gear-button').click()
+      })
+      it('should open the gear menu', () => {
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).not.toBe('none')
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'true',
+        )
+      })
+      it('should trigger media control menu collapse', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'bottom_gear',
+        )
+      })
+    })
+    describe('when clicked twice', () => {
+      beforeEach(() => {
+        bottomGear.$el.find('#gear-button').click()
+        bottomGear.$el.find('#gear-button').click()
+      })
+      it('should collapse the gear menu', () => {
+        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+      })
+    })
   })
-  describe('when clicked twice', () => {
+  describe('when there are no items', () => {
     beforeEach(() => {
-      bottomGear.$el.find('#gear-button').click()
-      bottomGear.$el.find('#gear-button').click()
+      bottomGear = new BottomGear(core)
+      onGearRendered = vi.fn()
+      bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
+      bottomGear.render()
+      core.emit(Events.CORE_READY)
     })
-    it('should collapse the gear menu', () => {
-      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-        'none',
-      )
+    it('should render hidden', () => {
+      expect(bottomGear.$el.css('display')).toBe('none')
+    })
+    it('should show button after item is added', () => {
+      bottomGear.addItem('test', null).html('<button>test</button>')
+      expect(bottomGear.$el.css('display')).not.toBe('none')
     })
   })
 })

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

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BottomGear > should render 1`] = `
-"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
+exports[`BottomGear > basically > should render 1`] = `
+"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button" aria-expanded="false" aria-controls="gear-options">
     /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"></ul>
+<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>
 "
 `;