@gcorevideo/player 2.20.22 → 2.21.3

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

@@ -27,7 +27,6 @@ import { ZeptoResult } from '../../types.js'
 import { getPageX, isFullscreen } from '../utils.js'
 
 import '../../../assets/media-control/media-control.scss'
-import '../../../assets/media-control/plugins.scss'
 
 import mediaControlHTML from '../../../assets/media-control/media-control.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
@@ -44,7 +43,6 @@ import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
  */
 export type MediaControlElement =
   | 'audioTracksSelector'
-  | 'bottomGear' // an alias of gear
   | 'clipText'
   | 'gear'
   | 'pip'
@@ -143,8 +141,6 @@ export class MediaControl extends UICorePlugin {
 
   private $audioTracksSelector: ZeptoResult | null = null
 
-  private $bottomGear: ZeptoResult | null = null
-
   private $clipText: ZeptoResult | null = null
 
   private $clipTextContainer: ZeptoResult | null = null
@@ -175,8 +171,6 @@ export class MediaControl extends UICorePlugin {
 
   private $seekBarScrubber: ZeptoResult | null = null
 
-  private $subtitlesSelector: ZeptoResult | null = null
-
   private $volumeBarContainer: ZeptoResult | null = null
 
   private $volumeBarBackground: ZeptoResult | null = null
@@ -207,7 +201,8 @@ export class MediaControl extends UICorePlugin {
 
   private get disabled() {
     const playbackIsNOOP =
-      this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP
+      this.core.activeContainer &&
+      this.core.activeContainer.getPlaybackType() === Playback.NO_OP
 
     return this.userDisabled || playbackIsNOOP
   }
@@ -300,9 +295,7 @@ export class MediaControl extends UICorePlugin {
     this.bindKeyEvents()
 
     this.userDisabled = false
-    if (
-      this.options.chromeless
-    ) {
+    if (this.options.chromeless) {
       this.disable()
     }
 
@@ -368,9 +361,21 @@ export class MediaControl extends UICorePlugin {
   }
 
   private bindContainerEvents() {
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.changeTogglePlay)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.changeTogglePlay)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.changeTogglePlay)
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAY,
+      this.changeTogglePlay,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PAUSE,
+      this.changeTogglePlay,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_STOP,
+      this.changeTogglePlay,
+    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_DBLCLICK,
@@ -412,7 +417,11 @@ export class MediaControl extends UICorePlugin {
       this.enable,
     )
     this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended)
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onVolumeChanged)
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_VOLUME,
+      this.onVolumeChanged,
+    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_OPTIONS_CHANGE,
@@ -981,11 +990,15 @@ export class MediaControl extends UICorePlugin {
   }
 
   private settingsUpdate() {
-    const newSettings = $.extend(true, {
-      left: [],
-      default: [],
-      right: [],
-    }, this.core.activeContainer?.settings)
+    const newSettings = $.extend(
+      true,
+      {
+        left: [],
+        default: [],
+        right: [],
+      },
+      this.core.activeContainer?.settings,
+    )
 
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'clipsText', 'volume'],
@@ -1059,14 +1072,6 @@ export class MediaControl extends UICorePlugin {
     this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]')
     this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]')
     this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]')
-    this.$bottomGear = this.$el.find('.media-control-bottomgear')
-    this.$pip = this.$el.find('.media-control-pip')
-    this.$audioTracksSelector = this.$el.find(
-      '.media-control-audio-tracks[data-audiotracks]',
-    )
-    this.$subtitlesSelector = this.$el.find(
-      '.media-control-subtitles[data-subtitles]',
-    )
     this.$playbackRate = this.$el.find(
       '.media-control-playbackrate[data-playbackrate]',
     )
@@ -1086,6 +1091,7 @@ export class MediaControl extends UICorePlugin {
    * Get a media control element DOM node
    * @param name - The name of the media control element
    * @returns The DOM node to render to or extend
+   * @deprecated  Use {@link MediaControl.putElement} instead
    * @remarks
    * Use this method to render custom media control UI in a plugin
    * @example
@@ -1103,20 +1109,36 @@ export class MediaControl extends UICorePlugin {
   getElement(name: MediaControlElement): ZeptoResult | null {
     switch (name) {
       case 'audioTracksSelector':
-        return this.$audioTracksSelector
+        return null
       case 'clipText':
         return this.$clipText
-      case 'bottomGear':
       case 'gear':
-        return this.$bottomGear
+        return null
       case 'pip':
-        return this.$pip
+        return null
       case 'playbackRate':
         return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
       case 'subtitlesSelector':
-        return this.$subtitlesSelector
+        return null
+    }
+  }
+
+  putElement(name: MediaControlElement, element: ZeptoResult) {
+    switch (name) {
+      case 'audioTracksSelector':
+        this.getRightPanel().append(element)
+        break
+      case 'gear':
+        this.getRightPanel().append(element)
+        break
+      case 'pip':
+        this.getRightPanel().append(element)
+        break
+      case 'subtitlesSelector':
+        this.getRightPanel().append(element)
+        break
     }
   }
 

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

@@ -52,6 +52,12 @@ export class PictureInPicture extends UICorePlugin {
     };
   }
 
+  override get attributes() {
+    return {
+      'class': 'media-control-pip',
+    };
+  }
+
   private get videoElement() {
     return this.core.activePlayback.el;
   }
@@ -86,7 +92,7 @@ export class PictureInPicture extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {
-      mediaControl.getElement('pip')?.html(this.el);
+      mediaControl.putElement('pip', this.el);
     }
 
     return this;

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

@@ -46,6 +46,7 @@ const T = 'plugins.playback_rate';
  * - {@link BottomGear | bottom_gear}
  *
  * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
  */
 export class PlaybackRate extends UICorePlugin {
   private playbackRates: PlaybackRateOption[] = DEFAULT_PLAYBACK_RATES;

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

@@ -139,7 +139,6 @@ export class SourceController extends CorePlugin {
   private onCoreReady() {
     trace(`${T} onCoreReady`)
     this.core.getPlugin('error_screen')?.disable() //  TODO test
-    // this.core.getPlugin('spinner')?.showOnError()
   }
 
   private onActiveContainerChanged() {

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

@@ -73,8 +73,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
 
   private hasBuffering = false
 
-  private _showOnError = false
-
   constructor(container: Container) {
     super(container)
     this.listenTo(
@@ -94,10 +92,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     this.listenTo(this.container, ClapprEvents.CONTAINER_READY, this.render)
   }
 
-  public showOnError() {
-    this._showOnError = true
-  }
-
   private onBuffering() {
     this.hasBuffering = true
     this._show()
@@ -117,12 +111,8 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
 
   private onStop() {
     trace(`${T} onStop`, {
-      showOnError: this._showOnError,
       hasFatalError: this.hasFatalError,
     })
-    // if (!(this.hasFatalError && this._showOnError)) {
-    //   this._hide()
-    // }
     this._hide()
   }
 
@@ -130,15 +120,9 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable
     trace(`${T} onError`, {
       e,
-      showOnError: this._showOnError,
       hasFatalError: this.hasFatalError,
       error: e.code,
     })
-    // if (this._showOnError) {
-    //   this._show()
-    // } else {
-    //   this._hide()
-    // }
     this._hide()
   }
 
@@ -189,18 +173,15 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
    * @internal
    */
   override render() {
-    // TODO control via sourcecontroller instead
-    const showOnStart = this.options.spinner?.showOnStart
     trace(`${T} render`, {
       buffering: this.container.buffering,
-      showOnStart,
     })
     this.$el.html(this.template())
     this.el.firstElementChild?.addEventListener('animationiteration', () => {
       this.trigger(SpinnerEvents.SYNC)
     })
     this.container.$el.append(this.$el[0])
-    if (showOnStart || this.container.buffering) {
+    if (this.container.buffering) {
       this._show()
     } else {
       this._hide()