@gcorevideo/player 2.24.11 → 2.24.14

package/src/playback/hls-playback/HlsPlayback.ts

@@ -504,12 +504,7 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   protected override _ready() {
-    trace(`${T} _ready`, {
-      isReadyState: this._isReadyState, // is defined in HTML5Video
-    })
     !this._hls && this._setup()
-    // this._isReadyState = true
-    // this.trigger(Events.PLAYBACK_READY, this.name)
     super._ready()
   }
 
@@ -818,13 +813,13 @@ export default class HlsPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_PROGRESS, progress, buffered)
   }
 
-  load(url: string) {
+  override load(url: string) {
     this._stopTimeUpdateTimer()
     this.options.src = url
     this._setup()
   }
 
-  play() {
+  override play() {
     !this._hls && this._setup()
     !this._manifestParsed &&
       !this.options.hlsPlayback.preload &&
@@ -834,7 +829,7 @@ export default class HlsPlayback extends BasePlayback {
     this._startTimeUpdateTimer()
   }
 
-  pause() {
+  override pause() {
     if (!this._hls) {
       return
     }

package/src/plugins/audio-selector/AudioTracks.ts

@@ -88,7 +88,7 @@ export class AudioTracks extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-      mediaControl.mount('audiotracks', this.$el)
+      mediaControl.slot('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
     this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {

package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts

@@ -34,7 +34,7 @@ describe('AudioTracks', () => {
       emitTracksAvailable(core, TRACKS)
     })
     it('should not attach to the media control', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+      expect(mediaControl.slot).not.toHaveBeenCalledWith(
         'audiotracks',
         expect.anything(),
       )
@@ -45,7 +45,7 @@ describe('AudioTracks', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should attach to the media control', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith(
+      expect(mediaControl.slot).toHaveBeenCalledWith(
         'audiotracks',
         audioTracks.$el,
       )

package/src/plugins/bottom-gear/BottomGear.ts

@@ -320,7 +320,7 @@ export class BottomGear extends UICorePlugin {
 
   private mount() {
     const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.mount('gear', this.$el)
+    mediaControl.slot('gear', this.$el)
   }
 
   private alignSubmenu($subMenu: ZeptoResult) {

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -61,7 +61,7 @@ describe('BottomGear', () => {
     })
     describe('until media control is rendered', () => {
       it('should not attach to media control', () => {
-        expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        expect(mediaControl.slot).not.toHaveBeenCalledWith(
           'gear',
           expect.anything(),
         )
@@ -72,7 +72,7 @@ describe('BottomGear', () => {
         mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
       })
       it('should attach to media control', () => {
-        expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+        expect(mediaControl.slot).toHaveBeenCalledWith('gear', bottomGear.$el)
       })
     })
     describe('when clicked', () => {

package/src/plugins/clips/Clips.ts

@@ -139,7 +139,7 @@ export class Clips extends UICorePlugin {
   private onMcRender() {
     trace(`${T} onMcRender`)
     const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.mount('clips', this.$el)
+    mediaControl.slot('clips', this.$el)
   }
 
   private onContainerChanged() {

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

@@ -66,7 +66,7 @@ describe('Clips', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should mount the indicator', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith('clips', clips.$el)
+      expect(mediaControl.slot).toHaveBeenCalledWith('clips', clips.$el)
     })
   })
 })

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

@@ -1,14 +1,14 @@
 import { Events, Playback, UICorePlugin, template } from '@clappr/core'
 import assert from 'assert'
+import { trace } from '@gcorevideo/utils'
 
 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 { 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
@@ -46,7 +46,7 @@ export class DvrControls extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .live-button': 'click',
+      'click #gplayer-mc-back-to-live': 'clicked',
     }
   }
 
@@ -56,6 +56,7 @@ export class DvrControls extends UICorePlugin {
   override get attributes() {
     return {
       class: 'dvr-controls',
+      'data-dvr': '',
     }
   }
 
@@ -91,7 +92,7 @@ export class DvrControls extends UICorePlugin {
     )
   }
 
-  private click() {
+  private clicked() {
     const container = this.core.activeContainer
     if (!container.isPlaying()) {
       container.play()
@@ -103,19 +104,18 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   override render() {
+    trace(`${T} render`)
     this.$el.html(
       DvrControls.template({
         i18n: this.core.i18n,
       }),
     )
+    this.$el.find('#gplayer-mc-back-to-live').hide()
+    this.$el.find('#gplayer-mc-live').hide()
 
     return this
   }
 
-  private onMediacontrolRendered() {
-    this.render()
-  }
-
   private onMetadataLoaded() {
     this.mount()
     this.toggleState(this.core.activeContainer.isDvrInUse())
@@ -128,10 +128,10 @@ export class DvrControls extends UICorePlugin {
     }
     const mediaControl = this.core.getPlugin('media_control') as MediaControl
     assert(mediaControl, 'media_control plugin is required')
-    // TODO -> to MediaControl
+    // TODO -> to MediaControl (auto hide)
     mediaControl.toggleElement('duration', false)
     mediaControl.toggleElement('position', false)
-    mediaControl.mount('dvr', this.$el)
+    mediaControl.mount('left', this.$el) // TODO use independent mount point
   }
 
   private onDvrStateChanged(dvrInUse: boolean) {
@@ -140,11 +140,11 @@ export class DvrControls extends UICorePlugin {
 
   private toggleState(dvrInUse: boolean) {
     if (dvrInUse) {
-      this.$el.find('#media-control-back-to-live').show()
-      this.$el.find('#media-control-live').hide()
+      this.$el.find('#gplayer-mc-back-to-live').show()
+      this.$el.find('#gplayer-mc-live').hide()
     } else {
-      this.$el.find('#media-control-back-to-live').hide()
-      this.$el.find('#media-control-live').show()
+      this.$el.find('#gplayer-mc-back-to-live').hide()
+      this.$el.find('#gplayer-mc-live').show()
     }
   }
 }

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

@@ -33,10 +33,7 @@ describe('DvrControls', () => {
   })
   describe('while playback type is unknown', () => {
     it('should not mount', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'dvr',
-        dvrControls.$el,
-      )
+      expect(mediaControl.slot).not.toHaveBeenCalledWith('dvr', dvrControls.$el)
     })
   })
   describe('live stream', () => {
@@ -75,33 +72,29 @@ describe('DvrControls', () => {
         )
       })
       it('should mount to the media control', () => {
-        expect(mediaControl.mount).toHaveBeenCalledWith('dvr', dvrControls.$el)
+        expect(mediaControl.mount).toHaveBeenCalledWith('left', dvrControls.$el)
       })
       if (dvrEnabled) {
         if (dvrInUse) {
           it('should show back_to_live button', () => {
             expect(
-              dvrControls.$el
-                .find('#media-control-back-to-live')
-                .css('display'),
+              dvrControls.$el.find('#gplayer-mc-back-to-live').css('display'),
             ).not.toBe('none')
           })
-          it('should hide live inficator', () => {
+          it('should hide live indicator', () => {
             expect(
-              dvrControls.$el.find('#media-control-live').css('display'),
+              dvrControls.$el.find('#gplayer-mc-live').css('display'),
             ).toBe('none')
           })
         } else {
-          it('should show live inficator', () => {
+          it('should show live indicator', () => {
             expect(
-              dvrControls.$el.find('#media-control-live').css('display'),
+              dvrControls.$el.find('#gplayer-mc-live').css('display'),
             ).not.toBe('none')
           })
           it('should hide back_to_live button', () => {
             expect(
-              dvrControls.$el
-                .find('#media-control-back-to-live')
-                .css('display'),
+              dvrControls.$el.find('#gplayer-mc-back-to-live').css('display'),
             ).toBe('none')
           })
         }
@@ -118,7 +111,7 @@ describe('DvrControls', () => {
           Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
           true,
         )
-        dvrControls.$el.find('#media-control-back-to-live').click()
+        dvrControls.$el.find('#gplayer-mc-back-to-live').click()
       })
       it('should play stream', () => {
         expect(core.activeContainer.play).toHaveBeenCalled()
@@ -139,9 +132,19 @@ describe('DvrControls', () => {
     // TODO handle mount points in MediaControl
     it('should not mount', () => {
       expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'dvr',
+        'left',
         expect.anything(),
       )
     })
+    it('should not alter position and duration indicators', () => {
+      expect(mediaControl.toggleElement).not.toHaveBeenCalledWith(
+        'duration',
+        false,
+      )
+      expect(mediaControl.toggleElement).not.toHaveBeenCalledWith(
+        'position',
+        false,
+      )
+    })
   })
 })

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

@@ -1,7 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DvrControls > basically > 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>
+"<div class="live-info" id="gplayer-mc-live" style="display: none;">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="gplayer-mc-back-to-live" style="display: none;">
+    back_to_live
+</button>
 "
 `;

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

@@ -56,7 +56,7 @@ export type MediaControlLeftElement =
  * Media control elements that appear in main layer, spanning the entire width of the player.
  * @beta
  */
-export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' // TODO rename seekbar
+export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' | '_' // TODO remove seekbar
 
 /**
  * Media control elements that appear in the right area.
@@ -91,6 +91,14 @@ const MANAGED_ELEMENTS: MediaControlElement[] = [
   'volume',
 ]
 
+export type MediaControlSlotSelector =
+  | 'root'
+  | 'base'
+  | 'left'
+  | 'right'
+  | 'center'
+  | 'seekbar'
+
 /**
  * Specifies the allowed media control elements in each area.
  * Can be used to restrict rendered media control elements.
@@ -723,7 +731,9 @@ export class MediaControl extends UICorePlugin {
   }
 
   private togglePlayStop() {
-    this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play()
+    this.container.isPlaying()
+      ? this.container.stop({ ui: true })
+      : this.container.play()
   }
 
   private startSeekDrag(event: MouseEvent) {
@@ -897,19 +907,19 @@ export class MediaControl extends UICorePlugin {
   }
 
   private hideVolumeBar(timeout = 400) {
-    if (!this.$volumeBarContainer) {
-      return
-    }
     if (this.hideVolumeId) {
       clearTimeout(this.hideVolumeId)
     }
     if (this.draggingVolumeBar) {
-      this.hideVolumeId = setTimeout(() => this.hideVolumeBar(), timeout)
+      this.hideVolumeId = setTimeout(() => {
+        this.hideVolumeId = null
+        this.hideVolumeBar()
+      }, timeout)
     } else {
-      this.hideVolumeId = setTimeout(
-        () => this.$volumeBarContainer?.addClass('volume-bar-hide'),
-        timeout,
-      )
+      this.hideVolumeId = setTimeout(() => {
+        this.hideVolumeId = null
+        this.$volumeBarContainer.addClass('volume-bar-hide')
+      }, timeout)
     }
   }
 
@@ -1133,8 +1143,7 @@ export class MediaControl extends UICorePlugin {
       newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback()
     }
 
-    const settingsChanged =
-      serializeSettings(this.settings) !== serializeSettings(newSettings)
+    const settingsChanged = !isEqualSettings(this.settings, newSettings)
 
     if (settingsChanged) {
       this.settings = newSettings
@@ -1182,34 +1191,52 @@ 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
+   * @param element - The DOM node/fragment to mount
+   * @deprecated Use {@link MediaControl.mount} instead
+   */
+  slot(name: MediaControlElement, element: ZeptoResult): void {
+    const panel = this.getElementLocation(name)
+    if (panel) {
+      element.attr(`data-${name}`, '')
+      mountTo(panel, element)
+    }
+  }
+
+  /**
+   * Mounts a media control element at a specific location
+   * @param name - The location to mount the element
+   * @param element - The element to mount
    * @remarks
    * Use this method to render custom media control UI in a plugin
    * @example
    * ```ts
    * class MyPlugin extends UICorePlugin {
    *   override render() {
-   *     this.$el.html('<div data-clips>Here we go</div>')
-   *     this.core.getPlugin('media_control').mount('clips', this.$el)
+   *     this.$el.html('<div id="my-element" class="my-class">Here we go</div>')
+   *     this.core.getPlugin('media_control').mount('left', this.$el)
    *     return this
    *   }
    * }
    * ```
    */
-  mount(name: MediaControlElement, element: ZeptoResult) {
-    const panel = this.getElementLocation(name)
-    if (panel) {
-      const current = panel.find(`[data-${name}]`)
-      element.attr(`data-${name}`, '')
-      // TODO test
-      if (current.length) {
-        if (current[0] === element[0]) {
-          return
-        }
-        current.replaceWith(element)
-      } else {
-        panel.append(element)
-      }
+  mount(name: MediaControlSlotSelector, element: ZeptoResult) {
+    mountTo(this.getMountParent(name), element)
+  }
+
+  private getMountParent(name: MediaControlSlotSelector): ZeptoResult {
+    switch (name) {
+      case 'root':
+        return this.$el
+      case 'base':
+        return this.$el.find('.media-control-layer')
+      case 'center':
+        return this.getCenterPanel()
+      case 'left':
+        return this.getLeftPanel()
+      case 'right':
+        return this.getRightPanel()
+      default:
+        assert.fail(`Invalid mount parent name: ${name}`)
     }
   }
 
@@ -1452,17 +1479,14 @@ export class MediaControl extends UICorePlugin {
       }
     }
 
+    // TODO check if needed
     this.$seekBarPosition?.addClass('media-control-notransition')
     this.$seekBarScrubber?.addClass('media-control-notransition')
 
-    let previousSeekPercentage = 0
-
-    if (this.displayedSeekBarPercentage) {
-      previousSeekPercentage = this.displayedSeekBarPercentage
-    }
+    const prevSeekPercentage = this.displayedSeekBarPercentage || 0
 
     this.displayedSeekBarPercentage = null
-    this.setSeekPercentage(previousSeekPercentage)
+    this.setSeekPercentage(prevSeekPercentage)
 
     setTimeout(() => {
       !this.settings.seekEnabled &&
@@ -1609,3 +1633,13 @@ function serializeSettings(s: MediaControlSettings) {
     .concat([s.seekEnabled as any])
     .join(',')
 }
+
+function isEqualSettings(a: MediaControlSettings, b: MediaControlSettings) {
+  return serializeSettings(a) === serializeSettings(b)
+}
+
+function mountTo(parent: ZeptoResult, element: ZeptoResult) {
+  if (!parent.find(element).length) {
+    parent.append(element)
+  }
+}