@gcorevideo/player 2.21.1 → 2.21.4

package/src/playback.types.ts

@@ -130,3 +130,9 @@ export interface PlaybackError {
     icon?: string
   }
 }
+
+export interface TextTrackItem {
+  id: number
+  name: string
+  track: TextTrack
+}

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

@@ -9,6 +9,7 @@ import pluginHtml from '../../../assets/audio-selector/track-selector.ejs'
 import '../../../assets/audio-selector/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
+import { MediaControl } from '../media-control/MediaControl.js'
 
 const VERSION: string = '0.0.1'
 
@@ -57,8 +58,8 @@ export class AudioSelector extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: 'media-control-audio-tracks',
-      'data-track-selector': '',
+      class: 'media-control-audiotracks',
+
     }
   }
 
@@ -67,8 +68,8 @@ export class AudioSelector extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-track-selector-select]': 'onTrackSelect',
-      'click [data-track-selector-button]': 'onShowLevelSelectMenu',
+      'click [data-audiotracks-select]': 'onTrackSelect',
+      'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
     }
   }
 
@@ -156,12 +157,12 @@ export class AudioSelector extends UICorePlugin {
       return this
     }
 
-    const mediaControl = this.core.getPlugin('media_control')
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
     this.$el.html(
       AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }),
     )
     this.$('.audio-arrow').append(audioArrow)
-    mediaControl.putElement('audioTracksSelector', this.$el)
+    mediaControl.putElement('audiotracks', this.el)
 
     this.updateText()
     this.highlightCurrentTrack()
@@ -179,7 +180,7 @@ export class AudioSelector extends UICorePlugin {
   }
 
   private onTrackSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement)?.dataset?.trackSelectorSelect
+    const id = (event.target as HTMLElement)?.dataset?.audiotracksSelect
     if (id) {
       this.selectAudioTrack(id)
     }
@@ -218,7 +219,7 @@ export class AudioSelector extends UICorePlugin {
     return (
       this.$(
         'ul a' +
-          (id !== undefined ? '[data-track-selector-select="' + id + '"]' : ''),
+          (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : ''),
       ) as ZeptoResult
     ).parent()
   }

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

@@ -20,7 +20,14 @@ const T = 'plugins.bottom_gear';
  * An element inside the gear menu
  * @beta
  */
-export type GearItemElement = 'quality' | 'rate' | 'nerd';
+export type GearOptionsItem = 'quality' | 'rate' | 'nerd';
+
+/**
+ * @deprecated Use {@link GearOptionsItem} instead
+ */
+export type GearItemElement = GearOptionsItem;
+
+// TODO disabled if no items added
 
 /**
  * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
@@ -30,7 +37,7 @@ export type GearItemElement = 'quality' | 'rate' | 'nerd';
  * 
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  */
 export class BottomGear extends UICorePlugin {
   private isHd = false;
@@ -88,10 +95,12 @@ export class BottomGear extends UICorePlugin {
    * @param name - Name of a gear menu placeholder item to attach custom UI
    * @returns Zepto result of the element
    */
-  getElement(name: GearItemElement): ZeptoResult | null {
+  getElement(name: GearOptionsItem): ZeptoResult | null {
     return this.$el.find(`.gear-options-list [data-${name}]`);
   }
 
+  // TODO implement putElement/addElement method
+
   /**
    * Replaces the content of the gear menu
    * @param content - Zepto result of the element
@@ -123,7 +132,7 @@ export class BottomGear extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control');
 
     // TODO use options.mediaControl.gear.items
-    const items: GearItemElement[] = [
+    const items: GearOptionsItem[] = [
       'quality',
       'rate',
       'nerd',
@@ -131,7 +140,7 @@ export class BottomGear extends UICorePlugin {
     const icon = this.isHd ? gearHdIcon : gearIcon;
     this.$el.html(BottomGear.template({ icon, items }));
 
-    mediaControl.putElement('gear', this.$el);
+    mediaControl.putElement('gear', this.el);
     mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }

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

@@ -26,7 +26,7 @@ describe('BottomGear', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
   it('should attach to media control', () => {
-    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
+    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.el)
   })
   it('should emit event', () => {
     expect(onGearRendered).toHaveBeenCalled()

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 type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1">
+"<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1" id="gear-button">
     /assets/icons/new/gear.svg
 </button>
 <div class="gear-wrapper gcore-skin-bg-color">
-    <ul class="gear-options-list">
+    <ul class="gear-options-list" id="gear-options">
         
             <li data-quality=""></li>
         

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

@@ -42,13 +42,13 @@ import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
  * @beta
  */
 export type MediaControlElement =
-  | 'audioTracksSelector'
+  | 'audiotracks'
   | 'clipText'
   | 'gear'
   | 'pip'
   | 'playbackRate'
   | 'seekBarContainer'
-  | 'subtitlesSelector'
+  | 'cc'
 
 /**
  * Custom events emitted by the plugins to communicate with one another
@@ -95,7 +95,7 @@ type DisabledClickable = {
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  */
 export class MediaControl extends UICorePlugin {
-  private advertisementPlaying = false
+  // private advertisementPlaying = false
 
   private buttonsColor: string | null = null
 
@@ -131,7 +131,7 @@ export class MediaControl extends UICorePlugin {
 
   private rendered = false
 
-  private settings: Record<string, unknown> = {}
+  private settings: Record<string, MediaControlElement[]> = {} // TODO & seekEnabled: boolean, ...
 
   private userDisabled = false
 
@@ -171,8 +171,6 @@ export class MediaControl extends UICorePlugin {
 
   private $seekBarScrubber: ZeptoResult | null = null
 
-  private $subtitlesSelector: ZeptoResult | null = null
-
   private $volumeBarContainer: ZeptoResult | null = null
 
   private $volumeBarBackground: ZeptoResult | null = null
@@ -203,7 +201,8 @@ export class MediaControl extends UICorePlugin {
 
   private get disabled() {
     const playbackIsNOOP =
-      this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP
+      this.core.activeContainer &&
+      this.core.activeContainer.getPlaybackType() === Playback.NO_OP
 
     return this.userDisabled || playbackIsNOOP
   }
@@ -296,9 +295,7 @@ export class MediaControl extends UICorePlugin {
     this.bindKeyEvents()
 
     this.userDisabled = false
-    if (
-      this.options.chromeless
-    ) {
+    if (this.options.chromeless) {
       this.disable()
     }
 
@@ -364,9 +361,21 @@ export class MediaControl extends UICorePlugin {
   }
 
   private bindContainerEvents() {
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.changeTogglePlay)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.changeTogglePlay)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.changeTogglePlay)
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAY,
+      this.changeTogglePlay,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PAUSE,
+      this.changeTogglePlay,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_STOP,
+      this.changeTogglePlay,
+    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_DBLCLICK,
@@ -385,12 +394,12 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_SETTINGSUPDATE,
-      this.settingsUpdate,
+      this.updateSettings,
     )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-      this.settingsUpdate,
+      this.updateSettings,
     )
     this.listenTo(
       this.core.activeContainer,
@@ -408,20 +417,22 @@ export class MediaControl extends UICorePlugin {
       this.enable,
     )
     this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onVolumeChanged)
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_VOLUME,
+      this.onVolumeChanged,
+    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_OPTIONS_CHANGE,
       this.setInitialVolume,
     )
-    if (this.core.activePlayback.el.nodeName.toLowerCase() === 'video') {
-      // wait until the metadata has loaded and then check if fullscreen on video tag is supported
-      this.listenToOnce(
-        this.core.activeContainer,
-        Events.CONTAINER_LOADEDMETADATA,
-        this.onLoadedMetadataOnVideoTag,
-      )
-    }
+  // wait until the metadata has loaded and then check if fullscreen on video tag is supported
+    this.listenToOnce(
+      this.core.activeContainer,
+      Events.CONTAINER_LOADEDMETADATA,
+      this.onLoadedMetadata,
+    )
   }
 
   /**
@@ -462,14 +473,14 @@ export class MediaControl extends UICorePlugin {
     this.updateVolumeUI()
   }
 
-  private onLoadedMetadataOnVideoTag(event: any) {
+  private onLoadedMetadata() {
     const video = this.core.activePlayback?.el
 
     // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
     // see https://github.com/clappr/clappr/issues/1127
     if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
       this.fullScreenOnVideoTagSupported = true
-      this.settingsUpdate()
+      this.updateSettings()
     }
   }
 
@@ -741,7 +752,7 @@ export class MediaControl extends UICorePlugin {
     this.setInitialVolume()
     this.changeTogglePlay()
     this.bindContainerEvents()
-    this.settingsUpdate()
+    this.updateSettings()
     this.core.activeContainer.trigger(
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
       this.core.activeContainer.isDvrInUse(),
@@ -976,23 +987,28 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private settingsUpdate() {
-    const newSettings = $.extend(true, {
-      left: [],
-      default: [],
-      right: [],
-    }, this.core.activeContainer?.settings)
+  private updateSettings() {
+    const newSettings = $.extend(
+      true,
+      {
+        left: [],
+        default: [],
+        right: [],
+      },
+      this.core.activeContainer.settings,
+    )
 
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'clipsText', 'volume'],
       LEFT_ORDER,
     )
 
+    // actual order of the items appear rendered is controlled by CSS
     newSettings.right = [
       'fullscreen',
       'pip',
-      'bottomgear',
-      'subtitles',
+      'gear',
+      'cc',
       'multicamera',
       'playbackrate',
       'vr',
@@ -1004,7 +1020,7 @@ export class MediaControl extends UICorePlugin {
         !Fullscreen.fullscreenEnabled()) ||
       this.options.fullscreenDisable
     ) {
-      // remove fullscreen from settings if it is present
+      // remove fullscreen from settings if it is not available
       removeArrayItem(newSettings.default, 'fullscreen')
       removeArrayItem(newSettings.left, 'fullscreen')
       removeArrayItem(newSettings.right, 'fullscreen')
@@ -1055,16 +1071,13 @@ export class MediaControl extends UICorePlugin {
     this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]')
     this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]')
     this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]')
-    this.$subtitlesSelector = this.$el.find(
-      '.media-control-subtitles[data-subtitles]',
-    )
     this.$playbackRate = this.$el.find(
       '.media-control-playbackrate[data-playbackrate]',
     )
     this.$multiCameraSelector = this.$el.find(
       '.media-control-multicamera[data-multicamera]',
     )
-    this.$clipText = this.$el.find('.media-clip-text[data-clipstext]')
+    this.$clipText = this.$el.find('.media-clip-text[data-clipstext]') // TODO
     this.$clipTextContainer = this.$el.find(
       '.media-clip-container[data-clipstext]',
     )
@@ -1094,34 +1107,32 @@ export class MediaControl extends UICorePlugin {
    */
   getElement(name: MediaControlElement): ZeptoResult | null {
     switch (name) {
-      case 'audioTracksSelector':
+      case 'audiotracks':
         return null
       case 'clipText':
         return this.$clipText
-      case 'gear':
-        return null
-      case 'pip':
-        return null
       case 'playbackRate':
         return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
-      case 'subtitlesSelector':
-        return this.$subtitlesSelector
     }
   }
 
-  putElement(name: MediaControlElement, element: ZeptoResult) {
-    switch (name) {
-      case 'audioTracksSelector':
-        this.getRightPanel().append(element)
-        break
-      case 'pip':
-        this.getRightPanel().append(element)
-        break
-      case 'gear':
-        this.getRightPanel().append(element)
-        break
+  putElement(name: MediaControlElement, element: HTMLElement) {
+    const panel = this.getElementLocation(name);
+    trace(`${T} putElement`, { name, panel: !!panel })
+    if (panel) {
+      const current = panel.find(`[data-${name}]`)
+      element.setAttribute(`data-${name}`, "")
+      // TODO test
+      if (current.length) {
+        if (current[0] === element) {
+          return
+        }
+        current.replaceWith(element)
+      } else {
+        panel.append(element)
+      }
     }
   }
 
@@ -1407,13 +1418,13 @@ export class MediaControl extends UICorePlugin {
 
   // TODO manage by the ads plugin
   private onStartAd() {
-    this.advertisementPlaying = true
+    // this.advertisementPlaying = true
     this.disable()
   }
 
   // TODO manage by the ads plugin
   private onFinishAd() {
-    this.advertisementPlaying = false
+    // this.advertisementPlaying = false
     this.enable()
   }
 
@@ -1470,6 +1481,19 @@ export class MediaControl extends UICorePlugin {
 
     return isFinite(this.core.activePlayback.getDuration())
   }
+
+  private getElementLocation(name: MediaControlElement) {
+    if (this.settings.right?.includes(name)) {
+      return this.getRightPanel();
+    }
+    if (this.settings.left?.includes(name)) {
+      return this.getLeftPanel();
+    }
+    if (this.settings.default?.includes(name)) {
+      return this.getCenterPanel();
+    }
+    return null;
+  }
 }
 
 MediaControl.extend = function (properties) {

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

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { MediaControl, MediaControlElement } from '../MediaControl'
+import { createMockCore } from '../../../testUtils'
+import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+Logger.enable('*')
+setTracer(new LogTracer('MediaControl.test'))
+
+describe('MediaControl', () => {
+  let core: any
+  let mediaControl: MediaControl
+
+  beforeEach(() => {
+    core = createMockCore()
+  })
+  describe('putElement', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit('core:ready')
+      core.activeContainer.settings = {}
+      core.emit('core:active:container:changed', core.activeContainer)
+    })
+    describe.each([
+      ['pip' as MediaControlElement],
+      ['gear' as MediaControlElement],
+      ['cc' as MediaControlElement],
+      // ['multicamera' as MediaControlElement],
+      // ['playbackrate' as MediaControlElement],
+      // ['vr' as MediaControlElement],
+      // ['audiotracks' as MediaControlElement],
+    ])('%s', (mcName) => {
+      it('should put the element in the right panel', () => {
+        const element = document.createElement('div')
+        element.className = 'my-media-control'
+        element.textContent = 'test'
+        mediaControl.putElement(mcName, element)
+
+        expect(mediaControl.el.innerHTML).toMatchSnapshot()
+        expect(mediaControl.$el.find('.media-control-right-panel .my-media-control').length).toEqual(1)
+      })
+    })
+  })
+})

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -0,0 +1,175 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MediaControl > putElement > cc > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-cc="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > gear > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-gear="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > pip > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-pip="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;