@gcorevideo/player 2.20.7 → 2.20.9

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 type { ZeptoResult } from '../../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() {

package/src/plugins/poster/Poster.ts

@@ -14,14 +14,14 @@ import {
 import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
-import type { ZeptoResult } from '../../utils/types.js'
+import type { ZeptoResult } from '../../types.js'
 
 import '../../../assets/poster/poster.scss'
 import posterHTML from '../../../assets/poster/poster.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
 import { PlaybackError } from '../../playback.types.js'
 
-const T = 'plugins.poster_custom'
+const T = 'plugins.poster'
 
 /**
  * Displays a poster image in the background and a big play button on top when playback is stopped
@@ -65,7 +65,7 @@ export class Poster extends UIContainerPlugin {
    * @internal
    */
   get name() {
-    return 'poster_custom'
+    return 'poster'
   }
 
   /**

package/src/plugins/seek-time/SeekTime.ts

@@ -9,7 +9,7 @@ import { CLAPPR_VERSION } from '../../build.js';
 
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
 import '../../../assets/seek-time/seek-time.scss';
-import { ZeptoResult } from '../../utils/types.js';
+import { ZeptoResult } from '../../types.js';
 
 const { formatTime } = Utils;
 

package/src/plugins/share/Share.ts

@@ -10,7 +10,8 @@ import fbIcon from '../../../assets/icons/old/fb.svg';
 import twIcon from '../../../assets/icons/old/twitter.svg';
 
 /**
- * The plugin adds a share button to the media control UI.
+ * PLUGIN that adds a share button to the media control UI.
+ * @beta
  */
 export class Share extends UICorePlugin {
   private hide = false;

package/src/plugins/skip-time/SkipTime.ts

@@ -8,7 +8,8 @@ import '../../../assets/skip-time/style.scss';
 type Position = 'mid' | 'left' | 'right';
 
 /**
- * The plugin adds skip controls to the media control UI.
+ * PLUGIN that adds skip controls to the media control UI.
+ * @beta
  */
 export class SkipTime extends UICorePluginOriginal {
   get name() {

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

@@ -153,7 +153,7 @@ export class SourceController extends CorePlugin {
     }
     this.bindContainerEventListeners()
     if (this.active) {
-      this.core.activeContainer?.getPlugin('poster_custom')?.disable()
+      this.core.activeContainer?.getPlugin('poster')?.disable()
       spinner?.show(0)
     }
   }
@@ -177,7 +177,7 @@ export class SourceController extends CorePlugin {
         }
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
-            this.core.activeContainer?.getPlugin('poster_custom')?.disable()
+            this.core.activeContainer?.getPlugin('poster')?.disable()
             this.retryPlayback()
             break
           default:
@@ -192,7 +192,7 @@ export class SourceController extends CorePlugin {
       })
       if (this.active) {
         this.reset()
-        this.core.activeContainer?.getPlugin('poster_custom')?.enable()
+        this.core.activeContainer?.getPlugin('poster')?.enable()
         this.core.activeContainer?.getPlugin('spinner')?.hide()
       }
     })

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

@@ -116,7 +116,7 @@ describe('SourceController', () => {
           poster = createMockPlugin()
           spinner = createSpinnerPlugin()
           core.activeContainer.getPlugin.mockImplementation((name: string) => {
-            if (name === 'poster_custom') {
+            if (name === 'poster') {
               return poster
             }
             if (name === 'spinner') {
@@ -183,7 +183,7 @@ describe('SourceController', () => {
         poster = createMockPlugin()
         spinner = createSpinnerPlugin()
         core.activeContainer.getPlugin.mockImplementation((name: string) => {
-          if (name === 'poster_custom') {
+          if (name === 'poster') {
             return poster
           }
           if (name === 'spinner') {

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -20,6 +20,7 @@ const T = 'plugins.spinner'
 
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 export enum SpinnerEvents {
   /**
@@ -30,10 +31,12 @@ export enum SpinnerEvents {
 }
 
 /**
- * Shows a pending operation indicator when playback is buffering or in other appropriate cases
+ * PLUGIN that shows a pending operation indicator when playback is buffering or in a similar state
  * @beta
  * @remarks
- * The plugin emits
+ * Events emitted- {@link SpinnerEvents}
+ * Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
+ * implement custom pending/progress indication scenarios.
  */
 export class SpinnerThreeBounce extends UIContainerPlugin {
   private userShown = false
@@ -134,7 +137,7 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
   /**
    * Shows the spinner.
    *
-   * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce#hide} is called
+   * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce.hide} is called
    */
   show(delay = 300) {
     trace(`${T} show`)

package/src/plugins/subtitles/Subtitles.ts

@@ -17,7 +17,7 @@ import comboboxHTML from '../../../assets/subtitles/combobox.ejs'
 import stringHTML from '../../../assets/subtitles/string.ejs'
 
 import { isFullscreen } from '../utils.js'
-import type { ZeptoResult } from '../../utils/types.js'
+import type { ZeptoResult } from '../../types.js'
 
 const VERSION: string = '2.19.14'
 

package/src/plugins/telemetry/Telemetry.ts

@@ -77,7 +77,7 @@ export type TelemetryRecord = {
  * @param data - The telemetry record to send.
  * @beta
  */
-type TelemetrySendFn = (data: TelemetryRecord) => void
+export type TelemetrySendFn = (data: TelemetryRecord) => void
 
 /**
  * Plugin settings
@@ -103,7 +103,7 @@ export enum TelemetryEvent {
 }
 
 /**
- * Collects and reports the performance statistics.
+ * PLUGIN that collects and reports the performance statistics.
  * @beta
  * @remarks
  * This plugin is experimental and its API is likely to change.

package/src/plugins/thumbnails/Thumbnails.ts

@@ -8,7 +8,7 @@ import { CLAPPR_VERSION } from '../../build.js'
 
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs'
 import '../../../assets/thumbnails/style.scss'
-import { ZeptoResult } from '../../utils/types.js'
+import { ZeptoResult } from '../../types.js'
 import { getPageX } from '../utils.js'
 
 /**

package/src/plugins/vast-ads/VastAds.ts

@@ -16,7 +16,8 @@ import assert from 'assert'
 import { TimePosition } from '../../playback.types.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
-import { TimerId, ZeptoResult } from '../../utils/types.js'
+import { ZeptoResult } from '../../types.js'
+import { TimerId } from '../../utils/types.js'
 import RollManager from './rollmanager.js'
 import SCTEManager from './sctemanager.js'
 import { VolumeFadeEvents } from '../volume-fade/VolumeFade.js'
@@ -286,7 +287,7 @@ export class VastAds extends UICorePlugin {
 
   private onPlaybackPlay() {
     setTimeout(() => {
-      const posterPlugin = this.container?.getPlugin('poster_custom')
+      const posterPlugin = this.container?.getPlugin('poster')
 
       posterPlugin?.enable()
       posterPlugin?.$el.hide()
@@ -618,7 +619,7 @@ export class VastAds extends UICorePlugin {
       this._pluginError('failed to get Clappr playback')
     }
     // Attempt to get poster plugin. (May interfere with media control)
-    this._posterPlugin = this._container?.getPlugin('poster_custom')
+    this._posterPlugin = this._container?.getPlugin('poster')
 
     // Attempt to get click-to-pause plugin. (May interfere with advert click handling)
     this._clickToPausePlugin = this._container?.getPlugin(
@@ -721,7 +722,7 @@ export class VastAds extends UICorePlugin {
 
   private adsPlaying() {
     assert(this.container, 'container is not defined')
-    const poster = this.container.getPlugin('poster_custom')
+    const poster = this.container.getPlugin('poster')
 
     poster && poster.disable()
     try {

package/src/plugins/vast-ads/roll.ts

@@ -3,7 +3,8 @@ import { $, Container, Core, Events, Log, Playback } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
 
-import type { TimerId, ZeptoResult } from '../../utils/types.js';
+import type { ZeptoResult } from '../../types.js';
+import type { TimerId } from '../../utils/types.js';
 
 type RollConstructorOptions = {
   core: Core;

package/src/plugins/vast-ads/rollmanager.ts

@@ -4,7 +4,7 @@ import assert from 'assert';
 
 import LoaderXML from './loaderxml.js';
 import Roll from './roll.js';
-import { ZeptoResult } from '../../utils/types.js';
+import { ZeptoResult } from '../../types.js';
 import { AdRollDesc, AdRollItem, AdRollType, VastAdsOptions } from './types.js';
 
 type CoreOptions = Record<string, unknown>;
@@ -71,7 +71,7 @@ export default class RollManager extends Events {
     this.$areaClick = $areaClick;
     this._playback = this.core.activePlayback;
     this._contentElement = this._playback.el as HTMLMediaElement;
-    this._posterPlugin = this._container.getPlugin('poster_custom');
+    this._posterPlugin = this._container.getPlugin('poster');
     this._clickToPausePlugin = this._container.getPlugin('click_to_pause_custom');
     this._adContainer = _adContainer;
     this._events = {};
@@ -210,7 +210,7 @@ export default class RollManager extends Events {
     //чтобы реклама шла одна за другой
     this._allURLRequest = !!roll.oneByOne;
     try {
-      const customPosterPlugin = this.container.getPlugin('poster_custom');
+      const customPosterPlugin = this.container.getPlugin('poster');
 
       customPosterPlugin.hidePlayButton();
     } catch (error) {

package/src/types.ts

@@ -1,3 +1,5 @@
+import { $, Container, Core } from "@clappr/core";
+
 /**
  * Describes a media source with its MIME type and URL.
  *
@@ -61,17 +63,28 @@ export type TransportPreference = MediaTransport
  * {@link https://clappr.github.io/classes/ContainerPlugin.html}
  */
 export type PlayerPlugin = {
-  new (...args: any[]): unknown
   name: string
 }
 
+/**
+ * @beta
+ */
 export type PlayerPluginConstructor = CorePluginConstructor | ContainerPluginConstructor
-export type CorePluginConstructor = ((core: unknown) => PlayerPlugin) & {
-  type: 'core'
+
+/**
+ * @beta
+ */
+export type CorePluginConstructor = {
+  new (core: Core): PlayerPlugin
+  type: string // 'core', but it's a nuisance to type it in the plugins definition
 }
 
-export type ContainerPluginConstructor = ((container: unknown) => PlayerPlugin) & {
-  type: 'container'
+/**
+ * @beta
+ */
+export type ContainerPluginConstructor = {
+  new (container: Container): PlayerPlugin
+  type: string // 'container', but it's a nuisance to type it in the plugins definition
 }
 
 /**
@@ -289,3 +302,9 @@ export enum PlayerEvent {
    */
   VolumeUpdate = 'volumeupdate',
 }
+
+/**
+ * {@link https://zeptojs.com/#$() | Zepto query result}
+ * @beta
+ */
+export type ZeptoResult = ReturnType<typeof $>;

package/src/utils/types.ts

@@ -1,11 +1,3 @@
-import { $ } from "@clappr/core";
-
-/**
- * {@link https://zeptojs.com/#$() | Zepto query result}
- * @beta
- */
-export type ZeptoResult = ReturnType<typeof $>;
-
 /**
  * @internal
  */