@gcorevideo/player 2.24.1 → 2.24.3

package/src/plugins/cmcd-config/CmcdConfig.ts

@@ -4,7 +4,6 @@ import { $, Container, Core, CorePlugin, Events } from '@clappr/core'
 
 import { generateSessionId } from './utils'
 import { CLAPPR_VERSION } from '../../build.js'
-import { CoreOptions } from 'src/internal.types'
 
 const CMCD_KEYS = [
   'br',
@@ -28,15 +27,16 @@ const CMCD_KEYS = [
 ]
 
 /**
+ * Config options for the {@link CmcdConfig} plugin
  * @beta
  */
-export type CmcdConfigPluginSettings = {
+export interface CmcdConfigOptions {
   /**
-   * Session ID. If ommitted, a random UUID will be generated
+   * `sid` value. If ommitted, a random UUID will be generated
    */
-  sessionId: string
+  sessionId?: string
   /**
-   * Content ID,
+   * `cid` value.
    * If ommitted, the pathname part of the first source URL will be used
    */
   contentId?: string
@@ -45,11 +45,23 @@ export type CmcdConfigPluginSettings = {
 // const T = 'plugins.cmcd'
 
 /**
- * A `PLUGIN` that configures CMCD for playback
+ * A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
  * @beta
  * @remarks
- * Configuration options
- *   `cmcd`: {@link CmcdConfigPluginSettings}
+ * Configuration options - {@link CmcdConfigOptions}.
+ * @example
+ * ```ts
+ * import { CmcdConfig } from '@gcorevideo/player'
+ * Player.registerPlugin(CmcdConfig)
+ *
+ * const player = new Player({
+ *   source: 'https://example.com/video.mp4',
+ *   cmcd: {
+ *     sessionId: '1234567890',
+ *     contentId: 'f572d396fae9206628714fb2ce00f72e94f2258f',
+ *   },
+ * })
+ * ```
  */
 export class CmcdConfig extends CorePlugin {
   private sid: string
@@ -57,16 +69,22 @@ export class CmcdConfig extends CorePlugin {
   private cid = ''
 
   /**
-   * @inheritdocs
+   * @internal
    */
   get name() {
     return 'cmcd'
   }
 
+  /**
+   * @internal
+   */
   get version() {
     return '0.1.0'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return CLAPPR_VERSION
   }
@@ -78,7 +96,7 @@ export class CmcdConfig extends CorePlugin {
   }
 
   /**
-   * @inheritdocs
+   * @internal
    */
   override bindEvents() {
     this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, () =>
@@ -86,6 +104,11 @@ export class CmcdConfig extends CorePlugin {
     )
   }
 
+  /**
+   * Returns the current `sid` and `cid` values.
+   * Useful when the auto-generated values need to be known.
+   * @returns `sid` and `cid` values
+   */
   exportIds(): { sid: string; cid: string } {
     return {
       sid: this.sid,
@@ -123,23 +146,6 @@ export class CmcdConfig extends CorePlugin {
     }
   }
 
-  private updateHlsjsSettings(
-    options: CoreOptions,
-    { cid, sid }: { cid: string; sid: string },
-  ) {
-    $.extend(true, options, {
-      playback: {
-        hlsjsConfig: {
-          cmcd: {
-            includeKeys: CMCD_KEYS,
-            sessionId: sid,
-            contentId: cid,
-          },
-        },
-      },
-    })
-  }
-
   private generateContentId() {
     return new URL(
       this.core.options.source ?? this.core.options.sources[0].source,

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

@@ -136,6 +136,10 @@ const LEFT_ORDER = [
   'dvr',
 ]
 
+/**
+ * Extended events for the {@link MediaControl} plugin
+ * @beta
+ */
 export enum ExtendedEvents {
   MEDIACONTROL_VOLUME = 'mediacontrol:volume',
   MEDIACONTROL_MENU_COLLAPSE = 'mediacontrol:menu:collapse',
@@ -531,6 +535,18 @@ export class MediaControl extends UICorePlugin {
     this.show()
   }
 
+  /**
+   *
+   * @returns  Vertical space available to render something on top of the container.
+   * @remarks
+   * This takes into account the container height and excludes the height of the controls bar
+   */
+  getAvailableHeight() {
+    return (
+      this.core.$el.height() - this.$el.find('.media-control-layer').height()
+    )
+  }
+
   /**
    * Set the initial volume, which is preserved when playback is interrupted by an advertisement
    */
@@ -545,6 +561,7 @@ export class MediaControl extends UICorePlugin {
     this.updateVolumeUI()
   }
 
+  // TODO check if CONTAINER_SETTINGSUPDATE handler is sufficient
   private onLoadedMetadata() {
     const video = this.core.activePlayback?.el
 
@@ -645,12 +662,12 @@ 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
+    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) {
       // TODO test that it works when the element does not exist
       this.$seekBarHover.css({ left: hoverOffset })

package/src/plugins/poster/Poster.ts

@@ -19,7 +19,11 @@ import posterHTML from '../../../assets/poster/poster.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
 import { PlaybackError } from '../../playback.types.js'
 
-export type PosterPluginSettings = {
+/**
+ * Config options for the {@link Poster} plugin
+ * @beta
+ */
+export interface PosterPluginSettings {
   /**
    * Custom CSS background
    */
@@ -33,7 +37,7 @@ export type PosterPluginSettings = {
    */
   url?: string
   /**
-   * Whether to show the poster after playback has ended @default true
+   * Whether to show the poster after playback has ended, by default `true`
    */
   showOnVideoEnd?: boolean
 }

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

@@ -1,5 +1,5 @@
 import {
-  Events as ClapprEvents,
+  Events as Events,
   CorePlugin,
   type Core as ClapprCore,
 } from '@clappr/core'
@@ -127,6 +127,8 @@ export class SourceController extends CorePlugin {
 
   private active = false
 
+  private autoPlay = false
+
   private switching = false
 
   private sync: SyncFn = noSync
@@ -165,10 +167,10 @@ export class SourceController extends CorePlugin {
   override bindEvents() {
     super.bindEvents()
 
-    this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
     this.listenTo(
       this.core,
-      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
       this.onActiveContainerChanged,
     )
   }
@@ -200,7 +202,7 @@ export class SourceController extends CorePlugin {
 
   private bindContainerEventListeners() {
     this.core.activePlayback.on(
-      ClapprEvents.PLAYBACK_ERROR,
+      Events.PLAYBACK_ERROR,
       (error: PlaybackError) => {
         trace(`${T} on PLAYBACK_ERROR`, {
           error: {
@@ -215,6 +217,7 @@ export class SourceController extends CorePlugin {
         if (this.switching) {
           return
         }
+        this.autoPlay = !!this.core.activeContainer.actionsMetadata.playEvent?.autoPlay
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
             this.core.activeContainer?.getPlugin('poster')?.disable()
@@ -225,7 +228,7 @@ export class SourceController extends CorePlugin {
         }
       },
     )
-    this.core.activePlayback.on(ClapprEvents.PLAYBACK_PLAY, () => {
+    this.core.activePlayback.on(Events.PLAYBACK_PLAY, () => {
       trace(`${T} on PLAYBACK_PLAY`, {
         currentSource: this.sourcesList[this.currentSourceIndex],
         retrying: this.active,
@@ -236,6 +239,16 @@ export class SourceController extends CorePlugin {
         this.core.activeContainer?.getPlugin('spinner')?.hide()
       }
     })
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAY,
+      (_: string, { autoPlay }: { autoPlay?: boolean}) => {
+        trace(`${T} onContainerPlay`, {
+          autoPlay,
+        })
+        this.autoPlay = !!autoPlay
+      },
+    )
   }
 
   private reset() {
@@ -255,17 +268,20 @@ export class SourceController extends CorePlugin {
       trace(`${T} retryPlayback syncing...`, {
         nextSource,
       })
-      const rnd = RETRY_DELAY_BLUR * Math.random()
+      const rnd = Math.round(RETRY_DELAY_BLUR * Math.random())
       this.sync(() => {
-        trace(`${T} retryPlayback loading...`)
         this.switching = false
         this.core.load(nextSource.source, nextSource.mimeType)
         trace(`${T} retryPlayback loaded`, {
           nextSource,
         })
         setTimeout(() => {
-          this.core.activePlayback.play()
-          trace(`${T} retryPlayback playing`)
+          trace(`${T} retryPlayback playing`, {
+            autoPlay: this.autoPlay,
+          })
+          this.core.activeContainer.play({
+            autoPlay: this.autoPlay,
+          })
         }, rnd)
       })
     })

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

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-
 import FakeTimers from '@sinonjs/fake-timers'
 
 import { SourceController } from '../SourceController'
@@ -11,6 +10,11 @@ import {
   createSpinnerPlugin,
 } from '../../../testUtils.js'
 
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// setTracer(new LogTracer('SourceController.test'))
+// Logger.enable('*')
+
 const MOCK_SOURCES = [
   {
     source: 'http://0eab.cdn.globo.com/1932-1447.mpd',
@@ -85,8 +89,6 @@ describe('SourceController', () => {
           code: PlaybackErrorCode.MediaSourceUnavailable,
         })
         nextPlayback = createMockPlayback()
-        vi.spyOn(nextPlayback, 'consent')
-        vi.spyOn(nextPlayback, 'play')
         core.activePlayback = nextPlayback
       })
       it('should load the next source after a delay', async () => {
@@ -101,7 +103,7 @@ describe('SourceController', () => {
         await clock.tickAsync(1000)
         expect(nextPlayback.play).not.toHaveBeenCalled()
         await clock.tickAsync(500) // TODO check randomness
-        expect(nextPlayback.play).toHaveBeenCalled()
+        expect(core.activeContainer.play).toHaveBeenCalled()
       })
       it('should not call consent', async () => {
         await clock.tickAsync(1500)
@@ -151,8 +153,6 @@ describe('SourceController', () => {
           code: PlaybackErrorCode.MediaSourceUnavailable,
         })
         nextPlayback = createMockPlayback()
-        vi.spyOn(nextPlayback, 'consent')
-        vi.spyOn(nextPlayback, 'play')
         core.activePlayback = nextPlayback
       })
       it('should sync with the spinner before reloading the source', async () => {
@@ -234,8 +234,6 @@ describe('SourceController', () => {
         })
         await clock.tickAsync(1)
         nextPlayback = createMockPlayback()
-        vi.spyOn(nextPlayback, 'consent')
-        vi.spyOn(nextPlayback, 'play')
         core.activePlayback = nextPlayback
       })
       it('should run handler only once', async () => {
@@ -248,5 +246,27 @@ describe('SourceController', () => {
         )
       })
     })
+    describe('when playback was started with autoPlay', () => {
+      beforeEach(async () => {
+        core = createMockCore({
+          sources: MOCK_SOURCES,
+        })
+        const _ = new SourceController(core)
+        core.emit('core:ready')
+        core.emit('core:active:container:changed')
+        core.activeContainer.actionsMetadata.playEvent = {
+          autoPlay: true,
+        }
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1500)
+      })
+      it('should call play with autoPlay metadata', () => {
+        expect(core.activeContainer.play).toHaveBeenCalledWith({
+          autoPlay: true,
+        })
+      })
+    })
   })
 })

package/src/testUtils.ts

@@ -87,6 +87,7 @@ export function createMockContainer(
   const el = playback.el
   const emitter = new Events()
   return Object.assign(emitter, {
+    actionsMetadata: {},
     el,
     playback,
     options: {
@@ -126,6 +127,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.container = core.activeContainer
   // @ts-ignore
+  mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300)
+  // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
   core.$el.append(mediaControl.$el)