@gcorevideo/player 2.22.30 → 2.23.0

package/lib/plugins/poster/Poster.js

@@ -1,7 +1,7 @@
 //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, Playback, PlayerError, UIContainerPlugin, template, $, } from '@clappr/core';
+import { Events, Playback, PlayerError, UIContainerPlugin, template, } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 import { CLAPPR_VERSION } from '../../build.js';
 import '../../../assets/poster/poster.scss';
@@ -12,19 +12,13 @@ const T = '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
@@ -40,10 +34,9 @@ const T = 'plugins.poster';
 export 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
      */
@@ -63,8 +56,10 @@ export 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
@@ -72,7 +67,6 @@ export class Poster extends UIContainerPlugin {
     get attributes() {
         return {
             class: 'player-poster',
-            'data-poster': '',
         };
     }
     /**
@@ -83,9 +77,6 @@ export class Poster extends UIContainerPlugin {
             click: 'clicked',
         };
     }
-    get showOnVideoEnd() {
-        return this.options.poster?.showOnVideoEnd !== false;
-    }
     /**
      * @internal
      */
@@ -94,19 +85,22 @@ export class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
         this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.update);
         this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.update);
-        this.listenTo(this.container, Events.CONTAINER_OPTIONS_CHANGE, this.render);
+        this.listenTo(this.container, Events.CONTAINER_OPTIONS_CHANGE, this.update);
         this.listenTo(this.container, Events.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.CONTAINER_ENDED, this.onStop);
+        }
         this.listenTo(this.container, Events.CONTAINER_READY, this.render);
-        this.listenTo(this.container, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
+        this.listenTo(this.container.playback, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
     }
     /**
      * Reenables earlier disabled plugin
      */
     enable() {
+        trace(`${T} enable`);
         super.enable();
-        this.hasStartedPlaying = this.container.playback.isPlaying();
+        this.playing = this.container.playback.isPlaying();
         this.update();
     }
     /**
@@ -114,7 +108,7 @@ export class Poster extends UIContainerPlugin {
      */
     disable() {
         trace(`${T} disable`);
-        this.hasStartedPlaying = false;
+        this.playing = false;
         this.playRequested = false;
         super.disable();
     }
@@ -123,17 +117,15 @@ export 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} onPlay`);
-        this.hasStartedPlaying = true;
+        this.playing = true;
         this.playRequested = false;
         this.update();
     }
@@ -143,21 +135,21 @@ export class Poster extends UIContainerPlugin {
         this.update();
     }
     onStop() {
-        trace(`${T} onStop`, {
-            enabled: this.enabled,
-        });
-        this.hasStartedPlaying = false;
+        trace(`${T} onStop`);
+        this.playing = false;
         this.playRequested = false;
         this.update();
     }
-    updatePlayButton(show) {
-        trace(`${T} updatePlayButton`, {
-            show,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
-        if (show &&
-            (!this.options.chromeless || this.options.allowUserInteraction)) {
+    updatePlayButton() {
+        trace(`${T} 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 {
@@ -165,59 +157,42 @@ export class Poster extends UIContainerPlugin {
         }
     }
     showPlayButton() {
-        if (this.options.disableMediaControl) {
-            return;
-        }
-        if (this.hasFatalError && !this.options.disableErrorScreen) {
-            return;
-        }
-        this.$playButton?.show();
+        trace(`${T} 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} hidePlayButton`);
+        this.$el.find('#poster-play').hide();
         this.$el.removeClass('clickable');
     }
-    clicked() {
-        trace(`${T} clicked`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
+    clicked(e) {
+        trace(`${T} 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} update`, {
-            shouldRender: this.shouldRender,
-        });
-        if (!this.shouldRender) {
-            return;
-        }
-        const showPlayButton = !this.playRequested &&
-            !this.hasStartedPlaying &&
-            !this.container.buffering;
-        this.updatePlayButton(showPlayButton);
+        trace(`${T} update`);
+        this.updatePlayButton();
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T} updatePoster`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-        });
-        if (!this.hasStartedPlaying) {
+        trace(`${T} updatePoster`);
+        if (!this.playing) {
             this.showPoster();
         }
         else {
@@ -229,9 +204,7 @@ export class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T} hidePoster`, {
-            shouldHideOnPlay: this.shouldHideOnPlay(),
-        });
+        trace(`${T} hidePoster`);
         if (!this.options.disableMediaControl) {
             this.container.enableMediaControl();
         }
@@ -247,27 +220,24 @@ export 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/lib/plugins/thumbnails/Thumbnails.d.ts

@@ -1,20 +1,26 @@
-import { UICorePlugin } from '@clappr/core';
+import { UICorePlugin, Core } from '@clappr/core';
 import '../../../assets/thumbnails/style.scss';
 /**
  * Plugin configuration options for the thumbnails plugin.
  * @beta
  */
 export type ThumbnailsPluginSettings = {
-    backdropHeight: number;
-    backdropMaxOpacity: number;
-    backdropMinOpacity: number;
-    spotlightHeight: number;
+    backdropHeight?: number;
+    backdropMaxOpacity?: number;
+    backdropMinOpacity?: number;
+    spotlightHeight?: number;
     sprite: string;
     vtt: string;
 };
 /**
  * `PLUGIN` that displays the thumbnails of the video when available.
  * @beta
+ * @remarks
+ * The plugin needs specially crafted VTT file with a thumbnail sprite sheet to work.
+ * The VTT consist of timestamp records followed by a thumbnail area
+ *
+ * Configuration options - {@link ThumbnailsPluginSettings}
+ *
  * @example
  * ```ts
  * import { Thumbnails } from '@gcorevideo/player'
@@ -35,19 +41,15 @@ export type ThumbnailsPluginSettings = {
  * ```
  */
 export declare class Thumbnails extends UICorePlugin {
-    private _$spotlight;
-    private _$backdrop;
-    private $container;
-    private $img;
-    private _$carousel;
-    private $textThumbnail;
-    private _$backdropCarouselImgs;
+    private $backdropCarouselImgs;
     private spriteSheetHeight;
-    private _hoverPosition;
-    private _show;
-    private _thumbsLoaded;
-    private _oldContainer;
-    private _thumbs;
+    private spriteSheetWidth;
+    private hoverPosition;
+    private showing;
+    private thumbsLoaded;
+    private spotlightHeight;
+    private backdropHeight;
+    private thumbs;
     /**
      * @internal
      */
@@ -65,28 +67,29 @@ export declare class Thumbnails extends UICorePlugin {
         class: string;
     };
     private static readonly template;
+    constructor(core: Core);
     private buildSpriteConfig;
     /**
      * @internal
      */
     bindEvents(): void;
-    private _bindContainerEvents;
-    private _onCoreReady;
+    private bindContainerEvents;
+    private onCoreReady;
     private loadSpriteSheet;
-    private _onMediaControlContainerChanged;
-    private _init;
-    private _getOptions;
-    private _appendElToMediaControl;
-    private _onMouseMove;
-    private _onMouseLeave;
-    private _calculateHoverPosition;
-    private _buildImg;
-    private _loadBackdrop;
+    private onContainerChanged;
+    private init;
+    private mount;
+    private onMouseMoveSeekbar;
+    private onMouseLeave;
+    private buildThumbImage;
+    private loadBackdrop;
     private setText;
-    private _updateCarousel;
-    private _updateSpotlightThumb;
-    private _getThumbIndexForTime;
-    private _renderPlugin;
-    private _createElements;
+    private updateCarousel;
+    private updateSpotlightThumb;
+    private getThumbIndexForTime;
+    private update;
+    private fixElements;
+    private get shouldRender();
+    render(): this;
 }
 //# sourceMappingURL=Thumbnails.d.ts.map

package/lib/plugins/thumbnails/Thumbnails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkC,MAAM,cAAc,CAAA;AAS3E,OAAO,uCAAuC,CAAA;AAI9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,EAAE,MAAM,CAAA;IACtB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,cAAc,CAA2B;IAEjD,OAAO,CAAC,sBAAsB,CAAoB;IAElD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,KAAK,CAAQ;IAErB,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,aAAa,CAAyB;IAE9C,OAAO,CAAC,OAAO,CAAc;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAcvD,OAAO,CAAC,iBAAiB;IAmCzB;;OAEG;IACM,UAAU;IAwBnB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,YAAY;YAiCN,eAAe;IAY7B,OAAO,CAAC,+BAA+B;IAIvC,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,uBAAuB;IAgF/B,OAAO,CAAC,SAAS;IA2BjB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,eAAe;IA4EvB,OAAO,CAAC,qBAAqB;IA8C7B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,eAAe;CAgBxB"}
+{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,qBAAqB,CAAoB;IAEjD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,gBAAgB,CAAY;IAEpC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,MAAM,CAAsB;IAEpC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;gBAE3C,IAAI,EAAE,IAAI;IAgBtB,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,WAAW;YAmDL,eAAe;IAO7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IA+C5B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,WAAW;IAgBnB,OAAO,KAAK,YAAY,GAMvB;IAEQ,MAAM;CAShB"}