@gcorevideo/player 2.19.14 → 2.20.1

package/lib/plugins/subtitles/Subtitles.js

@@ -1,5 +1,5 @@
 import { Events, UICorePlugin, Browser, template, $, } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
+import { reportError, trace } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import '../../../assets/subtitles/style.scss';
@@ -8,88 +8,102 @@ import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
 import comboboxHTML from '../../../assets/subtitles/combobox.ejs';
 import stringHTML from '../../../assets/subtitles/string.ejs';
 import { isFullscreen } from '../utils.js';
-const VERSION = '0.0.1';
-const LOCAL_STORAGE_SUBTITLES_ID = 'subtitles_select';
-const T = 'plugins.media_control_subtitles';
+const VERSION = '2.19.14';
+const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
+const T = 'plugins.subtitles';
 const NO_TRACK = { language: 'off' };
+/**
+ * A {@link MediaControl | media control} plugin that provides a UI to select the subtitles when available.
+ * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * Configuration options:
+ *
+ * - subtitles.language - The language of the subtitles to select by default.
+ *
+ * @example
+ * ```ts
+ * import { Subtitles } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Subtitles)
+ *
+ * new Player({
+ *   ...
+ *   subtitles: {
+ *     language: 'en',
+ *   },
+ * })
+ * ```
+ */
 export class Subtitles extends UICorePlugin {
-    currentContainer;
-    currentLevel;
-    currentPlayback;
+    currentLevel = null;
+    isPreselectedApplied = false;
     isShowing = false;
-    tracks;
-    $string;
+    track = { ...NO_TRACK };
+    tracks = null;
+    $string = null;
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_subtitles';
+        return 'subtitles';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     static get version() {
         return VERSION;
     }
-    get template() {
-        return template(comboboxHTML);
-    }
-    get templateString() {
-        return template(stringHTML);
-    }
+    static template = template(comboboxHTML);
+    static templateString = template(stringHTML);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: this.name,
             'data-subtitles': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-subtitles-select]': 'onLevelSelect',
             'click [data-subtitles-button]': 'onShowLevelSelectMenu',
         };
     }
-    isPreselectedApplied = false;
-    track = { ...NO_TRACK };
     get preselectedLanguage() {
         return this.core.options.subtitles?.language ?? 'off';
     }
+    /**
+     * @internal
+     */
     bindEvents() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
         this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
-        this.listenToOnce(this.core, Events.CORE_READY, this.bindPlaybackEvents);
-        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.hideSelectLevelMenu);
-    }
-    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);
-        if (this.currentContainer) {
-            // @ts-ignore
-            this.stopListening(this.currentContainer, Events.CONTAINER_FULLSCREEN);
-            // @ts-ignore
-            this.stopListening(this.currentContainer, 'container:advertisement:start', this.onStartAd);
-            // @ts-ignore
-            this.stopListening(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
-        }
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
     }
     bindPlaybackEvents() {
-        if (this.currentPlayback &&
-            this.currentPlayback === this.core.activePlayback) {
-            return;
-        }
-        this.currentPlayback = this.core.activePlayback;
-        this.currentContainer = this.core.activeContainer;
-        this.listenTo(this.currentContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
-        this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.getTracks);
-        this.listenTo(this.currentContainer, 'container:advertisement:start', this.onStartAd);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
+        this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, this.getTracks);
+        this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         // fix for iOS
-        const video = this.currentPlayback?.el;
+        const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
         video.addEventListener('webkitbeginfullscreen', () => {
             if (Browser.isiOS) {
@@ -103,10 +117,13 @@ export class Subtitles extends UICorePlugin {
         });
     }
     getTracks() {
-        if (this.currentPlayback) {
+        if (this.core.activePlayback) {
             try {
-                const tracks = this.currentPlayback.el.textTracks;
-                tracks.length > 0 && this.fillLevels(tracks);
+                const tracks = this.core.activePlayback.el
+                    .textTracks;
+                if (tracks.length > 0) {
+                    this.setTracks(tracks);
+                }
             }
             catch (error) {
                 reportError(error);
@@ -114,23 +131,18 @@ export class Subtitles extends UICorePlugin {
         }
     }
     onStartAd() {
-        if (this.isShowing && this.currentContainer) {
+        if (this.isShowing && this.core.activeContainer) {
             this.hide();
-            this.listenTo(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
+            this.listenTo(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
         }
     }
     onFinishAd() {
         this.show();
-        this.stopListening(this.currentContainer, 'container:advertisement:finish', this.onFinishAd);
-    }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
-        this.bindPlaybackEvents();
+        this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
     }
     playerResize() {
-        const shouldShow = this.currentContainer &&
-            isFullscreen(this.currentContainer.el) &&
+        const shouldShow = this.core.activeContainer &&
+            isFullscreen(this.core.activeContainer.el) &&
             this.currentLevel &&
             this.currentLevel.mode &&
             Browser.isiOS &&
@@ -145,6 +157,9 @@ export class Subtitles extends UICorePlugin {
             reportError(error);
         }
     }
+    /**
+     * Hides the subtitles menu and the subtitles.
+     */
     hide() {
         this.isShowing = false;
         this.renderIcon();
@@ -155,11 +170,14 @@ export class Subtitles extends UICorePlugin {
             }
         }
     }
+    /**
+     * Shows the subtitles menu and the subtitles.
+     */
     show() {
         this.isShowing = true;
         this.renderIcon();
-        if (this.currentContainer &&
-            isFullscreen(this.currentContainer.el) &&
+        if (this.core.activeContainer &&
+            isFullscreen(this.core.activeContainer.el) &&
             this.currentLevel &&
             this.currentLevel.mode &&
             Browser.isiOS) {
@@ -171,59 +189,61 @@ export class Subtitles extends UICorePlugin {
         }
     }
     shouldRender() {
-        if (!this.currentContainer) {
-            return false;
-        }
-        if (!this.currentPlayback) {
-            return false;
-        }
-        // Only care if we have at least 2 to choose from
-        const hasLevels = !!(this.tracks && this.tracks.length > 0);
-        return hasLevels;
+        return !!(this.tracks && this.tracks.length > 0);
     }
     resizeFont() {
-        if (!this.currentContainer) {
+        if (!this.core.activeContainer) {
             return;
         }
         if (!this.$string) {
             return;
         }
-        const skinWidth = this.currentContainer.$el.width();
+        const skinWidth = this.core.activeContainer.$el.width();
         this.$string.find('p').css('font-size', skinWidth * 0.03);
     }
+    /**
+     * @internal
+     */
     render() {
-        if (this.shouldRender()) {
-            this.$el.html(this.template({ tracks: this.tracks }));
-            this.currentContainer?.$el.find('.subtitle-string').remove();
-            this.$string = $(this.templateString());
-            this.resizeFont();
-            this.currentContainer?.$el.append(this.$string[0]);
-            if (this.core.mediaControl.$subtitlesSelector &&
-                this.core.mediaControl.$subtitlesSelector.length > 0) {
-                this.core.mediaControl.$subtitlesSelector.append(this.el);
-            }
-            else {
-                this.core.mediaControl.$('.media-control-right-panel').append(this.el);
-            }
-            this.updateCurrentLevel(this.track);
-            this.highlightCurrentSubtitles();
-            this.applyPreselectedSubtitles();
+        if (!this.core.activeContainer) {
+            return this;
+        }
+        if (!this.shouldRender()) {
+            return this;
+        }
+        trace(`${T} render`, {
+            tracks: this.tracks?.length,
+            track: this.track?.language,
+        });
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.$el.html(Subtitles.template({ tracks: this.tracks }));
+        this.core.activeContainer.$el.find('.subtitle-string').remove();
+        this.$string = $(Subtitles.templateString());
+        this.resizeFont();
+        this.core.activeContainer.$el.append(this.$string[0]);
+        const ss = mediaControl.getElement('subtitlesSelector');
+        if (ss && ss.length > 0) {
+            ss.append(this.el);
         }
-        if (this.core.mediaControl.$subtitlesSelector?.find('span.subtitle-text')
-            .length > 0) {
-            this.renderIcon();
+        else {
+            mediaControl.getRightPanel().append(this.el);
         }
+        this.updateCurrentLevel(this.track);
+        this.highlightCurrentSubtitles();
+        this.applyPreselectedSubtitles();
+        this.renderIcon();
         return this;
     }
-    fillLevels(tracks) {
+    setTracks(tracks) {
         this.tracks = tracks;
         this.render();
     }
     findLevelBy(id) {
         if (this.tracks) {
-            for (let i = 0; i < this.tracks.length; i++) {
-                if (this.tracks[i].language === id) {
-                    return this.tracks[i]; // TODO TrackInfo?
+            for (const track of this.tracks) {
+                if (track.language === id) {
+                    return track; // TODO TrackInfo?
                 }
             }
         }
@@ -254,21 +274,21 @@ export class Subtitles extends UICorePlugin {
         }
     }
     onShowLevelSelectMenu() {
+        trace(`${T} onShowLevelSelectMenu`);
         this.toggleContextMenu();
     }
     hideSelectLevelMenu() {
         ;
-        this.$('.subtitles ul').hide();
+        this.$('[data-subtitles] ul').hide();
     }
     toggleContextMenu() {
-        ;
-        this.$('.subtitles ul').toggle();
+        this.$('[data-subtitles] ul').toggle();
     }
     buttonElement() {
-        return this.$('.subtitles button');
+        return this.$('[data-subtitles] button');
     }
     levelElement(id) {
-        return this.$('.subtitles ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
+        return this.$('[data-subtitles] ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
     }
     startLevelSwitch() {
         this.buttonElement().addClass('changing');
@@ -285,7 +305,7 @@ export class Subtitles extends UICorePlugin {
                 const track = this.tracks[i];
                 if (track.language === this.currentLevel.language) {
                     track.mode = 'showing';
-                    const currentTime = this.currentPlayback?.getCurrentTime() ?? 0;
+                    const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
                     const cues = track.cues;
                     let subtitleText = '';
                     if (cues && cues.length) {
@@ -347,8 +367,10 @@ export class Subtitles extends UICorePlugin {
     }
     renderIcon() {
         const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
-        this.core.mediaControl.$subtitlesSelector
-            .find('span.subtitle-text')
+        this.core
+            .getPlugin('media_control')
+            .getElement('subtitlesSelector')
+            ?.find('span.subtitle-text')
             .html(icon);
     }
 }

package/lib/plugins/telemetry/Telemetry.d.ts

@@ -0,0 +1,135 @@
+import { Container, ContainerPlugin } from '@clappr/core';
+import type { PlaybackType } from '../../types.js';
+/**
+ * Telemetry event data
+ */
+export type TelemetryEventData = StallEventData | InitEventData | StartEventData | WatchEventData;
+/**
+ * Playback stall event data
+ */
+export interface StallEventData {
+    event: TelemetryEvent.Stall;
+    /**
+     * Accumulated buffering duration over the measurement interval, ms
+     */
+    total_ms: number;
+    /**
+     * Number of stalls
+     */
+    count: number;
+    /**
+     * Playback time when the stall is reported at the end of a stall measurement interval, s
+     */
+    time: number;
+}
+export interface InitEventData {
+    event: TelemetryEvent.Init;
+}
+export interface StartEventData {
+    event: TelemetryEvent.Start;
+}
+export interface WatchEventData {
+    event: TelemetryEvent.Watch;
+}
+/**
+ * Telemetry record
+ */
+export type TelemetryRecord = {
+    type: PlaybackType;
+} & TelemetryEventData;
+/**
+ * Callback to send the telemetry record to the storage.
+ * @param data - The telemetry record to send.
+ */
+type TelemetrySendFn = (data: TelemetryRecord) => void;
+/**
+ * Plugin settings
+ */
+export interface TelemetryPluginSettings {
+    /**
+     * Sends the statistics record to the storage.
+     * The actual delivery is presumably async and batched.
+     */
+    send: TelemetrySendFn;
+}
+/**
+ * Telemetry event type
+ */
+export declare enum TelemetryEvent {
+    Init = 1,
+    Start = 2,
+    Watch = 3,
+    Stall = 4
+}
+/**
+ * Collects and reports the performance statistics.
+ * @beta
+ * @remarks
+ * This plugin is experimental and its API is likely to change.
+ *
+ * Configuration options {@link TelemetryPluginSettings}
+ *
+ * @example
+ * ```ts
+ * import { Statistics } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Statistics)
+ *
+ * const player = new Player({
+ *   statistics: {
+ *     send: (data) => {
+ *        fetch('/stats', {
+ *          method: 'POST',
+ *          body: JSON.stringify(data),
+ *          headers: { 'content-type': 'application/json' },
+ *        })
+ *     },
+ *   },
+ *   ...
+ * })
+ * ```
+ */
+export declare class Telemetry extends ContainerPlugin {
+    /**
+     * The name of the plugin.
+     */
+    get name(): string;
+    /**
+     * The supported version of the plugin.
+     */
+    get supportedVersion(): {
+        min: string;
+    };
+    private started;
+    private timeStart;
+    private stallSent;
+    private stallLastTime;
+    private watchSent;
+    private bufTracking;
+    private numStalls;
+    /**
+     * The time when buffering last started.
+     */
+    private bufLastStarted;
+    /**
+     * The accumulated buffering duration.
+     */
+    private stallAcc;
+    constructor(container: Container);
+    /**
+     * @internal
+     */
+    bindEvents(): void;
+    private startLevelSwitch;
+    private endLevelSwitch;
+    private onBuffering;
+    private onBufferFull;
+    private onReady;
+    private sendInit;
+    private send;
+    private sendStall;
+    private onTimeUpdate;
+    private onStart;
+}
+export {};
+//# sourceMappingURL=Telemetry.d.ts.map

package/lib/plugins/telemetry/Telemetry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Telemetry.d.ts","sourceRoot":"","sources":["../../../src/plugins/telemetry/Telemetry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAU,MAAM,cAAc,CAAA;AAKjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAUlD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,CAAA;AAEjG;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAA;IAC3B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAA;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAA;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAA;CACnB,GAAG,kBAAkB,CAAC;AAEvB;;;GAGG;AACH,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;AAEtD;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,EAAE,eAAe,CAAA;CACtB;AAED;;GAEG;AACH,oBAAY,cAAc;IACxB,IAAI,IAAI;IACR,KAAK,IAAA;IACL,KAAK,IAAA;IACL,KAAK,IAAA;CACN;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,SAAU,SAAQ,eAAe;IAC5C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,SAAS,CAAI;IAErB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,SAAS,CAAI;IAErB;;OAEG;IACH,OAAO,CAAC,cAAc,CAAI;IAE1B;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAI;gBAER,SAAS,EAAE,SAAS;IAUhC;;OAEG;IACM,UAAU;IAoCnB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,OAAO;CAShB"}

package/lib/plugins/telemetry/Telemetry.js

@@ -0,0 +1,180 @@
+// An example implementation of client side performancestatistics
+import { ContainerPlugin, Events } from '@clappr/core';
+import { reportError, trace } from '@gcorevideo/utils';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../../build.js';
+const WATCH_CUTOFF = 5;
+const STALL_MEASURE_PERIOD = 10;
+const T = 'plugins.telemetry';
+/**
+ * Telemetry event type
+ */
+export var TelemetryEvent;
+(function (TelemetryEvent) {
+    TelemetryEvent[TelemetryEvent["Init"] = 1] = "Init";
+    TelemetryEvent[TelemetryEvent["Start"] = 2] = "Start";
+    TelemetryEvent[TelemetryEvent["Watch"] = 3] = "Watch";
+    TelemetryEvent[TelemetryEvent["Stall"] = 4] = "Stall";
+})(TelemetryEvent || (TelemetryEvent = {}));
+/**
+ * Collects and reports the performance statistics.
+ * @beta
+ * @remarks
+ * This plugin is experimental and its API is likely to change.
+ *
+ * Configuration options {@link TelemetryPluginSettings}
+ *
+ * @example
+ * ```ts
+ * import { Statistics } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Statistics)
+ *
+ * const player = new Player({
+ *   statistics: {
+ *     send: (data) => {
+ *        fetch('/stats', {
+ *          method: 'POST',
+ *          body: JSON.stringify(data),
+ *          headers: { 'content-type': 'application/json' },
+ *        })
+ *     },
+ *   },
+ *   ...
+ * })
+ * ```
+ */
+export class Telemetry extends ContainerPlugin {
+    /**
+     * The name of the plugin.
+     */
+    get name() {
+        return 'telemetry';
+    }
+    /**
+     * The supported version of the plugin.
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    started = false;
+    timeStart = 0;
+    stallSent = false;
+    stallLastTime = 0;
+    watchSent = false;
+    bufTracking = false;
+    numStalls = 0;
+    /**
+     * The time when buffering last started.
+     */
+    bufLastStarted = 0;
+    /**
+     * The accumulated buffering duration.
+     */
+    stallAcc = 0;
+    constructor(container) {
+        super(container);
+        assert(this.options.telemetry &&
+            typeof this.options.telemetry.send === 'function', 'Telemetry plugin configuration is invalid: `send` option is required');
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        // TODO remove this
+        // this.listenToOnce(
+        //   this.container,
+        //   CUSTOM_EVENTS_CONTAINER_START,
+        //   this.onStart,
+        // )
+        this.listenToOnce(this.container, Events.CONTAINER_READY, this.onReady);
+        this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
+        this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
+        this.listenTo(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+        this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
+        this.listenTo(this.container.playback, Events.PLAYBACK_LEVEL_SWITCH_END, this.endLevelSwitch);
+    }
+    startLevelSwitch() {
+        this.bufTracking = false;
+    }
+    endLevelSwitch() {
+        this.bufTracking = true;
+    }
+    onBuffering() {
+        if (this.bufTracking) {
+            this.bufLastStarted = performance.now();
+        }
+    }
+    onBufferFull() {
+        if (this.bufTracking && this.bufLastStarted) {
+            this.stallAcc += performance.now() - this.bufLastStarted;
+            this.numStalls++;
+        }
+        this.bufTracking = true;
+    }
+    onReady() {
+        this.sendInit();
+        trace(`${T} onReady`, {
+            autoPlay: this.options.autoPlay,
+        });
+        if (this.options.autoPlay) {
+            this.onStart();
+        }
+        else {
+            this.listenToOnce(this.container.playback, Events.PLAYBACK_PLAY_INTENT, this.onStart);
+        }
+    }
+    sendInit() {
+        this.send({ event: TelemetryEvent.Init });
+    }
+    send(event) {
+        this.options.telemetry.send({
+            type: this.container.getPlaybackType(),
+            ...event,
+        });
+    }
+    sendStall(time) {
+        // TODO don't send if no stalls?
+        const res = {
+            event: TelemetryEvent.Stall,
+            count: this.numStalls,
+            time,
+            total_ms: Math.round(this.stallAcc * 1000),
+        };
+        this.stallAcc = 0;
+        this.numStalls = 0;
+        this.send(res);
+        this.stallSent = true;
+        this.stallLastTime = time;
+    }
+    onTimeUpdate({ current }) {
+        if (!this.timeStart) {
+            this.timeStart = current;
+        }
+        try {
+            const elapsed = current - this.timeStart;
+            const stallElapsed = current - this.stallLastTime;
+            if (!this.stallSent || stallElapsed >= STALL_MEASURE_PERIOD) {
+                this.sendStall(current);
+            }
+            if (!this.watchSent && elapsed >= WATCH_CUTOFF) {
+                this.watchSent = true;
+                this.send({
+                    event: TelemetryEvent.Watch,
+                });
+            }
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    onStart() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        this.send({
+            event: TelemetryEvent.Start,
+        });
+    }
+}