@gcorevideo/player 2.22.0 → 2.22.1

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -1,4 +1,4 @@
-import { Events, UICorePlugin, Playback, template, Core } from '@clappr/core'
+import { Events, UICorePlugin, Playback, template, Core, $ } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
@@ -11,29 +11,37 @@ import speedIcon from '../../../assets/icons/new/speed.svg'
 import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg'
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg'
 import checkIcon from '../../../assets/icons/new/check.svg'
-import { BottomGear } from '../bottom-gear/BottomGear.js'
+import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
 import { PlaybackEvents } from '../../playback/types.js'
-import {
-  MediaControl,
-  MediaControlEvents,
-} from '../media-control/MediaControl.js'
+import { MediaControl } from '../media-control/MediaControl.js'
 
-type PlaybackRateOption = {
-  value: string
+/**
+ * @beta
+ */
+export type PlaybackRateOption = {
+  value: number
   label: string
 }
 
+/**
+ * @beta
+ */
+export type PlaybackRateSettings = {
+  options?: PlaybackRateOption[]
+  defaultValue?: number
+}
+
 const DEFAULT_PLAYBACK_RATES = [
-  { value: '0.5', label: '0.5x' },
-  { value: '0.75', label: '0.75x' },
-  { value: '1.0', label: '1x' },
-  { value: '1.25', label: '1.25x' },
-  { value: '1.5', label: '1.5x' },
-  { value: '1.75', label: '1.75x' },
-  { value: '2.0', label: '2x' },
+  { value: 0.5, label: '0.5x' },
+  { value: 0.75, label: '0.75x' },
+  { value: 1.0, label: '1x' },
+  { value: 1.25, label: '1.25x' },
+  { value: 1.5, label: '1.5x' },
+  { value: 1.75, label: '1.75x' },
+  { value: 2.0, label: '2x' },
 ]
 
-const DEFAULT_PLAYBACK_RATE = '1.0'
+const DEFAULT_PLAYBACK_RATE = 1
 
 const T = 'plugins.playback_rate'
 
@@ -44,22 +52,37 @@ const T = 'plugins.playback_rate'
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
  *
- * - {@link BottomGear | bottom_gear}
+ * It renders an option in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR-enabled live streams.
  *
- * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
- * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
+ * Plugin settings - {@link PlaybackRateSettings}
+ *
+ * @example
+ * ```ts
+ * import { Player, PlaybackRateSettings } from '@gcorevideo/player'
+ * Player.registerPlugin(PlaybackRate)
+ * const player = new Player({
+ *   playbackRate: {
+ *     options: [
+ *       { value: 0.5, label: '0.5x' },
+ *       { value: 1, label: '1x' },
+ *     ],
+ *     defaultValue: 1,
+ *   } as PlaybackRateSettings,
+ * })
+ * ```
  */
 export class PlaybackRate extends UICorePlugin {
   private playbackRates: PlaybackRateOption[] = DEFAULT_PLAYBACK_RATES
 
   // Saved when an ad starts to restore after it finishes
-  private prevSelectedRate: string | undefined
-
-  private rendered = false
+  // private prevSelectedRate: string | undefined
 
-  private selectedRate: string = DEFAULT_PLAYBACK_RATE
+  private selectedRate = DEFAULT_PLAYBACK_RATE
 
   /**
    * @internal
@@ -101,9 +124,8 @@ export class PlaybackRate extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .gear-sub-menu_btn': 'onRateSelect',
-      'click .gear-option': 'onShowMenu',
-      'click .go-back': 'goBack',
+      'click [data-rate]': 'onSelect',
+      'click #playback-rate-back-button': 'goBack',
     }
   }
 
@@ -111,7 +133,7 @@ export class PlaybackRate 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,
@@ -125,11 +147,13 @@ export class PlaybackRate extends UICorePlugin {
     assert(mediaControl, 'media_control plugin is required')
     const gear = this.core.getPlugin('bottom_gear') as BottomGear
     assert(gear, 'bottom_gear plugin is required')
+
     this.listenTo(
       mediaControl,
-      MediaControlEvents.MEDIACONTROL_GEAR_RENDERED,
-      this.onGearRendered,
+      Events.MEDIACONTROL_RENDERED,
+      this.onMediaControlRendered,
     )
+    this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered)
   }
 
   private onActiveContainerChange() {
@@ -143,47 +167,65 @@ export class PlaybackRate extends UICorePlugin {
     )
     this.listenTo(
       this.core.activeContainer,
-      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-      this.onDvrStateChanged,
+      Events.CONTAINER_LOADEDMETADATA,
+      this.onMetaDataLoaded,
     )
   }
 
-  private onGearRendered() {
-    trace(`${T} onGearRendered`, {
-      rendered: this.rendered,
-    })
-    this.rendered = false
+  private onMediaControlRendered() {
+    trace(`${T} onMediaControlRendered`)
     this.render()
   }
 
-  private onDvrStateChanged(dvrEnabled: boolean) {
-    trace(`${T} onDvrStateChanged`, {
-      dvrEnabled,
-    })
-    if (dvrEnabled) {
-      this.render()
-    }
+  private onGearRendered() {
+    trace(`${T} onGearRendered`)
+    this.addGearItem()
+  }
+
+  private addGearItem() {
+    trace(`${T} addGearItem`)
+    this.core
+      .getPlugin('bottom_gear')
+      ?.addItem('rate', this.$el)
+      .html(
+        $(
+          PlaybackRate.buttonTemplate({
+            title: this.getTitle(),
+            speedIcon,
+            arrowRightIcon,
+            i18n: this.core.i18n,
+          }),
+        ),
+      )
+  }
+
+  private onMetaDataLoaded() {
+    trace(`${T} onMetaDataLoaded`)
+    this.render()
   }
 
   private allRateElements(): ZeptoResult {
-    return this.$('ul.gear-sub-menu li')
+    return this.$el.find('#playback-rate-menu li')
   }
 
-  private rateElement(rate = '1'): ZeptoResult {
+  private rateElement(rate: number): ZeptoResult {
     return (
-      this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`) as ZeptoResult
+      this.$el.find(`#playback-rate-menu a[data-rate="${rate}"]`) as ZeptoResult
     ).parent()
   }
 
   private onPlaybackRateChange(playbackRate: number) {
-    const selectedRate = parseInt(this.selectedRate, 10)
     // TODO check it doesn't interfere with the DASH.js or HLS.js playback live catchup
-    if (Math.abs(playbackRate - selectedRate) > 0.1) {
-      trace(`${T} onPlaybackRateChange setting target rate`, {
-        playbackRate,
-        selectedRate,
-      })
-      this.core.activePlayback?.setPlaybackRate(selectedRate)
+    if (Math.abs(playbackRate - this.selectedRate) > 0.1) {
+      this.core.activePlayback?.setPlaybackRate(this.selectedRate)
+    } else {
+      trace(
+        `${T} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`,
+        {
+          playbackRate,
+          selectedRate: this.selectedRate,
+        },
+      )
     }
   }
 
@@ -207,7 +249,6 @@ export class PlaybackRate extends UICorePlugin {
    */
   override render() {
     trace(`${T} render`, {
-      rendered: this.rendered,
       shouldRender: this.shouldRender(),
     })
 
@@ -215,43 +256,36 @@ export class PlaybackRate extends UICorePlugin {
       return this
     }
 
-    if (this.rendered) {
-      return this
-    }
-
-    const button = PlaybackRate.buttonTemplate({
-      title: this.getTitle(),
-      speedIcon,
-      arrowRightIcon,
-      i18n: this.core.i18n,
-    })
-
-    this.$el.html(button)
-
-    ;(this.core.getPlugin('bottom_gear') as BottomGear)
-      ?.getElement('rate')
-      ?.html(this.el)
+    this.$el.html(
+      PlaybackRate.listTemplate({
+        arrowLeftIcon,
+        checkIcon,
+        current: this.selectedRate,
+        i18n: this.core.i18n,
+        playbackRates: this.playbackRates,
+      }),
+    )
 
-    this.rendered = true
+    this.addGearItem()
 
     return this
   }
 
-  private onStartAd() {
-    this.prevSelectedRate = this.selectedRate
-    this.resetPlaybackRate()
-    this.listenToOnce(
-      this.core.activePlayback,
-      Events.PLAYBACK_PLAY,
-      this.onFinishAd,
-    )
-  }
-
-  private onFinishAd() {
-    if (this.prevSelectedRate) {
-      this.setSelectedRate(this.prevSelectedRate)
-    }
-  }
+  // private onStartAd() {
+  //   this.prevSelectedRate = this.selectedRate
+  //   this.resetPlaybackRate()
+  //   this.listenToOnce(
+  //     this.core.activePlayback,
+  //     Events.PLAYBACK_PLAY,
+  //     this.onFinishAd,
+  //   )
+  // }
+
+  // private onFinishAd() {
+  //   if (this.prevSelectedRate) {
+  //     this.setSelectedRate(this.prevSelectedRate)
+  //   }
+  // }
 
   private onPlay() {
     if (
@@ -270,38 +304,27 @@ export class PlaybackRate extends UICorePlugin {
 
   private onStop() {}
 
-  private onRateSelect(event: MouseEvent) {
+  private onSelect(event: MouseEvent) {
     event.stopPropagation()
-    const rate = (event.currentTarget as HTMLElement).dataset.rate
+    const rate = parseFloat(
+      (event.currentTarget as HTMLElement).dataset.rate || '',
+    )
     if (rate) {
       this.setSelectedRate(rate)
       this.highlightCurrentRate()
+      this.updateGearOptionLabel()
     }
 
     return false
   }
 
-  private onShowMenu() {
-    this.$el.html(
-      PlaybackRate.listTemplate({
-        playbackRates: this.playbackRates,
-        arrowLeftIcon,
-        checkIcon,
-        i18n: this.core.i18n,
-      }),
-    )
-    ;(this.core.getPlugin('bottom_gear') as BottomGear)?.setContent(this.el)
-    this.highlightCurrentRate()
-  }
-
   private goBack() {
     setTimeout(() => {
       this.core.getPlugin('bottom_gear').refresh()
     }, 0)
   }
 
-  private setSelectedRate(rate: string) {
-    // Set <video playbackRate="..."
+  private setSelectedRate(rate: number) {
     this.core.activePlayback?.setPlaybackRate(rate)
     this.selectedRate = rate
   }
@@ -309,7 +332,7 @@ export class PlaybackRate extends UICorePlugin {
   private getTitle() {
     return (
       this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
-      this.selectedRate
+      `x${this.selectedRate}`
     )
   }
 
@@ -317,9 +340,14 @@ export class PlaybackRate extends UICorePlugin {
     this.allRateElements().removeClass('current')
     this.allRateElements().find('a').removeClass('gcore-skin-active')
 
-    const currentLevelElement = this.rateElement(this.selectedRate)
+    this.rateElement(this.selectedRate)
+      .addClass('current')
+      .find('a')
+      .addClass('gcore-skin-active')
+  }
 
-    currentLevelElement.addClass('current')
-    currentLevelElement.find('a').addClass('gcore-skin-active')
+  private updateGearOptionLabel() {
+    trace(`${T} updateGearOptionLabel`)
+    this.addGearItem()
   }
 }

package/src/plugins/playback-rate/__tests__/PlaybackRate.test.ts

@@ -1,23 +1,26 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
 import { PlaybackRate } from '../PlaybackRate'
 import {
+  createMockBottomGear,
   createMockCore,
   createMockMediaControl,
-  createMockPlugin,
 } from '../../../testUtils'
-import { $ } from '@clappr/core'
-import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+import { Events } from '@clappr/core'
+import { GearEvents } from '../../bottom-gear/BottomGear'
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 
-Logger.enable('*')
-setTracer(new LogTracer('PlaybackRate.test'))
+// Logger.enable('*')
+// setTracer(new LogTracer('PlaybackRate.test'))
 
 describe('PlaybackRate', () => {
   let core: any
   let bottomGear: any
+  let mediaControl: any
+  let playbackRate: PlaybackRate
   beforeEach(() => {
     core = createMockCore()
-    const mediaControl = createMockMediaControl(core)
-    bottomGear = createMockGearPlugin()
+    mediaControl = createMockMediaControl(core)
+    bottomGear = createMockBottomGear(core)
     core.getPlugin.mockImplementation((name: string) => {
       if (name === 'bottom_gear') {
         return bottomGear
@@ -27,39 +30,83 @@ describe('PlaybackRate', () => {
       }
       return null
     })
-  })
-  it('should render', () => {
-    const playbackRate = new PlaybackRate(core)
-    core.emit('core:ready')
+    playbackRate = new PlaybackRate(core)
+    core.emit(Events.CORE_READY)
     core.activePlayback.getPlaybackType.mockReturnValue('live')
-    core.emit('core:active:container:changed')
+    core.activeContainer.getPlaybackType.mockReturnValue('live')
+    core.getPlaybackType.mockReturnValue('live')
+    core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
     core.activePlayback.dvrEnabled = true
-    core.activeContainer.emit('container:dvr', true)
+    core.activeContainer.isDvrEnabled.mockReturnValue(true)
+    core.activeContainer.emit(Events.CONTAINER_LOADEDMETADATA)
+    bottomGear.trigger(GearEvents.RENDERED)
+  })
+  it('should render', () => {
     expect(playbackRate.el.innerHTML).toMatchSnapshot()
-    expect(bottomGear.getElement).toHaveBeenCalledWith('rate')
+    expect(bottomGear.addItem).toHaveBeenCalledWith('rate', playbackRate.$el)
+    expect(
+      bottomGear.$el.find('li[data-rate]').text(),
+      // @ts-ignore
+    ).toMatchPlaybackRateLabel('playback_rate 1x')
+  })
+  it('should have normal rate initially', () => {
+    expect(
+      playbackRate.$el.find('[data-rate="1"]').parent().hasClass('current'),
+    ).toBe(true)
     expect(
-      bottomGear.$el
-        .find('[data-rate]')
-        .text()
-        .replace(/\/assets.*\.svg/g, '')
-        .replace(/\s+/g, ' ')
-        .trim(),
-    ).toEqual('playback_rate 1x')
+      playbackRate.$el.find('[data-rate="1"]').hasClass('gcore-skin-active'),
+    ).toBe(true)
+  })
+  describe('on playback rate select', () => {
+    describe.each([[2], [1.5], [1.25], [1], [0.75], [0.5]])('%s', (rate) => {
+      beforeEach(() => {
+        playbackRate.$el.find(`[data-rate="${rate}"]`).click()
+      })
+      it('should set the selected rate', () => {
+        expect(core.activePlayback.setPlaybackRate).toHaveBeenCalledWith(rate)
+      })
+      it('should highlight the selected rate', () => {
+        expect(
+          playbackRate.$el
+            .find(`[data-rate="${rate}"]`)
+            .parent()
+            .hasClass('current'),
+        ).toBe(true)
+        expect(
+          playbackRate.$el
+            .find(`[data-rate="${rate}"]`)
+            .hasClass('gcore-skin-active'),
+        ).toBe(true)
+      })
+      it('should update the gear box option label', () => {
+        expect(
+          bottomGear.$el.find('#playback-rate-button').text(),
+          // @ts-ignore
+        ).toMatchPlaybackRateLabel(`playback_rate ${rate}x`)
+      })
+    })
+  })
+  describe('on go back', () => {
+    beforeEach(async () => {
+      playbackRate.$el.find('#playback-rate-back-button').click()
+      return new Promise((resolve) => setTimeout(resolve, 0))
+    })
+    it('should refresh the bottom gear', () => {
+      expect(bottomGear.refresh).toHaveBeenCalled()
+    })
   })
 })
 
-function createMockGearPlugin() {
-  const elements = {
-    nerd: $(document.createElement('li')).attr('data-nerd', 'nerd'),
-    quality: $(document.createElement('li')).attr('data-quality', 'quality'),
-    rate: $(document.createElement('li')).attr('data-rate', 'rate'),
-  }
-  const $el = $(document.createElement('ul'))
-  $el.append(elements.nerd, elements.quality, elements.rate)
-  const plugin = Object.assign(createMockPlugin(), {
-    setContent: vi.fn(),
-    getElement: vi.fn((name: string) => elements[name]),
-    $el,
-  })
-  return plugin
-}
+expect.extend({
+  toMatchPlaybackRateLabel(received, expected) {
+    const { isNot } = this
+    return {
+      pass:
+        received
+          .replace(/\/assets.*\.svg/g, '')
+          .replace(/\s+/g, ' ')
+          .trim().includes(expected),
+      message: () => `${received} does${isNot ? '' : ' not'} match ${expected}`,
+    }
+  },
+})

package/src/plugins/playback-rate/__tests__/__snapshots__/PlaybackRate.test.ts.snap

@@ -1,11 +1,60 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PlaybackRate > should render 1`] = `
-"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" id="playback-rate-button">
-    <span class="gear-option_speed-icon">/assets/icons/new/speed.svg</span>
-    <span class="gear-option_label">playback_rate</span>
-    <span class="gear-option_arrow-right-icon">/assets/icons/new/arrow-right.svg</span>
-    <span class="gear-option_value">1x</span>
+"<button class="gplayer-lite-btn go-back gcore-skin-text-color" id="playback-rate-back-button">
+    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
+    playback_rate
 </button>
-"
+<ul class="gear-sub-menu" id="playback-rate-menu">
+    
+        <li>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-rate="0.5">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                0.5x
+            </a>
+        </li>
+    
+        <li>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-rate="0.75">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                0.75x
+            </a>
+        </li>
+    
+        <li class="current">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-rate="1">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                1x
+            </a>
+        </li>
+    
+        <li>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-rate="1.25">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                1.25x
+            </a>
+        </li>
+    
+        <li>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-rate="1.5">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                1.5x
+            </a>
+        </li>
+    
+        <li>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-rate="1.75">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                1.75x
+            </a>
+        </li>
+    
+        <li>
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-rate="2">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                2x
+            </a>
+        </li>
+    
+</ul>"
 `;

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -338,7 +338,7 @@ export class ClosedCaptions extends UICorePlugin {
     this.resizeFont()
 
     this.core.activeContainer.$el.append(this.$line)
-    mediaControl.putElement('cc', this.el)
+    mediaControl.putElement('cc', this.$el)
 
     this.updateSelection()
 

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -52,7 +52,7 @@ describe('ClosedCaptions', () => {
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
       expect(cc.$el.find('[data-cc-button]').length).toEqual(1)
-      expect(mediaControl.putElement).toHaveBeenCalledWith('cc', cc.el)
+      expect(mediaControl.putElement).toHaveBeenCalledWith('cc', cc.$el)
     })
   })
 })

package/src/testUtils.ts

@@ -193,3 +193,17 @@ export function createMockMediaControl(core: any) {
   mediaControl.toggleElement = vi.fn()
   return mediaControl
 }
+
+export function createMockBottomGear(core: any) {
+  const plugin: any = new UICorePlugin(core)
+  plugin.getItem = vi.fn()
+  plugin.addItem = vi.fn().mockImplementation((name: string, $el: any) => {
+    const existing = plugin.$el.find(`[data-${name}]`)
+    if (existing.length) {
+      return existing
+    }
+    return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el)
+  })
+  plugin.refresh = vi.fn()
+  return plugin
+}

package/src/typings/vitest.d.ts

@@ -1,6 +1,7 @@
 import 'vitest'
 
 interface CustomMatchers<R = unknown> {
+  toMatchPlaybackRateOption: (expected: string) => R
   toMatchQualityLevelLabel: (expected: string) => R
   toMatchQualityLevelOption: (expected: string) => R
 }