@gcorevideo/player 2.22.23 → 2.22.25

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

@@ -4,8 +4,8 @@ import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
-import pluginHtml from '../../../assets/audio-selector/track-selector.ejs'
-import '../../../assets/audio-selector/style.scss'
+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'
@@ -34,7 +34,7 @@ export class AudioTracks extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'audio_selector' // TODO rename to audiotracks
+    return 'audio_tracks'
   }
 
   /**
@@ -68,7 +68,7 @@ export class AudioTracks extends UICorePlugin {
   override get events() {
     return {
       'click [data-audiotracks-select]': 'onTrackSelect',
-      'click #audiotracks-button': 'toggleContextMenu',
+      'click #audiotracks-button': 'toggleMenu',
     }
   }
 
@@ -91,7 +91,11 @@ export class AudioTracks extends UICorePlugin {
       mediaControl.mount('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
-    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu)
+    this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {
+      if (from !== this.name) {
+        this.hideMenu()
+      }
+    })
   }
 
   private onActiveContainerChanged() {
@@ -165,10 +169,11 @@ 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')
   }
 
-  private toggleContextMenu() {
-    this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE)
+  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)

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

@@ -1,6 +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'
 
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
@@ -78,6 +78,12 @@ describe('AudioTracks', () => {
           audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
         ).toBe(false)
       })
+      it('should collapse all other menus', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'audio_tracks',
+        )
+      })
       describe('when audio track is selected', () => {
         beforeEach(() => {
           audioTracks.$el
@@ -94,6 +100,7 @@ describe('AudioTracks', () => {
           expect(
             audioTracks.$el.find('#audiotracks-select').hasClass('hidden'),
           ).toBe(true)
+          expect(audioTracks.$el.find('#audiotracks-button').attr('aria-expanded')).toBe('false')
         })
         it('should add changing class to the button', () => {
           expect(
@@ -153,6 +160,16 @@ describe('AudioTracks', () => {
         })
       })
     })
+    describe('when button is clicked twice', () => {
+      beforeEach(() => {
+        audioTracks.$el.find('#audiotracks-button').click()
+        audioTracks.$el.find('#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')
+      })
+    })
   })
   describe('when audio tracks are not available', () => {
     it('should not render the button', () => {

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

@@ -45,7 +45,7 @@ exports[`AudioTracks > given that audio tracks are available > when button is cl
 `;
 
 exports[`AudioTracks > given that audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
-"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="true">
+"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button" aria-haspopup="menu" aria-expanded="false">
     <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
 <ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select" role="menu">

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

@@ -98,7 +98,7 @@ export enum GearEvents {
  * ```
  */
 export class BottomGear extends UICorePlugin {
-  private isHd = false
+  private hd = false
 
   /**
    * @internal
@@ -216,7 +216,7 @@ export class BottomGear extends UICorePlugin {
 
   private highDefinitionUpdate(isHd: boolean) {
     trace(`${T} highDefinitionUpdate`, { isHd })
-    this.isHd = isHd
+    this.hd = isHd
     this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon)
   }
 
@@ -229,7 +229,7 @@ export class BottomGear extends UICorePlugin {
     if (!mediaControl) {
       return this // TODO test
     }
-    const icon = this.isHd ? gearHdIcon : gearIcon
+    const icon = this.hd ? gearHdIcon : gearIcon
     this.$el
       .html(BottomGear.template({ icon }))
       .find('#gear-sub-menu-wrapper')
@@ -257,7 +257,7 @@ export class BottomGear extends UICorePlugin {
   private toggleGearMenu() {
     this.core
       .getPlugin('media_control')
-      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE)
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
     this.$el.find('#gear-options-wrapper').toggle()
   }
 
@@ -279,7 +279,11 @@ export class BottomGear extends UICorePlugin {
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
-      this.hide,
+      (from: string) => {
+        if (from !== this.name) {
+          this.hide()
+        }
+      },
     )
   }
 

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

@@ -3,6 +3,7 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
 import { Events } from '@clappr/core'
+import { ExtendedEvents } from '../../media-control/MediaControl'
 
 describe('BottomGear', () => {
   let mediaControl: any
@@ -56,10 +57,27 @@ describe('BottomGear', () => {
     beforeEach(() => {
       bottomGear.$el.find('#gear-button').click()
     })
-    it('should toggle the gear menu', () => {
+    it('should open the gear menu', () => {
       expect(
         bottomGear.$el.find('#gear-options-wrapper').css('display'),
       ).not.toBe('none')
     })
+    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',
+      )
+    })
   })
 })

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -62,7 +62,7 @@ export type ClosedCaptionsPluginSettings = {
 export class ClosedCaptions extends UICorePlugin {
   private isPreselectedApplied = false
 
-  private isShowing = false
+  private active = false
 
   private track: TextTrackItem | null = null
 
@@ -109,8 +109,8 @@ export class ClosedCaptions extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-cc-select]': 'onItemSelect',
-      'click [data-cc-button]': 'toggleMenu',
+      'click #cc-select li a': 'onItemSelect',
+      'click #cc-button': 'toggleMenu',
     }
   }
 
@@ -139,12 +139,18 @@ export class ClosedCaptions extends UICorePlugin {
     trace(`${T} onCoreReady`)
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
-    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render)
-    this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render) // TODO mount to media control
+    this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, () => {
+      this.hideMenu()
+    })
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
-      this.hideMenu,
+      (from: string) => {
+        if (from !== this.name) {
+          this.hideMenu()
+        }
+      },
     )
   }
 
@@ -235,7 +241,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onStartAd() {
-    if (this.isShowing && this.core.activeContainer) {
+    if (this.active && this.core.activeContainer) {
       this.hide()
       this.listenTo(
         this.core.activeContainer,
@@ -262,7 +268,7 @@ export class ClosedCaptions extends UICorePlugin {
       this.track &&
       this.track.track.mode &&
       Browser.isiOS &&
-      this.isShowing
+      this.active
 
     if (shouldShow) {
       this.show()
@@ -279,7 +285,7 @@ export class ClosedCaptions extends UICorePlugin {
    * Hides the subtitles menu and the subtitles.
    */
   hide() {
-    this.isShowing = false
+    this.active = false
     this.renderIcon()
     this.$line.hide()
     if (this.tracks) {
@@ -293,7 +299,7 @@ export class ClosedCaptions extends UICorePlugin {
    * Shows the subtitles menu and the subtitles.
    */
   show() {
-    this.isShowing = true
+    this.active = true
     this.renderIcon()
     if (
       this.core.activeContainer &&
@@ -337,7 +343,8 @@ export class ClosedCaptions extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control')
 
-    this.$el.html(ClosedCaptions.template({ tracks: this.tracks }))
+    this.$el.html(ClosedCaptions.template({ tracks: this.tracks, i18n: this.core.i18n }))
+    this.$el.find('#cc-select').hide()
     this.core.activeContainer.$el.find('#cc-line').remove()
     this.$line = $(ClosedCaptions.templateString())
     this.resizeFont()
@@ -360,7 +367,6 @@ export class ClosedCaptions extends UICorePlugin {
     this.clearSubtitleText()
     this.track = item
 
-    this.hideMenu()
     this.updateSelection()
   }
 
@@ -371,7 +377,7 @@ export class ClosedCaptions extends UICorePlugin {
 
     localStorage.setItem(LOCAL_STORAGE_CC_ID, id)
     this.selectItem(this.findById(Number(id)))
-
+    this.hideMenu()
     return false
   }
 
@@ -393,23 +399,24 @@ export class ClosedCaptions extends UICorePlugin {
 
   private hideMenu() {
     trace(`${T} hideMenu`)
-    ;(this.$('[data-cc] ul') as ZeptoResult).hide()
+    this.$el.find('#cc-select').hide()
   }
 
   private toggleMenu() {
-    trace(`${T} toggleMenu`)
+    trace(`${T} toggleMenu`, {display: this.$el.find('#cc-select').css('display')})
     this.core
       .getPlugin('media_control')
-      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE)
-    this.$el.find('[data-cc] ul').toggle()
+      .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name)
+    this.$el.find('#cc-select').toggle()
+    // TODO hold state, add aria-expanded to the button, add active state to the button
   }
 
   private itemElement(id: number): ZeptoResult {
-    return (this.$(`ul li a[data-cc-select="${id}"]`) as ZeptoResult).parent()
+    return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent()
   }
 
   private allItemElements(): ZeptoResult {
-    return this.$('[data-cc] li')
+    return this.$('#cc-select li')
   }
 
   private selectSubtitles() {
@@ -471,7 +478,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private renderIcon() {
-    const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon
+    const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon
 
     this.$el.find('span.cc-text').html(icon)
   }

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -1,12 +1,20 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { ClosedCaptions } from '../ClosedCaptions.js'
-import { createMockCore, createMockMediaControl } from '../../../testUtils.js';
+import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
+import { ExtendedEvents } from '../../media-control/MediaControl.js'
+
+import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+import { Events } from '@clappr/core'
+// import { Events } from '@clappr/core';
+
+// Logger.enable('*')
+// setTracer(new LogTracer('ClosedCaptions.test'))
 
 describe('ClosedCaptions', () => {
-  let core: any;
-  let mediaControl: any;
-  let cc: ClosedCaptions;
+  let core: any
+  let mediaControl: any
+  let cc: ClosedCaptions
   beforeEach(() => {
     core = createMockCore()
     mediaControl = createMockMediaControl(core)
@@ -20,9 +28,9 @@ describe('ClosedCaptions', () => {
   })
   describe('basically', () => {
     beforeEach(() => {
-      core.emit('core:ready')
+      core.emit(Events.CORE_READY)
       core.activePlayback.el = document.createElement('video')
-      core.emit('core:active:container:changed', core.activeContainer)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
       core.activePlayback.closedCaptionsTracks = [
         {
           id: 1,
@@ -33,7 +41,7 @@ describe('ClosedCaptions', () => {
             label: 'English',
             mode: 'hidden',
             cues: [],
-          }
+          },
         },
         {
           id: 2,
@@ -44,16 +52,47 @@ describe('ClosedCaptions', () => {
             label: 'Spanish',
             mode: 'hidden',
             cues: [],
-          }
-        }
+          },
+        },
       ]
-      core.activePlayback.emit('playback:subtitle:available')
-      core.activeContainer.emit('container:subtitle:available')
+      core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_AVAILABLE)
+      core.activeContainer.emit(Events.CONTAINER_SUBTITLE_AVAILABLE)
     })
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
-      expect(cc.$el.find('[data-cc-button]').length).toEqual(1)
+      expect(cc.$el.find('#cc-button').length).toEqual(1)
       expect(mediaControl.mount).toHaveBeenCalledWith('cc', cc.$el)
     })
+    describe('when button is clicked', () => {
+      beforeEach(() => {
+        cc.$el.find('#cc-button').click()
+      })
+      it('should open menu', () => {
+        expect(cc.$el.find('#cc-select').css('display')).not.toBe('none')
+      })
+      it('should collapse all other menus', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'cc',
+        )
+      })
+    })
+    describe('when clicked twice', () => {
+      beforeEach(() => {
+        cc.$el.find('#cc-button').click().click()
+      })
+      it('should collapse the menu', () => {
+        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+      })
+    })
+    describe('when media control is hidden', () => {
+      beforeEach(() => {
+        cc.$el.find('#cc-button').click()
+        mediaControl.trigger(Events.MEDIACONTROL_HIDE)
+      })
+      it('should hide menu', () => {
+        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+      })
+    })
   })
-})
+})

package/src/plugins/subtitles/__tests__/__snapshots__/ClosedCaptions.test.ts.snap

@@ -5,21 +5,21 @@ exports[`ClosedCaptions > basically > should render 1`] = `
     <span class="cc-text">/assets/icons/new/subtitles-off.svg</span>
 </button>
 
-<ul class="gcore-skin-bg-color" id="cc-select">
+<ul class="gcore-skin-bg-color" id="cc-select" style="display: none;">
     
-        <li>
+        <li class="">
             <a href="#" class="gcore-skin-text-color" data-cc-select="1">
                 English
             </a>
         </li>
     
-        <li>
+        <li class="">
             <a href="#" class="gcore-skin-text-color" data-cc-select="2">
                 Spanish
             </a>
         </li>
     
-    <li class="current"><a href="#" class="gcore-skin-text-color gcore-skin-active" data-cc-select="-1">Off</a></li>
+    <li class="current"><a href="#" class="gcore-skin-text-color gcore-skin-active" data-cc-select="-1">off</a></li>
 </ul>
 "
 `;

package/src/testUtils.ts

@@ -194,6 +194,7 @@ export function createMockMediaControl(core: any) {
   mediaControl.mount = vi.fn()
   // @ts-ignore
   mediaControl.toggleElement = vi.fn()
+  vi.spyOn(mediaControl, 'trigger')
   return mediaControl
 }