@gcorevideo/player 2.22.30 → 2.22.31

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.30";
+var version$1 = "2.22.31";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -50001,7 +50001,7 @@ class PlaybackRate extends UICorePlugin {
     }
 }
 
-const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
+const posterHTML = "<div class=\"play-wrapper\" id=\"gplayer-poster\">\n    <div class='circle-poster gcore-skin-button-color gcore-skin-border-color' id='poster-play'></div>\n</div>\n";
 
 //Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
@@ -50011,19 +50011,13 @@ const T$8 = 'plugins.poster';
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
  * @remarks
- * When the playback is stopped, media control UI is disabled.
+ * When the playback is stopped or not yet started, the media control UI is disabled and hidden.
+ * Media control gets activated once the metadata is loaded after playback is initiated.
+ * This plugin displays a big play button on top of the poster image to allow user to start playback.
  * Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the
  * HTML5-video-based playback module.
  *
- * Configuration options:
- *
- * - `poster.custom` - custom CSS background
- *
- * - `poster.showForNoOp` - whether to show the poster when the playback is not started
- *
- * - `poster.url` - the URL of the poster image
- *
- * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ * Configuration options - {@link PosterPluginSettings}
  *
  * @example
  * ```ts
@@ -50039,10 +50033,9 @@ const T$8 = 'plugins.poster';
 class Poster extends UIContainerPlugin {
     // TODO merge non-poster related functionality into the ClickToPause plugin
     hasFatalError = false;
-    hasStartedPlaying = false;
+    playing = false;
     playRequested = false;
     $playButton = null;
-    $playWrapper = null;
     /**
      * @internal
      */
@@ -50062,8 +50055,10 @@ class Poster extends UIContainerPlugin {
         }
         const showForNoOp = !!this.options.poster?.showForNoOp;
         return (this.container.playback.name !== 'html_img' &&
-            (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
-                showForNoOp));
+            (!this.isNoOp || showForNoOp));
+    }
+    get isNoOp() {
+        return this.container.playback.getPlaybackType() === Playback.NO_OP;
     }
     /**
      * @internal
@@ -50071,7 +50066,6 @@ class Poster extends UIContainerPlugin {
     get attributes() {
         return {
             class: 'player-poster',
-            'data-poster': '',
         };
     }
     /**
@@ -50082,9 +50076,6 @@ class Poster extends UIContainerPlugin {
             click: 'clicked',
         };
     }
-    get showOnVideoEnd() {
-        return this.options.poster?.showOnVideoEnd !== false;
-    }
     /**
      * @internal
      */
@@ -50093,19 +50084,22 @@ class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events$1.CONTAINER_PLAY, this.onPlay);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.update);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERFULL, this.update);
-        this.listenTo(this.container, Events$1.CONTAINER_OPTIONS_CHANGE, this.render);
+        this.listenTo(this.container, Events$1.CONTAINER_OPTIONS_CHANGE, this.update);
         this.listenTo(this.container, Events$1.CONTAINER_ERROR, this.onError);
-        this.showOnVideoEnd &&
+        // TODO check if this event is always accompanied with the CONTAINER_STOP
+        if (this.options.poster?.showOnVideoEnd !== false) {
             this.listenTo(this.container, Events$1.CONTAINER_ENDED, this.onStop);
+        }
         this.listenTo(this.container, Events$1.CONTAINER_READY, this.render);
-        this.listenTo(this.container, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
+        this.listenTo(this.container.playback, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
     }
     /**
      * Reenables earlier disabled plugin
      */
     enable() {
+        trace(`${T$8} enable`);
         super.enable();
-        this.hasStartedPlaying = this.container.playback.isPlaying();
+        this.playing = this.container.playback.isPlaying();
         this.update();
     }
     /**
@@ -50113,7 +50107,7 @@ class Poster extends UIContainerPlugin {
      */
     disable() {
         trace(`${T$8} disable`);
-        this.hasStartedPlaying = false;
+        this.playing = false;
         this.playRequested = false;
         super.disable();
     }
@@ -50122,17 +50116,15 @@ class Poster extends UIContainerPlugin {
             error,
             enabled: this.enabled,
         });
-        this.hasFatalError = error.level === PlayerError.Levels.FATAL;
         if (this.hasFatalError) {
-            this.hasStartedPlaying = false;
-            if (!this.playRequested) {
-                this.showPlayButton();
-            }
+            return;
         }
+        this.hasFatalError = error.level === PlayerError.Levels.FATAL;
+        // this.hasFatalError is reset on container recreate
     }
     onPlay() {
         trace(`${T$8} onPlay`);
-        this.hasStartedPlaying = true;
+        this.playing = true;
         this.playRequested = false;
         this.update();
     }
@@ -50142,21 +50134,21 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     onStop() {
-        trace(`${T$8} onStop`, {
-            enabled: this.enabled,
-        });
-        this.hasStartedPlaying = false;
+        trace(`${T$8} onStop`);
+        this.playing = false;
         this.playRequested = false;
         this.update();
     }
-    updatePlayButton(show) {
-        trace(`${T$8} updatePlayButton`, {
-            show,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
-        if (show &&
-            (!this.options.chromeless || this.options.allowUserInteraction)) {
+    updatePlayButton() {
+        trace(`${T$8} updatePlayButton`);
+        const show = !this.isNoOp &&
+            !(this.options.chromeless && !this.options.allowUserInteraction) &&
+            !this.playRequested &&
+            !this.playing &&
+            !this.container.buffering &&
+            !this.hasFatalError &&
+            !this.options.disableMediaControl;
+        if (show) {
             this.showPlayButton();
         }
         else {
@@ -50164,59 +50156,42 @@ class Poster extends UIContainerPlugin {
         }
     }
     showPlayButton() {
-        if (this.options.disableMediaControl) {
-            return;
-        }
-        if (this.hasFatalError && !this.options.disableErrorScreen) {
-            return;
-        }
-        this.$playButton?.show();
+        trace(`${T$8} showPlayButton`);
+        this.$el.find('#poster-play').show();
         this.$el.addClass('clickable');
         this.container.$el.addClass('container-with-poster-clickable');
     }
     hidePlayButton() {
-        this.$playButton.hide();
+        trace(`${T$8} hidePlayButton`);
+        this.$el.find('#poster-play').hide();
         this.$el.removeClass('clickable');
     }
-    clicked() {
-        trace(`${T$8} clicked`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
+    clicked(e) {
+        trace(`${T$8} clicked`);
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.options.chromeless && !this.options.allowUserInteraction) {
+            return;
+        }
         // Let "click_to_pause" plugin handle click event if media has started playing
-        if (!this.hasStartedPlaying) {
-            if (!this.options.chromeless || this.options.allowUserInteraction) {
-                this.playRequested = true;
-                this.update();
-                this.container.playback.consent();
-                this.container.playback.play();
-            }
+        if (!this.playing) {
+            this.playRequested = true;
+            this.update();
+            this.container.play();
         }
-        return false;
     }
     shouldHideOnPlay() {
         // Audio broadcasts should keep the poster up; video should hide poster while playing.
         return !this.container.playback.isAudioOnly;
     }
     update() {
-        trace(`${T$8} update`, {
-            shouldRender: this.shouldRender,
-        });
-        if (!this.shouldRender) {
-            return;
-        }
-        const showPlayButton = !this.playRequested &&
-            !this.hasStartedPlaying &&
-            !this.container.buffering;
-        this.updatePlayButton(showPlayButton);
+        trace(`${T$8} update`);
+        this.updatePlayButton();
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$8} updatePoster`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-        });
-        if (!this.hasStartedPlaying) {
+        trace(`${T$8} updatePoster`);
+        if (!this.playing) {
             this.showPoster();
         }
         else {
@@ -50228,9 +50203,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$8} hidePoster`, {
-            shouldHideOnPlay: this.shouldHideOnPlay(),
-        });
+        trace(`${T$8} hidePoster`);
         if (!this.options.disableMediaControl) {
             this.container.enableMediaControl();
         }
@@ -50246,27 +50219,24 @@ class Poster extends UIContainerPlugin {
             return this;
         }
         this.$el.html(Poster.template());
-        const isRegularPoster = this.options.poster && this.options.poster.custom === undefined;
-        if (isRegularPoster) {
-            const posterUrl = this.options.poster.url || this.options.poster;
-            this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
-        }
-        else if (this.options.poster) {
+        const isCustomPoster = this.options.poster?.custom !== undefined;
+        if (isCustomPoster) {
             this.$el.css({ background: this.options.poster.custom });
         }
+        else {
+            const posterUrl = typeof this.options.poster === 'string'
+                ? this.options.poster
+                : this.options.poster?.url;
+            if (posterUrl) {
+                this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
+            }
+        }
         this.container.$el.removeClass('container-with-poster-clickable');
         this.container.$el.append(this.el);
-        this.$playWrapper = this.$el.find('.play-wrapper');
-        this.$playWrapper.addClass('control-need-disable');
-        this.$playButton = $("<div class='circle-poster gcore-skin-button-color gcore-skin-border-color'></div>");
-        this.$playWrapper.append(this.$playButton);
-        this.$playButton.append(playIcon);
-        if (this.options.autoPlay) {
-            this.$playButton.hide();
+        this.$el.find('#poster-play').append(playIcon);
+        if (this.options.autoPlay || this.isNoOp) {
+            this.$el.find('#poster-play').hide();
         }
-        this.$playButton.addClass('poster-icon');
-        this.$playButton.attr('data-poster', '');
-        this.update();
         return this;
     }
     /**

package/dist/player.d.ts

@@ -96,7 +96,7 @@ declare class AudioTracks extends UICorePlugin {
     private onTrackSelect;
     private selectAudioTrack;
     private hideMenu;
-    private toggleContextMenu;
+    private toggleMenu;
     private buttonElement;
     private buttonElementText;
     private trackElement;
@@ -227,7 +227,7 @@ export declare class BigMuteButton extends UICorePlugin {
  * ```
  */
 export declare class BottomGear extends UICorePlugin {
-    private isHd;
+    private hd;
     /**
      * @internal
      */
@@ -349,6 +349,7 @@ export declare class ClapprStats extends ContainerPlugin {
      * @returns Measurements collected so far
      */
     exportMetrics(): ClapprStatsMetrics;
+    clearMetrics(): void;
     private onBitrate;
     private stopReporting;
     private startTimers;
@@ -603,7 +604,7 @@ export declare interface ClipsPluginSettings {
  */
 declare class ClosedCaptions extends UICorePlugin {
     private isPreselectedApplied;
-    private isShowing;
+    private active;
     private track;
     private tracks;
     private $line;
@@ -633,8 +634,8 @@ declare class ClosedCaptions extends UICorePlugin {
      * @internal
      */
     get events(): {
-        'click [data-cc-select]': string;
-        'click [data-cc-button]': string;
+        'click #cc-select li a': string;
+        'click #cc-button': string;
     };
     private get preselectedLanguage();
     /**
@@ -932,7 +933,8 @@ export declare type ErrorScreenSettings = {
 };
 
 export declare enum ExtendedEvents {
-    MEDIACONTROL_VOLUME = "mediacontrol:volume"
+    MEDIACONTROL_VOLUME = "mediacontrol:volume",
+    MEDIACONTROL_MENU_COLLAPSE = "mediacontrol:menu:collapse"
 }
 
 /**
@@ -1182,7 +1184,6 @@ export declare class MediaControl extends UICorePlugin {
         'click [data-stop]': string;
         'click [data-playstop]': string;
         'click [data-fullscreen]': string;
-        'click .bar-container[data-seekbar]': string;
         'click .bar-container[data-volume]': string;
         'click .drawer-icon[data-volume]': string;
         'mouseenter .drawer-container[data-volume]': string;
@@ -1538,6 +1539,7 @@ declare class NerdStats extends UICorePlugin {
     private updateResolution;
     private estimateQuality;
     private updateMetrics;
+    private updateCustomMetrics;
     private updateEstimatedQuality;
     private setStatsBoxSize;
     /**
@@ -2446,45 +2448,59 @@ export declare interface QualityLevelsPluginSettings {
 export { reportError_2 as reportError }
 
 /**
- * `PLUGIN` that adds a seek time indicator to the media control UI.
+ * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
+ * @remarks
+ * Configuration options - {@link SeekTimeSettings}
  */
 export declare class SeekTime extends UICorePlugin {
     get name(): string;
     get supportedVersion(): {
         min: string;
     };
-    get template(): any;
+    private static readonly template;
     get attributes(): {
         class: string;
-        'data-seek-time': string;
     };
-    get mediaControl(): any;
-    get mediaControlContainer(): any;
-    get isLiveStreamWithDvr(): any;
-    get durationShown(): boolean;
+    private get isLiveStreamWithDvr();
+    private get showDuration();
     private hoveringOverSeekBar;
     private hoverPosition;
     private displayedDuration;
     private displayedSeekTime;
     private duration;
-    private rendered;
-    private $durationEl;
-    private $seekTimeEl;
+    /**
+     * @internal
+     */
     bindEvents(): void;
+    private onCoreReady;
     private onContainerChanged;
     private onTimeUpdate;
     private showTime;
     private hideTime;
     private calculateHoverPosition;
-    getSeekTime(): {
-        seekTime: number;
-    };
-    update(): void;
-    shouldBeVisible(): any;
+    private getSeekTime;
+    private update;
+    private shouldBeVisible;
+    /**
+     * @internal
+     */
     render(): this;
+    private mount;
 }
 
+/**
+ * Configuration options for the SeekTime plugin.
+ * @beta
+ */
+export declare type SeekTimeSettings = {
+    /**
+     * Whether to show the duration of the video. Applies only to the VOD streams.
+     * @beta
+     */
+    duration?: boolean;
+};
+
 export { SentryTracer }
 
 export { setTracer }
@@ -2530,7 +2546,7 @@ export declare class Share extends UICorePlugin {
 }
 
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 export declare class SkipTime extends UICorePlugin {
@@ -2539,24 +2555,38 @@ export declare class SkipTime extends UICorePlugin {
         min: string;
     };
     get container(): any;
-    get template(): any;
+    private static readonly template;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
-        'data-skip-time': string;
     };
     private position;
+    /**
+     * @internal
+     */
     get events(): {
-        'click [data-skip-left]': string;
-        'click [data-skip-mid]': string;
-        'click [data-skip-right]': string;
+        'click #mc-skip-left': string;
+        'click #mc-skip-mid': string;
+        'click #mc-skip-right': string;
     };
+    /**
+     * @internal
+     */
     bindEvents(): void;
-    setBack(): void;
-    handleRewindClicks(): void;
-    setMidClick(): void;
-    setForward(): void;
-    toggleFullscreen(): void;
+    private onContainerChanged;
+    private setBack;
+    private handleRewindClicks;
+    private handleSkip;
+    private setMidClick;
+    private setForward;
+    private toggleFullscreen;
+    /**
+     * @internal
+     */
     render(): this;
+    private mount;
 }
 
 /**

package/docs/api/{player.seektime.bindevents.md → player.clapprstats.clearmetrics.md}

@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [SeekTime](./player.seektime.md) &gt; [bindEvents](./player.seektime.bindevents.md)
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [ClapprStats](./player.clapprstats.md) &gt; [clearMetrics](./player.clapprstats.clearmetrics.md)
 
-## SeekTime.bindEvents() method
+## ClapprStats.clearMetrics() method
 
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
@@ -10,7 +10,7 @@
 **Signature:**
 
 ```typescript
-bindEvents(): void;
+clearMetrics(): void;
 ```
 **Returns:**
 

package/docs/api/player.clapprstats.md

@@ -74,6 +74,20 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[clearMetrics()](./player.clapprstats.clearmetrics.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_**
+
+
+</td></tr>
+<tr><td>
+
 [exportMetrics()](./player.clapprstats.exportmetrics.md)
 
 

package/docs/api/player.extendedevents.md

@@ -30,6 +30,20 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+MEDIACONTROL\_MENU\_COLLAPSE
+
+
+</td><td>
+
+`"mediacontrol:menu:collapse"`
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
 MEDIACONTROL\_VOLUME
 
 

package/docs/api/player.md

@@ -281,7 +281,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** `PLUGIN` that adds a seek time indicator to the media control UI.
+**_(BETA)_** `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
 
 
 </td></tr>
@@ -303,7 +303,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** `PLUGIN` that adds skip controls to the media control UI.
+**_(BETA)_** `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
 
 
 </td></tr>
@@ -1016,6 +1016,17 @@ A media source to fetch the media data from
 
 
 
+</td></tr>
+<tr><td>
+
+[SeekTimeSettings](./player.seektimesettings.md)
+
+
+</td><td>
+
+**_(BETA)_** Configuration options for the SeekTime plugin.
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.seektime.attributes.md

@@ -12,6 +12,5 @@
 ```typescript
 get attributes(): {
         class: string;
-        'data-seek-time': string;
     };
 ```