@gcorevideo/player 2.22.30 → 2.23.0

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,gBAc/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(),
@@ -151,12 +100,11 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
 }
 export function createMockMediaControl(core) {
     const mediaControl = new UICorePlugin(core);
+    // TODO <div class="media-control-layer">
     mediaControl.$el.html(`<div class="media-control-left-panel" data-media-control></div>
     <div class="media-control-right-panel" data-media-control></div>
     <div class="media-control-center-panel" data-media-control></div>`);
     // @ts-ignore
-    mediaControl.putElement = vi.fn();
-    // @ts-ignore
     mediaControl.mount = vi.fn();
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.30",
+  "version": "2.23.0",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
   "typings": "lib/index.d.ts",
+  "keywords": ["player", "video streaming"],
   "scripts": {
     "build": "npm run build:ts && npm run build:bundle",
     "build:1": "npm run build:ts && npm run build:bundle && date",

package/src/plugins/clips/Clips.ts

@@ -2,7 +2,7 @@ import { Container, Events, UICorePlugin, $, template } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
-import { TimeProgress } from '../../playback.types.js'
+import { TimeProgress, TimeValue } from '../../playback.types.js'
 import type { ZeptoResult } from '../../types.js'
 import '../../../assets/clips/clips.scss'
 import { ClipDesc } from './types.js'
@@ -117,6 +117,15 @@ export class Clips extends UICorePlugin {
     return super.enable()
   }
 
+  /**
+   * Get the text of the clip at the given time
+   * @param time - The time to get the text for
+   * @returns The text of the clip at the given time
+   */
+  getText(time: TimeValue): string | undefined {
+    return this.clips.find((clip) => clip.start <= time && clip.end >= time)?.text
+  }
+
   private onCoreReady() {
     trace(`${T} onCoreReady`)
     const mediaControl = this.core.getPlugin('media_control')

package/src/plugins/media-control/MediaControl.ts

@@ -279,8 +279,8 @@ export class MediaControl extends UICorePlugin {
   }
 
   /**
+   * Use in mediacontrol-based plugins to access the active container
    * @internal
-   * @deprecated Use core.activeContainer directly
    */
   get container() {
     return this.core.activeContainer
@@ -645,18 +645,17 @@ export class MediaControl extends UICorePlugin {
   }
 
   private mousemoveOnSeekBar(event: MouseEvent) {
+    const offset = MediaControl.getPageX(event) -
+      (this.$seekBarContainer.offset().left ?? 0) // TODO check if the result can be negative
+    const hoverOffset =
+      offset -
+      (this.$seekBarHover.width() ?? 0) / 2
+    const pos = offset ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0)) : 0
     if (this.settings.seekEnabled) {
-      // assert.ok(this.$seekBarHover && this.$seekBarContainer, 'seek bar elements must be present');
-      if (this.$seekBarHover && this.$seekBarContainer) {
-        const offsetX =
-          MediaControl.getPageX(event) -
-          this.$seekBarContainer.offset().left -
-          this.$seekBarHover.width() / 2
-
-        this.$seekBarHover.css({ left: offsetX })
-      }
+      // TODO test that it works when the element does not exist
+      this.$seekBarHover.css({ left: hoverOffset })
     }
-    this.trigger(Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, event)
+    this.trigger(Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, event, pos)
   }
 
   private mouseleaveOnSeekBar(event: MouseEvent) {
@@ -1194,19 +1193,9 @@ export class MediaControl extends UICorePlugin {
       } else {
         panel.append(element)
       }
-      return
     }
   }
 
-  /**
-   * @deprecated  Use {@link MediaControl.mount} instead
-   * @param name
-   * @param element
-   */
-  putElement(name: MediaControlElement, element: ZeptoResult) {
-    this.mount(name, element)
-  }
-
   /**
    * Toggle the visibility of a media control element
    * @param name - The name of the media control element

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>

package/src/plugins/poster/Poster.ts

@@ -8,7 +8,6 @@ import {
   PlayerError,
   UIContainerPlugin,
   template,
-  $,
 } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 
@@ -20,25 +19,38 @@ import posterHTML from '../../../assets/poster/poster.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
 import { PlaybackError } from '../../playback.types.js'
 
+export type PosterPluginSettings = {
+  /**
+   * Custom CSS background
+   */
+  custom?: string
+  /**
+   * Whether to show the poster image when the playback is noop (i.e., when there is no appropriate video playback engine for current media sources set or the media sources are not set at all)
+   */
+  showForNoOp?: boolean
+  /**
+   * Poster image URL
+   */
+  url?: string
+  /**
+   * Whether to show the poster after playback has ended @default true
+   */
+  showOnVideoEnd?: boolean
+}
+
 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
@@ -56,14 +68,12 @@ export class Poster extends UIContainerPlugin {
 
   private hasFatalError = false
 
-  private hasStartedPlaying = false
+  private playing = false
 
   private playRequested = false
 
   private $playButton: ZeptoResult | null = null
 
-  private $playWrapper: ZeptoResult | null = null
-
   /**
    * @internal
    */
@@ -87,18 +97,20 @@ 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)
     )
   }
 
+  private get isNoOp() {
+    return this.container.playback.getPlaybackType() === Playback.NO_OP
+  }
+
   /**
    * @internal
    */
   override get attributes() {
     return {
       class: 'player-poster',
-      'data-poster': '',
     }
   }
 
@@ -111,10 +123,6 @@ export class Poster extends UIContainerPlugin {
     }
   }
 
-  private get showOnVideoEnd() {
-    return this.options.poster?.showOnVideoEnd !== false
-  }
-
   /**
    * @internal
    */
@@ -127,20 +135,27 @@ export class Poster extends UIContainerPlugin {
       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
    */
   override enable() {
+    trace(`${T} enable`)
     super.enable()
-    this.hasStartedPlaying = this.container.playback.isPlaying()
+    this.playing = this.container.playback.isPlaying()
     this.update()
   }
 
@@ -149,7 +164,7 @@ export class Poster extends UIContainerPlugin {
    */
   override disable() {
     trace(`${T} disable`)
-    this.hasStartedPlaying = false
+    this.playing = false
     this.playRequested = false
     super.disable()
   }
@@ -159,19 +174,16 @@ 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
   }
 
   private onPlay() {
     trace(`${T} onPlay`)
-    this.hasStartedPlaying = true
+    this.playing = true
     this.playRequested = false
     this.update()
   }
@@ -183,24 +195,23 @@ export class Poster extends UIContainerPlugin {
   }
 
   private onStop() {
-    trace(`${T} onStop`, {
-      enabled: this.enabled,
-    })
-    this.hasStartedPlaying = false
+    trace(`${T} onStop`)
+    this.playing = false
     this.playRequested = false
     this.update()
   }
 
-  private updatePlayButton(show: boolean) {
-    trace(`${T} updatePlayButton`, {
-      show,
-      chromeless: this.options.chromeless,
-      allowUserInteraction: this.options.allowUserInteraction,
-    })
-    if (
-      show &&
-      (!this.options.chromeless || this.options.allowUserInteraction)
-    ) {
+  private 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 {
       this.hidePlayButton()
@@ -208,40 +219,31 @@ export class Poster extends UIContainerPlugin {
   }
 
   private 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')
   }
 
   private hidePlayButton() {
-    this.$playButton.hide()
+    trace(`${T} hidePlayButton`)
+    this.$el.find('#poster-play').hide()
     this.$el.removeClass('clickable')
   }
 
-  private clicked() {
-    trace(`${T} clicked`, {
-      hasStartedPlaying: this.hasStartedPlaying,
-      chromeless: this.options.chromeless,
-      allowUserInteraction: this.options.allowUserInteraction,
-    })
+  private clicked(e: MouseEvent) {
+    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
   }
 
   private shouldHideOnPlay() {
@@ -250,27 +252,15 @@ export class Poster extends UIContainerPlugin {
   }
 
   private update() {
-    trace(`${T} update`, {
-      shouldRender: this.shouldRender,
-    })
-    if (!this.shouldRender) {
-      return
-    }
+    trace(`${T} update`)
 
-    const showPlayButton =
-      !this.playRequested &&
-      !this.hasStartedPlaying &&
-      !this.container.buffering
-
-    this.updatePlayButton(showPlayButton)
+    this.updatePlayButton()
     this.updatePoster()
   }
 
   private updatePoster() {
-    trace(`${T} updatePoster`, {
-      hasStartedPlaying: this.hasStartedPlaying,
-    })
-    if (!this.hasStartedPlaying) {
+    trace(`${T} updatePoster`)
+    if (!this.playing) {
       this.showPoster()
     } else {
       this.hidePoster()
@@ -283,9 +273,7 @@ export class Poster extends UIContainerPlugin {
   }
 
   private hidePoster() {
-    trace(`${T} hidePoster`, {
-      shouldHideOnPlay: this.shouldHideOnPlay(),
-    })
+    trace(`${T} hidePoster`)
     if (!this.options.disableMediaControl) {
       this.container.enableMediaControl()
     }
@@ -304,34 +292,27 @@ export class Poster extends UIContainerPlugin {
 
     this.$el.html(Poster.template())
 
-    const isRegularPoster =
-      this.options.poster && this.options.poster.custom === undefined
+    const isCustomPoster = 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) {
+    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)
+    this.$el.find('#poster-play').append(playIcon)
 
-    if (this.options.autoPlay) {
-      this.$playButton.hide()
+    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
   }