@gcorevideo/player 2.21.4 → 2.22.0

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

@@ -43,12 +43,29 @@ import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
  */
 export type MediaControlElement =
   | 'audiotracks'
+  | 'cc'
   | 'clipText'
+  | 'dvr'
+  | 'duration'
   | 'gear'
   | 'pip'
   | 'playbackRate'
+  | 'position'
   | 'seekBarContainer'
-  | 'cc'
+
+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',
@@ -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, MediaControlElement[]> = {} // TODO & seekEnabled: boolean, ...
+  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,
@@ -399,12 +413,12 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-      this.updateSettings,
+      this.onDvrStateChanged,
     )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_HIGHDEFINITIONUPDATE,
-      this.highDefinitionUpdate,
+      this.onHdUpdate,
     )
     this.listenTo(
       this.core.activeContainer,
@@ -427,7 +441,7 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_OPTIONS_CHANGE,
       this.setInitialVolume,
     )
-  // wait until the metadata has loaded and then check if fullscreen on video tag is supported
+    // wait until the metadata has loaded and then check if fullscreen on video tag is supported
     this.listenToOnce(
       this.core.activeContainer,
       Events.CONTAINER_LOADEDMETADATA,
@@ -480,7 +494,12 @@ export class MediaControl extends UICorePlugin {
     // see https://github.com/clappr/clappr/issues/1127
     if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
       this.fullScreenOnVideoTagSupported = true
-      this.updateSettings()
+    }
+    this.updateSettings()
+    if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+      this.$el.addClass('live')
+    } else {
+      this.$el.removeClass('live')
     }
   }
 
@@ -491,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(
@@ -718,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(),
       )
@@ -740,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()
     }
@@ -753,6 +771,7 @@ export class MediaControl extends UICorePlugin {
     this.changeTogglePlay()
     this.bindContainerEvents()
     this.updateSettings()
+    // TODO remove
     this.core.activeContainer.trigger(
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
       this.core.activeContainer.isDvrInUse(),
@@ -786,7 +805,9 @@ export class MediaControl extends UICorePlugin {
   }
 
   private showVolumeBar() {
-    this.hideVolumeId && clearTimeout(this.hideVolumeId)
+    if (this.hideVolumeId) {
+      clearTimeout(this.hideVolumeId)
+    }
     this.$volumeBarContainer?.removeClass('volume-bar-hide')
   }
 
@@ -847,9 +868,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
@@ -885,21 +906,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
   }
@@ -998,11 +1011,19 @@ export class MediaControl extends UICorePlugin {
       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',
@@ -1029,12 +1050,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
@@ -1042,8 +1064,8 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private highDefinitionUpdate(isHD: boolean) {
-    this.isHD = isHD
+  private onHdUpdate(isHD: boolean) {
+    // TODO render?
   }
 
   private createCachedElements() {
@@ -1119,11 +1141,11 @@ export class MediaControl extends UICorePlugin {
   }
 
   putElement(name: MediaControlElement, element: HTMLElement) {
-    const panel = this.getElementLocation(name);
+    const panel = this.getElementLocation(name)
     trace(`${T} putElement`, { name, panel: !!panel })
     if (panel) {
       const current = panel.find(`[data-${name}]`)
-      element.setAttribute(`data-${name}`, "")
+      element.setAttribute(`data-${name}`, '')
       // TODO test
       if (current.length) {
         if (current[0] === element) {
@@ -1137,22 +1159,23 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
-   * 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')
   }
 
@@ -1389,7 +1412,6 @@ export class MediaControl extends UICorePlugin {
     }, 0)
 
     this.parseColors()
-    this.highDefinitionUpdate(this.isHD)
 
     this.core.$el.append(this.el)
 
@@ -1484,18 +1506,36 @@ export class MediaControl extends UICorePlugin {
 
   private getElementLocation(name: MediaControlElement) {
     if (this.settings.right?.includes(name)) {
-      return this.getRightPanel();
+      return this.getRightPanel()
     }
     if (this.settings.left?.includes(name)) {
-      return this.getLeftPanel();
+      return this.getLeftPanel()
     }
     if (this.settings.default?.includes(name)) {
-      return this.getCenterPanel();
+      return this.getCenterPanel()
+    }
+    return null
+  }
+
+  private onDvrStateChanged(dvrInUse: boolean) {
+    if (dvrInUse) {
+      this.$el.addClass('dvr')
+    } else {
+      this.$el.removeClass('dvr')
     }
-    return null;
   }
 }
 
 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(',')
+}

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

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { MediaControl, MediaControlElement } from '../MediaControl'
 import { createMockCore } from '../../../testUtils'
 import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+import { Events, Playback } from '@clappr/core'
 
 Logger.enable('*')
 setTracer(new LogTracer('MediaControl.test'))
@@ -13,6 +14,31 @@ describe('MediaControl', () => {
   beforeEach(() => {
     core = createMockCore()
   })
+  describe('playback type', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit('core:ready')
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+    })
+    describe('when live', () => {
+      beforeEach(() => {
+        core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      })
+      it('should apply live style class', () => {
+        expect(mediaControl.$el.hasClass('live')).toBe(true)
+      })
+    })
+    describe('when vod', () => {
+      beforeEach(() => {
+        core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+      })
+      it('should not apply live style class', () => {
+        expect(mediaControl.$el.hasClass('live')).toBe(false)
+      })
+    })
+  })
   describe('putElement', () => {
     beforeEach(() => {
       mediaControl = new MediaControl(core)
@@ -28,6 +54,7 @@ describe('MediaControl', () => {
       // ['playbackrate' as MediaControlElement],
       // ['vr' as MediaControlElement],
       // ['audiotracks' as MediaControlElement],
+      // dvr controls
     ])('%s', (mcName) => {
       it('should put the element in the right panel', () => {
         const element = document.createElement('div')
@@ -40,4 +67,66 @@ describe('MediaControl', () => {
       })
     })
   })
+  describe('updateSettings', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit('core:ready')
+    })
+    describe('dvr', () => {
+      beforeEach(() => {
+        core.activeContainer.settings = {
+          left: ['playpause', 'position', 'duration'],
+          seekEnabled: true,
+        }
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      })
+      describe('when enabled', () => {
+        beforeEach(() => {
+          core.activePlayback.dvrEnabled = true
+          core.activeContainer.isDvrEnabled.mockReturnValue(true)
+          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE, true)
+        })
+        it('should enable DVR controls', () => {
+          const element = document.createElement('div')
+          element.className = 'my-dvr-controls'
+          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)
+        })
+      })
+      describe('when disabled', () => {
+        it('should disable DVR controls', () => {
+          const element = document.createElement('div')
+          element.className = 'my-dvr-controls'
+          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)
+        })
+      })
+    })
+  })
+  describe('dvr mode', () => {
+    beforeEach(() => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+    })
+    describe('by default', () => {
+      it('should not apply DVR style class', () => {
+        expect(mediaControl.$el.hasClass('dvr')).toBe(false)
+      })
+    })
+    describe('when in use', () => {
+      beforeEach(() => {
+        core.activeContainer.isDvrInUse.mockReturnValue(true)
+        core.activePlayback.dvrInUse = true
+        core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
+      })
+      it('should apply DVR style class', () => {
+        expect(mediaControl.$el.hasClass('dvr')).toBe(true)
+      })
+    })
+  })
 })

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

@@ -173,3 +173,131 @@ exports[`MediaControl > putElement > pip > should put the element in the right p
 </div>
 <style>:root {}</style>"
 `;
+
+exports[`MediaControl > updateSettings > dvr > when disabled > should disable DVR controls 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="">
+            
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
+    
+        <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-control-indicator gcore-skin-text-color" data-position="">00:00</div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</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>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > updateSettings > dvr > when enabled > should enable DVR controls 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="">
+            
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color paused" data-playpause="" aria-label="playpause">/assets/icons/new/play.svg</button>
+    
+        <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-control-indicator gcore-skin-text-color" data-position="">00:00</div>
+    
+        <div class="media-control-indicator gcore-skin-text-color" data-duration="">00:00</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 class="my-dvr-controls" data-dvr="">live</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>
+    
+</div>
+<style>:root {}</style>"
+`;

package/src/testUtils.ts

@@ -1,4 +1,4 @@
-import { $, UICorePlugin } from '@clappr/core'
+import { $, Playback, UICorePlugin } from '@clappr/core'
 import Events from 'eventemitter3'
 import { vi } from 'vitest'
 /**
@@ -42,7 +42,7 @@ export class _MockPlayback extends Events {
   exitPiP() {}
 
   getPlaybackType() {
-    return 'live'
+    return Playback.LIVE
   }
 
   getStartTimeOffset() {
@@ -100,7 +100,7 @@ export function createMockCore(
       ...options,
     },
     configure: vi.fn(),
-    getPlaybackType: vi.fn(),
+    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
     getPlugin: vi.fn(),
     load: vi.fn(),
     trigger: emitter.emit,
@@ -126,7 +126,9 @@ export function createMockPlayback(name = 'mock') {
   return Object.assign(emitter, {
     name,
     currentLevel: -1,
+    el: document.createElement('video'),
     dvrEnabled: false,
+    dvrInUse: false,
     levels: [],
     consent() {},
     play() {},
@@ -138,7 +140,7 @@ export function createMockPlayback(name = 'mock') {
     getDuration: vi.fn().mockImplementation(() => 100),
     enterPiP: vi.fn(),
     exitPiP: vi.fn(),
-    getPlaybackType: vi.fn().mockImplementation(() => 'live'),
+    getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
     getStartTimeOffset: vi.fn().mockImplementation(() => 0),
     getCurrentTime: vi.fn().mockImplementation(() => 0),
     isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
@@ -155,7 +157,7 @@ export function createMockPlayback(name = 'mock') {
 }
 
 export function createMockContainer(playback: any = createMockPlayback()) {
-  const el = document.createElement('div')
+  const el = playback.el
   const emitter = new Events()
   return Object.assign(emitter, {
     el,
@@ -163,8 +165,9 @@ export function createMockContainer(playback: any = createMockPlayback()) {
     $el: $(el),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
-    getPlaybackType: vi.fn().mockReturnValue('live'),
+    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
     isDvrInUse: vi.fn().mockReturnValue(false),
+    isDvrEnabled: vi.fn().mockReturnValue(false),
     isPlaying: vi.fn().mockReturnValue(false),
     play: vi.fn(),
     seek: vi.fn(),
@@ -187,10 +190,6 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.putElement = vi.fn()
   // @ts-ignore
-  mediaControl.getLeftPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-left-panel'))
-  // @ts-ignore
-  mediaControl.getRightPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-right-panel'))
-  // @ts-ignore
-  mediaControl.getCenterPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-center-panel'))
+  mediaControl.toggleElement = vi.fn()
   return mediaControl
 }