@gcorevideo/player 2.18.3 → 2.19.0

package/lib/plugins/share/Share.d.ts

@@ -0,0 +1,38 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/share/style.scss';
+export declare class Share extends UICorePlugin {
+    private hide;
+    private container;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get template(): any;
+    get attributes(): {
+        class: string;
+        'data-share': string;
+    };
+    get events(): {
+        'click [data-share-button]': string;
+        'click [data-share-close]': string;
+        'click [data-share-fb]': string;
+        'click [data-share-tw]': string;
+        'click [data-share-link]': string;
+        'click [data-share-embed]': string;
+    };
+    bindEvents(): void;
+    unBindEvents(): void;
+    canShowShare(): void;
+    private onReady;
+    render(): this;
+    hideShare(): void;
+    showShare(): void;
+    initializeIcons(): void;
+    onShareShow(): void;
+    onShareHide(): void;
+    onShareFB(): void;
+    onShareTW(): void;
+    onShareLinkClick(): void;
+    onShareEmbedClick(): void;
+}
+//# sourceMappingURL=Share.d.ts.map

package/lib/plugins/share/Share.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Share.d.ts","sourceRoot":"","sources":["../../../src/plugins/share/Share.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAY,MAAM,cAAc,CAAC;AAKzE,OAAO,kCAAkC,CAAC;AAM1C,qBAAa,KAAM,SAAQ,YAAY;IACrC,OAAO,CAAC,IAAI,CAAS;IAErB,OAAO,CAAC,SAAS,CAA0B;IAE3C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;;;;;MASlB;IAEQ,UAAU;IAQnB,YAAY;IAaZ,YAAY;IAIZ,OAAO,CAAC,OAAO;IASN,MAAM;IAgBf,SAAS;IAIT,SAAS;IAOT,eAAe;IASf,WAAW;IAIX,WAAW;IAIX,SAAS;IAQT,SAAS;IAQT,gBAAgB;IAIhB,iBAAiB;CAGlB"}

package/lib/plugins/share/Share.js

@@ -0,0 +1,122 @@
+import { Events, UICorePlugin, template } from '@clappr/core';
+import { CLAPPR_VERSION } from '../build.js';
+import pluginHtml from '../../../assets/share/share.ejs';
+import '../../../assets/share/style.scss';
+import shareIcon from '../../../assets/icons/old/share.svg';
+import closeIcon from '../../../assets/icons/old/close-share.svg';
+import fbIcon from '../../../assets/icons/old/fb.svg';
+import twIcon from '../../../assets/icons/old/twitter.svg';
+export class Share extends UICorePlugin {
+    hide = false;
+    container = null;
+    get name() {
+        return 'share';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get template() {
+        return template(pluginHtml);
+    }
+    get attributes() {
+        return {
+            'class': this.name + '_plugin',
+            'data-share': ''
+        };
+    }
+    get events() {
+        return {
+            'click [data-share-button]': 'onShareShow',
+            'click [data-share-close]': 'onShareHide',
+            'click [data-share-fb]': 'onShareFB',
+            'click [data-share-tw]': 'onShareTW',
+            'click [data-share-link]': 'onShareLinkClick',
+            'click [data-share-embed]': 'onShareEmbedClick'
+        };
+    }
+    bindEvents() {
+        this.listenTo(this.core, Events.CORE_READY, this.onReady);
+        // this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideShare);
+        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_SHOW, this.showShare);
+    }
+    unBindEvents() {
+        // @ts-ignore
+        this.stopListening(this.core, Events.CORE_READY);
+        // @ts-ignore
+        // this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
+        // @ts-ignore
+        this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_SHOW);
+    }
+    canShowShare() {
+        this.hide = false;
+    }
+    onReady() {
+        this.hide = true;
+        this.container = this.core.activeContainer;
+        if (this.container) {
+            this.listenTo(this.container, 'container:settingsupdate', this.canShowShare);
+        }
+        this.hideShare();
+    }
+    render() {
+        this.$el.html(this.template({
+            'url': this.options.shareURL,
+            'embed': this.options.embed,
+            'embed_title': this.core.i18n.t('embed_title'),
+            'share_title': this.core.i18n.t('share_title'),
+            'link_title': this.core.i18n.t('link_title'),
+            'social_title': this.core.i18n.t('social_title'),
+        }));
+        this.core.mediaControl.$el.append(this.el);
+        this.$el.find('.share-container').hide();
+        this.initializeIcons();
+        return this;
+    }
+    hideShare() {
+        this.$el.addClass('share-hide');
+    }
+    showShare() {
+        if (this.hide) {
+            return;
+        }
+        this.$el.removeClass('share-hide');
+    }
+    initializeIcons() {
+        this.$el.find('button.media-control-button[data-share-button]')
+            .addClass('gcore-skin-button-color')
+            .append(shareIcon);
+        this.$el.find('div.share-container-header--close').append(closeIcon);
+        this.$el.find('div.share-container-header--socialicon_fb').append(fbIcon);
+        this.$el.find('div.share-container-header--socialicon_tw').append(twIcon);
+    }
+    onShareShow() {
+        this.$el.find('.share-container').show();
+    }
+    onShareHide() {
+        this.$el.find('.share-container').hide();
+    }
+    onShareFB() {
+        if (this.options.shareURL) {
+            const url = 'https://www.facebook.com/sharer.php?u=' + this.options.shareURL;
+            window.open(url, '_blank');
+        }
+    }
+    onShareTW() {
+        if (this.options.shareURL) {
+            const url = 'https://twitter.com/intent/tweet?url=' + this.options.shareURL;
+            window.open(url, '_blank');
+        }
+    }
+    onShareLinkClick() {
+        this.$el.find('.share-container-header--link')[0].setSelectionRange(0, this.options.shareURL.length);
+    }
+    onShareEmbedClick() {
+        this.$el.find('.share-container-header--embed')[0].setSelectionRange(0, this.options.embed.length);
+    }
+}

package/lib/plugins/skip-time/SkipTime.d.ts

@@ -0,0 +1,28 @@
+import { UICorePlugin as UICorePluginOriginal } from '@clappr/core';
+import '../../../assets/skip-time/style.scss';
+export declare class SkipTime extends UICorePluginOriginal {
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get container(): any;
+    get template(): any;
+    get attributes(): {
+        class: string;
+        'data-skip-time': string;
+    };
+    private position;
+    get events(): {
+        'click [data-skip-left]': string;
+        'click [data-skip-mid]': string;
+        'click [data-skip-right]': string;
+    };
+    bindEvents(): void;
+    setBack(): void;
+    handleRewindClicks(): void;
+    setMidClick(): void;
+    setForward(): void;
+    toggleFullscreen(): void;
+    render(): this;
+}
+//# sourceMappingURL=SkipTime.d.ts.map

package/lib/plugins/skip-time/SkipTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipTime.d.ts","sourceRoot":"","sources":["../../../src/plugins/skip-time/SkipTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAuC,MAAM,cAAc,CAAC;AAKzG,OAAO,sCAAsC,CAAC;AAI9C,qBAAa,QAAS,SAAQ,oBAAoB;IAChD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAI,SAAS,QAEZ;IAED,IAAI,QAAQ,QAEX;IAED,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,QAAQ,CAAmB;IAEnC,IAAa,MAAM;;;;MAMlB;IAEQ,UAAU;IAQnB,OAAO;IAIP,kBAAkB;IA4BlB,WAAW;IAIX,UAAU;IAIV,gBAAgB;IAMP,MAAM;CAWhB"}

package/lib/plugins/skip-time/SkipTime.js

@@ -0,0 +1,86 @@
+import { UICorePlugin as UICorePluginOriginal, Browser, Playback, Events, template } from '@clappr/core';
+import { CLAPPR_VERSION } from '../build.js';
+import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
+import '../../../assets/skip-time/style.scss';
+export class SkipTime extends UICorePluginOriginal {
+    get name() {
+        return 'skip_time';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get container() {
+        return this.core && this.core.activeContainer;
+    }
+    get template() {
+        return template(pluginHtml);
+    }
+    get attributes() {
+        return {
+            'class': this.name + '_plugin',
+            'data-skip-time': ''
+        };
+    }
+    position = 'mid';
+    get events() {
+        return {
+            'click [data-skip-left]': 'setBack',
+            'click [data-skip-mid]': 'setMidClick',
+            'click [data-skip-right]': 'setForward',
+        };
+    }
+    bindEvents() {
+        this.listenTo(this.core, Events.CORE_READY, this.render);
+        if (!this.container) {
+            return;
+        }
+        this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.handleRewindClicks);
+    }
+    setBack() {
+        this.position = 'left';
+    }
+    handleRewindClicks() {
+        if (this.core.getPlaybackType() === Playback.LIVE && !this.container.isDvrEnabled()) {
+            this.toggleFullscreen();
+            return;
+        }
+        if (Browser.isMobile) {
+            if (this.position === 'left') {
+                const seekPos = this.container.getCurrentTime() - 10;
+                if (seekPos < 0) {
+                    return;
+                }
+                this.container.seek(seekPos);
+            }
+            else if (this.position === 'right') {
+                const seekPos = this.container.getCurrentTime() + 30;
+                if (seekPos > this.container.getDuration()) {
+                    return;
+                }
+                this.container.seek(seekPos);
+            }
+            else {
+                this.toggleFullscreen();
+            }
+        }
+    }
+    setMidClick() {
+        this.position = 'mid';
+    }
+    setForward() {
+        this.position = 'right';
+    }
+    toggleFullscreen() {
+        this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
+        this.container.fullscreen();
+        this.core.toggleFullscreen();
+    }
+    render() {
+        this.$el.html(template(pluginHtml));
+        if (this.core.activeContainer) {
+            this.core.activeContainer.$el.append(this.el);
+        }
+        this.bindEvents();
+        return this;
+    }
+}

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

@@ -0,0 +1,41 @@
+import { CorePlugin, type Core as ClapprCore } from '@clappr/core';
+/**
+ * This plugin is responsible for managing the automatic failover between sources.
+ * @beta
+ * @remarks
+ * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
+ * on how sources ordering and selection works.
+ *
+ * This plugin does not expose any public methods apart from required by the Clappr plugin interface.
+ * It is supposed to work autonomously.
+ *
+ * @example
+ * ```ts
+ * import { SourceController } from '@gcorevideo/player-plugins'
+ *
+ * Player.registerPlugin(SourceController)
+ * ```
+ */
+export declare class SourceController extends CorePlugin {
+    private sourcesList;
+    private currentSourceIndex;
+    private sourcesDelay;
+    private active;
+    private sync;
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    constructor(core: ClapprCore);
+    /**
+     * @internal
+     */
+    bindEvents(): void;
+    private onReady;
+    private bindContainerEventListeners;
+    private reset;
+    private retryPlayback;
+    private getNextMediaSource;
+    static get version(): string;
+}
+//# sourceMappingURL=SourceController.d.ts.map

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

@@ -0,0 +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;AA4BrB;;;;;;;;;;;;;;;;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,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;gBAEW,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAMnB,OAAO,CAAC,OAAO;IAmBf,OAAO,CAAC,2BAA2B;IAyCnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA6BrB,OAAO,CAAC,kBAAkB;IAe1B,MAAM,KAAK,OAAO,WAEjB;CACF"}

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

@@ -0,0 +1,199 @@
+import { Events as ClapprEvents, CorePlugin, } from '@clappr/core';
+import { PlaybackErrorCode, } from '../..//playback.types';
+import { trace } from '@gcorevideo/utils';
+import { CLAPPR_VERSION } from '../build';
+const T = 'plugins.source_controller';
+const INITIAL_RETRY_DELAY = 1000;
+const MAX_RETRY_DELAY = 5000;
+const RETRY_DELAY_BLUR = 500;
+const VERSION = '0.0.1';
+function noSync(cb) {
+    queueMicrotask(cb);
+}
+/**
+ * This plugin is responsible for managing the automatic failover between sources.
+ * @beta
+ * @remarks
+ * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
+ * on how sources ordering and selection works.
+ *
+ * This plugin does not expose any public methods apart from required by the Clappr plugin interface.
+ * It is supposed to work autonomously.
+ *
+ * @example
+ * ```ts
+ * import { SourceController } from '@gcorevideo/player-plugins'
+ *
+ * Player.registerPlugin(SourceController)
+ * ```
+ */
+export class SourceController extends CorePlugin {
+    /*
+     * The Logic itself is quite simple:
+     * * Here is the short diagram:
+     *
+     * sources_list:
+     *       - a.mpd  |    +--------------------+
+     *       - b.m3u8 |--->|         init       |
+     *       - ...    |    |--------------------|
+     *                     | current_source = 0 |
+     *                     +--------------------+
+     *                            |
+     *                            |  source = a.mpd
+     *                            |  playback = dash.js
+     *                            v
+     *                      +------------------+
+     *                  +-->|   load source    |
+     *                  |   +---------|--------+
+     *                  |             v
+     *                  |   +------------------+
+     *                  |   |       play       |
+     *                  |   +---------|--------+
+     *                  |             |
+     *                  |             v
+     *                  |   +-----------------------+
+     *                  |   |  on playback_error    |
+     *                  |   |-----------------------|
+     *                  |   | current_source =      |
+     *                  |   |  (current_source + 1) |
+     *                  |   |  % len sources_list   |
+     *                  |   |                       |
+     *                  |   | delay 1..3s           |
+     *                  |   +---------------|-------+
+     *                  |                   |
+     *                  |   source=b.m3u8   |
+     *                  |   playback=hls.js |
+     *                  +-------------------+
+     *
+     */
+    sourcesList = [];
+    currentSourceIndex = 0;
+    sourcesDelay = {};
+    active = false;
+    sync = noSync;
+    get name() {
+        return 'source_controller';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    constructor(core) {
+        super(core);
+        this.sourcesList = this.core.options.sources;
+        if (this.core.options.source !== undefined) {
+            // prevent Clappr from loading all sources simultaneously
+            this.core.options.sources = [this.core.options.source];
+        }
+        else {
+            this.core.options.sources = this.core.options.sources.slice(0, 1);
+        }
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        super.bindEvents();
+        this.listenTo(this.core, ClapprEvents.CORE_READY, () => this.onReady());
+    }
+    onReady() {
+        trace(`${T} onReady`, {
+            retrying: this.active,
+        });
+        const spinner = this.core.activeContainer?.getPlugin('spinner');
+        if (spinner) {
+            this.sync = (cb) => {
+                spinner.once('spinner:sync', cb);
+            };
+        }
+        else {
+            this.sync = noSync;
+        }
+        this.bindContainerEventListeners();
+        if (this.active) {
+            this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+            spinner?.show();
+        }
+    }
+    bindContainerEventListeners() {
+        trace(`${T} bindContainerEventListeners`, {
+            activePlayback: this.core.activePlayback?.name,
+        });
+        this.core.activePlayback.on(ClapprEvents.PLAYBACK_ERROR, (error) => {
+            trace(`${T} on PLAYBACK_ERROR`, {
+                error: {
+                    code: error?.code,
+                    description: error?.description,
+                    level: error?.level,
+                },
+                retrying: this.active,
+                currentSource: this.sourcesList[this.currentSourceIndex],
+            });
+            switch (error.code) {
+                case PlaybackErrorCode.MediaSourceUnavailable:
+                    this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+                    this.retryPlayback();
+                    break;
+                // TODO handle other errors
+                default:
+                    break;
+            }
+        });
+        this.core.activePlayback.on(ClapprEvents.PLAYBACK_PLAY, () => {
+            trace(`${T} on PLAYBACK_PLAY`, {
+                currentSource: this.sourcesList[this.currentSourceIndex],
+                retrying: this.active,
+            });
+            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();
+            }
+        });
+    }
+    reset() {
+        this.active = false;
+        this.sourcesDelay = {};
+    }
+    retryPlayback() {
+        trace(`${T} retryPlayback enter`, {
+            currentSourceIndex: this.currentSourceIndex,
+            currentSource: this.sourcesList[this.currentSourceIndex],
+            sourcesList: this.sourcesList,
+        });
+        this.active = true;
+        this.getNextMediaSource().then((nextSource) => {
+            trace(`${T} retryPlayback syncing...`, {
+                nextSource,
+            });
+            const rnd = RETRY_DELAY_BLUR * Math.random();
+            this.sync(() => {
+                trace(`${T} retryPlayback loading...`, {
+                    nextSource,
+                });
+                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);
+            });
+        });
+    }
+    getNextMediaSource() {
+        return new Promise((resolve) => {
+            this.sourcesDelay[this.currentSourceIndex] = Math.min(MAX_RETRY_DELAY, (this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY) * 2);
+            this.currentSourceIndex =
+                (this.currentSourceIndex + 1) % this.sourcesList.length;
+            const delay = this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY;
+            const s = this.sourcesList[this.currentSourceIndex];
+            setTimeout(() => resolve(s), delay);
+        });
+    }
+    static get version() {
+        return VERSION;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { Container, UIContainerPlugin } from '@clappr/core';
+import '../../../assets/spinner-three-bounce/spinner.scss';
+export declare class SpinnerThreeBounce extends UIContainerPlugin {
+    get name(): string;
+    get supportedVersion(): {
+        min: string;
+    };
+    get attributes(): {
+        'data-spinner': string;
+        class: string;
+    };
+    private showTimeout;
+    private template;
+    private hasFatalError;
+    private hasBuffering;
+    constructor(container: Container);
+    private onBuffering;
+    private onBufferFull;
+    private onPlay;
+    private onStop;
+    private onError;
+    show(immediate?: boolean): void;
+    hide(): void;
+    render(): this;
+}
+//# sourceMappingURL=SpinnerThreeBounce.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerThreeBounce.d.ts","sourceRoot":"","sources":["../../../src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAU,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAK9E,OAAO,mDAAmD,CAAC;AAM3D,qBAAa,kBAAmB,SAAQ,iBAAiB;IACvD,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,IAAa,UAAU;;;MAKtB;IAED,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,IAAI,CAAC,SAAS,UAAQ;IAetB,IAAI;IAQK,MAAM;CAmBhB"}

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

@@ -0,0 +1,117 @@
+// 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, UIContainerPlugin, template } from '@clappr/core';
+import { PlaybackErrorCode } from '../../playback.types';
+import { trace } from '@gcorevideo/utils';
+import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';
+import '../../../assets/spinner-three-bounce/spinner.scss';
+import { CLAPPR_VERSION } from '../build.js';
+const T = 'plugins.spinner';
+export class SpinnerThreeBounce extends UIContainerPlugin {
+    get name() {
+        return 'spinner';
+    }
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    get attributes() {
+        return {
+            'data-spinner': '',
+            'class': 'spinner-three-bounce'
+        };
+    }
+    showTimeout = null;
+    template = template(spinnerHTML);
+    hasFatalError = false;
+    hasBuffering = false;
+    constructor(container) {
+        super(container);
+        this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
+        this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
+        this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
+        this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
+        this.listenTo(this.container, Events.CONTAINER_ENDED, this.onStop);
+        this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError);
+        this.listenTo(this.container, Events.CONTAINER_READY, this.render);
+    }
+    onBuffering() {
+        this.hasBuffering = true;
+        this.show();
+    }
+    onBufferFull() {
+        if (!this.hasFatalError && this.hasBuffering) {
+            this.hide();
+        }
+        this.hasBuffering = false;
+    }
+    onPlay() {
+        trace(`${T} onPlay`);
+        this.hide();
+    }
+    onStop() {
+        trace(`${T} onStop`, {
+            showOnError: this.options.spinner?.showOnError,
+            hasFatalError: this.hasFatalError,
+        });
+        if (!(this.hasFatalError && this.options.spinner?.showOnError)) {
+            this.hide();
+        }
+    }
+    onError(e) {
+        this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable;
+        trace(`${T} onError`, {
+            e,
+            showOnError: this.options.spinner?.showOnError,
+            hasFatalError: this.hasFatalError,
+            error: e.code,
+        });
+        if (this.options.spinner?.showOnError) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show(immediate = false) {
+        trace(`${T} show`, {
+            immediate,
+        });
+        if (immediate) {
+            if (this.showTimeout !== null) {
+                clearTimeout(this.showTimeout);
+                this.showTimeout = null;
+            }
+            this.$el.show();
+        }
+        else if (this.showTimeout === null) {
+            this.showTimeout = setTimeout(() => this.$el.show(), 300);
+        }
+    }
+    hide() {
+        if (this.showTimeout !== null) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        this.$el.hide();
+    }
+    render() {
+        const showOnStart = this.options.spinner?.showOnStart;
+        trace(`${T} render`, {
+            buffering: this.container.buffering,
+            showOnStart,
+        });
+        this.$el.html(this.template());
+        this.el.firstElementChild?.addEventListener('animationiteration', () => {
+            this.trigger('spinner:sync');
+        });
+        this.container.$el.append(this.$el[0]);
+        if (showOnStart || this.container.buffering) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+        return this;
+    }
+}