@gcorevideo/player 2.21.3 → 2.21.6

package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { DvrControls } from '../DvrControls.js'
 import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
+import { Events, Playback } from '@clappr/core'
 // import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 
 // setTracer(new LogTracer('DvrControls.test'))
@@ -28,36 +29,29 @@ describe('DvrControls', () => {
     describe.each([
       ['no DVR', false, false, false],
       ['DVR at live edge', true, false, false],
-      ['DVR behind live edge', true, true, true],
-    ])('%s', (_, dvrEnabled, dvrInUse, indicateDvr) => {
+    ])('%s', (_, dvrEnabled, dvrInUse) => {
       beforeEach(() => {
         core.activePlayback.dvrEnabled = dvrEnabled
-        core.trigger('core:ready')
-        core.trigger('core:active:container:changed')
+        core.activeContainer.isDvrEnabled.mockReturnValue(dvrEnabled)
+        core.trigger(Events.CORE_READY)
+        core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
         if (dvrInUse) {
-          core.activeContainer.trigger('container:dvr', true)
+          core.activePlayback.dvrInUse = true
+          core.activeContainer.isDvrInUse.mockReturnValue(true)
+          core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
         }
       })
       it('should render', () => {
         expect(dvrControls.el.textContent).toBeTruthy()
         expect(dvrControls.el.innerHTML).toMatchSnapshot()
       })
-      it('should render to the media control left panel', () => {
-        expect(mediaControl.$el.find('.media-control-left-panel').text()).toContain('live')
-        expect(mediaControl.el.innerHTML).toMatchSnapshot()
+      it('should hide duration and position indicators', () => {
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith('duration', false)
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith('position', false)
       })
-      it('should indicate live streaming mode', () => {
-        expect(mediaControl.$el.hasClass('live')).toBe(true)
+      it('should render to the media control', () => {
+        expect(mediaControl.putElement).toHaveBeenCalledWith('dvr', dvrControls.el)
       })
-      if (indicateDvr) {
-        it('should indicate DVR mode', () => {
-          expect(mediaControl.$el.hasClass('dvr')).toBe(true)
-        })
-      } else {
-        it('should not indicate DVR mode', () => {
-          expect(mediaControl.$el.hasClass('dvr')).toBe(false)
-        })
-      }
     })
     describe('when back_to_live button is clicked', () => {
       beforeEach(() => {
@@ -78,11 +72,13 @@ describe('DvrControls', () => {
   })
   describe('VOD stream', () => {
     beforeEach(() => {
-      core.getPlaybackType.mockReturnValue('vod')
+      core.getPlaybackType.mockReturnValue(Playback.VOD)
+      core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
+      core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
     })
     beforeEach(() => {
-      core.trigger('core:ready')
-      core.trigger('core:active:container:changed')
+      core.trigger(Events.CORE_READY)
+      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
     })
     it('should not render', () => {
       expect(dvrControls.el.textContent).toBeFalsy()

package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap

@@ -1,43 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DvrControls > live stream > DVR at live edge > should render 1`] = `
-"<div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
+"<div class="live-info" id="media-control-live">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
 
-exports[`DvrControls > live stream > DVR at live edge > should render to the media control left panel 1`] = `
-"<div class="media-control-left-panel" data-media-control=""><div class="dvr-controls" data-dvr-controls=""><div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
-</div></div>
-    <div class="media-control-right-panel" data-media-control=""></div>
-    <div class="media-control-center-panel" data-media-control=""></div>"
-`;
-
 exports[`DvrControls > live stream > DVR behind live edge > should render 1`] = `
-"<div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
+"<div class="live-info" id="media-control-live">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
 
-exports[`DvrControls > live stream > DVR behind live edge > should render to the media control left panel 1`] = `
-"<div class="media-control-left-panel" data-media-control=""><div class="dvr-controls" data-dvr-controls=""><div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
-</div></div>
-    <div class="media-control-right-panel" data-media-control=""></div>
-    <div class="media-control-center-panel" data-media-control=""></div>"
-`;
-
 exports[`DvrControls > live stream > no DVR > should render 1`] = `
-"<div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
+"<div class="live-info" id="media-control-live">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
 "
 `;
-
-exports[`DvrControls > live stream > no DVR > should render to the media control left panel 1`] = `
-"<div class="media-control-left-panel" data-media-control=""><div class="dvr-controls" data-dvr-controls=""><div class="live-info">live</div>
-<button type="button" class="live-button" aria-label="back_to_live">back_to_live</button>
-</div></div>
-    <div class="media-control-right-panel" data-media-control=""></div>
-    <div class="media-control-center-panel" data-media-control=""></div>"
-`;

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

@@ -42,13 +42,30 @@ import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
  * @beta
  */
 export type MediaControlElement =
-  | 'audioTracksSelector'
+  | 'audiotracks'
+  | 'cc'
   | 'clipText'
+  | 'dvr'
+  | 'duration'
   | 'gear'
   | 'pip'
   | 'playbackRate'
+  | 'position'
   | 'seekBarContainer'
-  | 'subtitlesSelector'
+
+type MediaControlSettings = {
+  left: MediaControlElement[]
+  right: MediaControlElement[]
+  default: MediaControlElement[]
+  seekEnabled: boolean
+}
+
+const DEFAULT_SETTINGS: MediaControlSettings = {
+  left: [],
+  right: [],
+  default: [],
+  seekEnabled: true,
+}
 
 /**
  * Custom events emitted by the plugins to communicate with one another
@@ -66,7 +83,8 @@ const T = 'plugins.media_control'
 const LEFT_ORDER = [
   'playpause',
   'playstop',
-  'live',
+  // 'live',
+  'dvr',
   'volume',
   'position',
   'duration',
@@ -95,7 +113,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
 
@@ -118,8 +136,6 @@ export class MediaControl extends UICorePlugin {
 
   private intendedVolume = 100
 
-  private isHD = false
-
   private keepVisible = false
 
   private kibo: Kibo
@@ -131,7 +147,7 @@ export class MediaControl extends UICorePlugin {
 
   private rendered = false
 
-  private settings: Record<string, unknown> = {}
+  private settings: MediaControlSettings = DEFAULT_SETTINGS
 
   private userDisabled = false
 
@@ -320,8 +336,6 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    // @ts-ignore
-    this.stopListening()
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
@@ -394,17 +408,17 @@ 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.onDvrStateChanged,
     )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_HIGHDEFINITIONUPDATE,
-      this.highDefinitionUpdate,
+      this.onHdUpdate,
     )
     this.listenTo(
       this.core.activeContainer,
@@ -427,14 +441,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 +487,19 @@ 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()
+    if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+      this.$el.addClass('live')
+    } else {
+      this.$el.removeClass('live')
     }
   }
 
@@ -493,8 +510,6 @@ export class MediaControl extends UICorePlugin {
     }
 
     assert.ok(this.$volumeBarContainer, 'volume bar container must be present')
-    // update volume bar scrubber/fill on bar mode
-    // this.$volumeBarContainer.find('.bar-fill-2').css({});
     const containerWidth = this.$volumeBarContainer.width()
 
     assert.ok(
@@ -720,17 +735,18 @@ export class MediaControl extends UICorePlugin {
     // if the container is not ready etc
     this.intendedVolume = value
     this.persistConfig && !isInitialVolume && Config.persist('volume', value)
+    // TODO
     const setWhenContainerReady = () => {
-      if (this.container && this.container.isReady) {
-        this.container.setVolume(value)
+      if (this.core.activeContainer && this.core.activeContainer.isReady) {
+        this.core.activeContainer.setVolume(value)
       } else {
-        this.listenToOnce(this.container, Events.CONTAINER_READY, () => {
-          this.container.setVolume(value)
+        this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
+          this.core.activeContainer.setVolume(value)
         })
       }
     }
 
-    if (!this.container) {
+    if (!this.core.activeContainer) {
       this.listenToOnce(this, Events.MEDIACONTROL_CONTAINERCHANGED, () =>
         setWhenContainerReady(),
       )
@@ -742,7 +758,7 @@ export class MediaControl extends UICorePlugin {
   private toggleFullscreen() {
     if (!Browser.isMobile) {
       this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name)
-      this.container.fullscreen()
+      this.core.activeContainer.fullscreen()
       this.core.toggleFullscreen()
       this.resetUserKeepVisible()
     }
@@ -754,7 +770,8 @@ export class MediaControl extends UICorePlugin {
     this.setInitialVolume()
     this.changeTogglePlay()
     this.bindContainerEvents()
-    this.settingsUpdate()
+    this.updateSettings()
+    // TODO remove
     this.core.activeContainer.trigger(
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
       this.core.activeContainer.isDvrInUse(),
@@ -849,9 +866,9 @@ export class MediaControl extends UICorePlugin {
     // default to 100%
     this.currentSeekBarPercentage = 100
     if (
-      this.container &&
-      (this.container.getPlaybackType() !== Playback.LIVE ||
-        this.container.isDvrInUse())
+      this.core.activeContainer &&
+      (this.core.activeContainer.getPlaybackType() !== Playback.LIVE ||
+        this.core.activeContainer.isDvrInUse())
     ) {
       this.currentSeekBarPercentage =
         (this.currentPositionValue / this.currentDurationValue) * 100
@@ -887,21 +904,13 @@ export class MediaControl extends UICorePlugin {
     let pos = (offsetX / this.$seekBarContainer.width()) * 100
 
     pos = Math.min(100, Math.max(pos, 0))
-    this.container && this.container.seekPercentage(pos)
+    this.core.activeContainer && this.core.activeContainer.seekPercentage(pos)
 
     this.setSeekPercentage(pos)
 
     return false
   }
 
-  private setKeepVisible() {
-    this.keepVisible = true
-  }
-
-  private resetKeepVisible() {
-    this.keepVisible = false
-  }
-
   private setUserKeepVisible() {
     this.userKeepVisible = true
   }
@@ -989,7 +998,7 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private settingsUpdate() {
+  private updateSettings() {
     const newSettings = $.extend(
       true,
       {
@@ -997,19 +1006,28 @@ export class MediaControl extends UICorePlugin {
         default: [],
         right: [],
       },
-      this.core.activeContainer?.settings,
+      this.core.activeContainer.settings,
     )
 
+    // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'clipsText', 'volume'],
       LEFT_ORDER,
     )
 
+    if (
+      this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+      this.core.activePlayback.dvrEnabled
+    ) {
+      newSettings.left.push('dvr')
+    }
+
+    // actual order of the items appear rendered is controlled by CSS
     newSettings.right = [
       'fullscreen',
       'pip',
-      'bottomgear',
-      'subtitles',
+      'gear',
+      'cc',
       'multicamera',
       'playbackrate',
       'vr',
@@ -1021,7 +1039,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')
@@ -1030,12 +1048,13 @@ export class MediaControl extends UICorePlugin {
     removeArrayItem(newSettings.default, 'hd-indicator')
     removeArrayItem(newSettings.left, 'hd-indicator')
 
+    // TODO get from container's settings
     if (this.core.activePlayback.name === 'html5_video') {
       newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback()
     }
 
     const settingsChanged =
-      JSON.stringify(this.settings) !== JSON.stringify(newSettings)
+      serializeSettings(this.settings) !== serializeSettings(newSettings)
 
     if (settingsChanged) {
       this.settings = newSettings
@@ -1043,8 +1062,8 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private highDefinitionUpdate(isHD: boolean) {
-    this.isHD = isHD
+  private onHdUpdate(isHD: boolean) {
+    // TODO render?
   }
 
   private createCachedElements() {
@@ -1078,7 +1097,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,57 +1127,53 @@ 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)
+      }
     }
   }
 
   /**
-   * Get the right panel area to append custom elements to
-   * @returns  ZeptoSelector of the right panel element
+   * Toggle the visibility of a media control element
+   * @param name - The name of the media control element
+   * @param show - Whether to show or hide the element
    */
-  getRightPanel() {
+  toggleElement(name: MediaControlElement, show: boolean) {
+    this.$el.find(`[data-${name}]`).toggle(show)
+  }
+
+  private getRightPanel() {
     return this.$el.find('.media-control-right-panel')
   }
 
-  /**
-   * Get the left panel area to append custom elements to
-   * @returns  ZeptoSelector of the left panel element
-   */
-  getLeftPanel() {
+  private getLeftPanel() {
     return this.$el.find('.media-control-left-panel')
   }
 
-  getCenterPanel() {
+  private getCenterPanel() {
     return this.$el.find('.media-control-center-panel')
   }
 
@@ -1395,7 +1410,6 @@ export class MediaControl extends UICorePlugin {
     }, 0)
 
     this.parseColors()
-    this.highDefinitionUpdate(this.isHD)
 
     this.core.$el.append(this.el)
 
@@ -1424,13 +1438,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,8 +1501,39 @@ 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
+  }
+
+  private onDvrStateChanged(dvrInUse: boolean) {
+    if (dvrInUse) {
+      this.$el.addClass('dvr')
+    } else {
+      this.$el.removeClass('dvr')
+    }
+  }
 }
 
 MediaControl.extend = function (properties) {
   return extend(MediaControl, properties)
 }
+
+function serializeSettings(s: MediaControlSettings) {
+  return s.left
+    .slice()
+    .sort()
+    .concat(s.right.slice().sort())
+    .concat(s.default.slice().sort())
+    .concat([s.seekEnabled as any])
+    .join(',')
+}