@gcorevideo/player 2.17.0 → 2.18.0

package/dist/index.js

@@ -12215,6 +12215,20 @@ function EventLite() {
  */
 var PlayerEvent;
 (function (PlayerEvent) {
+    /**
+     * Playback has reached the end of the media.
+     */
+    PlayerEvent["Ended"] = "ended";
+    /**
+     * An error occurred.
+     * Parameters: {@link PlaybackError}
+     */
+    PlayerEvent["Error"] = "error";
+    /**
+     * The player has switched to or from the fullscreen mode.
+     * Parameters:`boolean` isFullscreen
+     */
+    PlayerEvent["Fullscreen"] = "fullscreen";
     /**
      * The player is ready to use.
      */
@@ -12227,14 +12241,29 @@ var PlayerEvent;
      * Playback has been paused.
      */
     PlayerEvent["Pause"] = "pause";
+    /**
+     * The player's container has been resized.
+     * Parameters: {@link ContainerSize}
+     */
+    PlayerEvent["Resize"] = "resize";
+    /**
+     * The player is seeking to a new position.
+     */
+    PlayerEvent["Seek"] = "seek";
     /**
      * Playback has been stopped.
      */
     PlayerEvent["Stop"] = "stop";
     /**
-     * Playback has reached the end of the media.
+     * The current playback time has changed.
+     * Parameters: {@link TimePosition}
      */
-    PlayerEvent["Ended"] = "ended";
+    PlayerEvent["TimeUpdate"] = "timeupdate";
+    /**
+     * The volume has changed.
+     * Parameters: `number` volume in the range 0..1
+     */
+    PlayerEvent["VolumeUpdate"] = "volumeupdate";
 })(PlayerEvent || (PlayerEvent = {}));
 
 // TODO rewrite using the Playback classes and canPlay static methods
@@ -12320,12 +12349,22 @@ var dash_all_minExports = requireDash_all_min();
 const DASHJS = /*@__PURE__*/getDefaultExportFromCjs$1(dash_all_minExports);
 
 /**
+ * Codes of errors occurring within the playback component.
  * @beta
  */
 var PlaybackErrorCode;
 (function (PlaybackErrorCode) {
+    /**
+     * An unknown or uncategorised error.
+     */
     PlaybackErrorCode[PlaybackErrorCode["Generic"] = 0] = "Generic";
+    /**
+     * The media source is not available. Typically a network error.
+     */
     PlaybackErrorCode[PlaybackErrorCode["MediaSourceUnavailable"] = 1] = "MediaSourceUnavailable";
+    /**
+     * The media source is not accessible due to some protection policy.
+     */
     PlaybackErrorCode[PlaybackErrorCode["MediaSourceAccessDenied"] = 3] = "MediaSourceAccessDenied";
 })(PlaybackErrorCode || (PlaybackErrorCode = {}));
 
@@ -12394,13 +12433,15 @@ class DashPlayback extends HTML5Video {
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_START);
         assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to switch levels');
         const dash = this._dash;
-        // TODO use $.extend
-        const settings = this.options.dash ? structuredClone(this.options.dash) : {};
-        settings.streaming = settings.streaming || {};
-        settings.streaming.abr = settings.streaming.abr || {};
-        settings.streaming.abr.autoSwitchBitrate =
-            settings.streaming.abr.autoSwitchBitrate || {};
-        settings.streaming.abr.autoSwitchBitrate.video = id === -1;
+        const settings = $.extend(true, {}, this.options.dash, {
+            streaming: {
+                abr: {
+                    autoSwitchBitrate: {
+                        video: id === -1,
+                    },
+                },
+            },
+        });
         dash.updateSettings(settings);
         if (id !== -1) {
             this._dash.setQualityFor('video', id);
@@ -12468,16 +12509,14 @@ class DashPlayback extends HTML5Video {
         this._dash.initialize();
         if (this.options.dash) {
             // TODO use $.extend
-            const settings = structuredClone(this.options.dash);
-            if (!settings.streaming) {
-                settings.streaming = {};
-            }
-            if (!settings.streaming.text) {
-                settings.streaming.text = {
-                    defaultEnabled: false,
-                };
-            }
-            this._dash.updateSettings(this.options.dash);
+            const settings = $.extend({}, this.options.dash, {
+                streaming: {
+                    text: {
+                        defaultEnabled: false,
+                    },
+                },
+            });
+            this._dash.updateSettings(settings);
         }
         this._dash.attachView(this.el);
         this._dash.setAutoPlay(false);
@@ -12489,13 +12528,14 @@ class DashPlayback extends HTML5Video {
             this._updatePlaybackType();
             this._fillLevels(bitrates);
             dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_REQUESTED, (evt) => {
-                // TODO
-                assert.ok(this._levels, 'An array of levels is required to change quality');
-                const newLevel = this._levels.find((level) => level.level === evt.newQuality); // TODO or simply this._levels[evt.newQuality]?
-                assert.ok(newLevel, 'A valid level is required to change quality');
+                const newLevel = this.getLevel(evt.newQuality);
                 this.onLevelSwitch(newLevel);
             });
         });
+        this._dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_RENDERED, (evt) => {
+            const currentLevel = this.getLevel(evt.newQuality);
+            this.onLevelSwitchEnd(currentLevel);
+        });
         this._dash.on(DASHJS.MediaPlayer.events.METRIC_ADDED, (e) => {
             // Listen for the first manifest request in order to update player UI
             if (e.metric === 'DVRInfo') {
@@ -12639,7 +12679,11 @@ class DashPlayback extends HTML5Video {
     };
     triggerError(error) {
         trace(`${T$2} triggerError`, { error });
-        this.trigger(Events$1.PLAYBACK_ERROR, error);
+        this.trigger(Events$1.PLAYBACK_ERROR, {
+            ...error,
+            origin: this.name,
+            scope: DashPlayback.type,
+        });
         // only reset the dash player in 10ms async, so that the rest of the
         // calling function finishes
         setTimeout(() => {
@@ -12754,8 +12798,10 @@ class DashPlayback extends HTML5Video {
     onLevelSwitch(currentLevel) {
         // TODO check the two below
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH, currentLevel);
+    }
+    onLevelSwitchEnd(currentLevel) {
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_END);
-        const isHD = (currentLevel.height >= 720 || (currentLevel.bitrate / 1000) >= 2000);
+        const isHD = currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
         this.trigger(Events$1.PLAYBACK_HIGHDEFINITIONUPDATE, isHD);
         this.trigger(Events$1.PLAYBACK_BITRATE, currentLevel);
     }
@@ -12765,6 +12811,11 @@ class DashPlayback extends HTML5Video {
     isSeekEnabled() {
         return this._playbackType === Playback.VOD || this.dvrEnabled;
     }
+    getLevel(quality) {
+        const ret = this.levels.find((level) => level.level === quality);
+        assert.ok(ret, 'Invalid quality level');
+        return ret;
+    }
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -41697,6 +41748,7 @@ class HlsPlayback extends HTML5Video {
         this._hls.on(Hls.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data));
         this._hls.on(Hls.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
         this._hls.on(Hls.Events.LEVEL_SWITCHING, (evt, data) => this._onLevelSwitch(evt, data));
+        this._hls.on(Hls.Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitched(evt, data));
         this._hls.on(Hls.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data));
         this._hls.on(Hls.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data));
         this._hls.on(Hls.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data));
@@ -41754,7 +41806,10 @@ class HlsPlayback extends HTML5Video {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$1} _recover failed to recover`, { type: data.type, details: data.details });
+            trace(`${T$1} _recover failed to recover`, {
+                type: data.type,
+                details: data.details,
+            });
             error.level = PlayerError.Levels.FATAL;
             this.triggerError(error);
         }
@@ -41837,12 +41892,18 @@ class HlsPlayback extends HTML5Video {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$1} _onHLSJSError`, { fatal: data.fatal, type: data.type, details: data.details });
+        trace(`${T$1} _onHLSJSError`, {
+            fatal: data.fatal,
+            type: data.type,
+            details: data.details,
+        });
         const error = {
             code: PlaybackErrorCode.Generic,
             description: `${this.name} error: type: ${data.type}, details: ${data.details} fatal: ${data.fatal}`,
             level: data.fatal ? PlayerError.Levels.FATAL : PlayerError.Levels.WARN,
             message: `${this.name} error: type: ${data.type}, details: ${data.details}`,
+            origin: this.name,
+            scope: HlsPlayback.type,
         };
         if (data.response) {
             error.description += `, response: ${JSON.stringify(data.response)}`;
@@ -41922,7 +41983,10 @@ class HlsPlayback extends HTML5Video {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$1} _onHLSJSError non-fatal error occurred`, { type: data.type, details: data.details });
+            trace(`${T$1} _onHLSJSError non-fatal error occurred`, {
+                type: data.type,
+                details: data.details,
+            });
         }
     }
     _keyIsDenied(data) {
@@ -42195,22 +42259,24 @@ class HlsPlayback extends HTML5Video {
         if (!this.levels.length) {
             this._fillLevels();
         }
-        this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_END);
         this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH, data);
-        assert(this._hls, 'Hls.js instance is not available');
-        const currentLevel = this._hls.levels[data.level];
-        if (currentLevel) {
-            // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
-            this.highDefinition =
-                currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
-            this.trigger(Events$1.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
-            this.trigger(Events$1.PLAYBACK_BITRATE, {
-                height: currentLevel.height,
-                width: currentLevel.width,
-                bitrate: currentLevel.bitrate,
-                level: data.level,
-            });
-        }
+    }
+    _onLevelSwitched(evt, data) {
+        // @ts-ignore
+        const currentLevel = this._hls.levels[data.level]; // TODO or find by .id == level?
+        assert.ok(currentLevel, 'Invalid quality level');
+        this._currentLevel = data.level;
+        // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
+        this.highDefinition =
+            currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
+        this.trigger(Events$1.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
+        this.trigger(Events$1.PLAYBACK_BITRATE, {
+            height: currentLevel.height,
+            width: currentLevel.width,
+            bitrate: currentLevel.bitrate,
+            level: data.level,
+        });
+        this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_END);
     }
     get dvrEnabled() {
         // enabled when:
@@ -42258,11 +42324,11 @@ const DEFAULT_OPTIONS = {
 };
 /**
  * The main component to use in the application code.
+ * @beta
  * @remarks
  * The Player object provides very basic API to control playback.
  * To build a sophisticated UI, use the plugins framework to tap into the Clappr core.
  * {@link https://github.com/clappr/clappr/wiki/Architecture}
- * @beta
  */
 class Player {
     config = DEFAULT_OPTIONS;
@@ -42280,8 +42346,8 @@ class Player {
     }
     /**
      * Adds a listener to a player event
-     * @param event - See {@link PlayerEvent}
-     * @param handler - See {@link PlayerEventHandler}
+     * @param event - event type, see {@link PlayerEvent}
+     * @param handler - a callback function to handle the event
      */
     on(event, handler) {
         this.emitter.on(event, handler);
@@ -42289,7 +42355,7 @@ class Player {
     /**
      * Removes a previously added event listener
      * @param event - See {@link PlayerEvent}
-     * @param handler - See {@link PlayerEventHandler}
+     * @param handler - a callback attached earlier to that event type
      */
     off(event, handler) {
         this.emitter.off(event, handler);
@@ -42403,7 +42469,15 @@ class Player {
         return this.player?.isDvrEnabled() ?? false;
     }
     /**
-     * Indicates the playing state of the player.
+     * Indicates whether DVR is in use.
+     * @remarks
+     * DVR mode, if it is enabled, is triggered we a user seeks behind the live edge.
+     */
+    isDvrInUse() {
+        return this.player?.isDvrInUse() ?? false;
+    }
+    /**
+     * Indicates the playing state.
      */
     isPlaying() {
         return this.player?.isPlaying() ?? false;
@@ -42436,7 +42510,7 @@ class Player {
      * Resizes the player container element and everything within it.
      * @param newSize - new size of the player
      * @remarks
-     * Use this method when the player itself does not detect the change in size of its container element.
+     * Use this method when the player itself does not detect properly the change in size of its container element.
      * It can be a case for orientation change on some mobile devices.
      */
     resize(newSize) {
@@ -42533,32 +42607,7 @@ class Player {
         const player = this.player;
         this.bindContainerEventListeners(player);
         player.core.on(Events$1.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindContainerEventListeners(player), null);
-        player.core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T} CORE_SCREEN_ORIENTATION_CHANGED`, {
-                orientation,
-                rootNode: {
-                    width: this.rootNode?.clientWidth,
-                    height: this.rootNode?.clientHeight,
-                },
-            });
-            if (Browser.isiOS && this.rootNode) {
-                player.core.resize({
-                    width: this.rootNode.clientWidth,
-                    height: this.rootNode.clientHeight,
-                });
-            }
-        }, null);
-        player.core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T} CORE_RESIZE`, {
-                width,
-                height,
-            });
-        }, null);
-        player.core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T} CORE_FULLSCREEN`, {
-                isFullscreen,
-            });
-        }, null);
+        this.bindSizeManagementListeners(player);
         if (this.config.autoPlay) {
             setTimeout(() => {
                 trace(`${T} autoPlay`, {
@@ -42576,6 +42625,15 @@ class Player {
             reportError(e);
         }
     }
+    safeTriggerEvent(event, ...args) {
+        try {
+            this.emitter.emit(event, ...args);
+        }
+        catch (e) {
+            reportError(e);
+        }
+    }
+    // TODO test
     events = {
         onReady: () => {
             trace(`${T} onReady`, {
@@ -42592,42 +42650,29 @@ class Player {
             // TODO ensure that CORE_ACTIVE_CONTAINER_CHANGED does not get caught before onReady
             setTimeout(() => this.tuneIn(), 0);
         },
-        onResize: (newSize) => {
-            trace(`${T} onResize`, {
-                newSize,
-            });
-        },
         onPlay: () => {
-            try {
-                this.emitter.emit(PlayerEvent.Play);
-            }
-            catch (e) {
-                reportError(e);
-            }
+            this.safeTriggerEvent(PlayerEvent.Play);
         },
         onPause: () => {
-            try {
-                this.emitter.emit(PlayerEvent.Pause);
-            }
-            catch (e) {
-                reportError(e);
-            }
+            this.safeTriggerEvent(PlayerEvent.Pause);
         },
         onEnded: () => {
-            try {
-                this.emitter.emit(PlayerEvent.Ended);
-            }
-            catch (e) {
-                reportError(e);
-            }
+            this.safeTriggerEvent(PlayerEvent.Ended);
+        },
+        onSeek: (time) => {
+            this.safeTriggerEvent(PlayerEvent.Seek, time);
         },
         onStop: () => {
-            try {
-                this.emitter.emit(PlayerEvent.Stop);
-            }
-            catch (e) {
-                reportError(e);
-            }
+            this.safeTriggerEvent(PlayerEvent.Stop);
+        },
+        onVolumeUpdate: (volume) => {
+            this.safeTriggerEvent(PlayerEvent.VolumeUpdate, volume);
+        },
+        onTimeUpdate: (time) => {
+            this.safeTriggerEvent(PlayerEvent.TimeUpdate, time);
+        },
+        onError: (error) => {
+            this.safeTriggerEvent(PlayerEvent.Error, error);
         },
     };
     buildCoreOptions(rootNode) {
@@ -42655,6 +42700,7 @@ class Player {
                 mute: this.config.mute,
                 crossOrigin: 'anonymous', // TODO
                 hlsjsConfig: {
+                    // TODO
                     debug: this.config.debug === 'all' || this.config.debug === 'hls',
                 },
             },
@@ -42663,7 +42709,7 @@ class Player {
             width: rootNode.clientWidth,
             source: source ? source.source : undefined,
             mimeType: source ? source.mimeType : undefined,
-            sources, // prevent Clappr from loading all sources simultaneously
+            sources,
             strings: this.config.strings,
         };
         return coreOptions;
@@ -42677,9 +42723,6 @@ class Player {
         this.config.sources.map((s) => wrapSource(s)), this.config.priorityTransport);
     }
     bindContainerEventListeners(player) {
-        trace(`${T} bindContainerEventListeners`, {
-            activePlayback: player.core.activePlayback?.name,
-        });
         if (Browser.isiOS && player.core.activePlayback) {
             player.core.activePlayback.$el.on('webkitendfullscreen', () => {
                 try {
@@ -42691,9 +42734,39 @@ class Player {
             });
         }
     }
+    bindSizeManagementListeners(player) {
+        player.core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
+            trace(`${T} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+                orientation,
+                rootNode: {
+                    width: this.rootNode?.clientWidth,
+                    height: this.rootNode?.clientHeight,
+                },
+            });
+            if (Browser.isiOS && this.rootNode) {
+                player.core.resize({
+                    width: this.rootNode.clientWidth,
+                    height: this.rootNode.clientHeight,
+                });
+            }
+        }, null);
+        player.core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
+            trace(`${T} on CORE_RESIZE`, {
+                width,
+                height,
+            });
+            this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
+        }, null);
+        player.core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
+            trace(`${T} CORE_FULLSCREEN`, {
+                isFullscreen,
+            });
+            this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
+        }, null);
+    }
 }
 
-var version$1 = "2.17.0";
+var version$1 = "2.18.0";
 
 var packages = {
 	"node_modules/@clappr/core": {