@gcorevideo/player 2.20.7 → 2.20.8

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -1,12 +1,15 @@
 import { Events, UICorePlugin, Playback, template } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.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 { PlaybackEvents } from '../../playback/types.js';
+import { MediaControlEvents } from '../media-control/MediaControl.js';
 const DEFAULT_PLAYBACK_RATES = [
     { value: '0.5', label: '0.5x' },
     { value: '0.75', label: '0.75x' },
@@ -17,10 +20,9 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '2.0', label: '2x' }
 ];
 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
@@ -30,12 +32,13 @@ 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 {
-    currentPlayback = null;
     playbackRates = DEFAULT_PLAYBACK_RATES;
+    // Saved when an ad starts to restore after it finishes
     prevSelectedRate;
+    rendered = false;
     selectedRate = DEFAULT_PLAYBACK_RATE;
     /**
      * @internal
@@ -49,9 +52,13 @@ export class PlaybackRate extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = template(pluginHtml);
     static buttonTemplate = template(buttonHtml);
     static listTemplate = template(listHtml);
+    constructor(core) {
+        super(core);
+        this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
+        this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+    }
     /**
      * @internal
      */
@@ -75,27 +82,36 @@ export class PlaybackRate extends UICorePlugin {
      * @internal
      */
     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);
-        }
-        if (this.currentPlayback) {
-            this.listenTo(this.currentPlayback, Events.PLAYBACK_STOP, this.onStop);
-            this.listenTo(this.currentPlayback, Events.PLAYBACK_PLAY, this.onPlay);
-            // TODO import dash playback events
-            this.listenTo(this.currentPlayback, 'dash:playback-rate-changed', this.onDashRateChange);
-        }
+        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
+    }
+    onCoreReady() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        const gear = this.core.getPlugin('bottom_gear');
+        assert(gear, 'bottom_gear plugin is required');
+        this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+    }
+    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);
+    }
+    onGearRendered() {
+        trace(`${T} onGearRendered`, {
+            rendered: this.rendered,
+        });
+        this.rendered = false;
+        this.render();
     }
-    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);
+    onDvrStateChanged(dvrEnabled) {
+        trace(`${T} onDvrStateChanged`, {
+            dvrEnabled,
+        });
+        if (dvrEnabled) {
+            this.render();
+        }
     }
     allRateElements() {
         return this.$('ul.gear-sub-menu li');
@@ -103,68 +119,53 @@ export class PlaybackRate extends UICorePlugin {
     rateElement(rate = "1") {
         return this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`).parent();
     }
-    onDashRateChange() {
-        // TODO consider removing
-        this.currentPlayback._dash?.setPlaybackRate(this.selectedRate);
-    }
-    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');
+    onPlaybackRateChange(playbackRate) {
+        const selectedRate = parseInt(this.selectedRate, 10);
+        if (playbackRate !== selectedRate) {
+            trace(`${T} onPlaybackRateChange setting target rate`, {
+                playbackRate,
+                selectedRate,
+            });
+            this.core.activePlayback?.setPlaybackRate(selectedRate);
         }
     }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
-    }
     shouldRender() {
         if (!this.core.activeContainer) {
             return false;
         }
-        this.currentPlayback = this.core.activePlayback;
-        return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
+        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+            return false;
+        }
+        return 'setPlaybackRate' in this.core.activePlayback;
     }
     /**
      * @internal
      */
     render() {
-        const container = this.core.activeContainer;
-        if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
+        trace(`${T} render`, {
+            rendered: this.rendered,
+            shouldRender: this.shouldRender(),
+        });
+        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.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');
-            // }
-            // this.core.mediaControl.$playbackRate.append(this.el);
-            this.core.mediaControl.$el?.find('.gear-options-list [data-rate]').html(this.el);
-            // this.updateText();
+        if (this.rendered) {
+            return this;
         }
+        const button = PlaybackRate.buttonTemplate({
+            title: this.getTitle(),
+            speedIcon,
+            arrowRightIcon,
+        });
+        this.$el.html(button);
+        this.core.getPlugin('bottom_gear')?.getElement('rate')?.html(this.el);
+        this.rendered = true;
         return this;
     }
     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);
     }
     onFinishAd() {
         if (this.prevSelectedRate) {
@@ -172,16 +173,16 @@ export class PlaybackRate extends UICorePlugin {
         }
     }
     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);
         }
     }
+    resetPlaybackRate() {
+        this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
+    }
     onStop() {
     }
     onRateSelect(event) {
@@ -199,30 +200,21 @@ export class PlaybackRate extends UICorePlugin {
             arrowLeftIcon,
             checkIcon,
         }));
-        this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+        this.core.getPlugin('bottom_gear')?.setContent(this.el);
         this.highlightCurrentRate();
     }
     goBack() {
-        this.core.trigger('gear:refresh');
-    }
-    updatePlaybackRate(rate) {
-        this.setSelectedRate(rate);
+        setTimeout(() => {
+            this.core.getPlugin('bottom_gear').refresh();
+        }, 0);
     }
     setSelectedRate(rate) {
         // 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);
     }
     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;
     }
     highlightCurrentRate() {
         this.allRateElements().removeClass('current');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.20.7",
+  "version": "2.20.8",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/playback/BasePlayback.ts

@@ -11,10 +11,10 @@ export class BasePlayback extends HTML5Video {
   createError(errorData: any, options?: ErrorOptions) {
     const i18n =
       this.i18n ||
-        // @ts-ignore
-        (this.core && this.core.i18n) ||
-        // @ts-ignore
-        (this.container && this.container.i18n)
+      // @ts-ignore
+      (this.core && this.core.i18n) ||
+      // @ts-ignore
+      (this.container && this.container.i18n)
 
     if (
       i18n &&
@@ -34,6 +34,14 @@ export class BasePlayback extends HTML5Video {
     return super.createError(errorData, options)
   }
 
+  /**
+   * Sets the playback rate.
+   * @param rate - The playback rate to set.
+   */
+  setPlaybackRate(rate: number) {
+    ;(this.el as HTMLMediaElement).playbackRate = rate
+  }
+
   override _onPlaying() {
     super._onPlaying()
     this.trigger(Events.PLAYBACK_MEDIACONTROL_ENABLE)

package/src/playback/HTML5Video.ts

@@ -0,0 +1,3 @@
+import { BasePlayback } from './BasePlayback.js'
+
+export default class HTML5Video extends BasePlayback {}

package/src/playback/dash-playback/DashPlayback.ts

@@ -17,7 +17,6 @@ import DASHJS, {
 import {
   PlaybackError,
   PlaybackErrorCode,
-  PlayerComponentType,
   QualityLevel,
   TimePosition,
   TimeUpdate,
@@ -25,6 +24,7 @@ import {
 } from '../../playback.types.js'
 import { isDashSource } from '../../utils/mediaSources.js'
 import { BasePlayback } from '../BasePlayback.js'
+import { PlaybackEvents } from '../types.js'
 
 const AUTO = -1
 
@@ -300,8 +300,8 @@ export default class DashPlayback extends BasePlayback {
       },
     )
 
-    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, () => {
-      this.trigger('dash:playback-rate-changed')
+    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, (e: DASHJS.PlaybackRateChangedEvent) => {
+      this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate)
     })
   }
 
@@ -361,7 +361,7 @@ export default class DashPlayback extends BasePlayback {
     return this._startTime
   }
 
-  seekPercentage(percentage: number) {
+  override seekPercentage(percentage: number) {
     let seekTo = this._duration
 
     if (percentage > 0) {
@@ -376,7 +376,7 @@ export default class DashPlayback extends BasePlayback {
     this.seek(seekTo)
   }
 
-  seek(time: TimeValue) {
+  override seek(time: TimeValue) {
     if (time < 0) {
       // eslint-disable-next-line max-len
       Log.warn(
@@ -478,7 +478,7 @@ export default class DashPlayback extends BasePlayback {
     }, 10)
   }
 
-  _onTimeUpdate() {
+  override _onTimeUpdate() {
     if (this.startChangeQuality) {
       return
     }
@@ -499,7 +499,7 @@ export default class DashPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
-  _onDurationChange() {
+  override _onDurationChange() {
     const duration = this.getDuration()
 
     if (this._lastDuration === duration) {
@@ -540,7 +540,7 @@ export default class DashPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_PROGRESS, progress, {})
   }
 
-  play() {
+  override play() {
     trace(`${T} play`, { dash: !!this._dash })
     if (!this._dash) {
       this._setup()
@@ -550,7 +550,7 @@ export default class DashPlayback extends BasePlayback {
     this._startTimeUpdateTimer()
   }
 
-  pause() {
+  override pause() {
     if (!this._dash) {
       return
     }
@@ -560,7 +560,7 @@ export default class DashPlayback extends BasePlayback {
     }
   }
 
-  stop() {
+  override stop() {
     if (this._dash) {
       this._stopTimeUpdateTimer()
       this._dash.reset()
@@ -569,7 +569,7 @@ export default class DashPlayback extends BasePlayback {
     }
   }
 
-  destroy() {
+  override destroy() {
     this._stopTimeUpdateTimer()
     if (this._dash) {
       this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError)
@@ -638,6 +638,10 @@ export default class DashPlayback extends BasePlayback {
     assert.ok(ret, 'Invalid quality level')
     return ret
   }
+
+  setPlaybackRate(rate: number) {
+    this._dash?.setPlaybackRate(rate)
+  }
 }
 
 DashPlayback.canPlay = function (resource, mimeType) {

package/src/playback/index.ts

@@ -2,9 +2,10 @@ import { Loader } from '@clappr/core'
 
 import DashPlayback from './dash-playback/DashPlayback.js'
 import HlsPlayback from './hls-playback/HlsPlayback.js'
-
+import HTML5Video from './HTML5Video.js'
 // TODO consider allowing the variation of the order of playback modules
 export function registerPlaybacks() {
+  Loader.registerPlayback(HTML5Video) // TODO check it overrides the default HTML5Video
   Loader.registerPlayback(HlsPlayback)
   Loader.registerPlayback(DashPlayback)
 }

package/src/playback/types.ts

@@ -0,0 +1,9 @@
+
+export enum PlaybackEvents {
+  /**
+   * Emitted when the playback rate changes.
+   * Payload:
+   * - playbackRate number
+   */
+  PLAYBACK_RATE_CHANGED = 'playback:rate-changed',
+}

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

@@ -16,17 +16,6 @@ const VERSION = '2.19.12';
 
 const T = 'plugins.bottom_gear';
 
-/**
- * Custom events emitted by the plugin
- * @beta
- */
-export enum GearEvents {
-  /**
-   * Emitted when the gear menu is rendered
-   */
-  MEDIACONTROL_GEAR_RENDERED = 'mediacontrol:gear:rendered',
-}
-
 /**
  * An element inside the gear menu
  * @beta
@@ -96,7 +85,6 @@ export class BottomGear extends UICorePlugin {
     assert(mediaControl, 'media_control plugin is required');
 
     this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.listenTo(this.core, 'gear:refresh', this.refresh); // TODO use direct plugin method call
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
   }
@@ -150,13 +138,16 @@ export class BottomGear extends UICorePlugin {
     this.$el.html(BottomGear.template({ icon, items }));
 
     mediaControl.getElement('gear')?.html(this.el);
-    this.core.trigger('gear:rendered'); // @deprecated
-    mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED); // TODO drop
     mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
 
-  private refresh() {
+  /**
+   * Re-renders the gear menu.
+   * It fires the {@link MediaControlEvents.MEDIACONTROL_GEAR_RENDERED | MEDIACONTROL_GEAR_RENDERED} event,
+   * which the plugins that attach to the gear menu can listen to to re-render themselves.
+   */
+  refresh() {
     this.render();
     this.$el.find('.gear-wrapper').show();
   }

package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts

@@ -24,8 +24,8 @@ import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss'
 import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs'
 import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs'
 import statsIcon from '../../../assets/icons/new/stats.svg'
-import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
-import { MediaControl } from '../media-control/MediaControl.js'
+import { BottomGear } from '../bottom-gear/BottomGear.js'
+import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js'
 import assert from 'assert'
 
 const qualityClasses = [
@@ -229,7 +229,7 @@ export class ClapprNerdStats extends UICorePlugin {
     this.listenToOnce(this.core, Events.CORE_READY, this.init)
     this.listenTo(
       mediaControl,
-      GearEvents.MEDIACONTROL_GEAR_RENDERED,
+      MediaControlEvents.MEDIACONTROL_GEAR_RENDERED,
       this.addToBottomGear,
     )
   }