@gcorevideo/player 2.22.29 → 2.22.31

package/lib/plugins/skip-time/SkipTime.js

@@ -1,9 +1,11 @@
 import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
 import '../../../assets/skip-time/style.scss';
+const T = 'plugins.skip_time';
 /**
- * `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 class SkipTime extends UICorePlugin {
@@ -16,39 +18,56 @@ export class SkipTime extends UICorePlugin {
     get container() {
         return this.core && this.core.activeContainer;
     }
-    get template() {
-        return template(pluginHtml);
-    }
+    static template = template(pluginHtml);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            class: this.name + '_plugin',
-            'data-skip-time': '',
+            class: 'mc-skip-time',
         };
     }
     position = 'mid';
+    /**
+     * @internal
+     */
     get events() {
         return {
-            'click [data-skip-left]': 'setBack',
-            'click [data-skip-mid]': 'setMidClick',
-            'click [data-skip-right]': 'setForward',
+            'click #mc-skip-left': 'setBack',
+            'click #mc-skip-mid': 'setMidClick',
+            'click #mc-skip-right': 'setForward',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.render);
-        if (!this.container) {
-            return;
-        }
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onContainerChanged() {
         this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.handleRewindClicks);
+        this.mount();
     }
     setBack() {
+        trace(`${T} setBack`);
         this.position = 'left';
     }
     handleRewindClicks() {
+        trace(`${T} handleRewindClicks`, {
+            position: this.position,
+        });
         if (this.core.getPlaybackType() === Playback.LIVE &&
             !this.container.isDvrEnabled()) {
             this.toggleFullscreen();
             return;
         }
+        this.handleSkip();
+    }
+    handleSkip() {
+        trace(`${T} handleSkip`, {
+            position: this.position,
+        });
         if (Browser.isMobile) {
             if (this.position === 'left') {
                 const seekPos = this.container.getCurrentTime() - 10;
@@ -70,22 +89,29 @@ export class SkipTime extends UICorePlugin {
         }
     }
     setMidClick() {
+        trace(`${T} setMidClick`);
         this.position = 'mid';
     }
     setForward() {
+        trace(`${T} setForward`);
         this.position = 'right';
     }
     toggleFullscreen() {
+        trace(`${T} toggleFullscreen`);
         this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
         this.container.fullscreen();
         this.core.toggleFullscreen();
     }
+    /**
+     * @internal
+     */
     render() {
-        this.$el.html(template(pluginHtml));
-        if (this.core.activeContainer) {
-            this.core.activeContainer.$el.append(this.el);
-        }
-        this.bindEvents();
+        trace(`${T} render`);
+        this.$el.html(SkipTime.template());
         return this;
     }
+    mount() {
+        trace(`${T} mount`);
+        this.core.activeContainer.$el.append(this.el);
+    }
 }

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.29",
+  "version": "2.22.31",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

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
   }