@gcorevideo/player 2.22.5 → 2.22.7

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

@@ -24,7 +24,8 @@ import { Kibo } from '../kibo/index.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../types.js'
-import { getPageX, isFullscreen } from '../utils.js'
+import { getPageX } from '../utils.js'
+import { fullscreenEnabled, isFullscreen } from '../utils/fullscreen.js'
 
 import '../../../assets/media-control/media-control.scss'
 
@@ -38,48 +39,92 @@ import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg'
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
 
 /**
- * Media control elements, mount points for additional plugins
+ * Media control elements that appear in the left area.
  * @beta
  */
-export type MediaControlElement =
+export type MediaControlLeftElement =
+  | 'clipText' // TODO lowercase
+  | 'duration'
+  | 'dvr'
+  | 'playpause'
+  | 'playstop'
+  | 'position'
+  | 'volume'
+  // | 'seekbar'
+  // | 'seekBarContainer' // TODO rename seekbar
+
+/**
+ * Media control elements that appear in main layer, spanning the entire width of the player.
+ * @beta
+ */
+export type MediaControlLayerElement =
+  | 'seekbar'
+  | 'seekBarContainer' // TODO rename seekbar
+
+/**
+ * Media control elements that appear in the right area.
+ * @beta
+ */
+export type MediaControlRightElement =
   | 'audiotracks'
   | 'cc'
-  | 'clipText'
-  | 'dvr'
-  | 'duration'
   | 'fullscreen'
+  | 'hd-indicator'
   | 'gear'
   | 'multicamera'
   | 'pip'
-  | 'playbackRate'
-  | 'position'
-  | 'seekBarContainer'
   | 'vr'
-  | 'volume'
 
-type MediaControlSettings = {
-  left: MediaControlElement[]
-  right: MediaControlElement[]
-  default: MediaControlElement[]
+/**
+ * Built-in media control elements.
+ * @beta
+ */
+export type MediaControlElement =
+  | MediaControlLeftElement
+  | MediaControlLayerElement
+  | MediaControlRightElement
+
+/**
+ * Specifies the allowed media control elements in each area.
+ * Can be used to restrict rendered media control elements.
+ * @beta
+ */
+export type MediaControlSettings = {
+  left: MediaControlLeftElement[]
+  right: MediaControlRightElement[]
+  default: MediaControlLayerElement[]
   seekEnabled: boolean
 }
 
 const DEFAULT_SETTINGS: MediaControlSettings = {
-  left: [],
+  default: [],
+  left: [
+    'dvr'
+  ], 
   right: [
+    'audiotracks',
+    'cc',
+    // 'dvr',
+    // 'duration',
     'fullscreen',
-    'pip',
     'gear',
-    'cc',
     'multicamera',
-    // 'playbackrate',
+    'pip',
     'vr',
-    'audiotracks',
   ],
-  default: [],
   seekEnabled: true,
 }
 
+const INITIAL_SETTINGS: MediaControlSettings = {
+  left: [
+  ],
+  right: [
+  ],
+  default: [
+  ],
+  seekEnabled: false,
+}
+
 const T = 'plugins.media_control'
 
 const LEFT_ORDER = [
@@ -112,13 +157,18 @@ type DisabledClickable = {
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ * 
+ * Configuration options:
+ *
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ *
+ * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
+ * 
+ * - `chromeless`: boolean
  */
 export class MediaControl extends UICorePlugin {
   // private advertisementPlaying = false
 
-  private customAreaElements: Record<string, HTMLElement> = {}
-  private customAreaHandler?: (name: string, element: HTMLElement) => void
-
   private buttonsColor: string | null = null
 
   private currentDurationValue: number = 0
@@ -133,7 +183,7 @@ export class MediaControl extends UICorePlugin {
   private draggingSeekBar = false
   private draggingVolumeBar = false
 
-  private fullScreenOnVideoTagSupported: boolean | null = null
+  private fullScreenOnVideoTagSupported = false
 
   private hideId: ReturnType<typeof setTimeout> | null = null
   private hideVolumeId: ReturnType<typeof setTimeout> | null = null
@@ -147,11 +197,13 @@ export class MediaControl extends UICorePlugin {
   private lastMouseX = 0
   private lastMouseY = 0
 
+  private needsUpdate = false
+
   private persistConfig: boolean
 
   private rendered = false
 
-  private settings: MediaControlSettings = DEFAULT_SETTINGS
+  private settings: MediaControlSettings = INITIAL_SETTINGS
 
   private userDisabled = false
 
@@ -173,8 +225,6 @@ export class MediaControl extends UICorePlugin {
 
   private $playStopToggle: ZeptoResult | null = null
 
-  private $playbackRate: ZeptoResult | null = null
-
   private $position: ZeptoResult | null = null
 
   private $seekBarContainer: ZeptoResult | null = null
@@ -305,6 +355,7 @@ export class MediaControl extends UICorePlugin {
   constructor(core: Core) {
     super(core)
     this.persistConfig = this.options.persistConfig
+
     this.setInitialVolume()
 
     this.kibo = new Kibo(this.options.focusElement)
@@ -492,7 +543,8 @@ export class MediaControl extends UICorePlugin {
 
     // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
     // see https://github.com/clappr/clappr/issues/1127
-    if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
+    if (!fullscreenEnabled() && video.webkitSupportsFullscreen) {
+      // TODO sort out, use single utility function
       this.fullScreenOnVideoTagSupported = true
     }
     this.updateSettings()
@@ -769,24 +821,20 @@ export class MediaControl extends UICorePlugin {
   }
 
   private onActiveContainerChanged() {
-    this.fullScreenOnVideoTagSupported = null
+    this.fullScreenOnVideoTagSupported = false
     // set the new container to match the volume of the last one
     this.setInitialVolume()
     this.changeTogglePlay()
     this.bindContainerEvents()
+    // TODO remove?
     this.updateSettings()
-    // TODO remove
-    this.core.activeContainer.trigger(
-      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-      this.core.activeContainer.isDvrInUse(),
-    )
-    // TODO test
+    // TODO test, figure out if this is needed
     if (this.core.activeContainer.mediaControlDisabled) {
       this.disable()
     } else {
       this.enable()
     }
-    this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED) // TODO check
+    this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED) // TODO figure out
 
     if (this.core.activeContainer.$el) {
       this.core.activeContainer.$el.addClass('container-skin-1')
@@ -1007,6 +1055,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   private updateSettings() {
+    trace(`${T} updateSettings`, { settings: this.settings })
     const newSettings = $.extend(
       true,
       {
@@ -1016,6 +1065,8 @@ export class MediaControl extends UICorePlugin {
       },
       this.core.activeContainer.settings,
     )
+    trace(`${T} updateSettings`, { newSettings })
+
 
     // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
@@ -1031,13 +1082,18 @@ export class MediaControl extends UICorePlugin {
     }
 
     // actual order of the items appear rendered is controlled by CSS
-    newSettings.right = DEFAULT_SETTINGS.right
+    newSettings.right = DEFAULT_SETTINGS.right // TODO get from the options
 
     if (
       (!this.fullScreenOnVideoTagSupported &&
-        !Fullscreen.fullscreenEnabled()) ||
+        !fullscreenEnabled()) ||
       this.options.fullscreenDisable
     ) {
+      trace(`${T} updateSettings removing fullscreen`, {
+        supported: this.fullScreenOnVideoTagSupported,
+        enabled: Fullscreen.fullscreenEnabled(),
+        optionsDisable: this.options.fullscreenDisable,
+      })
       // remove fullscreen from settings if it is not available
       removeArrayItem(newSettings.default, 'fullscreen')
       removeArrayItem(newSettings.left, 'fullscreen')
@@ -1057,6 +1113,7 @@ export class MediaControl extends UICorePlugin {
 
     if (settingsChanged) {
       this.settings = newSettings
+      this.needsUpdate = true
       this.render()
     }
   }
@@ -1090,9 +1147,6 @@ 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.$playbackRate = this.$el.find(
-      '.media-control-playbackrate[data-playbackrate]',
-    )
     this.$multiCameraSelector = this.$el.find(
       '.media-control-multicamera[data-multicamera]',
     )
@@ -1130,8 +1184,6 @@ export class MediaControl extends UICorePlugin {
         return null
       case 'clipText':
         return this.$clipText
-      case 'playbackRate':
-        return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
     }
@@ -1156,14 +1208,6 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  handleCustomArea(handler: (name: string, content: HTMLElement) => void) {
-    this.customAreaHandler = handler
-    Object.entries(this.customAreaElements).forEach(([name, element]) => {
-      handler(name, element)
-    })
-    this.customAreaElements = {}
-  }
-
   /**
    * Toggle the visibility of a media control element
    * @param name - The name of the media control element
@@ -1283,8 +1327,8 @@ export class MediaControl extends UICorePlugin {
     keys.forEach((i) => {
       this.bindKeyAndShow(i, () => {
         this.settings.seekEnabled &&
-          this.container &&
-          this.container.seekPercentage(Number(i) * 10)
+          this.core.activeContainer &&
+          this.core.activeContainer.seekPercentage(Number(i) * 10)
         return false
       })
     })
@@ -1362,11 +1406,13 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`)
+    trace(`${T} render`, { needsUpdate: this.needsUpdate })
+    if (!this.needsUpdate) {
+      return this
+    }
     const timeout = this.options.hideMediaControlDelay || 2000
 
-    const html = MediaControl.template({ settings: this.settings ?? {} })
-    this.$el.html(html)
+    this.$el.html(MediaControl.template({ settings: this.settings }))
     // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
     // this.$el.append(style[0]);
     this.createCachedElements()
@@ -1424,7 +1470,9 @@ export class MediaControl extends UICorePlugin {
 
     this.rendered = true
     this.updateVolumeUI()
-    // TODO setTimeout
+    
+    this.needsUpdate = false
+    // TODO setTimeout?
     this.trigger(Events.MEDIACONTROL_RENDERED)
 
     return this
@@ -1504,6 +1552,7 @@ export class MediaControl extends UICorePlugin {
     })
   }
 
+  // TODO drop
   private isSeekEnabledForHtml5Playback() {
     if (this.core.getPlaybackType() === Playback.LIVE) {
       return this.options.dvrEnabled
@@ -1519,13 +1568,13 @@ export class MediaControl extends UICorePlugin {
       left: this.settings.left,
       default: this.settings.default,
     })
-    if (this.settings.right?.includes(name)) {
+    if (this.settings.right?.includes(name as MediaControlRightElement)) {
       return this.getRightPanel()
     }
-    if (this.settings.left?.includes(name)) {
+    if (this.settings.left?.includes(name as MediaControlLeftElement)) {
       return this.getLeftPanel()
     }
-    if (this.settings.default?.includes(name)) {
+    if (this.settings.default?.includes(name as MediaControlLayerElement)) {
       return this.getCenterPanel()
     }
     return null
@@ -1545,8 +1594,8 @@ MediaControl.extend = function (properties) {
 }
 
 function serializeSettings(s: MediaControlSettings) {
-  return s.left
-    .slice()
+  return (s.left
+    .slice() as MediaControlElement[])
     .sort()
     .concat(s.right.slice().sort())
     .concat(s.default.slice().sort())

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

@@ -1,9 +1,18 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { MediaControl, MediaControlElement } from '../MediaControl'
+import {
+  MediaControl,
+  MediaControlElement,
+  MediaControlSettings,
+} from '../MediaControl'
 import { createMockCore } from '../../../testUtils'
 import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 import { $, Events, Playback } from '@clappr/core'
 
+vi.mock('../../utils/fullscreen', () => ({
+  fullscreenEnabled: vi.fn().mockReturnValue(true),
+  isFullscreen: vi.fn().mockReturnValue(false),
+}))
+
 Logger.enable('*')
 setTracer(new LogTracer('MediaControl.test'))
 
@@ -14,16 +23,96 @@ describe('MediaControl', () => {
   beforeEach(() => {
     core = createMockCore()
   })
+  describe('initially', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+    })
+    it('should not render', () => {
+      expect(mediaControl.el.innerHTML).toBe('')
+    })
+  })
+  describe('when container settings update', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+      core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+    })
+    describe.each([
+      [
+        'vod',
+        {
+          left: ['playpause', 'position', 'duration'],
+          default: ['seekbar'],
+          right: ['fullscreen', 'volume', 'hd-indicator'],
+          seekEnabled: true,
+        } as MediaControlSettings,
+      ],
+    ])('%s', (_, settings: MediaControlSettings) => {
+      beforeEach(() => {
+        core.activeContainer.settings = settings
+        core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
+        core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
+      })
+      it('should render', () => {
+        expect(mediaControl.el.innerHTML).toMatchSnapshot()
+      })
+      it.each(
+        settings.left
+      )("should render %s control", (element) => {
+        const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
+        expect(el.length).toEqual(1)
+      })
+      it.each(
+        arraySubtract(['playpause', 'playstop', 'position', 'duration'], settings.left)
+      )("should not render %s control", (element) => {
+        const el = mediaControl.$el.find(`.media-control-left-panel [data-${element}]`)
+        expect(el.length).toEqual(0)
+      })
+      it(`should ${settings.seekEnabled ? '' : 'not '}render the seek bar`, () => {
+        const seekbar = mediaControl.$el.find('.media-control-center-panel [data-seekbar]')
+        expect(seekbar.length).toBeGreaterThan(1)
+        if (settings.seekEnabled) {
+          expect(seekbar.hasClass('seek-disabled')).toBe(false)
+        } else {
+          expect(seekbar.hasClass('seek-disabled')).toBe(true)
+        }
+      })
+      it(`should ${settings.right.includes('volume') ? '' : 'not '}render the volume control`, () => {
+        const volume = mediaControl.$el.find('.drawer-container[data-volume]')
+        if (settings.right.includes('volume')) {
+          expect(volume.length).toEqual(1)
+        } else {
+          expect(volume.length).toEqual(0)
+        }
+      })
+      it(`should ${settings.right.includes('fullscreen') ? '' : 'not '}render the fullscreen control`, () => {
+        const fullscreen = mediaControl.$el.find('.media-control-right-panel [data-fullscreen]')
+        if (settings.right.includes('fullscreen')) {
+          expect(fullscreen.length).toEqual(1)
+        } else {
+          expect(fullscreen.length).toEqual(0)
+        }
+      })
+    })
+  })
   describe('playback type', () => {
     beforeEach(() => {
       mediaControl = new MediaControl(core)
-      core.emit('core:ready')
+      core.emit(Events.CORE_READY)
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
     })
     describe('when live', () => {
       beforeEach(() => {
         core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.activePlayback.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.getPlaybackType.mockReturnValue(Playback.LIVE)
         core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        // TODO playback.settings
+        core.activePlayback.emit(Events.PLAYBACK_SETTINGSUPDATE)
       })
       it('should apply live style class', () => {
         expect(mediaControl.$el.hasClass('live')).toBe(true)
@@ -32,6 +121,8 @@ describe('MediaControl', () => {
     describe('when vod', () => {
       beforeEach(() => {
         core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
+        core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
+        core.getPlaybackType.mockReturnValue(Playback.VOD)
         core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
       })
       it('should not apply live style class', () => {
@@ -53,7 +144,7 @@ describe('MediaControl', () => {
       // ['multicamera' as MediaControlElement],
       // ['playbackrate' as MediaControlElement],
       // ['vr' as MediaControlElement],
-      // ['audiotracks' as MediaControlElement],
+      ['audiotracks' as MediaControlElement],
       // dvr controls
     ])('%s', (mcName) => {
       it('should put the element in the right panel', () => {
@@ -63,14 +154,17 @@ describe('MediaControl', () => {
         mediaControl.putElement(mcName, $(element))
 
         expect(mediaControl.el.innerHTML).toMatchSnapshot()
-        expect(mediaControl.$el.find('.media-control-right-panel .my-media-control').length).toEqual(1)
+        expect(
+          mediaControl.$el.find('.media-control-right-panel .my-media-control')
+            .length,
+        ).toEqual(1)
       })
     })
   })
   describe('updateSettings', () => {
     beforeEach(() => {
       mediaControl = new MediaControl(core)
-      core.emit('core:ready')
+      core.emit(Events.CORE_READY)
     })
     describe('dvr', () => {
       beforeEach(() => {
@@ -92,7 +186,10 @@ describe('MediaControl', () => {
           element.textContent = 'live'
           mediaControl.putElement('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
-          expect(mediaControl.$el.find('.media-control-left-panel .my-dvr-controls').length).toEqual(1)
+          expect(
+            mediaControl.$el.find('.media-control-left-panel .my-dvr-controls')
+              .length,
+          ).toEqual(1)
         })
       })
       describe('when disabled', () => {
@@ -102,7 +199,10 @@ describe('MediaControl', () => {
           element.textContent = 'live'
           mediaControl.putElement('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
-          expect(mediaControl.$el.find('.media-control-left-panel .my-dvr-controls').length).toEqual(0)
+          expect(
+            mediaControl.$el.find('.media-control-left-panel .my-dvr-controls')
+              .length,
+          ).toEqual(0)
         })
       })
     })
@@ -122,7 +222,10 @@ describe('MediaControl', () => {
       beforeEach(() => {
         core.activeContainer.isDvrInUse.mockReturnValue(true)
         core.activePlayback.dvrInUse = true
-        core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
+        core.activeContainer.emit(
+          Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+          true,
+        )
       })
       it('should apply DVR style class', () => {
         expect(mediaControl.$el.hasClass('dvr')).toBe(true)
@@ -130,3 +233,10 @@ describe('MediaControl', () => {
     })
   })
 })
+
+function arraySubtract<T extends string>(arr1: T[], arr2: T[]) {
+  // const ret = arr1.filter((item) => !arr2.includes(item))
+  return arr1.filter((item) => !arr2.includes(item))
+  // console.log('arraySubtract %s - %s: %s', arr1, arr2, ret)
+  // return ret
+}