@gcorevideo/player 2.22.18 → 2.22.21

package/src/plugins/clappr-stats/utils.ts

@@ -1,6 +1,6 @@
-import type { Metrics } from './types'
+import type { ClapprStatsMetrics } from './types'
 
-export function newMetrics(): Metrics {
+export function newMetrics(): ClapprStatsMetrics {
   return {
     counters: {
       play: 0,

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -25,7 +25,7 @@ export class ClickToPause extends ContainerPlugin {
    * @internal
    */
   get name() {
-    return 'click_to_pause_custom'
+    return 'click_to_pause'
   }
 
   /**

package/src/plugins/clips/Clips.ts

@@ -12,7 +12,7 @@ import clipsHTML from '../../../assets/clips/clips.ejs'
 const T = 'plugins.clips'
 
 /**
- * Configuration options for the {@link ClipsPlugin} plugin.
+ * Configuration options for the {@link Clips} plugin.
  * @beta
  */
 export interface ClipsPluginSettings {

package/src/plugins/clips/__tests__/Clips.test.ts

@@ -8,7 +8,7 @@ import { Events } from '@clappr/core'
 // Logger.enable('*')
 // setTracer(new LogTracer('Clips.text'))
 
-describe('ClipsPlugin', () => {
+describe('Clips', () => {
   let core: any
   let mediaControl: any
   let clips: Clips

package/src/plugins/clips/__tests__/__snapshots__/Clips.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ClipsPlugin > should render indicator 1`] = `
+exports[`Clips > should render indicator 1`] = `
 "<div class="media-clip-text" id="clips-text">Introduction</div><svg width="0" height="0">
 <defs>
 <clipPath id="myClip">

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

@@ -1,14 +1,14 @@
-import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core'
+import { Events, Playback, UICorePlugin, template } from '@clappr/core'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
 import dvrHTML from '../../../assets/dvr-controls/index.ejs'
 import '../../../assets/dvr-controls/dvr_controls.scss'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const T = 'plugins.dvr_controls'
+// const T = 'plugins.dvr_controls'
 
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
@@ -63,11 +63,11 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
-      this.bindContainerEvents,
+      this.onActiveContainerChanged,
     )
   }
 
@@ -75,21 +75,19 @@ export class DvrControls extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
 
-    this.listenTo(
-      mediaControl,
-      Events.MEDIACONTROL_RENDERED,
-      this.render,
-    )
-    // MediaControl has been rendered
-    this.render()
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount)
   }
 
-  private bindContainerEvents() {
-    trace(`${T} bindContainerEvents`)
-    this.listenToOnce(
+  private onActiveContainerChanged() {
+    this.listenTo(
       this.core.activeContainer,
-      Events.CONTAINER_TIMEUPDATE,
-      this.render,
+      Events.CONTAINER_LOADEDMETADATA,
+      this.onMetadataLoaded,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.onDvrStateChanged,
     )
   }
 
@@ -101,36 +99,52 @@ export class DvrControls extends UICorePlugin {
     container.seek(container.getDuration())
   }
 
-  private shouldRender() {
-    return this.core.getPlaybackType() === Playback.LIVE
-  }
-
   /**
    * @internal
    */
   override render() {
-    trace(`${T} render`, {
-      dvrEnabled: this.core.activePlayback?.dvrEnabled,
-      playbackType: this.core.getPlaybackType(),
-    })
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    if (!mediaControl) {
-      return this
-    }
-    if (!this.shouldRender()) {
-      return this
-    }
-
-    mediaControl.toggleElement('duration', false)
-    mediaControl.toggleElement('position', false)
-
     this.$el.html(
       DvrControls.template({
         i18n: this.core.i18n,
       }),
     )
-    mediaControl.putElement('dvr', this.$el)
 
     return this
   }
+
+  private onMediacontrolRendered() {
+    this.render()
+  }
+
+  private onMetadataLoaded() {
+    this.mount()
+    this.toggleState(this.core.activeContainer.isDvrInUse())
+  }
+
+  private mount() {
+    // TODO move mount point management logic to MediaControl
+    if (this.core.getPlaybackType() !== Playback.LIVE) {
+      return
+    }
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    assert(mediaControl, 'media_control plugin is required')
+    // TODO -> to MediaControl
+    mediaControl.toggleElement('duration', false)
+    mediaControl.toggleElement('position', false)
+    mediaControl.mount('dvr', this.$el)
+  }
+
+  private onDvrStateChanged(dvrInUse: boolean) {
+    this.toggleState(dvrInUse)
+  }
+
+  private toggleState(dvrInUse: boolean) {
+    if (dvrInUse) {
+      this.$el.find('#media-control-back-to-live').show()
+      this.$el.find('#media-control-live').hide()
+    } else {
+      this.$el.find('#media-control-back-to-live').hide()
+      this.$el.find('#media-control-live').show()
+    }
+  }
 }

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

@@ -20,11 +20,30 @@ describe('DvrControls', () => {
     }
     core.getPlugin.mockImplementation((name: string) => plugins[name])
     dvrControls = new DvrControls(core)
-    plugins.dvr_controls = dvrControls
+    core.emit(Events.CORE_READY)
+    mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+  })
+  describe('basically', () => {
+    it('should render', () => {
+      expect(dvrControls.el.innerHTML).toMatchSnapshot()
+      expect(dvrControls.el.textContent).toMatch(/\blive\b/)
+      expect(dvrControls.el.textContent).toMatch(/\bback_to_live\b/)
+    })
+  })
+  describe('while playback type is unknown', () => {
+    it('should not mount', () => {
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        'dvr',
+        dvrControls.$el,
+      )
+    })
   })
   describe('live stream', () => {
     beforeEach(() => {
       core.getPlaybackType.mockReturnValue('live')
+      core.activeContainer.getPlaybackType.mockReturnValue('live')
+      core.activePlayback.getPlaybackType.mockReturnValue('live')
     })
     describe.each([
       ['no DVR', false, false, false],
@@ -33,36 +52,75 @@ describe('DvrControls', () => {
       beforeEach(() => {
         core.activePlayback.dvrEnabled = dvrEnabled
         core.activeContainer.isDvrEnabled.mockReturnValue(dvrEnabled)
-        core.trigger(Events.CORE_READY)
-        core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         if (dvrInUse) {
           core.activePlayback.dvrInUse = true
           core.activeContainer.isDvrInUse.mockReturnValue(true)
-          core.activeContainer.emit(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, true)
+          core.activeContainer.emit(
+            Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+            true,
+          )
         }
       })
-      it('should render', () => {
-        expect(dvrControls.el.textContent).toBeTruthy()
-        expect(dvrControls.el.innerHTML).toMatchSnapshot()
-      })
+      // TODO let the media control itself handle this
       it('should hide duration and position indicators', () => {
-        expect(mediaControl.toggleElement).toHaveBeenCalledWith('duration', false)
-        expect(mediaControl.toggleElement).toHaveBeenCalledWith('position', false)
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith(
+          'duration',
+          false,
+        )
+        expect(mediaControl.toggleElement).toHaveBeenCalledWith(
+          'position',
+          false,
+        )
       })
-      it('should render to the media control', () => {
-        expect(mediaControl.putElement).toHaveBeenCalledWith('dvr', dvrControls.$el)
+      it('should mount to the media control', () => {
+        expect(mediaControl.mount).toHaveBeenCalledWith('dvr', dvrControls.$el)
       })
+      if (dvrEnabled) {
+        if (dvrInUse) {
+          it('should show back_to_live button', () => {
+            expect(
+              dvrControls.$el
+                .find('#media-control-back-to-live')
+                .css('display'),
+            ).not.toBe('none')
+          })
+          it('should hide live inficator', () => {
+            expect(
+              dvrControls.$el.find('#media-control-live').css('display'),
+            ).toBe('none')
+          })
+        } else {
+          it('should show live inficator', () => {
+            expect(
+              dvrControls.$el.find('#media-control-live').css('display'),
+            ).not.toBe('none')
+          })
+          it('should hide back_to_live button', () => {
+            expect(
+              dvrControls.$el
+                .find('#media-control-back-to-live')
+                .css('display'),
+            ).toBe('none')
+          })
+        }
+      }
     })
     describe('when back_to_live button is clicked', () => {
       beforeEach(() => {
         core.activePlayback.dvrEnabled = true
-        core.trigger('core:ready')
-        core.trigger('core:active:container:changed')
+        core.activeContainer.isDvrEnabled.mockReturnValue(true)
+        core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+        core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
         core.activeContainer.getDuration.mockReturnValue(180)
-        core.activeContainer.trigger('container:dvr', true)
-        dvrControls.$el.find('.live-button').click()
+        core.activeContainer.emit(
+          Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+          true,
+        )
+        dvrControls.$el.find('#media-control-back-to-live').click()
       })
-      it('should call active container play', () => {
+      it('should play stream', () => {
         expect(core.activeContainer.play).toHaveBeenCalled()
       })
       it('should seek to live edge', () => {
@@ -70,20 +128,20 @@ describe('DvrControls', () => {
       })
     })
   })
-  describe('basically', () => {
+  describe('VOD stream', () => {
     beforeEach(() => {
       core.getPlaybackType.mockReturnValue(Playback.VOD)
       core.activeContainer.getPlaybackType.mockReturnValue(Playback.VOD)
       core.activePlayback.getPlaybackType.mockReturnValue(Playback.VOD)
+      core.activePlayback.emit(Events.PLAYBACK_LOADEDMETADATA)
+      core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
     })
-    beforeEach(() => {
-      core.trigger(Events.CORE_READY)
-      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
-    })
-    it('should render', () => {
-      expect(dvrControls.el.innerHTML).toMatchSnapshot()
-      expect(dvrControls.el.textContent).toContain('live')
-      expect(dvrControls.el.textContent).toContain('back_to_live')
+    // TODO handle mount points in MediaControl
+    it('should not mount', () => {
+      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        'dvr',
+        expect.anything(),
+      )
     })
   })
 })

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

@@ -5,15 +5,3 @@ exports[`DvrControls > basically > should render 1`] = `
 <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 1`] = `
-"<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 1`] = `
-"<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>
-"
-`;

package/src/plugins/level-selector/__tests__/__snapshots__/QualityLevels.test.ts.snap

@@ -154,7 +154,7 @@ exports[`QualityLevels > options.restrictResolution > given vertical video forma
 `;
 
 exports[`QualityLevels > options.restrictResolution > initially > should render the restricted quality level label 1`] = `
-"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu">
+"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu" id="quality-levels">
     <span class="gear-option_icon hidden">/assets/icons/new/hd.svg</span>
     <span class="gear-option_label">quality</span>
     <span class="gear-option_value">360p</span>

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

@@ -81,6 +81,16 @@ export type MediaControlElement =
   | MediaControlLayerElement
   | MediaControlRightElement
 
+const MANAGED_ELEMENTS: MediaControlElement[] = [
+  'dvr',
+  'duration',
+  'fullscreen',
+  'hd-indicator',
+  'position',
+  'seekbar',
+  'volume',
+]
+
 /**
  * Specifies the allowed media control elements in each area.
  * Can be used to restrict rendered media control elements.
@@ -99,8 +109,6 @@ const DEFAULT_SETTINGS: MediaControlSettings = {
   right: [
     'audiotracks',
     'cc',
-    // 'dvr',
-    // 'duration',
     'fullscreen',
     'gear',
     'multicamera',
@@ -122,12 +130,16 @@ const T = 'plugins.media_control'
 const LEFT_ORDER = [
   'playpause',
   'playstop',
-  'dvr',
   'volume',
   'position',
   'duration',
+  'dvr',
 ]
 
+export enum ExtendedEvents {
+  MEDIACONTROL_VOLUME = 'mediacontrol:volume',
+}
+
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils
 
 function orderByOrderPattern(arr: string[], order: string[]): string[] {
@@ -785,16 +797,17 @@ 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.core.activeContainer && this.core.activeContainer.isReady) {
         this.core.activeContainer.setVolume(value)
+        this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value)
       } else {
         this.listenToOnce(
           this.core.activeContainer,
           Events.CONTAINER_READY,
           () => {
             this.core.activeContainer.setVolume(value)
+            this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value)
           },
         )
       }
@@ -996,8 +1009,7 @@ export class MediaControl extends UICorePlugin {
       }
       this.$el.show()
       this.trigger(Events.MEDIACONTROL_SHOW, this.name)
-      this.container &&
-        this.container.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name)
+      this.core.activeContainer?.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name)
       this.$el.removeClass('media-control-hide')
       this.hideId = setTimeout(() => this.hide(), timeout)
       if (event) {
@@ -1066,7 +1078,7 @@ export class MediaControl extends UICorePlugin {
     )
     trace(`${T} updateSettings`, { newSettings })
 
-    newSettings.left.push('clips') // TODO
+    newSettings.left.push('clips') // TODO settings
     // TODO make order controlled via CSS
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'volume', 'clips'],
@@ -1155,7 +1167,6 @@ export class MediaControl extends UICorePlugin {
    * Get a media control element DOM node
    * @param name - The name of the media control element
    * @returns The DOM node to render to or extend
-   * @deprecated  Use {@link MediaControl.putElement} instead
    * @remarks
    * Use this method to render custom media control UI in a plugin
    * @example
@@ -1171,7 +1182,7 @@ export class MediaControl extends UICorePlugin {
    */
   mount(name: MediaControlElement, element: ZeptoResult) {
     const panel = this.getElementLocation(name)
-    trace(`${T} putElement`, { name, panel: !!panel })
+    trace(`${T} mount`, { name, panel: !!panel })
     if (panel) {
       const current = panel.find(`[data-${name}]`)
       element.attr(`data-${name}`, '')
@@ -1188,6 +1199,11 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  /**
+   * @deprecated  Use {@link MediaControl.mount} instead
+   * @param name
+   * @param element
+   */
   putElement(name: MediaControlElement, element: ZeptoResult) {
     this.mount(name, element)
   }
@@ -1195,7 +1211,7 @@ export class MediaControl extends UICorePlugin {
   /**
    * 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
+   * @param show - Visibility state
    */
   toggleElement(area: MediaControlElement, show: boolean) {
     this.$el.find(`[data-${area}]`).toggle(show)
@@ -1456,6 +1472,7 @@ export class MediaControl extends UICorePlugin {
         width: this.options.width,
         height: this.options.height,
       })
+      // TODO check out
       this.hideVolumeBar(0)
     }, 0)
 

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

@@ -189,7 +189,7 @@ describe('MediaControl', () => {
       })
     })
   })
-  describe('putElement', () => {
+  describe('mount', () => {
     beforeEach(async () => {
       mediaControl = new MediaControl(core)
       core.emit(Events.CORE_READY)
@@ -212,7 +212,7 @@ describe('MediaControl', () => {
         const element = document.createElement('div')
         element.className = 'my-media-control'
         element.textContent = 'test'
-        mediaControl.putElement(mcName, $(element))
+        mediaControl.mount(mcName, $(element))
 
         expect(mediaControl.el.innerHTML).toMatchSnapshot()
         expect(
@@ -234,19 +234,22 @@ describe('MediaControl', () => {
           seekEnabled: true,
         }
         core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+        core.activePlayback.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.activeContainer.getPlaybackType.mockReturnValue(Playback.LIVE)
+        core.getPlaybackType.mockReturnValue(Playback.LIVE)
         await runMetadataLoaded(core)
       })
       describe('when enabled', () => {
         beforeEach(() => {
           core.activePlayback.dvrEnabled = true
           core.activeContainer.isDvrEnabled.mockReturnValue(true)
-          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE, true)
+          core.activeContainer.emit(Events.CONTAINER_SETTINGSUPDATE)
         })
         it('should enable DVR controls', () => {
           const element = document.createElement('div')
           element.className = 'my-dvr-controls'
           element.textContent = 'live'
-          mediaControl.putElement('dvr', $(element))
+          mediaControl.mount('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
           expect(
             mediaControl.$el.find('.media-control-left-panel .my-dvr-controls')
@@ -259,7 +262,7 @@ describe('MediaControl', () => {
           const element = document.createElement('div')
           element.className = 'my-dvr-controls'
           element.textContent = 'live'
-          mediaControl.putElement('dvr', $(element))
+          mediaControl.mount('dvr', $(element))
           expect(mediaControl.el.innerHTML).toMatchSnapshot()
           expect(
             mediaControl.$el.find('.media-control-left-panel .my-dvr-controls')