@gcorevideo/player 2.24.3 → 2.24.6

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) {

package/src/plugins/seek-time/SeekTime.ts

@@ -135,6 +135,7 @@ export class SeekTime extends UICorePlugin {
     this.update()
   }
 
+  // TODO delegate calculation to the MediaControl plugin
   private calculateHoverPosition(event: MouseEvent) {
     const mediaControl = this.core.getPlugin('media_control')
     const offset = event.pageX - mediaControl.$seekBarContainer.offset().left

package/src/plugins/source-controller/SourceController.ts

@@ -217,7 +217,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()
@@ -242,7 +244,7 @@ export class SourceController extends CorePlugin {
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_PLAY,
-      (_: string, { autoPlay }: { autoPlay?: boolean}) => {
+      (_: string, { autoPlay }: { autoPlay?: boolean }) => {
         trace(`${T} onContainerPlay`, {
           autoPlay,
         })

package/src/testUtils.ts

@@ -42,7 +42,10 @@ export function createSpinnerPlugin() {
   })
 }
 
-export function createMockPlayback(name = 'mock', options: Record<string, unknown> = {}) {
+export function createMockPlayback(
+  name = 'mock',
+  options: Record<string, unknown> = {},
+) {
   const emitter = new Events()
   return Object.assign(emitter, {
     name,