@gcorevideo/player 2.20.6 → 2.20.8

package/lib/plugins/media-control/MediaControl.js

@@ -17,6 +17,17 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg';
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
+/**
+ * Custom events emitted by the plugins to communicate with one another
+ * @beta
+ */
+export var MediaControlEvents;
+(function (MediaControlEvents) {
+    /**
+     * Emitted when the gear menu is rendered
+     */
+    MediaControlEvents["MEDIACONTROL_GEAR_RENDERED"] = "mediacontrol:gear:rendered";
+})(MediaControlEvents || (MediaControlEvents = {}));
 const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
@@ -51,7 +62,7 @@ export class MediaControl extends UICorePlugin {
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
-    currentSeekBarPercentage = null;
+    currentSeekBarPercentage = 0;
     disabledClickableList = [];
     displayedDuration = null;
     displayedPosition = null;
@@ -169,6 +180,9 @@ export class MediaControl extends UICorePlugin {
             'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
         };
     }
+    get currentSeekPos() {
+        return this.currentSeekBarPercentage;
+    }
     /**
      * Current volume [0..100]
      */
@@ -531,8 +545,7 @@ 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/lib/plugins/playback-rate/PlaybackRate.d.ts

@@ -1,6 +1,6 @@
-import { UICorePlugin } from '@clappr/core';
+import { UICorePlugin, Core } from '@clappr/core';
 /**
- * Allows changing the playback speed of the video.
+ * PLUGIN that allows changing the playback speed of the video.
  * @beta
  *
  * @remarks
@@ -10,12 +10,12 @@ import { UICorePlugin } from '@clappr/core';
  *
  * - {@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 declare class PlaybackRate extends UICorePlugin {
-    private currentPlayback;
     private playbackRates;
     private prevSelectedRate;
+    private rendered;
     private selectedRate;
     /**
      * @internal
@@ -27,9 +27,9 @@ export declare class PlaybackRate extends UICorePlugin {
     get supportedVersion(): {
         min: string;
     };
-    private static readonly template;
     private static readonly buttonTemplate;
     private static readonly listTemplate;
+    constructor(core: Core);
     /**
      * @internal
      */
@@ -49,12 +49,13 @@ export declare class PlaybackRate extends UICorePlugin {
      * @internal
      */
     bindEvents(): void;
-    private unBindEvents;
+    private onCoreReady;
+    private onActiveContainerChange;
+    private onGearRendered;
+    private onDvrStateChanged;
     private allRateElements;
     private rateElement;
-    private onDashRateChange;
-    private updateLiveStatus;
-    private reload;
+    private onPlaybackRateChange;
     private shouldRender;
     /**
      * @internal
@@ -63,11 +64,11 @@ export declare class PlaybackRate extends UICorePlugin {
     private onStartAd;
     private onFinishAd;
     private onPlay;
+    private resetPlaybackRate;
     private onStop;
     private onRateSelect;
     private onShowMenu;
     private goBack;
-    private updatePlaybackRate;
     private setSelectedRate;
     private getTitle;
     private highlightCurrentRate;

package/lib/plugins/playback-rate/PlaybackRate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,MAAM,cAAc,CAAC;AAiCxE;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,eAAe,CAAyB;IAEhD,OAAO,CAAC,aAAa,CAAgD;IAErE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,YAAY,CAAiC;IAErD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAwB;IAExD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;IAE9D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAsB;IAE1D;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAqBnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,YAAY;IAUpB;;OAEG;IACM,MAAM;IAuCf,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,oBAAoB;CAS7B"}
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAE,MAAM,cAAc,CAAC;AAoC9E;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAAgD;IAGrE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,YAAY,CAAiC;IAErD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;IAE9D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAsB;gBAE9C,IAAI,EAAE,IAAI;IAMtB;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,YAAY;IAYpB;;OAEG;IACM,MAAM;IA6Bf,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,oBAAoB;CAS7B"}

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/lib/plugins/source-controller/SourceController.d.ts

@@ -21,6 +21,7 @@ export declare class SourceController extends CorePlugin {
     private currentSourceIndex;
     private sourcesDelay;
     private active;
+    private switching;
     private sync;
     /**
      * @internal

package/lib/plugins/source-controller/SourceController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AAwBrB;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAuC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAiB;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;gBAEW,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,2BAA2B;IAsCnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;CACF"}
+{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AAwBrB;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAuC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,IAAI,CAAiB;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;gBAEW,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,2BAA2B;IAwCnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;CACF"}

package/lib/plugins/source-controller/SourceController.js

@@ -71,6 +71,7 @@ export class SourceController extends CorePlugin {
     currentSourceIndex = 0;
     sourcesDelay = {};
     active = false;
+    switching = false;
     sync = noSync;
     /**
      * @internal
@@ -135,15 +136,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;
             }
@@ -155,7 +159,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();
             }
@@ -171,6 +174,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) => {
             trace(`${T} retryPlayback syncing...`, {
@@ -179,12 +183,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/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts

@@ -17,6 +17,7 @@ export declare enum SpinnerEvents {
  * The plugin emits
  */
 export declare class SpinnerThreeBounce extends UIContainerPlugin {
+    private userShown;
     /**
      * @internal
      */
@@ -34,7 +35,6 @@ export declare class SpinnerThreeBounce extends UIContainerPlugin {
         'data-spinner': string;
         class: string;
     };
-    private hideTimeout;
     private showTimeout;
     private template;
     private hasFatalError;
@@ -46,13 +46,17 @@ export declare class SpinnerThreeBounce extends UIContainerPlugin {
     private onStop;
     private onError;
     /**
-     * Shows the spinner
+     * Shows the spinner.
+     *
+     * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce#hide} is called
      */
     show(delay?: number): void;
     /**
-     * Hides the spinner
+     * Hides the spinner.
      */
     hide(): void;
+    private _show;
+    private _hide;
     /**
      * @internal
      */

package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerThreeBounce.d.ts","sourceRoot":"","sources":["../../../src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAA0B,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAK9F,OAAO,mDAAmD,CAAC;AAM3D;;GAEG;AACH,oBAAY,aAAa;IACvB;;;OAGG;IACH,IAAI,yBAAyB;CAC9B;AAED;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,iBAAiB;IACvD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,QAAQ,CAAyB;IAEzC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,YAAY,CAAQ;gBAEhB,SAAS,EAAE,SAAS;IAWhC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAef;;OAEG;IACH,IAAI,CAAC,KAAK,SAAM;IAchB;;OAEG;IACH,IAAI;IAaJ;;OAEG;IACM,MAAM;CAmBhB"}
+{"version":3,"file":"SpinnerThreeBounce.d.ts","sourceRoot":"","sources":["../../../src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,SAAS,EAET,iBAAiB,EAElB,MAAM,cAAc,CAAA;AAKrB,OAAO,mDAAmD,CAAA;AAM1D;;GAEG;AACH,oBAAY,aAAa;IACvB;;;OAGG;IACH,IAAI,yBAAyB;CAC9B;AAED;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,iBAAiB;IACvD,OAAO,CAAC,SAAS,CAAQ;IAEzB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,QAAQ,CAAwB;IAExC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,YAAY,CAAQ;gBAEhB,SAAS,EAAE,SAAS;IAmBhC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAef;;;;OAIG;IACH,IAAI,CAAC,KAAK,SAAM;IAMhB;;OAEG;IACH,IAAI;IAKJ,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,KAAK;IAeb;;OAEG;IACM,MAAM;CAmBhB"}

package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js

@@ -1,9 +1,9 @@
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-import { Events as ClapprEvents, UIContainerPlugin, template } from '@clappr/core';
-import { PlaybackErrorCode } from '../../playback.types.js';
+import { Events as ClapprEvents, UIContainerPlugin, template, } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
+import { PlaybackErrorCode } from '../../playback.types.js';
 import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';
 import '../../../assets/spinner-three-bounce/spinner.scss';
 import { CLAPPR_VERSION } from '../../build.js';
@@ -26,6 +26,7 @@ export var SpinnerEvents;
  * The plugin emits
  */
 export class SpinnerThreeBounce extends UIContainerPlugin {
+    userShown = false;
     /**
      * @internal
      */
@@ -44,10 +45,9 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     get attributes() {
         return {
             'data-spinner': '',
-            'class': 'spinner-three-bounce'
+            class: 'spinner-three-bounce',
         };
     }
-    hideTimeout = null;
     showTimeout = null;
     template = template(spinnerHTML);
     hasFatalError = false;
@@ -64,17 +64,17 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     }
     onBuffering() {
         this.hasBuffering = true;
-        this.show();
+        this._show();
     }
     onBufferFull() {
         if (!this.hasFatalError && this.hasBuffering) {
-            this.hide();
+            this._hide();
         }
         this.hasBuffering = false;
     }
     onPlay() {
         trace(`${T} onPlay`);
-        this.hide();
+        this._hide();
     }
     onStop() {
         trace(`${T} onStop`, {
@@ -82,7 +82,7 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
             hasFatalError: this.hasFatalError,
         });
         if (!(this.hasFatalError && this.options.spinner?.showOnError)) {
-            this.hide();
+            this._hide();
         }
     }
     onError(e) {
@@ -94,42 +94,50 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
             error: e.code,
         });
         if (this.options.spinner?.showOnError) {
-            this.show();
+            this._show();
         }
         else {
-            this.hide();
+            this._hide();
         }
     }
     /**
-     * Shows the spinner
+     * Shows the spinner.
+     *
+     * 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`);
+        this.userShown = true;
+        this._show(delay);
+    }
+    /**
+     * Hides the spinner.
+     */
+    hide() {
+        this.userShown = false;
+        this._hide();
+    }
+    _show(delay = 300) {
         if (this.showTimeout === null) {
-            if (this.hideTimeout !== null) {
-                clearTimeout(this.hideTimeout);
-                this.hideTimeout = null;
-            }
             this.showTimeout = setTimeout(() => {
                 this.showTimeout = null;
                 this.$el.show();
             }, delay);
         }
     }
-    /**
-     * Hides the spinner
-     */
-    hide() {
+    _hide() {
+        trace(`${T} _hide`, {
+            userShown: this.userShown,
+        });
+        if (this.userShown) {
+            return;
+        }
         if (this.showTimeout !== null) {
             clearTimeout(this.showTimeout);
             this.showTimeout = null;
         }
-        this.hideTimeout = setTimeout(() => {
-            this.hideTimeout = null;
-            if (this.showTimeout === null) {
-                this.$el.hide();
-            }
-        }, 0);
+        this.$el.hide();
+        this.trigger(SpinnerEvents.SYNC); // TODO test
     }
     /**
      * @internal
@@ -146,10 +154,10 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
         });
         this.container.$el.append(this.$el[0]);
         if (showOnStart || this.container.buffering) {
-            this.show();
+            this._show();
         }
         else {
-            this.hide();
+            this._hide();
         }
         return this;
     }