@gcorevideo/player 2.20.6 → 2.20.7

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

@@ -10,6 +10,7 @@ import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import gearIcon from '../../../assets/icons/new/gear.svg';
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
 import { ZeptoResult } from '../../utils/types.js';
+import { MediaControlEvents } from '../media-control/MediaControl';
 
 const VERSION = '2.19.12';
 
@@ -127,13 +128,9 @@ export class BottomGear extends UICorePlugin {
   }
 
   private highDefinitionUpdate(isHd: boolean) {
-    trace(`${this.name} highDefinitionUpdate`, { isHd });
+    trace(`${T} highDefinitionUpdate`, { isHd });
     this.isHd = isHd;
-    if (isHd) {
-      this.$el.find('.gear-icon').html(gearHdIcon);
-    } else {
-      this.$el.find('.gear-icon').html(gearIcon);
-    }
+    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
   }
 
   /**
@@ -154,7 +151,8 @@ export class BottomGear extends UICorePlugin {
 
     mediaControl.getElement('gear')?.html(this.el);
     this.core.trigger('gear:rendered'); // @deprecated
-    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED);
+    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED); // TODO drop
+    mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
 

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

@@ -0,0 +1,36 @@
+import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BottomGear } from '../BottomGear'
+import { createMockCore, createMockMediaControl } from '../../../testUtils'
+import { MediaControlEvents } from '../../media-control/MediaControl'
+
+describe('BottomGear', () => {
+  let mediaControl: any
+  let core: any
+  let bottomGear: BottomGear
+  let onGearRendered: MockedFunction<() => void>
+  beforeEach(() => {
+    core = createMockCore()
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi
+      .fn()
+      .mockImplementation((name) =>
+        name === 'media_control' ? mediaControl : null,
+      )
+    bottomGear = new BottomGear(core)
+    onGearRendered = vi.fn()
+    mediaControl.on(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, onGearRendered, null)
+    bottomGear.render()
+  })
+  it('should render', () => {
+    expect(bottomGear.el.innerHTML).toMatchSnapshot()
+  })
+  it('should attach to media control', () => {
+    const gearElement = mediaControl.getElement('gear')
+    expect(gearElement[0].innerHTML).not.toEqual('')
+    expect(gearElement[0].innerHTML).toMatchSnapshot()
+  })
+  it('should emit event', () => {
+    expect(onGearRendered).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BottomGear > should attach to media control 1`] = `
+"<div class="bottom_gear" data-track-selector=""><div class="media-control-gear" data-="">
+    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
+        <span class="gear-icon">/assets/icons/new/gear.svg</span>
+    </button>
+    <div class="gear-wrapper gcore-skin-bg-color">
+        <ul class="gear-options-list">
+            
+                <li data-quality=""></li>
+            
+                <li data-rate=""></li>
+            
+                <li data-nerd=""></li>
+            
+        </ul>
+    </div>
+</div>
+</div>"
+`;
+
+exports[`BottomGear > should render 1`] = `
+"<div class="media-control-gear" data-="">
+    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
+        <span class="gear-icon">/assets/icons/new/gear.svg</span>
+    </button>
+    <div class="gear-wrapper gcore-skin-bg-color">
+        <ul class="gear-options-list">
+            
+                <li data-quality=""></li>
+            
+                <li data-rate=""></li>
+            
+                <li data-nerd=""></li>
+            
+        </ul>
+    </div>
+</div>
+"
+`;

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

@@ -1,5 +1,6 @@
 import { Events, template, UICorePlugin } from '@clappr/core'
 import { reportError, trace } from '@gcorevideo/utils'
+import assert from 'assert'
 
 import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
@@ -14,12 +15,26 @@ 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 assert from 'assert'
-
+import { MediaControl } from '../media-control/MediaControl.js'
 
 const T = 'plugins.level_selector'
 const VERSION = '2.19.4'
 
+export interface LevelSelectorPluginSettings {
+  /**
+   * The maximum resolution to allow in the level selector.
+   */
+  restrictResolution?: number
+  /**
+   * The labels to show in the level selector.
+   * @example
+   * ```ts
+   * { 360: 'SD', 720: 'HD' }
+   * ```
+   */
+  labels?: Record<number, string>
+}
+
 /**
  * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
  * @beta
@@ -35,11 +50,7 @@ const VERSION = '2.19.4'
  *
  * When clicked, it shows a list of quality levels to choose from.
  *
- * Configuration options:
- *
- * - `labels`: The labels to show in the level selector. [video resolution]: string
- *
- * - `restrictResolution`: The maximum resolution to allow in the level selector.
+ * Configuration options - {@link LevelSelectorPluginSettings}
  *
  * @example
  * ```ts
@@ -62,7 +73,8 @@ export class LevelSelector extends UICorePlugin {
 
   private isOpen = false
 
-  private static readonly buttonTemplate: TemplateFunction = template(buttonHtml)
+  private static readonly buttonTemplate: TemplateFunction =
+    template(buttonHtml)
 
   private static readonly listTemplate: TemplateFunction = template(listHtml)
 
@@ -113,8 +125,13 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindPlaybackEvents())
-    this.listenTo(this.core, 'gear:rendered', this.render)
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.bindPlaybackEvents,
+    )
   }
 
   private bindPlaybackEvents() {
@@ -123,8 +140,10 @@ export class LevelSelector extends UICorePlugin {
 
     const activePlayback = this.core.activePlayback
 
-    this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, (levels: QualityLevel[]) =>
-      this.fillLevels(levels),
+    this.listenTo(
+      activePlayback,
+      Events.PLAYBACK_LEVELS_AVAILABLE,
+      this.fillLevels,
     )
     this.listenTo(
       activePlayback,
@@ -150,32 +169,27 @@ export class LevelSelector extends UICorePlugin {
         this.deferRender()
       },
     )
-    if (activePlayback?.levels?.length > 0) {
+    if (activePlayback.levels?.length > 0) {
       this.fillLevels(activePlayback.levels)
     }
   }
 
   private onStop() {
     trace(`${T} onStop`)
-    const currentPlayback = this.core.activePlayback
-
-    this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, () => {
-      trace(`${T} on PLAYBACK_PLAY after stop`, { selectedLevelId: this.selectedLevelId })
-      if (currentPlayback.getPlaybackType() === 'live') {
+    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) {
-          currentPlayback.currentLevel = this.selectedLevelId
+          this.core.activePlayback.currentLevel = this.selectedLevelId
         }
       }
     })
   }
 
   private shouldRender() {
-    if (!this.core.activeContainer) {
-      return false
-    }
-
     const activePlayback = this.core.activePlayback
-
     if (!activePlayback) {
       return false
     }
@@ -192,8 +206,6 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override render() {
-    assert(this.core.getPlugin('bottom_gear'), 'bottom_gear plugin is required')
-
     if (!this.shouldRender()) {
       return this
     }
@@ -213,7 +225,10 @@ export class LevelSelector extends UICorePlugin {
       })
       this.$el.html(html)
       const gear = this.core.getPlugin('bottom_gear') as BottomGear
-      gear.getElement('quality')?.html(this.el)
+      if (!gear) {
+        trace(`${T} renderButton: bottom_gear plugin not found`)
+      }
+      gear?.getElement('quality')?.html(this.el)
     }
   }
 
@@ -228,6 +243,7 @@ export class LevelSelector extends UICorePlugin {
     })
     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)
   }
 
@@ -236,7 +252,8 @@ export class LevelSelector extends UICorePlugin {
     return maxRes
       ? this.levels.findIndex(
           (level) =>
-            (level.height > level.width ? level.width : level.height) === maxRes,
+            (level.height > level.width ? level.width : level.height) ===
+            maxRes,
         )
       : -1
   }
@@ -248,7 +265,11 @@ export class LevelSelector extends UICorePlugin {
     if (maxResolution) {
       this.removeAuto = true
       const initialLevel = levels
-        .filter((level) => (level.width > level.height ? level.height : level.width) <= maxResolution)
+        .filter(
+          (level) =>
+            (level.width > level.height ? level.height : level.width) <=
+            maxResolution,
+        )
         .pop()
       this.setLevel(initialLevel?.level ?? 0)
     }

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

@@ -1,9 +1,14 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { UICorePlugin } from '@clappr/core'
+import { $, UICorePlugin } from '@clappr/core'
 import FakeTimers from '@sinonjs/fake-timers'
 import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 import { LevelSelector } from '../LevelSelector.js'
-import { createMockCore, createMockPlayback } from '../../../testUtils.js'
+import {
+  createMockCore,
+  createMockMediaControl,
+  createMockPlayback,
+} from '../../../testUtils.js'
+import { MediaControlEvents } from '../../media-control/MediaControl.js'
 
 setTracer(new LogTracer('LevelSelector.test'))
 Logger.enable('*')
@@ -33,6 +38,8 @@ describe('LevelSelector', () => {
   let core: any
   let levelSelector: LevelSelector
   let activePlayback: any
+  let mediaControl: UICorePlugin
+  let bottomGear: UICorePlugin | null
   beforeEach(() => {
     clock = FakeTimers.install()
   })
@@ -41,10 +48,6 @@ describe('LevelSelector', () => {
   })
   describe('basically', () => {
     beforeEach(() => {
-      // const activeContainer = createMockContainer()
-      let mediaControl: UICorePlugin | null = null
-      let bottomGear: UICorePlugin | null = null
-      // TODO create mock core
       core = createMockCore({
         levelSelector: {
           // restrictResolution: 360,
@@ -61,7 +64,7 @@ describe('LevelSelector', () => {
         }
         return null
       })
-      mediaControl = createMediaControl(core)
+      mediaControl = createMockMediaControl(core)
       bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
@@ -126,7 +129,7 @@ describe('LevelSelector', () => {
         }
         return null
       })
-      mediaControl = createMediaControl(core)
+      mediaControl = createMockMediaControl(core)
       bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
@@ -219,17 +222,13 @@ expect.extend({
   },
 })
 
-function createMediaControl(core: any) {
-  const mediaControl = new UICorePlugin(core)
-  // @ts-ignore
-  mediaControl.getElement = vi.fn().mockReturnValue(null)
-  return mediaControl
-}
-
 function createBottomGear(core: any) {
   const bottomGear = new UICorePlugin(core)
+  const elemets = {
+    quality: $(document.createElement('div')),
+  }
   // @ts-ignore
-  bottomGear.getElement = vi.fn().mockReturnValue(null)
+  bottomGear.getElement = vi.fn().mockImplementation((name) => elemets[name])
   // @ts-ignore
   bottomGear.setContent = vi.fn()
   return bottomGear

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

@@ -49,6 +49,17 @@ export type MediaControlElement =
   | 'seekBarContainer'
   | 'subtitlesSelector'
 
+/**
+ * Custom events emitted by the plugins to communicate with one another
+ * @beta
+ */
+export enum MediaControlEvents {
+  /**
+   * Emitted when the gear menu is rendered
+   */
+  MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
+}
+
 const T = 'plugins.media_control'
 
 const LEFT_ORDER = [

package/src/plugins/source-controller/SourceController.ts

@@ -90,6 +90,8 @@ export class SourceController extends CorePlugin {
 
   private active = false
 
+  private switching = false
+
   private sync: SyncFn = noSync
 
   /**
@@ -166,15 +168,18 @@ export class SourceController extends CorePlugin {
             description: error?.description,
             level: error?.level,
           },
+          switching: this.switching,
           retrying: this.active,
           currentSource: this.sourcesList[this.currentSourceIndex],
         })
+        if (this.switching) {
+          return
+        }
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
             this.core.activeContainer?.getPlugin('poster_custom')?.disable()
-            setTimeout(() => this.retryPlayback(), 0)
+            this.retryPlayback()
             break
-          // TODO handle other errors
           default:
             break
         }
@@ -187,7 +192,6 @@ export class SourceController extends CorePlugin {
       })
       if (this.active) {
         this.reset()
-        // TODO make poster reset its state on enable
         this.core.activeContainer?.getPlugin('poster_custom')?.enable()
         this.core.activeContainer?.getPlugin('spinner')?.hide()
       }
@@ -205,6 +209,7 @@ export class SourceController extends CorePlugin {
       currentSource: this.sourcesList[this.currentSourceIndex],
     })
     this.active = true
+    this.switching = true
     this.core.activeContainer?.getPlugin('spinner')?.show(0)
     this.getNextMediaSource().then((nextSource: PlayerMediaSourceDesc) => {
       trace(`${T} retryPlayback syncing...`, {
@@ -213,12 +218,12 @@ export class SourceController extends CorePlugin {
       const rnd = RETRY_DELAY_BLUR * Math.random()
       this.sync(() => {
         trace(`${T} retryPlayback loading...`)
+        this.switching = false
         this.core.load(nextSource.source, nextSource.mimeType)
         trace(`${T} retryPlayback loaded`, {
           nextSource,
         })
         setTimeout(() => {
-          // this.core.activePlayback.consent()
           this.core.activePlayback.play()
           trace(`${T} retryPlayback playing`)
         }, rnd)

package/src/plugins/source-controller/__tests__/SourceController.test.ts

@@ -74,7 +74,6 @@ describe('SourceController', () => {
   describe('on fatal playback failure', () => {
     let core: any
     let nextPlayback: any
-
     describe('basically', () => {
       beforeEach(() => {
         core = createMockCore({
@@ -215,5 +214,40 @@ describe('SourceController', () => {
         })
       })
     })
+    describe('given that playback triggers many errors in a row', () => {
+      beforeEach(async () => {
+        core = createMockCore({
+          sources: MOCK_SOURCES,
+        })
+        const _ = new SourceController(core)
+        core.emit('core:ready')
+        core.emit('core:active:container:changed')
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1)
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1)
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1)
+        nextPlayback = createMockPlayback()
+        vi.spyOn(nextPlayback, 'consent')
+        vi.spyOn(nextPlayback, 'play')
+        core.activePlayback = nextPlayback
+      })
+      it('should run handler only once', async () => {
+        expect(core.load).not.toHaveBeenCalled()
+        await clock.tickAsync(1000)
+        expect(core.load).toHaveBeenCalledTimes(1)
+        expect(core.load).toHaveBeenCalledWith(
+          MOCK_SOURCES[1].source,
+          MOCK_SOURCES[1].mimeType,
+        )
+      })
+    })
   })
 })