@gcorevideo/player 2.25.6 → 2.25.7

package/lib/plugins/audio-selector/AudioTracks.js

@@ -1,13 +1,12 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
 import assert from 'assert';
+// import { trace } from '@gcorevideo/utils'
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/audio-tracks/template.ejs';
-import '../../../assets/audio-tracks/style.scss';
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg';
 import { ExtendedEvents } from '../media-control/MediaControl.js';
-import { trace } from '@gcorevideo/utils';
 const VERSION = '2.22.4';
-const T = 'plugins.audiotracks';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -20,6 +19,7 @@ const T = 'plugins.audiotracks';
  */
 export class AudioTracks extends UICorePlugin {
     currentTrack = null;
+    open = false;
     tracks = [];
     /**
      * @internal
@@ -45,7 +45,7 @@ export class AudioTracks extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-audiotracks',
+            class: 'media-control-audiotracks media-control-dd__wrap',
         };
     }
     /**
@@ -53,8 +53,8 @@ export class AudioTracks extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-audiotracks-select]': 'onTrackSelect',
-            'click #audiotracks-button': 'toggleMenu',
+            'click #gplayer-audiotracks-menu [data-item]': 'onTrackSelect',
+            'click #gplayer-audiotracks-button': 'toggleMenu',
         };
     }
     /**
@@ -68,8 +68,9 @@ export class AudioTracks extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-            mediaControl.slot('audiotracks', this.$el);
+            this.mount();
         });
+        // TODO when tracks change, re-render and re-attach
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -84,6 +85,7 @@ export class AudioTracks extends UICorePlugin {
                 tracks.find((track) => track.kind === 'main') ?? null; // TODO test
             this.tracks = tracks;
             this.render();
+            this.mount();
         });
         this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
@@ -91,6 +93,10 @@ export class AudioTracks extends UICorePlugin {
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
+        // TODO test
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+            this.hideMenu();
+        });
     }
     shouldRender() {
         // Render is called from the parent class constructor so tracks aren't available
@@ -101,21 +107,19 @@ export class AudioTracks extends UICorePlugin {
      * @internal
      */
     render() {
-        if (!this.shouldRender()) {
-            return this;
-        }
         this.$el.html(AudioTracks.template({
-            tracks: this.tracks,
+            tracks: this.tracks ?? [],
             title: this.getTitle(),
             icon: audioArrow,
             current: this.currentTrack?.id,
         }));
+        this.$el.find('#gplayer-audiotracks-menu').hide();
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
     onTrackSelect(event) {
-        const id = event.currentTarget?.dataset?.audiotracksSelect;
+        const id = event.currentTarget?.dataset?.item;
         if (id) {
             this.selectAudioTrack(id);
         }
@@ -129,25 +133,34 @@ export class AudioTracks extends UICorePlugin {
         this.updateText();
     }
     hideMenu() {
-        trace(`${T} hideMenu`);
-        this.$el.find('#audiotracks-select').addClass('hidden');
-        this.$el.find('#audiotracks-button').attr('aria-expanded', 'false');
+        this.open = false;
+        this.$el.find('#gplayer-audiotracks-menu').hide();
+        this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false');
     }
     toggleMenu() {
-        this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#audiotracks-select').toggleClass('hidden'); // TODO use plain CSS display: none
-        const open = !this.$el.find('#audiotracks-select').hasClass('hidden'); // TODO hold state
-        this.$el.find('#audiotracks-button').attr('aria-expanded', open);
+        this.open = !this.open;
+        this.core
+            .getPlugin('media_control')
+            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
+        if (this.open) {
+            this.$el.find('#gplayer-audiotracks-menu').show();
+        }
+        else {
+            this.$el.find('#gplayer-audiotracks-menu').hide();
+        }
+        this.$el
+            .find('#gplayer-audiotracks-button')
+            .attr('aria-expanded', this.open);
     }
     buttonElement() {
-        return this.$('button');
+        return this.$('#gplayer-audiotracks-button');
     }
     buttonElementText() {
-        return this.$('button .audio-text');
+        return this.$el.find('#gplayer-audiotracks-button-text');
     }
     trackElement(id) {
-        return this.$('#audiotracks-select a' +
-            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
+        return this.$('#gplayer-audiotracks-menu a' +
+            (id !== undefined ? `[data-item="${id}"]` : '')).parent();
     }
     getTitle() {
         if (!this.currentTrack) {
@@ -178,4 +191,9 @@ export class AudioTracks extends UICorePlugin {
                 .attr('aria-checked', 'true');
         }
     }
+    mount() {
+        if (this.shouldRender()) {
+            this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
+        }
+    }
 }

package/lib/plugins/media-control/MediaControl.js

@@ -888,7 +888,7 @@ export class MediaControl extends UICorePlugin {
         const panel = this.getElementLocation(name);
         if (panel) {
             element.attr(`data-${name}`, '');
-            element.addClass('gplayer-mc-panel-item');
+            element.addClass('media-control-item');
             mountTo(panel, element);
         }
     }

package/package.json

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

package/src/plugins/audio-selector/AudioTracks.ts

@@ -1,19 +1,18 @@
 import { Events, UICorePlugin, template } from '@clappr/core'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
 import assert from 'assert'
+// import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
 import pluginHtml from '../../../assets/audio-tracks/template.ejs'
-import '../../../assets/audio-tracks/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
 import { ExtendedEvents, MediaControl } from '../media-control/MediaControl.js'
-import { trace } from '@gcorevideo/utils'
 
 const VERSION: string = '2.22.4'
 
-const T = 'plugins.audiotracks'
+// const T = 'plugins.audiotracks'
 
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
@@ -28,6 +27,8 @@ const T = 'plugins.audiotracks'
 export class AudioTracks extends UICorePlugin {
   private currentTrack: AudioTrack | null = null
 
+  private open = false
+
   private tracks: AudioTrack[] = []
 
   /**
@@ -58,7 +59,7 @@ export class AudioTracks extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: 'media-control-audiotracks',
+      class: 'media-control-audiotracks media-control-dd__wrap',
     }
   }
 
@@ -67,8 +68,8 @@ export class AudioTracks extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-audiotracks-select]': 'onTrackSelect',
-      'click #audiotracks-button': 'toggleMenu',
+      'click #gplayer-audiotracks-menu [data-item]': 'onTrackSelect',
+      'click #gplayer-audiotracks-button': 'toggleMenu',
     }
   }
 
@@ -87,15 +88,21 @@ export class AudioTracks extends UICorePlugin {
   private onCoreReady() {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
+
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-      mediaControl.slot('audiotracks', this.$el)
+      this.mount()
     })
+    // TODO when tracks change, re-render and re-attach
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
-    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {
-      if (from !== this.name) {
-        this.hideMenu()
-      }
-    })
+    this.listenTo(
+      mediaControl,
+      ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+      (from: string) => {
+        if (from !== this.name) {
+          this.hideMenu()
+        }
+      },
+    )
   }
 
   private onActiveContainerChanged() {
@@ -108,6 +115,7 @@ export class AudioTracks extends UICorePlugin {
           tracks.find((track) => track.kind === 'main') ?? null // TODO test
         this.tracks = tracks
         this.render()
+        this.mount()
       },
     )
     this.listenTo(
@@ -120,6 +128,10 @@ export class AudioTracks extends UICorePlugin {
         this.updateText()
       },
     )
+    // TODO test
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
+      this.hideMenu()
+    })
   }
 
   private shouldRender() {
@@ -132,18 +144,15 @@ export class AudioTracks extends UICorePlugin {
    * @internal
    */
   override render() {
-    if (!this.shouldRender()) {
-      return this
-    }
-
     this.$el.html(
       AudioTracks.template({
-        tracks: this.tracks,
+        tracks: this.tracks ?? [],
         title: this.getTitle(),
         icon: audioArrow,
         current: this.currentTrack?.id,
       }),
     )
+    this.$el.find('#gplayer-audiotracks-menu').hide()
     this.updateText()
     this.highlightCurrentTrack()
 
@@ -151,7 +160,7 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private onTrackSelect(event: MouseEvent) {
-    const id = (event.currentTarget as HTMLElement)?.dataset?.audiotracksSelect
+    const id = (event.currentTarget as HTMLElement)?.dataset?.item
     if (id) {
       this.selectAudioTrack(id)
     }
@@ -167,31 +176,40 @@ export class AudioTracks extends UICorePlugin {
   }
 
   private hideMenu() {
-    trace(`${T} hideMenu`)
-    this.$el.find('#audiotracks-select').addClass('hidden')
-    this.$el.find('#audiotracks-button').attr('aria-expanded', 'false')
+    this.open = false
+    this.$el.find('#gplayer-audiotracks-menu').hide()
+    this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false')
   }
 
   private toggleMenu() {
-    this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
-    this.$el.find('#audiotracks-select').toggleClass('hidden') // TODO use plain CSS display: none
-    const open = !this.$el.find('#audiotracks-select').hasClass('hidden') // TODO hold state
-    this.$el.find('#audiotracks-button').attr('aria-expanded', open)
+    this.open = !this.open
+
+    this.core
+      .getPlugin('media_control')
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
+    if (this.open) {
+      this.$el.find('#gplayer-audiotracks-menu').show()
+    } else {
+      this.$el.find('#gplayer-audiotracks-menu').hide()
+    }
+    this.$el
+      .find('#gplayer-audiotracks-button')
+      .attr('aria-expanded', this.open)
   }
 
   private buttonElement(): ZeptoResult {
-    return this.$('button')
+    return this.$('#gplayer-audiotracks-button')
   }
 
   private buttonElementText(): ZeptoResult {
-    return this.$('button .audio-text')
+    return this.$el.find('#gplayer-audiotracks-button-text')
   }
 
   private trackElement(id?: string): ZeptoResult {
     return (
       this.$(
-        '#audiotracks-select a' +
-          (id !== undefined ? `[data-audiotracks-select="${id}"]` : ''),
+        '#gplayer-audiotracks-menu a' +
+          (id !== undefined ? `[data-item="${id}"]` : ''),
       ) as ZeptoResult
     ).parent()
   }
@@ -229,4 +247,10 @@ export class AudioTracks extends UICorePlugin {
         .attr('aria-checked', 'true')
     }
   }
+
+  private mount() {
+    if (this.shouldRender()) {
+      this.core.getPlugin('media_control')?.slot('audiotracks', this.$el)
+    }
+  }
 }

package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts

@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Events } from '@clappr/core'
+
 import { ExtendedEvents } from '../../media-control/MediaControl'
 import { AudioTracks } from '../AudioTracks'
 
@@ -29,54 +30,51 @@ describe('AudioTracks', () => {
     core.emit(Events.CORE_READY)
     core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
   })
-  describe('before media control is rendererd', () => {
-    beforeEach(() => {
-      emitTracksAvailable(core, TRACKS)
+  describe('basically', () => {
+    it('should render button', () => {
+      expect(audioTracks.$el.find('#gplayer-audiotracks-button').length).toBe(1)
     })
-    it('should not attach to the media control', () => {
-      expect(mediaControl.slot).not.toHaveBeenCalledWith(
-        'audiotracks',
-        expect.anything(),
-      )
+    it('should render menu hidden', () => {
+      expect(audioTracks.$el.find('#gplayer-audiotracks-menu').css('display')).toBe('none')
     })
   })
-  describe('when media control is rendered', () => {
-    beforeEach(() => {
-      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
-    })
-    it('should attach to the media control', () => {
-      expect(mediaControl.slot).toHaveBeenCalledWith(
+  describe('until audio tracks are available', () => {
+    it('should not mount', () => {
+      expect(mediaControl.slot).not.toHaveBeenCalledWith(
         'audiotracks',
-        audioTracks.$el,
+        expect.anything(),
       )
     })
   })
-  describe('given that audio tracks are available', () => {
+  describe('when audio tracks are available', () => {
     beforeEach(() => {
       emitTracksAvailable(core, TRACKS)
     })
-    it('should render button', () => {
-      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(1)
-    })
-    it('should render menu hidden', () => {
+    it('should render menu', () => {
       expect(audioTracks.el.innerHTML).toMatchSnapshot()
       expect(
-        audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
-      ).toBe(true)
-      const trackItems = audioTracks.$el.find('#audiotracks-select li')
+        audioTracks.$el.find('#gplayer-audiotracks-menu').css('display'),
+      ).toBe('none')
+      const trackItems = audioTracks.$el.find('#gplayer-audiotracks-menu li')
       expect(trackItems.length).toBe(2)
       expect(trackItems.eq(0).text().trim()).toBe('English')
       expect(trackItems.eq(1).text().trim()).toBe('Spanish')
     })
+    it('should mount', () => {
+      expect(mediaControl.slot).toHaveBeenCalledWith(
+        'audiotracks',
+        audioTracks.$el,
+      )
+    })
     describe('when button is clicked', () => {
       beforeEach(() => {
-        audioTracks.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#gplayer-audiotracks-button').click()
       })
       it('should show menu', () => {
         expect(audioTracks.$el.html()).toMatchSnapshot()
         expect(
-          audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
-        ).toBe(false)
+          audioTracks.$el.find('#gplayer-audiotracks-menu').css('display'),
+        ).not.toBe('none')
       })
       it('should collapse all other menus', () => {
         expect(mediaControl.trigger).toHaveBeenCalledWith(
@@ -87,7 +85,7 @@ describe('AudioTracks', () => {
       describe('when audio track is selected', () => {
         beforeEach(() => {
           audioTracks.$el
-            .find('#audiotracks-select [data-audiotracks-select="2"]')
+            .find('#gplayer-audiotracks-menu [data-item="2"]')
             .click()
         })
         it('should switch to the selected audio track', () => {
@@ -98,13 +96,13 @@ describe('AudioTracks', () => {
         it('should hide the menu', () => {
           expect(audioTracks.$el.html()).toMatchSnapshot()
           expect(
-            audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
-          ).toBe(true)
-          expect(audioTracks.$el.find('#audiotracks-button').attr('aria-expanded')).toBe('false')
+            audioTracks.$el.find('#gplayer-audiotracks-menu').css('display'),
+          ).toBe('none')
+          expect(audioTracks.$el.find('#gplayer-audiotracks-button').attr('aria-expanded')).toBe('false')
         })
         it('should add changing class to the button', () => {
           expect(
-            audioTracks.$el.find('#audiotracks-button').hasClass('changing'),
+            audioTracks.$el.find('#gplayer-audiotracks-button').hasClass('changing'),
           ).toBe(true)
         })
         describe('when current audio track changes', () => {
@@ -123,14 +121,14 @@ describe('AudioTracks', () => {
           it('should update button class', () => {
             expect(
               audioTracks.$el
-                .find('#audiotracks-button')
+                .find('#gplayer-audiotracks-button')
                 .hasClass('changing'),
             ).toBe(false)
           })
           it('should update button label', () => {
             expect(
               audioTracks.$el
-                .find('#audiotracks-button')
+                .find('#gplayer-audiotracks-button')
                 .text()
                 .replace(/\/assets.*\.svg/g, '')
                 .trim(),
@@ -138,22 +136,22 @@ describe('AudioTracks', () => {
           })
           it('should highlight the selected menu item', () => {
             const selectedItem = audioTracks.$el.find(
-              '#audiotracks-select .current',
+              '#gplayer-audiotracks-menu .current',
             )
             expect(selectedItem.text().trim()).toBe('Spanish')
             expect(
               selectedItem
-                .find('a[data-audiotracks-select]')
+                .find('a[data-item]')
                 .hasClass('gcore-skin-active'),
             ).toBe(true)
           })
           it('should unhighlight any previously highlighted menu item', () => {
             expect(
-              audioTracks.$el.find('#audiotracks-select li.current').length,
+              audioTracks.$el.find('#gplayer-audiotracks-menu li.current').length,
             ).toBe(1)
             expect(
               audioTracks.$el.find(
-                '#audiotracks-select a.gcore-skin-active[data-audiotracks-select]',
+                '#gplayer-audiotracks-menu a.gcore-skin-active[data-item]',
               ).length,
             ).toBe(1)
           })
@@ -162,19 +160,36 @@ describe('AudioTracks', () => {
     })
     describe('when button is clicked twice', () => {
       beforeEach(() => {
-        audioTracks.$el.find('#audiotracks-button').click()
-        audioTracks.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#gplayer-audiotracks-button').click()
+        audioTracks.$el.find('#gplayer-audiotracks-button').click()
       })
       it('should collapse the menu', () => {
-        expect(audioTracks.$el.find('#audiotracks-select').hasClass('hidden')).toBe(true)
-        expect(audioTracks.$el.find('#audiotracks-button').attr('aria-expanded')).toBe('false')
+        expect(audioTracks.$el.find('#gplayer-audiotracks-menu').css('display')).toBe('none')
+        expect(audioTracks.$el.find('#gplayer-audiotracks-button').attr('aria-expanded')).toBe('false')
+      })
+    })
+    describe('when media control is rendered', () => {
+      beforeEach(() => {
+        mediaControl.slot.mockClear()
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should remount', () => {
+        expect(mediaControl.slot).toHaveBeenCalledWith(
+          'audiotracks',
+          audioTracks.$el,
+        )
       })
     })
   })
-  describe('when audio tracks are not available', () => {
-    it('should not render the button', () => {
-      expect(audioTracks.$el.find('#audiotracks-button').length).toBe(0)
-      expect(audioTracks.$el.find('#audiotracks-select').length).toBe(0)
+  describe('when container is clicked', () => {
+    beforeEach(() => {
+      emitTracksAvailable(core, TRACKS)
+      audioTracks.$el.find('#gplayer-audiotracks-button').click()
+      core.activeContainer.emit(Events.CONTAINER_CLICK)
+    })
+    it('should hide the menu', () => {
+      expect(audioTracks.$el.find('#gplayer-audiotracks-menu').css('display')).toBe('none')
+      expect(audioTracks.$el.find('#gplayer-audiotracks-button').attr('aria-expanded')).toBe('false')
     })
   })
 })