@gcorevideo/player 2.19.11 → 2.19.13

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -1,7 +1,7 @@
 import { UICorePlugin, template, Events } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pipIcon from '../../../assets/icons/new/pip.svg';
 import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
@@ -9,11 +9,11 @@ import '../../../assets/picture-in-picture/button.scss';
 
 const VERSION = '0.0.1';
 
-const T = `plugins.picture_in_picture`;
+const T = `plugins.media_control_pip`;
 
 export class PictureInPicture extends UICorePlugin {
   get name() {
-    return 'picture_in_picture';
+    return 'media_control_pip';
   }
 
   get supportedVersion() {

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -1,6 +1,6 @@
 import { Events, UICorePlugin, Playback, template } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import type { ZeptoResult } from '../../utils/types.js';
 
 import pluginHtml from '../../../assets/playback-rate/playback-rate-selector.ejs';
@@ -28,6 +28,7 @@ const DEFAULT_PLAYBACK_RATES = [
 
 const DEFAULT_PLAYBACK_RATE = '1.0';
 
+// TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 
 export class PlaybackRate extends UICorePlugin {
@@ -40,7 +41,7 @@ export class PlaybackRate extends UICorePlugin {
   private selectedRate: string = DEFAULT_PLAYBACK_RATE;
 
   get name() {
-    return 'playback_rate';
+    return 'media_control_playback_rate';
   }
 
   get supportedVersion() {
@@ -265,5 +266,3 @@ export class PlaybackRate extends UICorePlugin {
     currentLevelElement.find('a').addClass('gcore-skin-active');
   }
 }
-
-// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';

package/src/plugins/poster/Poster.ts

@@ -13,7 +13,7 @@ import {
 } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 import type { ZeptoResult } from '../../utils/types.js'
 
 import '../../../assets/poster/poster.scss'
@@ -23,6 +23,33 @@ import { PlaybackError } from '../../playback.types.js'
 
 const T = 'plugins.poster_custom'
 
+/**
+ * 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.
+ *
+ * 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
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 export class Poster extends UIContainerPlugin {
   private hasFatalError = false
 
@@ -34,27 +61,26 @@ export class Poster extends UIContainerPlugin {
 
   private $playWrapper: ZeptoResult | null = null
 
+  /**
+   * @internal
+   */
   get name() {
     return 'poster_custom'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION }
   }
 
-  get template() {
-    return template(posterHTML)
-  }
+  private static readonly template = template(posterHTML)
 
-  get shouldRender() {
+  private get shouldRender() {
     if (!this.enabled) {
       return false
     }
-    // const showOnError = this.options.poster?.showOnError !== false
-    trace(`${T} shouldRender`, {
-      hasFatalError: this.hasFatalError,
-    })
-
     const showForNoOp = !!this.options.poster?.showForNoOp
     return (
       this.container.playback.name !== 'html_img' &&
@@ -63,6 +89,9 @@ export class Poster extends UIContainerPlugin {
     )
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       class: 'player-poster',
@@ -70,16 +99,22 @@ export class Poster extends UIContainerPlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       click: 'clicked',
     }
   }
 
-  get showOnVideoEnd() {
+  private get showOnVideoEnd() {
     return this.options.poster?.showOnVideoEnd !== false
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop)
     this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay)
@@ -97,12 +132,18 @@ export class Poster extends UIContainerPlugin {
     this.listenTo(this.container, Events.PLAYBACK_PLAY_INTENT, this.onPlayIntent)
   }
 
+  /**
+   * Reenables earlier disabled plugin
+   */
   override enable() {
     super.enable()
     this.hasStartedPlaying = this.container.playback.isPlaying()
     this.update()
   }
 
+  /**
+   * Disables the plugin, unmounting it from the DOM
+   */
   override disable() {
     trace(`${T} disable`)
     this.hasStartedPlaying = false
@@ -252,12 +293,15 @@ export class Poster extends UIContainerPlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override render() {
     if (!this.shouldRender) {
       return this
     }
 
-    this.$el.html(this.template())
+    this.$el.html(Poster.template())
 
     const isRegularPoster =
       this.options.poster && this.options.poster.custom === undefined
@@ -291,6 +335,9 @@ export class Poster extends UIContainerPlugin {
     return this
   }
 
+  /**
+   * @internal
+   */
   override destroy() {
     this.container.$el.removeClass('container-with-poster-clickable')
     return this

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

@@ -5,7 +5,7 @@
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
 import { TimeUpdate } from '../../playback.types.js';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html';
 import '../../../assets/seek-time/seek-time.scss';
@@ -15,7 +15,7 @@ const { formatTime } = Utils;
 
 export class SeekTime extends UICorePlugin {
   get name() {
-    return 'seek_time';
+    return 'media_control_seek_time';
   }
 
   get supportedVersion() {

package/src/plugins/share/Share.ts

@@ -1,6 +1,6 @@
 import { Container, Events, UICorePlugin, template } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/share/share.ejs';
 import '../../../assets/share/style.scss';
@@ -15,7 +15,7 @@ export class Share extends UICorePlugin {
   private container: Container | null = null;
 
   get name() {
-    return 'share';
+    return 'media_control_share';
   }
 
   get supportedVersion() {

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

@@ -1,6 +1,6 @@
 import { UICorePlugin as UICorePluginOriginal, Browser, Playback, Events, template } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/skip-time/skip-time.ejs';
 import '../../../assets/skip-time/style.scss';

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

@@ -12,7 +12,7 @@ import {
 } from '../../types.js'
 import { trace } from '@gcorevideo/utils'
 
-import { CLAPPR_VERSION } from '../build'
+import { CLAPPR_VERSION } from '../../build.js'
 
 const T = 'plugins.source_controller'
 
@@ -137,7 +137,6 @@ export class SourceController extends CorePlugin {
     } else {
       this.sync = noSync
     }
-    // TODO bind to CORE_ACTIVE_CONTAINER_CHANGED
     this.bindContainerEventListeners()
     if (this.active) {
       this.core.activeContainer?.getPlugin('poster_custom')?.disable()

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

@@ -75,6 +75,7 @@ describe('SourceController', () => {
         })
         const _ = new SourceController(core)
         core.emit('core:ready')
+        core.emit('core:active:container:changed')
         core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
         nextPlayback =  new _MockPlayback({} as any, {} as any)
         vi.spyOn(nextPlayback, 'consent')
@@ -111,6 +112,7 @@ describe('SourceController', () => {
             }
           })
           core.emit('core:ready')
+          core.emit('core:active:container:changed')
         })
         it('should disable the poster', async () => {
           expect(poster.disable).toHaveBeenCalled()
@@ -134,6 +136,7 @@ describe('SourceController', () => {
         })
         const _ = new SourceController(core)
         core.emit('core:ready')
+        core.emit('core:active:container:changed')
         core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
         nextPlayback =  new _MockPlayback({} as any, {} as any)
         vi.spyOn(nextPlayback, 'consent')
@@ -157,6 +160,7 @@ describe('SourceController', () => {
         })
         const _ = new SourceController(core)
         core.emit('core:ready')
+        core.emit('core:active:container:changed')
         core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
         await clock.tickAsync(1000)
         nextPlayback =  new _MockPlayback({} as any, {} as any)
@@ -172,6 +176,7 @@ describe('SourceController', () => {
           }
         })
         core.emit('core:ready')
+        core.emit('core:active:container:changed')
         nextPlayback.emit('playback:play')
       })
       it('should enable the poster', async () => {

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -9,7 +9,7 @@ import { trace } from '@gcorevideo/utils';
 import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';
 import '../../../assets/spinner-three-bounce/spinner.scss';
 import { TimerId } from '../../utils/types.js';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 const T = 'plugins.spinner'
 

package/src/plugins/statistics/Statistics.ts

@@ -5,7 +5,7 @@ import type { PlaybackType } from '../..//types'
 import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
 
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 
 const CUSTOM_EVENTS_CONTAINER_START = 'container:start'
 

package/src/plugins/subtitles/Subtitles.ts

@@ -11,7 +11,7 @@ import { type TimeValue } from '../../playback.types.js'
 import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
 
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 
 import '../../../assets/subtitles/style.scss'
 import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg'
@@ -26,7 +26,7 @@ const VERSION: string = '0.0.1'
 
 const LOCAL_STORAGE_SUBTITLES_ID = 'subtitles_select'
 
-const T = 'plugins.subtitles'
+const T = 'plugins.media_control_subtitles'
 
 type TextTrackInfo = {
   language: string
@@ -53,7 +53,7 @@ export class Subtitles extends UICorePlugin {
   private $string: ZeptoResult | undefined
 
   get name() {
-    return 'subtitles'
+    return 'media_control_subtitles'
   }
 
   get supportedVersion() {

package/src/plugins/thumbnails/Thumbnails.ts

@@ -4,7 +4,7 @@ import parseSRT, { type ParsedSRT } from 'parse-srt';
 
 import { TimeValue } from '../../playback.types.js';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs';
 import '../../../assets/thumbnails/style.scss';
@@ -31,7 +31,7 @@ type Thumb = {
   imageH?: number;
 }
 
-const T = 'plugins.thumbnails';
+const T = 'plugins.media_control_thumbnails';
 
 export class Thumbnails extends UICorePlugin {
   private _$spotlight: ZeptoResult | null = null;
@@ -61,7 +61,7 @@ export class Thumbnails extends UICorePlugin {
   private _thumbs: Thumb[] = [];
 
   get name() {
-    return 'thumbnails';
+    return 'media_control_thumbnails';
   }
 
   get supportedVersion() {

package/src/plugins/types.ts

@@ -0,0 +1 @@
+export type TemplateFunction = (data: Record<string, unknown>) => string

package/src/plugins/vast-ads/VastAds.ts

@@ -15,7 +15,7 @@ import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
 import { TimePosition } from '../../playback.types.js'
 
-import { CLAPPR_VERSION } from '../build.js'
+import { CLAPPR_VERSION } from '../../build.js'
 import { TimerId, ZeptoResult } from '../../utils/types.js'
 import RollManager from './rollmanager.js'
 import SCTEManager from './sctemanager.js'
@@ -817,7 +817,7 @@ export class VastAds extends UICorePlugin {
     setTimeout(async () => {
       if (currentRoll === 'scteroll') {
         this.options.mute = this.core.options.mute
-        this.core.mediaControl.setMuted(this.core.options.mute)
+        this.setMuted(this.core.options.mute)
         this.core.mediaControl.setInitialVolume()
       }
 
@@ -882,7 +882,7 @@ export class VastAds extends UICorePlugin {
         }
         await this.playback?.play()
         this.options.mute = this.core.options.mute
-        this.core.mediaControl.setMuted(this.core.options.mute)
+        this.setMuted(this.core.options.mute)
         this.core.mediaControl.setInitialVolume()
       }
     }, 0)
@@ -909,7 +909,7 @@ export class VastAds extends UICorePlugin {
     return this
   }
 
-  // destroy() {
-  //   super.destroy();
-  // }
+  private setMuted(muted: boolean) {
+    this.core.activeContainer.options.mute = muted
+  }
 }