@gcorevideo/player 2.22.0 → 2.22.1

package/src/plugins/level-selector/LevelSelector.ts

@@ -6,7 +6,7 @@ import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../types.js'
 import { TemplateFunction } from '../types.js'
-import { BottomGear } from '../bottom-gear/BottomGear.js'
+import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
 
 import buttonHtml from '../../../assets/level-selector/button.ejs'
 import listHtml from '../../../assets/level-selector/list.ejs'
@@ -15,7 +15,7 @@ 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 '../../../assets/level-selector/style.scss'
-import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js'
+import { MediaControl } from '../media-control/MediaControl.js'
 
 const T = 'plugins.level_selector'
 const VERSION = '2.19.4'
@@ -73,7 +73,9 @@ export class LevelSelector extends UICorePlugin {
 
   private isHd = false
 
-  private isOpen = false
+  private currentText = ''
+
+  private selectedLevelId = -1
 
   private static readonly buttonTemplate: TemplateFunction =
     template(buttonHtml)
@@ -111,14 +113,9 @@ export class LevelSelector extends UICorePlugin {
     }
   }
 
-  private currentText = 'Auto'
-
-  private selectedLevelId = -1
-
   override get events() {
     return {
-      'click .gear-sub-menu_btn': 'onLevelSelect',
-      'click .gear-option': 'onShowLevelSelectMenu',
+      'click .gear-sub-menu_btn': 'onSelect',
       'click .go-back': 'goBack',
     }
   }
@@ -127,27 +124,29 @@ export class LevelSelector 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.bindPlaybackEvents,
+      this.onActiveContainerChange,
     )
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`);
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    assert(mediaControl, 'media_control plugin is required')
-    this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+    trace(`${T} onCoreReady`)
+    const gear = this.core.getPlugin('bottom_gear') as BottomGear
+    assert(gear, 'bottom_gear plugin is required')
+
+    this.currentText = this.core.i18n.t('auto')
+    this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered)
   }
 
   private onGearRendered() {
-    trace(`${T} onGearRendered`);
-    this.deferRender();
+    trace(`${T} onGearRendered`)
+    this.render()
   }
 
-  private bindPlaybackEvents() {
+  private onActiveContainerChange() {
     this.removeAuto = false
     this.isHd = false
 
@@ -156,7 +155,7 @@ export class LevelSelector extends UICorePlugin {
     this.listenTo(
       activePlayback,
       Events.PLAYBACK_LEVELS_AVAILABLE,
-      this.fillLevels,
+      this.onLevelsAvailable,
     )
     this.listenTo(
       activePlayback,
@@ -168,31 +167,32 @@ export class LevelSelector extends UICorePlugin {
       Events.PLAYBACK_LEVEL_SWITCH_END,
       this.onLevelSwitchEnd,
     )
-    this.listenTo(
-      activePlayback,
-      Events.PLAYBACK_BITRATE,
-      this.updateCurrentLevel,
-    )
+    this.listenTo(activePlayback, Events.PLAYBACK_BITRATE, this.onBitrate)
     this.listenTo(activePlayback, Events.PLAYBACK_STOP, this.onStop)
     this.listenTo(
       activePlayback,
       Events.PLAYBACK_HIGHDEFINITIONUPDATE,
       (isHd: boolean) => {
         this.isHd = isHd
-        this.deferRender()
+        this.updateHd()
       },
     )
     if (activePlayback.levels?.length > 0) {
-      this.fillLevels(activePlayback.levels)
+      this.onLevelsAvailable(activePlayback.levels)
+    }
+  }
+
+  private updateHd() {
+    if (this.isHd) {
+      this.$el.find('.gear-option_hd-icon').removeClass('hidden')
+    } else {
+      this.$el.find('.gear-option_hd-icon').addClass('hidden')
     }
   }
 
   private onStop() {
     trace(`${T} onStop`)
     this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, () => {
-      trace(`${T} on PLAYBACK_PLAY after stop`, {
-        selectedLevelId: this.selectedLevelId,
-      })
       if (this.core.activePlayback.getPlaybackType() === 'live') {
         if (this.selectedLevelId !== -1) {
           this.core.activePlayback.currentLevel = this.selectedLevelId
@@ -222,56 +222,53 @@ export class LevelSelector extends UICorePlugin {
     if (!this.shouldRender()) {
       return this
     }
-
-    this.renderButton()
+    this.renderDropdown()
+    this.updateButton()
 
     return this
   }
 
-  private renderButton() {
-    if (!this.isOpen) {
-      const html = LevelSelector.buttonTemplate({
-        arrowRightIcon,
-        currentText: this.currentText,
-        isHd: this.isHd,
-        hdIcon,
-      })
-      this.$el.html(html)
-      const gear = this.core.getPlugin('bottom_gear') as BottomGear
-      if (!gear) {
-        trace(`${T} renderButton: bottom_gear plugin not found`)
-      }
-      gear?.getElement('quality')?.html(this.el)
-    }
+  private renderDropdown() {
+    this.$el.html(
+      LevelSelector.listTemplate({
+        arrowLeftIcon,
+        checkIcon,
+        current: this.selectedLevelId,
+        labels: this.levelLabels,
+        levels: this.levels,
+        maxLevel: this.maxLevel,
+        removeAuto: this.removeAuto,
+        i18n: this.core.i18n,
+      }),
+    )
   }
 
-  private renderDropdown() {
-    const html = LevelSelector.listTemplate({
-      arrowLeftIcon,
-      checkIcon,
-      labels: this.levelLabels,
-      levels: this.levels,
-      maxLevel: this.maxLevel,
-      removeAuto: this.removeAuto,
-    })
-    this.$el.html(html)
-    const gear = this.core.getPlugin('bottom_gear') as BottomGear
-    trace(`${T} renderDropdown: bottom_gear plugin not found`)
-    gear?.setContent(this.el)
+  private updateButton() {
+    ;(this.core.getPlugin('bottom_gear') as BottomGear)
+      ?.addItem('quality', this.$el)
+      .html(
+        LevelSelector.buttonTemplate({
+          arrowRightIcon,
+          currentText: this.currentText,
+          isHd: this.isHd,
+          hdIcon,
+          i18n: this.core.i18n,
+        }),
+      )
   }
 
   private get maxLevel() {
     const maxRes = this.core.options.levelSelector?.restrictResolution
     return maxRes
-      ? this.levels.findIndex(
+      ? this.levels.find(
           (level) =>
             (level.height > level.width ? level.width : level.height) ===
             maxRes,
-        )
+        )?.level ?? -1
       : -1
   }
 
-  private fillLevels(levels: QualityLevel[]) {
+  private onLevelsAvailable(levels: QualityLevel[]) {
     const maxResolution = this.core.options.levelSelector?.restrictResolution
     this.levels = levels
     this.makeLevelsLabels()
@@ -286,77 +283,54 @@ export class LevelSelector extends UICorePlugin {
         .pop()
       this.setLevel(initialLevel?.level ?? 0)
     }
-    this.deferRender()
+    this.render()
   }
 
   private makeLevelsLabels() {
     const labels = this.core.options.levelSelector?.labels ?? {}
     this.levelLabels = []
 
-    for (let i = 0; i < this.levels.length; i++) {
-      const level = this.levels[i]
+    for (const level of this.levels) {
       const ll = level.width > level.height ? level.height : level.width
       const label = labels[ll] || `${ll}p`
       this.levelLabels.push(label)
     }
   }
 
-  private onLevelSelect(event: MouseEvent) {
+  private onSelect(event: MouseEvent) {
     const selectedLevel = parseInt(
       (event.currentTarget as HTMLElement)?.dataset?.id ?? '-1',
       10,
     )
     this.setLevel(selectedLevel)
+
     event.stopPropagation()
+    event.preventDefault()
     return false
   }
 
   private goBack() {
     trace(`${T} goBack`)
-    this.isOpen = false
-    setTimeout(() => {
-      this.core.getPlugin('bottom_gear').refresh()
-    }, 0);
+    this.core.getPlugin('bottom_gear').refresh()
   }
 
   private setLevel(index: number) {
-    trace(`${T} setIndexLevel`, { index })
     this.selectedLevelId = index
-    if (!this.core.activePlayback) {
-      return
-    }
-    if (this.core.activePlayback.currentLevel === this.selectedLevelId) {
-      return
-    }
     this.core.activePlayback.currentLevel = this.selectedLevelId
-
-    try {
-      this.highlightCurrentLevel()
-    } catch (error) {
-      reportError(error)
-    }
-    this.deferRender()
-  }
-
-  private onShowLevelSelectMenu() {
-    trace(`${T} onShowLevelSelectMenu`)
-    this.isOpen = true
-    this.renderDropdown()
     this.highlightCurrentLevel()
   }
 
   private allLevelElements() {
-    return this.$('ul.gear-sub-menu li') as ZeptoResult
+    return this.$('#level-selector-menu li') as ZeptoResult
   }
 
   private levelElement(id = -1) {
     return (
-      this.$(`ul.gear-sub-menu a[data-id="${id}"]`) as ZeptoResult
+      this.$(`#level-selector-menu a[data-id="${id}"]`) as ZeptoResult
     ).parent()
   }
 
   private onLevelSwitchStart() {
-    this.core.activePlayback.trigger('playback:level:select:start')
     this.levelElement(this.selectedLevelId).addClass('changing')
   }
 
@@ -365,25 +339,22 @@ export class LevelSelector extends UICorePlugin {
   }
 
   private updateText(level: number) {
-    if (level === undefined || isNaN(level)) {
-      return
-    }
     this.currentText = this.getLevelLabel(level)
-    this.deferRender()
+    this.updateButton()
   }
 
   private getLevelLabel(id: number): string {
-    if (id === -1) {
-      return 'Auto'
+    if (id < 0) {
+      return this.core.i18n.t('auto')
     }
     const index = this.levels.findIndex((l) => l.level === id)
     if (index < 0) {
-      return 'Auto'
+      return this.core.i18n.t('auto')
     }
     return this.levelLabels[index] ?? formatLevelLabel(this.levels[index])
   }
 
-  private updateCurrentLevel(info: QualityLevel) {
+  private onBitrate(info: QualityLevel) {
     trace(`${T} updateCurrentLevel`, { info })
     this.highlightCurrentLevel()
   }
@@ -392,34 +363,23 @@ export class LevelSelector extends UICorePlugin {
     trace(`${T} highlightCurrentLevel`, {
       selectedLevelId: this.selectedLevelId,
     })
-    this.allLevelElements().removeClass('current')
-    this.allLevelElements().find('a').removeClass('gcore-skin-active')
+    this.allLevelElements()
+      .removeClass('current')
+      .find('a')
+      .removeClass('gcore-skin-active')
 
     const currentLevelElement = this.levelElement(this.selectedLevelId)
 
-    currentLevelElement.addClass('current')
-    currentLevelElement.find('a').addClass('gcore-skin-active')
+    currentLevelElement
+      .addClass('current')
+      .find('a')
+      .addClass('gcore-skin-active')
 
     this.updateText(this.selectedLevelId)
   }
-
-  private deferRender = debounce(() => this.render(), 0)
 }
 
 function formatLevelLabel(level: QualityLevel): string {
   const h = level.width > level.height ? level.height : level.width
   return `${h}p`
 }
-
-function debounce(fn: () => void, wait: number) {
-  let timerId: ReturnType<typeof setTimeout> | null = null
-  return function () {
-    if (timerId !== null) {
-      clearTimeout(timerId)
-    }
-    timerId = setTimeout(() => {
-      timerId = null
-      fn()
-    }, wait)
-  }
-}

package/src/plugins/level-selector/__tests__/LevelSelector.test.ts

@@ -1,17 +1,16 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { $, UICorePlugin } from '@clappr/core'
-import FakeTimers from '@sinonjs/fake-timers'
-import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+import { Events } from '@clappr/core'
 import { LevelSelector } from '../LevelSelector.js'
 import {
+  createMockBottomGear,
   createMockCore,
   createMockMediaControl,
-  createMockPlayback,
 } from '../../../testUtils.js'
-import { MediaControlEvents } from '../../media-control/MediaControl.js'
+import { GearEvents } from '../../bottom-gear/BottomGear.js'
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 
-setTracer(new LogTracer('LevelSelector.test'))
-Logger.enable('*')
+// setTracer(new LogTracer('LevelSelector.test'))
+// Logger.enable('*')
 
 const LEVELS = [
   {
@@ -33,28 +32,20 @@ const LEVELS = [
     bitrate: 250000,
   },
 ]
+
 describe('LevelSelector', () => {
-  let clock: FakeTimers.InstalledClock
   let core: any
   let levelSelector: LevelSelector
-  let activePlayback: any
-  let mediaControl: UICorePlugin
-  let bottomGear: UICorePlugin | null
-  beforeEach(() => {
-    clock = FakeTimers.install()
-  })
-  afterEach(() => {
-    clock.uninstall()
-  })
+  let mediaControl: any
+  let bottomGear: any
   describe('basically', () => {
     beforeEach(() => {
       core = createMockCore({
         levelSelector: {
           // restrictResolution: 360,
-          labels: { 360: '360p', 720: 'HD' },
+          labels: { 720: 'HD', 1080: 'Full HD' },
         },
       })
-      activePlayback = core.activePlayback
       core.getPlugin.mockImplementation((name: string) => {
         if (name === 'media_control') {
           return mediaControl
@@ -65,43 +56,45 @@ describe('LevelSelector', () => {
         return null
       })
       mediaControl = createMockMediaControl(core)
-      bottomGear = createBottomGear(core)
+      bottomGear = createMockBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('initially', () => {
-      beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        activePlayback.emit('playback:levels:available', LEVELS)
-        await clock.tickAsync(1)
+      beforeEach(() => {
+        core.emit(Events.CORE_READY)
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        bottomGear.trigger(GearEvents.RENDERED)
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, LEVELS)
       })
       it('should render proper level label', () => {
-        // @ts-ignore
-        expect(levelSelector.el.textContent).toMatchQualityLevelLabel('Auto')
+        expect(
+          bottomGear.$el.find('[data-quality]').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelLabel('auto')
       })
     })
     describe.each([
-      ['auto', LEVELS, -1, 'Auto'],
+      ['auto', LEVELS, -1, 'auto'],
       ['standard label', LEVELS, 0, '360p'],
       ['custom label', LEVELS, 1, 'HD'],
     ])('%s', (_, levels, current, label) => {
-      beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        // activePlayback.currentLevel = current
-        activePlayback.emit('playback:levels:available', levels)
-        await clock.tickAsync(1)
-        levelSelector.$el.find('.gear-option').click()
-        await clock.tickAsync(1)
+      beforeEach(() => {
+        core.emit(Events.CORE_READY)
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        bottomGear.trigger(GearEvents.RENDERED)
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, levels)
         levelSelector.$el
-          .find(`.gear-sub-menu_btn[data-id="${current}"]`)
+          .find(`#level-selector-menu [data-id="${current}"]`)
           .click()
-        await clock.tickAsync(1)
       })
-      it('should render the proper level labels', () => {
-        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+      it('should render the proper level label', () => {
+        expect(
+          bottomGear.$el.find('[data-quality]').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelLabel(label)
       })
       it('should render the selected level', () => {
+        expect(levelSelector.el.innerHTML).toMatchSnapshot()
         expect(
           levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent,
           // @ts-ignore
@@ -111,15 +104,14 @@ describe('LevelSelector', () => {
   })
   describe('options.restrictResolution', () => {
     beforeEach(() => {
-      let mediaControl: UICorePlugin | null = null
-      let bottomGear: UICorePlugin | null = null
       core = createMockCore({
         levelSelector: {
           restrictResolution: 360,
-          labels: { 360: '360p', 720: '720p' },
+          labels: { 360: '360p', 720: '720p', 1080: '1080p' },
         },
       })
-      activePlayback = core.activePlayback
+      mediaControl = createMockMediaControl(core)
+      bottomGear = createMockBottomGear(core)
       core.getPlugin.mockImplementation((name: string) => {
         if (name === 'media_control') {
           return mediaControl
@@ -130,30 +122,31 @@ describe('LevelSelector', () => {
         return null
       })
       mediaControl = createMockMediaControl(core)
-      bottomGear = createBottomGear(core)
+      bottomGear = createMockBottomGear(core)
       levelSelector = new LevelSelector(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      bottomGear.trigger(GearEvents.RENDERED)
     })
-    describe('basically', () => {
+    describe('initially', () => {
       beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        activePlayback.emit('playback:levels:available', LEVELS)
-        await clock.tickAsync(1)
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, LEVELS)
       })
       it('should render the restricted quality level label', () => {
+        expect(bottomGear.$el.find('[data-quality]').html()).toMatchSnapshot()
         expect(
-          levelSelector.el.textContent,
+          bottomGear.$el.find('[data-quality]').text(),
           // @ts-ignore
         ).toMatchQualityLevelLabel('360p')
-
-        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+        expect(
+          levelSelector.$el.find('#level-selector-menu .current').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
     })
     describe('given vertical video format levels', () => {
-      beforeEach(async () => {
-        core.emit('core:active:container:changed')
-        await clock.tickAsync(1)
-        activePlayback.emit('playback:levels:available', [
+      beforeEach(() => {
+        core.activePlayback.emit(Events.PLAYBACK_LEVELS_AVAILABLE, [
           {
             level: 0,
             width: 360,
@@ -168,22 +161,31 @@ describe('LevelSelector', () => {
           },
           {
             level: 2,
-            width: 1920,
-            height: 1080,
+            width: 1080,
+            height: 1920,
             bitrate: 250000,
           },
         ])
-        await clock.tickAsync(1)
-        levelSelector.$el.find('.gear-option').click()
-        await clock.tickAsync(1)
       })
       it('should recognize vertical orientation', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
-        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+        expect(
+          levelSelector.$el.find('#level-selector-menu [data-id]:eq(0)').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('1080p')
+        expect(
+          levelSelector.$el.find('#level-selector-menu [data-id]:eq(1)').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('720p')
+        expect(
+          levelSelector.$el.find('#level-selector-menu [data-id]:eq(2)').text(),
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
       it('should properly apply the restriction', () => {
         expect(
-          levelSelector.$el.find('li:not(.level-disabled)')[0].textContent,
+          levelSelector.$el.find('#level-selector-menu li:not(.disabled)')[0]
+            .textContent,
           // @ts-ignore
         ).toMatchQualityLevelOption('360p')
       })
@@ -195,11 +197,11 @@ expect.extend({
   toMatchQualityLevelLabel(received, expected) {
     const { isNot } = this
     const rendered = received
-      .replace('/assets/icons/new/arrow-right.svg', '')
+      .replace(/\/assets\/.*\.svg/g, '')
       .replace(/\s+/g, ' ')
       .trim()
     return {
-      pass: rendered.includes(`Quality ${expected}`),
+      pass: rendered.includes(`quality ${expected}`),
       message: () =>
         `Quality label must${
           isNot ? ' not' : ''
@@ -209,7 +211,7 @@ expect.extend({
   toMatchQualityLevelOption(received, expected) {
     const { isNot } = this
     const rendered = received
-      .replace('/assets/icons/new/check.svg', '')
+      .replace(/\/assets\/.*\.svg/g, '')
       .replace(/\s+/g, ' ')
       .trim()
     return {
@@ -221,15 +223,3 @@ expect.extend({
     }
   },
 })
-
-function createBottomGear(core: any) {
-  const bottomGear = new UICorePlugin(core)
-  const elemets = {
-    quality: $(document.createElement('div')),
-  }
-  // @ts-ignore
-  bottomGear.getElement = vi.fn().mockImplementation((name) => elemets[name])
-  // @ts-ignore
-  bottomGear.setContent = vi.fn()
-  return bottomGear
-}