@gcorevideo/player 2.20.6 → 2.20.8

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, MediaControlEvents } 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,24 @@ 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)
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.bindPlaybackEvents,
+    )
+  }
+
+  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);
+  }
+
+  private onGearRendered() {
+    trace(`${T} onGearRendered`);
+    this.deferRender();
   }
 
   private bindPlaybackEvents() {
@@ -123,8 +151,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 +180,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 +217,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 +236,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 +254,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 +263,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 +276,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)
     }
@@ -280,8 +312,9 @@ export class LevelSelector extends UICorePlugin {
   private goBack() {
     trace(`${T} goBack`)
     this.isOpen = false
-    this.core.trigger('gear:refresh')
-    this.deferRender()
+    setTimeout(() => {
+      this.core.getPlugin('bottom_gear').refresh()
+    }, 0);
   }
 
   private setLevel(index: number) {

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 = [
@@ -96,7 +107,7 @@ export class MediaControl extends UICorePlugin {
 
   private currentDurationValue: number = 0
   private currentPositionValue: number = 0
-  private currentSeekBarPercentage: number | null = null
+  private currentSeekBarPercentage = 0
 
   private disabledClickableList: DisabledClickable[] = []
   private displayedDuration: string | null = null
@@ -264,6 +275,10 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  get currentSeekPos() {
+    return this.currentSeekBarPercentage
+  }
+
   /**
    * Current volume [0..100]
    */
@@ -735,11 +750,10 @@ export class MediaControl extends UICorePlugin {
     this.changeTogglePlay()
     this.bindContainerEvents()
     this.settingsUpdate()
-    this.core.activeContainer &&
-      this.core.activeContainer.trigger(
-        Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-        this.core.activeContainer.isDvrInUse(),
-      )
+    this.core.activeContainer.trigger(
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.core.activeContainer.isDvrInUse(),
+    )
     // TODO test
     if (this.core.activeContainer.mediaControlDisabled) {
       this.disable()

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

@@ -1,15 +1,19 @@
-import { Events, UICorePlugin, Playback, template } from '@clappr/core';
+import { Events, UICorePlugin, Playback, template, Core } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+import assert from 'assert';
 
 import { CLAPPR_VERSION } from '../../build.js';
 import type { ZeptoResult } from '../../utils/types.js';
 
-import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
 import buttonHtml from '../../../assets/playback-rate/button.ejs';
 import listHtml from '../../../assets/playback-rate/list.ejs';
 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 { PlaybackEvents } from '../../playback/types.js';
+import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js';
 
 type PlaybackRateOption = {
   value: string;
@@ -28,11 +32,10 @@ const DEFAULT_PLAYBACK_RATES = [
 
 const DEFAULT_PLAYBACK_RATE = '1.0';
 
-// TODO
-const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
+const T = 'plugins.playback_rate';
 
 /**
- * Allows changing the playback speed of the video.
+ * PLUGIN that allows changing the playback speed of the video.
  * @beta
  *
  * @remarks
@@ -42,15 +45,16 @@ const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
  *
  * - {@link BottomGear | bottom_gear}
  *
- * It renders a button in the gear menu, which opens a dropdown with the available playback rates.
+ * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
  */
 export class PlaybackRate extends UICorePlugin {
-  private currentPlayback: Playback | null = null;
-
   private playbackRates: PlaybackRateOption[] = DEFAULT_PLAYBACK_RATES;
 
+  // Saved when an ad starts to restore after it finishes
   private prevSelectedRate: string | undefined;
 
+  private rendered = false;
+
   private selectedRate: string = DEFAULT_PLAYBACK_RATE;
 
   /**
@@ -67,12 +71,16 @@ export class PlaybackRate extends UICorePlugin {
     return { min: CLAPPR_VERSION };
   }
 
-  private static readonly template = template(pluginHtml);
-
   private static readonly buttonTemplate = template(buttonHtml);
 
   private static readonly listTemplate = template(listHtml);
 
+  constructor(core: Core) {
+    super(core);
+    this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
+    this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+  }
+
   /**
    * @internal
    */
@@ -98,31 +106,40 @@ export class PlaybackRate extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, 'gear:rendered', this.render);
-    // TODO this.core.getPlugin('media_control'), bottom_gear
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
-
-    this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
-    this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-    if (this.core.activeContainer) {
-      this.listenTo(this.core.activePlayback, Events.PLAYBACK_BUFFERFULL, this.updateLiveStatus);
-    }
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
+  }
 
-    if (this.currentPlayback) {
-      this.listenTo(this.currentPlayback, Events.PLAYBACK_STOP, this.onStop);
-      this.listenTo(this.currentPlayback, Events.PLAYBACK_PLAY, this.onPlay);
+  private onCoreReady() {
+    const mediaControl = this.core.getPlugin('media_control');
+    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);
+  }
 
-      // TODO import dash playback events
-      this.listenTo(this.currentPlayback, 'dash:playback-rate-changed', this.onDashRateChange);
-    }
+  private onActiveContainerChange() {
+    this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
+    this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
+    this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
   }
 
-  private unBindEvents() {
-    this.stopListening(this.core, 'gear:rendered', this.render);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
-    this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
+  private onGearRendered() {
+    trace(`${T} onGearRendered`, {
+      rendered: this.rendered,
+    });
+    this.rendered = false;
+    this.render();
+  }
+
+  private onDvrStateChanged(dvrEnabled: boolean) {
+    trace(`${T} onDvrStateChanged`, {
+      dvrEnabled,
+    })
+    if (dvrEnabled) {
+      this.render();
+    }
   }
 
   private allRateElements(): ZeptoResult {
@@ -133,86 +150,65 @@ export class PlaybackRate extends UICorePlugin {
     return (this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`) as ZeptoResult).parent();
   }
 
-  private onDashRateChange() {
-    // TODO consider removing
-    ((this.currentPlayback as any)._dash as any)?.setPlaybackRate(this.selectedRate);
-  }
-
-  private updateLiveStatus() {
-    if (this.core.getPlaybackType() === Playback.LIVE) {
-      if (this.core.mediaControl.currentSeekBarPercentage <= 98.9) {
-        this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
-        this.core.mediaControl.$el.addClass('dvr');
-
-        return;
-      }
-      this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
-      this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-      this.core.mediaControl.$el.removeClass('dvr');
+  private onPlaybackRateChange(playbackRate: number) {
+    const selectedRate = parseInt(this.selectedRate, 10);
+    if (playbackRate !== selectedRate) {
+      trace(`${T} onPlaybackRateChange setting target rate`, {
+        playbackRate,
+        selectedRate,
+      })
+      this.core.activePlayback?.setPlaybackRate(selectedRate);
     }
   }
 
-  private reload() {
-    this.unBindEvents();
-    this.bindEvents();
-  }
-
   private shouldRender() {
     if (!this.core.activeContainer) {
       return false;
     }
 
-    this.currentPlayback = this.core.activePlayback;
+    if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+      return false;
+    }
 
-    return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
+    return 'setPlaybackRate' in this.core.activePlayback;
   }
 
   /**
    * @internal
    */
   override render() {
-    const container = this.core.activeContainer;
+    trace(`${T} render`, {
+      rendered: this.rendered,
+      shouldRender: this.shouldRender(),
+    })
 
-    if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
+    if (!this.shouldRender()) {
       return this;
     }
-    const cfg = this.core.options.playbackRateConfig || {};
 
-    if (!this.playbackRates) {
-      this.playbackRates = cfg.options || DEFAULT_PLAYBACK_RATES;
-    }
-
-    if (!this.selectedRate) {
-      this.selectedRate = cfg.defaultValue || DEFAULT_PLAYBACK_RATE;
+    if (this.rendered) {
+      return this;
     }
 
-    if (this.shouldRender()) {
-      const button = PlaybackRate.buttonTemplate({
-        title: this.getTitle(),
-        speedIcon,
-        arrowRightIcon,
-      });
-
-      this.$el.html(button);
-
-      // if (this.core.getPlaybackType() === Playback.LIVE) {
-      //   this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-      // }
+    const button = PlaybackRate.buttonTemplate({
+      title: this.getTitle(),
+      speedIcon,
+      arrowRightIcon,
+    });
 
-      // this.core.mediaControl.$playbackRate.append(this.el);
+    this.$el.html(button);
 
-      this.core.mediaControl.$el?.find('.gear-options-list [data-rate]').html(this.el);
+    (this.core.getPlugin('bottom_gear') as BottomGear)?.getElement('rate')?.html(this.el);
 
-      // this.updateText();
-    }
+    this.rendered = true;
 
     return this;
   }
 
   private onStartAd() {
     this.prevSelectedRate = this.selectedRate;
-    this.setSelectedRate('1.0');
-    this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.onFinishAd);
+    this.resetPlaybackRate();
+    this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onFinishAd);
   }
 
   private onFinishAd() {
@@ -222,16 +218,17 @@ export class PlaybackRate extends UICorePlugin {
   }
 
   private onPlay() {
-    if (!this.core.mediaControl.$el.hasClass('dvr')) {
-      if (this.core.getPlaybackType() === Playback.LIVE) {
-        this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
-        this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-      }
+    if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+      this.resetPlaybackRate();
     } else {
       this.setSelectedRate(this.selectedRate);
     }
   }
 
+  private resetPlaybackRate() {
+    this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
+  }
+
   private onStop() {
   }
 
@@ -252,37 +249,24 @@ export class PlaybackRate extends UICorePlugin {
       arrowLeftIcon,
       checkIcon,
     }));
-
-    this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+    (this.core.getPlugin('bottom_gear') as BottomGear)?.setContent(this.el);
     this.highlightCurrentRate();
   }
 
   private goBack() {
-    this.core.trigger('gear:refresh');
-  }
-
-  private updatePlaybackRate(rate: string) {
-    this.setSelectedRate(rate);
+    setTimeout(() => {
+      this.core.getPlugin('bottom_gear').refresh()
+    }, 0);
   }
 
   private setSelectedRate(rate: string) {
     // Set <video playbackRate="..."
-    this.core.$el.find('video,audio').get(0).playbackRate = rate;
+    this.core.activePlayback?.setPlaybackRate(rate);
     this.selectedRate = rate;
-    // TODO
-    // Player.player.trigger('playbackRateChanged', rate);
   }
 
   private getTitle() {
-    let title = this.selectedRate;
-
-    this.playbackRates.forEach((r) => {
-      if (r.value === this.selectedRate) {
-        title = r.label;
-      }
-    });
-
-    return title;
+    return this.playbackRates.find((r) => r.value === this.selectedRate)?.label || this.selectedRate;
   }
 
   private highlightCurrentRate() {