@gcorevideo/player 2.20.7 → 2.20.9

package/src/plugins/dvr-controls/DvrControls.ts

@@ -1,13 +1,17 @@
-import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core';
-import assert from 'assert';
+import { Core, Events, Playback, UICorePlugin, template } from '@clappr/core'
+import assert from 'assert'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import dvrHTML from '../../../assets/dvr-controls/index.ejs';
-import '../../../assets/dvr-controls/dvr_controls.scss';
+import dvrHTML from '../../../assets/dvr-controls/index.ejs'
+import '../../../assets/dvr-controls/dvr_controls.scss'
+import { trace } from '@gcorevideo/utils'
+
+const T = 'plugins.dvr_controls'
 
 /**
- * Adds the DVR controls to the media control UI
+ * PLUGIN that adds the DVR controls to the media control UI
+ *
  * @beta
  *
  * @remarks
@@ -15,23 +19,23 @@ import '../../../assets/dvr-controls/dvr_controls.scss';
  *
  * - {@link MediaControl}
  *
- * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
+ * The plugin renders live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
 export class DvrControls extends UICorePlugin {
-  private static readonly template = template(dvrHTML);
+  private static readonly template = template(dvrHTML)
 
   /**
    * @internal
    */
   get name() {
-    return 'dvr_controls';
+    return 'dvr_controls'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
@@ -39,8 +43,8 @@ export class DvrControls extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .live-button': 'click'
-    };
+      'click .live-button': 'click',
+    }
   }
 
   /**
@@ -48,96 +52,126 @@ export class DvrControls extends UICorePlugin {
    */
   override get attributes() {
     return {
-      'class': 'dvr-controls',
-      'data-dvr-controls': ''
-    };
+      class: 'dvr-controls',
+      'data-dvr-controls': '',
+    }
   }
 
   constructor(core: Core) {
-    super(core);
-    this.settingsUpdate();
+    super(core)
+    this.settingsUpdate()
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
-    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_RENDERED,
+      this.settingsUpdate,
+    )
+    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.bindContainerEvents,
+    )
   }
 
   private bindContainerEvents() {
-    this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
+    this.listenToOnce(
+      this.core.activeContainer,
+      Events.CONTAINER_TIMEUPDATE,
+      this.render,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.onDvrChanged,
+    )
   }
 
-  private dvrChanged(dvrEnabled: boolean) {
+  private onDvrChanged(dvrEnabled: boolean) {
+    trace(`${T} onDvrChanged`, {
+      dvrEnabled,
+    })
     if (this.core.getPlaybackType() !== Playback.LIVE) {
-      return;
+      return
     }
-    this.settingsUpdate();
-    this.core.mediaControl.$el.addClass('live');
+    this.settingsUpdate()
+    this.core.mediaControl.$el.addClass('live')
     if (dvrEnabled) {
-      this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
+      // TODO
       this.core.mediaControl.$el
         .addClass('dvr')
-        .find('.media-control-indicator[data-position], .media-control-indicator[data-duration]')
-        .hide();
+        .find(
+          '.media-control-indicator[data-position], .media-control-indicator[data-duration]',
+        )
+        .hide()
     } else {
-      this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-      this.core.mediaControl.$el.removeClass('dvr');
+      this.core.mediaControl.$el.removeClass('dvr')
     }
   }
 
   private click() {
-    const mediaControl = this.core.getPlugin('media_control');
-    const container = this.core.activeContainer;
+    const mediaControl = this.core.getPlugin('media_control')
+    const container = this.core.activeContainer
 
     if (!container.isPlaying()) {
-      container.play();
+      container.play()
     }
 
     if (mediaControl.$el.hasClass('dvr')) {
-      container.seek(container.getDuration());
+      container.seek(container.getDuration())
     }
   }
 
   private settingsUpdate() {
     // @ts-ignore
-    this.stopListening(); // TODO sort out
-    this.core.getPlugin('media_control').$el.removeClass('live'); // TODO don't access directly
+    this.stopListening() // TODO sort out
+    this.core.getPlugin('media_control').$el.removeClass('live') // TODO don't access directly
     if (this.shouldRender()) {
-      this.render();
-      this.$el.click(() => this.click());
+      this.render()
+      this.$el.click(() => this.click())
     }
-    this.bindEvents();
+    this.bindEvents()
   }
 
   private shouldRender() {
-    const useDvrControls = this.core.options.useDvrControls === undefined || !!this.core.options.useDvrControls;
+    const useDvrControls =
+      this.core.options.useDvrControls === undefined ||
+      !!this.core.options.useDvrControls
 
-    return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
+    return useDvrControls && this.core.getPlaybackType() === Playback.LIVE
   }
 
   /**
    * @internal
    */
   override render() {
-    this.$el.html(DvrControls.template({
-      live: this.core.i18n.t('live'),
-      backToLive: this.core.i18n.t('back_to_live')
-    }));
-    if (this.shouldRender()) {
-      const mediaControl = this.core.getPlugin('media_control');
-      assert(mediaControl, 'media_control plugin is required');
-      // TODO don't tap into the $el directly
-      mediaControl.$el.addClass('live');
-      mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
+    trace(`${T} render`, {
+      dvrEnabled: this.core.activePlayback?.dvrEnabled,
+    })
+    if (!this.shouldRender()) {
+      return this
     }
-
-    return this;
+    this.$el.html(
+      DvrControls.template({
+        live: this.core.i18n.t('live'),
+        backToLive: this.core.i18n.t('back_to_live'),
+      }),
+    )
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    // TODO don't tap into the $el directly
+    mediaControl.$el.addClass('live')
+    mediaControl
+      .$('.media-control-left-panel[data-media-control]')
+      .append(this.$el)
+
+    return this
   }
 }

package/src/plugins/error-screen/ErrorScreen.ts

@@ -8,6 +8,10 @@ import templateHtml from '../../../assets/error-screen/error_screen.ejs'
 import '../../../assets/error-screen/error_screen.scss'
 import { PlaybackErrorCode } from '../../playback.types.js'
 
+/**
+ * An error fired in the player and plugins code to be handled in the UI
+ * @beta
+ */
 export type ErrorDesc = {
   description: string
   level: string
@@ -29,14 +33,21 @@ type ErrorScreenDesc = {
   icon?: string
 }
 
+/**
+ * Configuration options for the {@link ErrorScreen | error screen} plugin.
+ * @beta
+ */
 export type ErrorScreenPluginSettings = {
+  /**
+   * Whether to hide the reload button.
+   */
   noReload?: boolean
 }
 
 const T = 'plugins.error_screen'
 
 /**
- * Displays an error nicely in the overlay on top of the player.
+ * PLUGIN that displays errors nicely in the overlay on top of the player.
  * @beta
  */
 export class ErrorScreen extends UICorePlugin {

package/src/plugins/favicon/Favicon.ts

@@ -1,7 +1,7 @@
 import { CorePlugin, Events, $, Core, Container } from '@clappr/core';
 
 import { CLAPPR_VERSION } from '../../build.js';
-import { ZeptoResult } from '../../utils/types.js';
+import { ZeptoResult } from '../../types.js';
 
 import playIcon from '../../../assets/icons/new/play.svg';
 import pauseIcon from '../../../assets/icons/new/pause.svg';

package/src/plugins/index.ts

@@ -19,7 +19,6 @@ export * from "./error-screen/ErrorScreen.js";
 export * from "./favicon/Favicon.js";
 // _ ga-events
 export * from "./google-analytics/GoogleAnalytics.js";
-export * from "./kibo/index.js";
 export * from "./level-selector/LevelSelector.js";
 export * from "./logo/Logo.js";
 export * from "./media-control/MediaControl.js";

package/src/plugins/kibo/index.ts

@@ -11,9 +11,6 @@ type KeyboardEventBindings = {
 
 type UpDown = 'up' | 'down';
 
-/**
- * @internal
- */
 export class Kibo {
   private lastKeyCode = -1;
 

package/src/plugins/level-selector/LevelSelector.ts

@@ -4,7 +4,7 @@ import assert from 'assert'
 
 import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../../build.js'
-import { ZeptoResult } from '../../utils/types.js'
+import { ZeptoResult } from '../../types.js'
 import { TemplateFunction } from '../types.js'
 import { BottomGear } from '../bottom-gear/BottomGear.js'
 
@@ -15,11 +15,15 @@ import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg'
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg'
 import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
-import { MediaControl } from '../media-control/MediaControl.js'
+import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js'
 
 const T = 'plugins.level_selector'
 const VERSION = '2.19.4'
 
+/**
+ * Configuration options for the {@link LevelSelector | level selector} plugin.
+ * @beta
+ */
 export interface LevelSelectorPluginSettings {
   /**
    * The maximum resolution to allow in the level selector.
@@ -36,7 +40,7 @@ export interface LevelSelectorPluginSettings {
 }
 
 /**
- * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
+ * PLUGIN that provides a UI to select the desired quality level of the playback.
  * @beta
  *
  * @remarks
@@ -46,9 +50,7 @@ export interface LevelSelectorPluginSettings {
  *
  * - {@link BottomGear}
  *
- * The plugin is rendered as an item in the gear menu.
- *
- * When clicked, it shows a list of quality levels to choose from.
+ * The plugin is rendered as an item in the gear menu, which, when clicked, shows a list of quality levels to choose from.
  *
  * Configuration options - {@link LevelSelectorPluginSettings}
  *
@@ -125,8 +127,7 @@ export class LevelSelector extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
@@ -134,6 +135,18 @@ export class LevelSelector extends UICorePlugin {
     )
   }
 
+  private onCoreReady() {
+    trace(`${T} onCoreReady`);
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+  }
+
+  private onGearRendered() {
+    trace(`${T} onGearRendered`);
+    this.deferRender();
+  }
+
   private bindPlaybackEvents() {
     this.removeAuto = false
     this.isHd = false
@@ -301,8 +314,9 @@ export class LevelSelector extends UICorePlugin {
   private goBack() {
     trace(`${T} goBack`)
     this.isOpen = false
-    this.core.trigger('gear:refresh')
-    this.deferRender()
+    setTimeout(() => {
+      this.core.getPlugin('bottom_gear').refresh()
+    }, 0);
   }
 
   private setLevel(index: number) {

package/src/plugins/logo/Logo.ts

@@ -2,7 +2,7 @@ import { UIContainerPlugin, Events, template as t, Container } from '@clappr/cor
 
 import { CLAPPR_VERSION } from '../../build.js';
 import { calculateSize } from './utils/index.js';
-import { ZeptoResult } from '../../utils/types.js';
+import { ZeptoResult } from '../../types.js';
 
 import logoHTML from '../../../assets/logo/templates/logo.ejs';
 import '../../../assets/logo/styles/logo.scss';

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

@@ -20,7 +20,7 @@ import { type TimeProgress } from '../../playback.types.js'
 import { Kibo } from '../kibo/index.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
-import { ZeptoResult } from '../../utils/types.js'
+import { ZeptoResult } from '../../types.js'
 import { getPageX, isFullscreen } from '../utils.js'
 
 import '../../../assets/media-control/media-control.scss'
@@ -88,7 +88,7 @@ type DisabledClickable = {
 }
 
 /**
- * The MediaControl provides a foundation for developing custom media controls UI.
+ * PLUGIN that provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
@@ -107,7 +107,7 @@ export class MediaControl extends UICorePlugin {
 
   private currentDurationValue: number = 0
   private currentPositionValue: number = 0
-  private currentSeekBarPercentage: number | null = null
+  private currentSeekBarPercentage = 0
 
   private disabledClickableList: DisabledClickable[] = []
   private displayedDuration: string | null = null
@@ -218,7 +218,7 @@ export class MediaControl extends UICorePlugin {
 
   /**
    * @internal
-   * @deprecated
+   * @deprecated Use core.activeContainer directly
    */
   get container() {
     return this.core.activeContainer
@@ -226,7 +226,7 @@ export class MediaControl extends UICorePlugin {
 
   /**
    * @internal
-   * @deprecated
+   * @deprecated Use core.activePlayback directly
    */
   get playback() {
     return this.core.activePlayback
@@ -275,6 +275,10 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
+  get currentSeekPos() {
+    return this.currentSeekBarPercentage
+  }
+
   /**
    * Current volume [0..100]
    */
@@ -746,11 +750,10 @@ export class MediaControl extends UICorePlugin {
     this.changeTogglePlay()
     this.bindContainerEvents()
     this.settingsUpdate()
-    this.core.activeContainer &&
-      this.core.activeContainer.trigger(
-        Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-        this.core.activeContainer.isDvrInUse(),
-      )
+    this.core.activeContainer.trigger(
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.core.activeContainer.isDvrInUse(),
+    )
     // TODO test
     if (this.core.activeContainer.mediaControlDisabled) {
       this.disable()

package/src/plugins/multi-camera/MultiCamera.ts

@@ -9,7 +9,7 @@ import '../../../assets/multi-camera/style.scss';
 import streamsIcon from '../../../assets/icons/old/streams.svg';
 import streamsMomentoIcon from '../../../assets/icons/old/language.svg';
 import streamsWhiteNightsIcon from '../../../assets/icons/old/wn.svg';
-import { ZeptoResult } from '../../utils/types.js';
+import { ZeptoResult } from '../../types.js';
 
 type MultisourcesMode = 'one_first' | 'only_live' | 'show_all';
 
@@ -26,7 +26,7 @@ const VERSION = '0.0.1';
 const T = 'plugins.multicamera';
 
 /**
- * The plugin adds support for loading multiple streams and switching between them using the media control UI.
+ * PLUGIN that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
  */
 export class MultiCamera extends UICorePlugin {
@@ -381,11 +381,11 @@ export class MultiCamera extends UICorePlugin {
     this.toggleContextMenu();
   }
 
-  getCamerasList() {
+  private getCamerasList() {
     return this.multicamera;
   }
 
-  getCurrentCamera() {
+  private getCurrentCamera() {
     return this.currentCamera;
   }