@gcorevideo/player 2.21.3 → 2.21.4

package/lib/testUtils.js

@@ -98,47 +98,31 @@ export function createMockPlayback(name = 'mock') {
     return Object.assign(emitter, {
         name,
         currentLevel: -1,
+        dvrEnabled: false,
         levels: [],
         consent() { },
         play() { },
         pause() { },
         stop() { },
-        destroy() { },
-        seek() { },
-        seekPercentage() { },
-        getDuration() {
-            return 100;
-        },
-        enterPiP() { },
-        exitPiP() { },
-        getPlaybackType() {
-            return 'live';
-        },
-        getStartTimeOffset() {
-            return 0;
-        },
-        getCurrentTime() {
-            return 0;
-        },
-        isHighDefinitionInUse() {
-            return false;
-        },
-        mute() { },
-        unmute() { },
-        volume() { },
-        configure() { },
-        attemptAutoPlay() {
-            return true;
-        },
-        canAutoPlay() {
-            return true;
-        },
-        onResize() {
-            return true;
-        },
-        trigger(event, ...args) {
-            emitter.emit(event, ...args);
-        },
+        destroy: vi.fn(),
+        seek: vi.fn(),
+        seekPercentage: vi.fn(),
+        getDuration: vi.fn().mockImplementation(() => 100),
+        enterPiP: vi.fn(),
+        exitPiP: vi.fn(),
+        getPlaybackType: vi.fn().mockImplementation(() => 'live'),
+        getStartTimeOffset: vi.fn().mockImplementation(() => 0),
+        getCurrentTime: vi.fn().mockImplementation(() => 0),
+        isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
+        mute: vi.fn(),
+        unmute: vi.fn(),
+        volume: vi.fn(),
+        configure: vi.fn(),
+        attemptAutoPlay: vi.fn().mockImplementation(() => true),
+        canAutoPlay: vi.fn().mockImplementation(() => true),
+        onResize: vi.fn().mockImplementation(() => true),
+        setPlaybackRate: vi.fn(),
+        trigger: emitter.emit,
     });
 }
 export function createMockContainer(playback = createMockPlayback()) {
@@ -150,6 +134,8 @@ export function createMockContainer(playback = createMockPlayback()) {
         $el: $(el),
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
+        getPlaybackType: vi.fn().mockReturnValue('live'),
+        isDvrInUse: vi.fn().mockReturnValue(false),
         isPlaying: vi.fn().mockReturnValue(false),
         play: vi.fn(),
         seek: vi.fn(),

package/package.json

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

package/src/index.plugins.ts

@@ -25,7 +25,8 @@ export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";
 export * from "./plugins/spinner-three-bounce/SpinnerThreeBounce.js";
 export * from "./plugins/source-controller/SourceController.js";
-export * from "./plugins/subtitles/Subtitles.js";
+export * from "./plugins/subtitles/ClosedCaptions.js";
+export { ClosedCaptions as Subtitles } from "./plugins/subtitles/ClosedCaptions.js"; // TODO remove in future versions
 export * from "./plugins/telemetry/Telemetry.js";
 export * from "./plugins/thumbnails/Thumbnails.js";
 // _ vast-ads

package/src/index.ts

@@ -6,7 +6,7 @@
  * It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations.
  * Start with {@link Player} for more information.
  *
- * Various plugins (marked with `PLUGIN` keyword) are available to extend the player with additional features.
+ * Various plugins (marked with `PLUGIN` keyword) are available to extend the core functionality with additional features.
  * @example
  * ```ts
  * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'

package/src/playback/dash-playback/DashPlayback.ts

@@ -416,6 +416,7 @@ export default class DashPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_STATS_ADD, { dvr: status })
   }
 
+  // TODO move to the base class
   override _updateSettings() {
     if (this._playbackType === Playback.VOD) {
       // @ts-expect-error

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,12 @@ 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
 
@@ -90,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
@@ -125,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',
@@ -133,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
 
@@ -394,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,
@@ -427,14 +427,12 @@ export class MediaControl extends UICorePlugin {
       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,
+    )
   }
 
   /**
@@ -475,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()
     }
   }
 
@@ -754,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(),
@@ -989,7 +987,7 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private settingsUpdate() {
+  private updateSettings() {
     const newSettings = $.extend(
       true,
       {
@@ -997,7 +995,7 @@ export class MediaControl extends UICorePlugin {
         default: [],
         right: [],
       },
-      this.core.activeContainer?.settings,
+      this.core.activeContainer.settings,
     )
 
     newSettings.left = orderByOrderPattern(
@@ -1005,11 +1003,12 @@ export class MediaControl extends UICorePlugin {
       LEFT_ORDER,
     )
 
+    // actual order of the items appear rendered is controlled by CSS
     newSettings.right = [
       'fullscreen',
       'pip',
-      'bottomgear',
-      'subtitles',
+      'gear',
+      'cc',
       'multicamera',
       'playbackrate',
       'vr',
@@ -1021,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')
@@ -1078,7 +1077,7 @@ export class MediaControl extends UICorePlugin {
     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]',
     )
@@ -1108,37 +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 null
     }
   }
 
-  putElement(name: MediaControlElement, element: ZeptoResult) {
-    switch (name) {
-      case 'audioTracksSelector':
-        this.getRightPanel().append(element)
-        break
-      case 'gear':
-        this.getRightPanel().append(element)
-        break
-      case 'pip':
-        this.getRightPanel().append(element)
-        break
-      case 'subtitlesSelector':
-        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)
+      }
     }
   }
 
@@ -1424,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()
   }
 
@@ -1487,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)
+      })
+    })
+  })
+})