@gcorevideo/player 2.24.3 → 2.24.5

package/dist/index.js

@@ -42836,7 +42836,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$k = 'GPlayer';
+const T$k = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.24.3";
+var version$1 = "2.24.5";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -44061,7 +44061,7 @@ class MediaControl extends UICorePlugin {
         return false;
     }
     togglePlayStop() {
-        this.container.isPlaying() ? this.container.stop() : this.container.play();
+        this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play();
     }
     startSeekDrag(event) {
         if (!this.settings.seekEnabled) {
@@ -44964,6 +44964,7 @@ const T$h = 'plugins.big_mute_button';
  * ```
  */
 class BigMuteButton extends UICorePlugin {
+    autoPlay = false;
     hidden = false;
     // TODO get back to the ads-related logic later
     _adIsPlaying = false;
@@ -44985,7 +44986,7 @@ class BigMuteButton extends UICorePlugin {
      */
     get events() {
         return {
-            'click': 'clicked',
+            click: 'clicked',
         };
     }
     /**
@@ -44997,34 +44998,42 @@ class BigMuteButton extends UICorePlugin {
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
         this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
     }
-    onCoreReady() {
-    }
+    onCoreReady() { }
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_VOLUME, this.onContainerVolume);
-        // this.listenTo(
-        //   this.core.activeContainer,
-        //   Events.CONTAINER_READY,
-        //   this.onContainerReady,
-        // )
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_ENDED, this.onPlaybackEnded);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, this.onPlay);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.onStop);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.onPause);
     }
     onPlay(_, { autoPlay }) {
         const container = this.core.activeContainer;
         const { volume } = container;
         const { wasMuted } = this.options;
+        if (autoPlay) {
+            this.autoPlay = true;
+        }
         trace(`${T$h} onPlay`, {
-            autoPlay,
+            autoPlay: this.autoPlay,
             wasMuted,
             volume,
         });
-        if (autoPlay && !wasMuted && volume === 0) {
+        if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
         }
         else {
             this.destroy();
         }
     }
+    onStop(_, { ui }) {
+        trace(`${T$h} onStop`, { ui });
+        if (ui) {
+            this.destroy();
+        }
+    }
+    onPause() {
+        this.destroy();
+    }
     onContainerVolume(value) {
         if (value !== 0) {
             this.destroy();
@@ -48392,7 +48401,7 @@ class ClickToPause extends ContainerPlugin {
     togglePlay(useStop) {
         const isPlaying = this.container && this.container.isPlaying();
         if (isPlaying) {
-            useStop ? this.container.stop() : this.container.pause();
+            useStop ? this.container.stop({ ui: true }) : this.container.pause();
         }
         else {
             this.container.play();
@@ -51399,7 +51408,9 @@ class SourceController extends CorePlugin {
             if (this.switching) {
                 return;
             }
-            this.autoPlay = !!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay;
+            // The autoPlay metadata flag is set between a call to play and the actual playback start event, after which the flag is cleared.
+            this.autoPlay =
+                !!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay;
             switch (error.code) {
                 case PlaybackErrorCode.MediaSourceUnavailable:
                     this.core.activeContainer?.getPlugin('poster')?.disable();

package/dist/player.d.ts

@@ -120,10 +120,8 @@ export { AudioTracks }
  * ```
  */
 export declare class BigMuteButton extends UICorePlugin {
-    private isBigMuteButtonHidden;
+    private hidden;
     private _adIsPlaying;
-    private $bigMuteBtnContainer;
-    private $bigMuteButton;
     /**
      * @internal
      */
@@ -139,30 +137,26 @@ export declare class BigMuteButton extends UICorePlugin {
      * @internal
      */
     get events(): {
-        'click .big-mute-icon': string;
-        'click .big-mute-icon-wrapper': string;
+        click: string;
     };
     /**
      * @internal
      */
     bindEvents(): void;
     private onCoreReady;
+    private onContainerChanged;
+    private onPlay;
     private onContainerVolume;
-    private onContainerStart;
     private onPlaybackEnded;
-    private onMediaControlRendered;
     private onStartAd;
     private onFinishAd;
-    private isActive;
     /**
      * @internal
      */
     render(): this;
     private mount;
-    private update;
-    private hideBigMuteBtn;
-    private showBigMuteBtn;
-    private destroyBigMuteBtn;
+    private hide;
+    private show;
     private clicked;
 }
 
@@ -2757,6 +2751,7 @@ export declare class SourceController extends CorePlugin {
     private currentSourceIndex;
     private sourcesDelay;
     private active;
+    private autoPlay;
     private switching;
     private sync;
     /**

package/lib/Player.js

@@ -5,7 +5,7 @@ import EventEmitter from 'eventemitter3';
 import { PlayerEvent } from './types.js';
 import { buildMediaSourcesList, wrapSource } from './utils/mediaSources.js';
 import { registerPlaybacks } from './playback/index.js';
-const T = 'GPlayer';
+const T = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',

package/lib/index.embed.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Video player for the Gcore streaming platform
+ *
+ * @remarks
+ * This package provides a video player for the Gcore streaming platform.
+ * It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations.
+ * Start with {@link Player} for more information.
+ *
+ * Various plugins (marked with `PLUGIN` keyword) are available to extend the core functionality with additional features.
+ * @example
+ * ```ts
+ * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(MediaControl)
+ * Player.registerPlugin(ErrorScreen)
+ *
+ * const player = new Player({
+ *   autoPlay: true,
+ *   mute: true,
+ *   sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],
+ * })
+ *
+ * player.attachTo(document.getElementById('container'))
+ * ```
+ *
+ * @packageDocumentation
+ */
+export * from './index.core.js';
+export * from './index.plugins.js';
+//# sourceMappingURL=index.embed.d.ts.map

package/lib/index.embed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.embed.d.ts","sourceRoot":"","sources":["../src/index.embed.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA"}

package/lib/index.embed.js

@@ -0,0 +1,29 @@
+/**
+ * Video player for the Gcore streaming platform
+ *
+ * @remarks
+ * This package provides a video player for the Gcore streaming platform.
+ * It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations.
+ * Start with {@link Player} for more information.
+ *
+ * Various plugins (marked with `PLUGIN` keyword) are available to extend the core functionality with additional features.
+ * @example
+ * ```ts
+ * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(MediaControl)
+ * Player.registerPlugin(ErrorScreen)
+ *
+ * const player = new Player({
+ *   autoPlay: true,
+ *   mute: true,
+ *   sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],
+ * })
+ *
+ * player.attachTo(document.getElementById('container'))
+ * ```
+ *
+ * @packageDocumentation
+ */
+export * from './index.core.js';
+export * from './index.plugins.js';

package/lib/plugins/big-mute-button/BigMuteButton.d.ts

@@ -12,6 +12,7 @@ import '../../../assets/big-mute-button/big-mute-button.scss';
  * ```
  */
 export declare class BigMuteButton extends UICorePlugin {
+    private autoPlay;
     private hidden;
     private _adIsPlaying;
     /**
@@ -38,6 +39,8 @@ export declare class BigMuteButton extends UICorePlugin {
     private onCoreReady;
     private onContainerChanged;
     private onPlay;
+    private onStop;
+    private onPause;
     private onContainerVolume;
     private onPlaybackEnded;
     private onStartAd;

package/lib/plugins/big-mute-button/BigMuteButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BigMuteButton.d.ts","sourceRoot":"","sources":["../../../src/plugins/big-mute-button/BigMuteButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAS,MAAM,cAAc,CAAA;AAQpE,OAAO,sDAAsD,CAAA;AAM7D;;;;;;;;;;GAUG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,MAAM,CAAQ;IAGtB,OAAO,CAAC,YAAY,CAAQ;IAE5B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAOnB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,UAAU;IAKlB;;OAEG;IACM,MAAM;IAWf,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,OAAO;CAkBhB"}
+{"version":3,"file":"BigMuteButton.d.ts","sourceRoot":"","sources":["../../../src/plugins/big-mute-button/BigMuteButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAS,MAAM,cAAc,CAAA;AAQpE,OAAO,sDAAsD,CAAA;AAM7D;;;;;;;;;;GAUG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,MAAM,CAAQ;IAGtB,OAAO,CAAC,YAAY,CAAQ;IAE5B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAEnB,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,MAAM;IAmBd,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,UAAU;IAKlB;;OAEG;IACM,MAAM;IAWf,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,OAAO;CAkBhB"}

package/lib/plugins/big-mute-button/BigMuteButton.js

@@ -18,6 +18,7 @@ const T = 'plugins.big_mute_button';
  * ```
  */
 export class BigMuteButton extends UICorePlugin {
+    autoPlay = false;
     hidden = false;
     // TODO get back to the ads-related logic later
     _adIsPlaying = false;
@@ -39,7 +40,7 @@ export class BigMuteButton extends UICorePlugin {
      */
     get events() {
         return {
-            'click': 'clicked',
+            click: 'clicked',
         };
     }
     /**
@@ -51,34 +52,42 @@ export class BigMuteButton extends UICorePlugin {
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
         this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
     }
-    onCoreReady() {
-    }
+    onCoreReady() { }
     onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onContainerVolume);
-        // this.listenTo(
-        //   this.core.activeContainer,
-        //   Events.CONTAINER_READY,
-        //   this.onContainerReady,
-        // )
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_ENDED, this.onPlaybackEnded);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.onPlay);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.onStop);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.onPause);
     }
     onPlay(_, { autoPlay }) {
         const container = this.core.activeContainer;
         const { volume } = container;
         const { wasMuted } = this.options;
+        if (autoPlay) {
+            this.autoPlay = true;
+        }
         trace(`${T} onPlay`, {
-            autoPlay,
+            autoPlay: this.autoPlay,
             wasMuted,
             volume,
         });
-        if (autoPlay && !wasMuted && volume === 0) {
+        if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
         }
         else {
             this.destroy();
         }
     }
+    onStop(_, { ui }) {
+        trace(`${T} onStop`, { ui });
+        if (ui) {
+            this.destroy();
+        }
+    }
+    onPause() {
+        this.destroy();
+    }
     onContainerVolume(value) {
         if (value !== 0) {
             this.destroy();

package/lib/plugins/click-to-pause/ClickToPause.js

@@ -62,7 +62,7 @@ export class ClickToPause extends ContainerPlugin {
     togglePlay(useStop) {
         const isPlaying = this.container && this.container.isPlaying();
         if (isPlaying) {
-            useStop ? this.container.stop() : this.container.pause();
+            useStop ? this.container.stop({ ui: true }) : this.container.pause();
         }
         else {
             this.container.play();

package/lib/plugins/media-control/MediaControl.js

@@ -483,7 +483,7 @@ export class MediaControl extends UICorePlugin {
         return false;
     }
     togglePlayStop() {
-        this.container.isPlaying() ? this.container.stop() : this.container.play();
+        this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play();
     }
     startSeekDrag(event) {
         if (!this.settings.seekEnabled) {

package/lib/plugins/source-controller/SourceController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AAwBrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAwC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,IAAI,CAAiB;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;gBACS,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,2BAA2B;IAmDnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;CACF"}
+{"version":3,"file":"SourceController.d.ts","sourceRoot":"","sources":["../../../src/plugins/source-controller/SourceController.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,KAAK,IAAI,IAAI,UAAU,EACxB,MAAM,cAAc,CAAA;AAwBrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAwC9C,OAAO,CAAC,WAAW,CAA8B;IAEjD,OAAO,CAAC,kBAAkB,CAAI;IAE9B,OAAO,CAAC,YAAY,CAA6B;IAEjD,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,IAAI,CAAiB;IAE7B;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;gBACS,IAAI,EAAE,UAAU;IAW5B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,2BAA2B;IAqDnC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;CACF"}

package/lib/plugins/source-controller/SourceController.js

@@ -184,7 +184,9 @@ export class SourceController extends CorePlugin {
             if (this.switching) {
                 return;
             }
-            this.autoPlay = !!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay;
+            // The autoPlay metadata flag is set between a call to play and the actual playback start event, after which the flag is cleared.
+            this.autoPlay =
+                !!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay;
             switch (error.code) {
                 case PlaybackErrorCode.MediaSourceUnavailable:
                     this.core.activeContainer?.getPlugin('poster')?.disable();

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS,EAAE,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCtF;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAmB/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;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAChC,IAAI,SAAS,EACb,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCtC;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAmB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/package.json

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

package/src/Player.ts

@@ -52,7 +52,7 @@ export type PlayerEventHandler<E extends PlayerEvent> = (
   ...args: PlayerEventParams<E>
 ) => void
 
-const T = 'GPlayer'
+const T = 'gplayer'
 
 const DEFAULT_OPTIONS: PlayerConfig = {
   autoPlay: false,

package/src/index.embed.ts

@@ -0,0 +1,29 @@
+/**
+ * Video player for the Gcore streaming platform
+ *
+ * @remarks
+ * This package provides a video player for the Gcore streaming platform.
+ * It is built on top of the {@link https://github.com/clappr/clappr | Clappr} library and provides a framework for building custom integrations.
+ * Start with {@link Player} for more information.
+ *
+ * Various plugins (marked with `PLUGIN` keyword) are available to extend the core functionality with additional features.
+ * @example
+ * ```ts
+ * import { Player, MediaControl, ErrorScreen } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(MediaControl)
+ * Player.registerPlugin(ErrorScreen)
+ *
+ * const player = new Player({
+ *   autoPlay: true,
+ *   mute: true,
+ *   sources: [{ source: 'https://example.com/a.mpd', mimeType: 'application/dash+xml' }],
+ * })
+ *
+ * player.attachTo(document.getElementById('container'))
+ * ```
+ *
+ * @packageDocumentation
+ */
+export * from './index.core.js'
+export * from './index.plugins.js'

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -24,6 +24,8 @@ const T = 'plugins.big_mute_button'
  * ```
  */
 export class BigMuteButton extends UICorePlugin {
+  private autoPlay = false
+
   private hidden = false
 
   // TODO get back to the ads-related logic later
@@ -50,7 +52,7 @@ export class BigMuteButton extends UICorePlugin {
    */
   override get events() {
     return {
-      'click': 'clicked',
+      click: 'clicked',
     }
   }
 
@@ -59,14 +61,16 @@ export class BigMuteButton extends UICorePlugin {
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onContainerChanged,
+    )
     this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
     this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
   }
 
-  private onCoreReady() {
-    
-  }
+  private onCoreReady() {}
 
   private onContainerChanged() {
     this.listenTo(
@@ -74,39 +78,46 @@ export class BigMuteButton extends UICorePlugin {
       Events.CONTAINER_VOLUME,
       this.onContainerVolume,
     )
-    // this.listenTo(
-    //   this.core.activeContainer,
-    //   Events.CONTAINER_READY,
-    //   this.onContainerReady,
-    // )
     this.listenTo(
       this.core.activePlayback,
       Events.PLAYBACK_ENDED,
       this.onPlaybackEnded,
     )
-    this.listenTo(
-      this.core.activeContainer,
-      Events.CONTAINER_PLAY,
-      this.onPlay
-    )
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.onPlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.onStop)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.onPause)
   }
 
-  private onPlay(_: string, { autoPlay }: { autoPlay?: boolean}) {
+  private onPlay(_: string, { autoPlay }: { autoPlay?: boolean }) {
     const container = this.core.activeContainer
     const { volume } = container
     const { wasMuted } = this.options
+    if (autoPlay) {
+      this.autoPlay = true
+    }
     trace(`${T} onPlay`, {
-      autoPlay,
+      autoPlay: this.autoPlay,
       wasMuted,
       volume,
     })
-    if (autoPlay && !wasMuted && volume === 0) {
+    if (this.autoPlay && !wasMuted && volume === 0) {
       this.mount()
     } else {
       this.destroy()
     }
   }
 
+  private onStop(_: string, { ui }: { ui?: boolean }) {
+    trace(`${T} onStop`, { ui })
+    if (ui) {
+      this.destroy()
+    }
+  }
+
+  private onPause() {
+    this.destroy()
+  }
+
   private onContainerVolume(value: number) {
     if (value !== 0) {
       this.destroy()
@@ -134,7 +145,7 @@ export class BigMuteButton extends UICorePlugin {
     trace(`${T} render`)
     this.$el.html(BigMuteButton.template())
     this.$el.find('#gplayer-big-mute-icon').append(volumeMuteIcon)
-    
+
     // TODO
     // this._adIsPlaying && this.hide()
 

package/src/plugins/big-mute-button/__tests__/BigMuteButton.test.ts

@@ -4,16 +4,19 @@ import { Events } from '@clappr/core'
 import { BigMuteButton } from '../BigMuteButton.js'
 import { createMockCore } from '../../../testUtils.js'
 
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+
+// setTracer(new LogTracer('BigMuteButton.test'))
+// Logger.enable('*')
+
 describe('BigMuteButton', () => {
   let core: any
   let bmb: BigMuteButton
+  beforeEach(() => {
+    core = createMockCore({})
+    bmb = new BigMuteButton(core)
+  })
   describe('basically', () => {
-    beforeEach(() => {
-      core = createMockCore({})
-      bmb = new BigMuteButton(core)
-      // core.emit('core:ready')
-      // core.emit('core:active:container:changed')
-    })
     it('should render', () => {
       expect(bmb.$el.html()).toMatchSnapshot()
     })
@@ -22,17 +25,62 @@ describe('BigMuteButton', () => {
     describe.each([
       ['muted autoplay', 0, { autoPlay: true }, true],
       ['audible autoplay', 50, { autoPlay: true }, false],
-      ['muted not autoplay', 0, { }, false],
-      ['audible not autoplay', 1, {}, false],
-    ])("%s", (_, volume, playMetadata, shouldMount) => {
+      ['muted not autoplay', 0, {}, false],
+      ['audible not autoplay', 50, {}, false],
+    ])('%s', (_, volume, playMetadata, shouldMount) => {
       beforeEach(() => {
         core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
         core.activeContainer.volume = volume
-        core.activeContainer.emit(Events.CONTAINER_PLAY, 'Container', playMetadata)
+        core.activeContainer.emit(
+          Events.CONTAINER_PLAY,
+          'Container',
+          playMetadata,
+        )
       })
       it(`should ${shouldMount ? 'mount' : 'not mount'} to container`, () => {
-        expect(core.activeContainer.$el.find('#gplayer-big-mute-button').length).toBe(shouldMount ? 1 : 0)
+        expect(
+          core.activeContainer.$el.find('#gplayer-big-mute-button').length,
+        ).toBe(shouldMount ? 1 : 0)
       })
     })
   })
-})
+  describe('when playback is stopped', () => {
+    describe.each([
+      ['from ui', { ui: true }, true],
+      ['algorithmically', {}, false],
+    ])('%s', (_, stopMetadata, shouldUnmount) => {
+      beforeEach(() => {
+        core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+        core.activeContainer.volume = 0
+        core.activeContainer.emit(Events.CONTAINER_PLAY, 'Container', {
+          autoPlay: true,
+        })
+        core.activeContainer.emit(
+          Events.CONTAINER_STOP,
+          'Container',
+          stopMetadata,
+        )
+      })
+      it(`should ${shouldUnmount ? 'unmount' : 'not unmount'}`, () => {
+        expect(
+          core.activeContainer.$el.find('#gplayer-big-mute-button').length,
+        ).toBe(shouldUnmount ? 0 : 1)
+      })
+    })
+  })
+  describe('when playback is paused', () => {
+    beforeEach(() => {
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+      core.activeContainer.volume = 0
+      core.activeContainer.emit(Events.CONTAINER_PLAY, 'Container', {
+        autoPlay: true,
+      })
+      core.activeContainer.emit(Events.CONTAINER_PAUSE, 'Container')
+    })
+    it('should unmount', () => {
+      expect(
+        core.activeContainer.$el.find('#gplayer-big-mute-button').length,
+      ).toBe(0)
+    })
+  })
+})

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -85,7 +85,7 @@ export class ClickToPause extends ContainerPlugin {
     const isPlaying = this.container && this.container.isPlaying()
 
     if (isPlaying) {
-      useStop ? this.container.stop() : this.container.pause()
+      useStop ? this.container.stop({ ui: true }) : this.container.pause()
     } else {
       this.container.play()
     }

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

@@ -723,7 +723,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   private togglePlayStop() {
-    this.container.isPlaying() ? this.container.stop() : this.container.play()
+    this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play()
   }
 
   private startSeekDrag(event: MouseEvent) {