@gcorevideo/player 2.22.30 → 2.22.31

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/testUtils.d.ts

@@ -1,39 +1,5 @@
 import { UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
-/**
- * @internal
- * @deprecated
- * TODO use createMockPlayback() instead
- */
-export declare class _MockPlayback extends Events {
-    protected options: any;
-    readonly i18n: any;
-    protected playerError?: any | undefined;
-    constructor(options: any, i18n: any, playerError?: any | undefined);
-    get name(): string;
-    consent(): void;
-    play(): void;
-    pause(): void;
-    stop(): void;
-    destroy(): void;
-    seek(): void;
-    seekPercentage(): void;
-    getDuration(): number;
-    enterPiP(): void;
-    exitPiP(): void;
-    getPlaybackType(): string;
-    getStartTimeOffset(): number;
-    getCurrentTime(): number;
-    isHighDefinitionInUse(): boolean;
-    mute(): void;
-    unmute(): void;
-    volume(): void;
-    configure(): void;
-    attemptAutoPlay(): boolean;
-    canAutoPlay(): boolean;
-    onResize(): boolean;
-    trigger(event: string, ...args: any[]): void;
-}
 export declare function createMockCore(options?: Record<string, unknown>, container?: any): Events<string | symbol, any> & {
     el: HTMLDivElement;
     $el: any;
@@ -68,11 +34,12 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     el: HTMLVideoElement;
     dvrEnabled: boolean;
     dvrInUse: boolean;
+    isAudioOnly: boolean;
     levels: never[];
-    consent(): void;
-    play(): void;
-    pause(): void;
-    stop(): void;
+    consent: import("vitest").Mock<(...args: any[]) => any>;
+    play: import("vitest").Mock<(...args: any[]) => any>;
+    pause: import("vitest").Mock<(...args: any[]) => any>;
+    stop: import("vitest").Mock<(...args: any[]) => any>;
     destroy: import("vitest").Mock<(...args: any[]) => any>;
     seek: import("vitest").Mock<(...args: any[]) => any>;
     seekPercentage: import("vitest").Mock<(...args: any[]) => any>;
@@ -97,13 +64,20 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
 export declare function createMockContainer(options?: Record<string, unknown>, playback?: any): Events<string | symbol, any> & {
     el: any;
     playback: any;
-    options: Record<string, unknown>;
+    options: {
+        [x: string]: unknown;
+    };
     $el: any;
+    disableMediaControl: import("vitest").Mock<(...args: any[]) => any>;
+    enableMediaControl: import("vitest").Mock<(...args: any[]) => any>;
+    enterPiP: import("vitest").Mock<(...args: any[]) => any>;
+    exitPiP: import("vitest").Mock<(...args: any[]) => any>;
     getDuration: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     getPlaybackType: import("vitest").Mock<(...args: any[]) => any>;
     isDvrInUse: import("vitest").Mock<(...args: any[]) => any>;
     isDvrEnabled: import("vitest").Mock<(...args: any[]) => any>;
+    isHighDefinitionInUse: import("vitest").Mock<(...args: any[]) => any>;
     isPlaying: import("vitest").Mock<(...args: any[]) => any>;
     play: import("vitest").Mock<(...args: any[]) => any>;
     seek: import("vitest").Mock<(...args: any[]) => any>;

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;EAqBrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;;;;;;;;EA4BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -1,65 +1,6 @@
-import { $, Playback, UICorePlugin } from '@clappr/core';
+import { $, UICorePlugin } from '@clappr/core';
 import Events from 'eventemitter3';
 import { vi } from 'vitest';
-/**
- * @internal
- * @deprecated
- * TODO use createMockPlayback() instead
- */
-export class _MockPlayback extends Events {
-    options;
-    i18n;
-    playerError;
-    constructor(options, i18n, playerError) {
-        super();
-        this.options = options;
-        this.i18n = i18n;
-        this.playerError = playerError;
-    }
-    get name() {
-        return 'mock';
-    }
-    consent() { }
-    play() { }
-    pause() { }
-    stop() { }
-    destroy() { }
-    seek() { }
-    seekPercentage() { }
-    getDuration() {
-        return 100;
-    }
-    enterPiP() { }
-    exitPiP() { }
-    getPlaybackType() {
-        return Playback.LIVE;
-    }
-    getStartTimeOffset() {
-        return 0;
-    }
-    getCurrentTime() {
-        return 0;
-    }
-    isHighDefinitionInUse() {
-        return false;
-    }
-    mute() { }
-    unmute() { }
-    volume() { }
-    configure() { }
-    attemptAutoPlay() {
-        return true;
-    }
-    canAutoPlay() {
-        return true;
-    }
-    onResize() {
-        return true;
-    }
-    trigger(event, ...args) {
-        this.emit(event, ...args);
-    }
-}
 export function createMockCore(options = {}, container = createMockContainer(options)) {
     const el = document.createElement('div');
     const emitter = new Events();
@@ -101,11 +42,12 @@ export function createMockPlayback(name = 'mock') {
         el: document.createElement('video'),
         dvrEnabled: false,
         dvrInUse: false,
+        isAudioOnly: false,
         levels: [],
-        consent() { },
-        play() { },
-        pause() { },
-        stop() { },
+        consent: vi.fn(),
+        play: vi.fn(),
+        pause: vi.fn(),
+        stop: vi.fn(),
         destroy: vi.fn(),
         seek: vi.fn(),
         seekPercentage: vi.fn(),
@@ -134,13 +76,20 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
     return Object.assign(emitter, {
         el,
         playback,
-        options,
+        options: {
+            ...options,
+        },
         $el: $(el),
+        disableMediaControl: vi.fn(),
+        enableMediaControl: vi.fn(),
+        enterPiP: vi.fn(),
+        exitPiP: vi.fn(),
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
         getPlaybackType: vi.fn(),
         isDvrInUse: vi.fn().mockReturnValue(false),
         isDvrEnabled: vi.fn().mockReturnValue(false),
+        isHighDefinitionInUse: vi.fn().mockReturnValue(false),
         isPlaying: vi.fn().mockReturnValue(false),
         play: vi.fn(),
         seek: vi.fn(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.30",
+  "version": "2.22.31",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -246,7 +246,7 @@ exports[`MediaControl > rendering timing > once metadata is loaded > should wait
                 <span class="drawer-text" data-volume=""></span>
             </div>
             
-    <div class="bar-container volume-bar-hide" data-volume="">
+    <div class="bar-container" data-volume="">
         <div class="bar-background" data-volume="">
             <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style="width: 100%;"></div>
         </div>