@gcorevideo/player 2.22.29 → 2.22.31

package/src/plugins/poster/__tests__/Poster.test.ts

@@ -0,0 +1,119 @@
+import { Poster } from '../Poster'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createMockCore } from '../../../testUtils'
+import { Events, PlayerError } from '@clappr/core'
+
+describe('Poster', () => {
+  let core: any
+  let poster: Poster
+  describe('basically', () => {
+    beforeEach(() => {
+      core = createMockCore({
+        poster: {
+          url: 'https://via.placeholder.com/150.png',
+        },
+      })
+      poster = new Poster(core.activeContainer)
+      core.activeContainer.trigger(Events.CONTAINER_READY)
+    })
+    it('should render', () => {
+      expect(poster.el.innerHTML).toMatchSnapshot()
+    })
+    describe('when clicked', () => {
+      beforeEach(() => {
+        poster.el.click()
+      })
+      it('should start playback', () => {
+        expect(core.activeContainer.play).toHaveBeenCalled()
+        expect(core.activeContainer.playback.consent).not.toHaveBeenCalled()
+      })
+      it('should hide button', () => {
+        expect(poster.$el.find('#poster-play')[0].style.display).toBe('none')
+      })
+      it('should remove clickable class', () => {
+        expect(poster.el.classList.contains('clickable')).toBe(false)
+      })
+    })
+    describe('when playback is triggered', () => {
+      beforeEach(() => {
+        core.activeContainer.playback.trigger(Events.PLAYBACK_PLAY_INTENT)
+      })
+      it('should hide button', () => {
+        expect(poster.$el.find('#poster-play')[0].style.display).toBe('none')
+      })
+    })
+    describe('when playback is about to start', () => {
+      describe.each([
+        [
+          Events.CONTAINER_STATE_BUFFERING, 
+        ], [
+          Events.CONTAINER_STATE_BUFFERFULL,
+        ]
+      ])("event %s", (event) => {
+        beforeEach(() => {
+          core.activeContainer.buffering = true
+          core.activeContainer.trigger(event)
+        })
+        it('should hide button', () => {
+          expect(poster.$el.find('#poster-play')[0].style.display).toBe('none')
+        })
+      })
+    })
+    describe('when playback is started', () => {
+      beforeEach(() => {
+        core.activeContainer.trigger(Events.CONTAINER_PLAY)
+            core.activeContainer.playback.trigger(Events.PLAYBACK_PLAY)
+      })
+      it('should hide poster', () => {
+        expect(poster.el.style.display).toBe('none')
+      })
+    })
+    describe('when playback is stopped', () => {
+      beforeEach(() => {
+        core.activeContainer.trigger(Events.CONTAINER_PLAY)
+        core.activeContainer.playback.trigger(Events.PLAYBACK_PLAY)
+        core.activeContainer.trigger(Events.CONTAINER_STOP)
+      })
+      it('should show poster', () => {
+        expect(poster.el.style.display).not.toBe('none')
+      })
+      it('should show button', () => {
+        expect(poster.$el.find('#poster-play')[0].style.display).not.toBe('none')
+      })
+      it('should add clickable class', () => {
+        expect(poster.el.classList.contains('clickable')).toBe(true)
+      })
+    })
+  })
+  describe('when autoplay is configured', () => {
+    beforeEach(() => {
+      core = createMockCore({
+        autoPlay: true,
+      })
+      poster = new Poster(core.activeContainer)
+      core.activeContainer.trigger(Events.CONTAINER_READY)
+    })
+    it('should hide button initially', () => {
+      expect(poster.$el.find('#poster-play')[0].style.display).toBe('none')
+    })
+  })
+  describe('when error occurs', () => {
+    beforeEach(() => {
+      core = createMockCore({
+        autoPlay: true,
+      })
+      poster = new Poster(core.activeContainer)
+      core.activeContainer.trigger(Events.CONTAINER_READY)
+      core.activeContainer.playback.trigger(Events.PLAYBACK_PLAY_INTENT)
+      core.activeContainer.trigger(Events.CONTAINER_ERROR, {
+        level: PlayerError.Levels.FATAL,
+      })
+    })
+    it('should show poster', () => {
+      expect(poster.el.style.display).not.toBe('none')
+    })
+    it('should hide button', () => {
+      expect(poster.$el.find('#poster-play')[0].style.display).toBe('none')
+    })
+  })
+})

package/src/plugins/poster/__tests__/__snapshots__/Poster.test.ts.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Poster > basically > should render 1`] = `
+"<div class="play-wrapper" id="gplayer-poster">
+    <div class="circle-poster gcore-skin-button-color gcore-skin-border-color" id="poster-play">/assets/icons/new/play.svg</div>
+</div>
+"
+`;

package/src/plugins/skip-time/SkipTime.ts

@@ -1,4 +1,5 @@
 import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -7,8 +8,10 @@ import '../../../assets/skip-time/style.scss'
 
 type Position = 'mid' | 'left' | 'right'
 
+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 {
@@ -24,52 +27,70 @@ export class SkipTime extends UICorePlugin {
     return this.core && this.core.activeContainer
   }
 
-  get template() {
-    return template(pluginHtml)
-  }
+  private static readonly template = template(pluginHtml)
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
-      class: this.name + '_plugin',
-      'data-skip-time': '',
+      class: 'mc-skip-time',
     }
   }
 
   private position: Position = 'mid'
 
+  /**
+   * @internal
+   */
   override 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
+   */
   override 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)
+  }
+
+  private onContainerChanged() {
     this.listenTo(
       this.container,
       Events.CONTAINER_DBLCLICK,
       this.handleRewindClicks,
     )
+    this.mount()
   }
 
-  setBack() {
+  private setBack() {
+    trace(`${T} setBack`)
     this.position = 'left'
   }
 
-  handleRewindClicks() {
+  private handleRewindClicks() {
+    trace(`${T} handleRewindClicks`, {
+      position: this.position,
+    })
     if (
       this.core.getPlaybackType() === Playback.LIVE &&
       !this.container.isDvrEnabled()
     ) {
       this.toggleFullscreen()
-
       return
     }
+    this.handleSkip()
+  }
+
+  private handleSkip() {
+    trace(`${T} handleSkip`, {
+      position: this.position,
+    })
     if (Browser.isMobile) {
       if (this.position === 'left') {
         const seekPos = this.container.getCurrentTime() - 10
@@ -92,29 +113,35 @@ export class SkipTime extends UICorePlugin {
     }
   }
 
-  setMidClick() {
+  private setMidClick() {
+    trace(`${T} setMidClick`)
     this.position = 'mid'
   }
 
-  setForward() {
+  private setForward() {
+    trace(`${T} setForward`)
     this.position = 'right'
   }
 
-  toggleFullscreen() {
+  private toggleFullscreen() {
+    trace(`${T} toggleFullscreen`)
     this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name)
     this.container.fullscreen()
     this.core.toggleFullscreen()
   }
 
+  /**
+   * @internal
+   */
   override 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
   }
+
+  private mount() {
+    trace(`${T} mount`)
+    this.core.activeContainer.$el.append(this.el)
+  }
 }

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

@@ -5,7 +5,6 @@ import FakeTimers from '@sinonjs/fake-timers'
 import { SourceController } from '../SourceController'
 import { PlaybackErrorCode } from '../../../playback.types.js'
 import {
-  _MockPlayback,
   createMockCore,
   createMockPlayback,
   createMockPlugin,
@@ -151,7 +150,7 @@ describe('SourceController', () => {
         core.activePlayback.emit('playback:error', {
           code: PlaybackErrorCode.MediaSourceUnavailable,
         })
-        nextPlayback = new _MockPlayback({} as any, {} as any)
+        nextPlayback = createMockPlayback()
         vi.spyOn(nextPlayback, 'consent')
         vi.spyOn(nextPlayback, 'play')
         core.activePlayback = nextPlayback

package/src/testUtils.ts

@@ -1,86 +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 {
-  constructor(
-    protected options: any,
-    readonly i18n: any,
-    protected playerError?: any,
-  ) {
-    super()
-  }
-
-  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: string, ...args: any[]) {
-    this.emit(event, ...args)
-  }
-}
 
 export function createMockCore(
   options: Record<string, unknown> = {},
@@ -129,11 +49,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(),
@@ -166,13 +87,20 @@ export function createMockContainer(
   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(),