@gcorevideo/player 2.19.15 → 2.20.3

package/src/plugins/level-selector/__tests__/__snapshots__/LevelSelector.test.ts.snap

@@ -8,7 +8,7 @@ exports[`LevelSelector > basically > auto > should render the proper level label
 <ul class="gear-sub-menu">
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="-1" id="level_selector_auto">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
             Auto
         </a>
@@ -16,21 +16,21 @@ exports[`LevelSelector > basically > auto > should render the proper level label
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -48,7 +48,7 @@ exports[`LevelSelector > basically > custom label > should render the proper lev
 <ul class="gear-sub-menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
             Auto
         </a>
@@ -56,21 +56,21 @@ exports[`LevelSelector > basically > custom label > should render the proper lev
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="1" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="0" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -88,7 +88,7 @@ exports[`LevelSelector > basically > standard label > should render the proper l
 <ul class="gear-sub-menu">
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1" id="level_selector_auto">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
             Auto
         </a>
@@ -96,21 +96,21 @@ exports[`LevelSelector > basically > standard label > should render the proper l
     
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_720">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 HD
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_360">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -139,21 +139,21 @@ exports[`LevelSelector > options.restrictResolution > given vertical video forma
     
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_1280">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_640">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>
@@ -172,21 +172,21 @@ exports[`LevelSelector > options.restrictResolution > given vertical video forma
     
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2" id="level_selector_1080">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 1080p
             </a>
         </li>
     
         <li class="level-disabled">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="1" id="level_selector_1280">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 720p
             </a>
         </li>
     
         <li class="current">
-            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color gcore-skin-active" data-id="0" id="level_selector_640">
                 <span class="check-icon">/assets/icons/new/check.svg</span>
                 360p
             </a>

package/src/plugins/logo/Logo.ts

@@ -20,6 +20,10 @@ type LogoOptions = {
   objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 };
 
+/**
+ * The plugin adds custom logo to the player.
+ * @beta
+ */
 export class Logo extends UIContainerPlugin {
   private hasStartedPlaying = false;
 

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

@@ -39,6 +39,7 @@ import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
  * @beta
  */
 export type MediaControlElement =
+  | 'audioTracksSelector'
   | 'bottomGear' // an alias of gear
   | 'clipText'
   | 'gear'
@@ -198,7 +199,7 @@ export class MediaControl extends UICorePlugin {
 
   private get disabled() {
     const playbackIsNOOP =
-      this.container && this.container.getPlaybackType() === Playback.NO_OP
+      this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP
 
     return this.userDisabled || playbackIsNOOP
   }
@@ -1083,6 +1084,8 @@ export class MediaControl extends UICorePlugin {
    */
   getElement(name: MediaControlElement): ZeptoResult | null {
     switch (name) {
+      case 'audioTracksSelector':
+        return this.$audioTracksSelector
       case 'clipText':
         return this.$clipText
       case 'bottomGear':

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

@@ -25,6 +25,9 @@ const VERSION = '0.0.1';
 
 const T = 'plugins.media_control_multicamera';
 
+/**
+ * The plugin adds support for loading multiple streams and switching between them using the media control UI.
+ */
 export class MultiCamera extends UICorePlugin {
   private currentCamera: MediaSourceInfo | null = null;
 

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

@@ -9,31 +9,56 @@ import '../../../assets/picture-in-picture/button.scss';
 
 const VERSION = '0.0.1';
 
-const T = `plugins.media_control_pip`;
-
+const T = `plugins.pip`;
+
+/**
+ * Enables picture in picture mode.
+ * @beta
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * It renders a button to toggle picture in picture mode in the media control UI.
+ */
 export class PictureInPicture extends UICorePlugin {
+  /**
+   * @internal
+   */
   get name() {
-    return 'media_control_pip';
+    return 'pip';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
+  /**
+   * @internal
+   */
   static get version() {
     return VERSION;
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click button': 'togglePictureInPicture',
     };
   }
 
-  get videoElement() {
+  private get videoElement() {
     return this.core.activePlayback.el;
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
   }
@@ -47,6 +72,9 @@ export class PictureInPicture extends UICorePlugin {
     return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
   }
 
+  /**
+   * @internal
+   */
   override render() {
     if (!this.isPiPSupported()) {
       return this;
@@ -64,7 +92,7 @@ export class PictureInPicture extends UICorePlugin {
     return this;
   }
 
-  togglePictureInPicture() {
+  private togglePictureInPicture() {
     trace(`${T} togglePictureInPicture`);
     if (this.videoElement !== document.pictureInPictureElement) {
       this.requestPictureInPicture();
@@ -73,14 +101,14 @@ export class PictureInPicture extends UICorePlugin {
     }
   }
 
-  requestPictureInPicture() {
+  private requestPictureInPicture() {
     trace(`${T} requestPictureInPicture`, {
       videoElement: !!this.videoElement,
     });
     this.videoElement.requestPictureInPicture();
   }
 
-  exitPictureInPicture() {
+  private exitPictureInPicture() {
     trace(`${T} exitPictureInPicture`);
     document.exitPictureInPicture();
   }

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

@@ -31,6 +31,19 @@ const DEFAULT_PLAYBACK_RATE = '1.0';
 // TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 
+/**
+ * Allows changing the playback speed of the video.
+ * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl | media_control}
+ *
+ * - {@link BottomGear | bottom_gear}
+ *
+ * It renders a button in the gear menu, which opens a dropdown with the available playback rates.
+ */
 export class PlaybackRate extends UICorePlugin {
   private currentPlayback: Playback | null = null;
 
@@ -40,18 +53,29 @@ export class PlaybackRate extends UICorePlugin {
 
   private selectedRate: string = DEFAULT_PLAYBACK_RATE;
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'media_control_playback_rate';
+    return 'playback_rate';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
-  get template() {
-    return template(pluginHtml);
-  }
+  private static readonly template = template(pluginHtml);
+
+  private static readonly buttonTemplate = template(buttonHtml);
+
+  private static readonly listTemplate = template(listHtml);
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       'class': this.name,
@@ -59,6 +83,9 @@ export class PlaybackRate extends UICorePlugin {
     };
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click .gear-sub-menu_btn': 'onRateSelect',
@@ -67,8 +94,12 @@ export class PlaybackRate extends UICorePlugin {
     };
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
     this.listenTo(this.core, 'gear:rendered', this.render);
+    // TODO this.core.getPlugin('media_control'), bottom_gear
     this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
     this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
 
@@ -87,7 +118,7 @@ export class PlaybackRate extends UICorePlugin {
     }
   }
 
-  unBindEvents() {
+  private unBindEvents() {
     this.stopListening(this.core, 'gear:rendered', this.render);
     this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
     this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
@@ -121,7 +152,7 @@ export class PlaybackRate extends UICorePlugin {
     }
   }
 
-  reload() {
+  private reload() {
     this.unBindEvents();
     this.bindEvents();
   }
@@ -136,6 +167,9 @@ export class PlaybackRate extends UICorePlugin {
     return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
   }
 
+  /**
+   * @internal
+   */
   override render() {
     const container = this.core.activeContainer;
 
@@ -153,9 +187,7 @@ export class PlaybackRate extends UICorePlugin {
     }
 
     if (this.shouldRender()) {
-      const t = template(buttonHtml);
-      // const html = t({ playbackRates: this.playbackRates, title: this.getTitle() });
-      const button = t({
+      const button = PlaybackRate.buttonTemplate({
         title: this.getTitle(),
         speedIcon,
         arrowRightIcon,
@@ -177,19 +209,19 @@ export class PlaybackRate extends UICorePlugin {
     return this;
   }
 
-  onStartAd() {
+  private onStartAd() {
     this.prevSelectedRate = this.selectedRate;
     this.setSelectedRate('1.0');
     this.listenToOnce(this.currentPlayback, Events.PLAYBACK_PLAY, this.onFinishAd);
   }
 
-  onFinishAd() {
+  private onFinishAd() {
     if (this.prevSelectedRate) {
       this.setSelectedRate(this.prevSelectedRate);
     }
   }
 
-  onPlay() {
+  private onPlay() {
     if (!this.core.mediaControl.$el.hasClass('dvr')) {
       if (this.core.getPlaybackType() === Playback.LIVE) {
         this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -200,11 +232,10 @@ export class PlaybackRate extends UICorePlugin {
     }
   }
 
-  onStop() {
-
+  private onStop() {
   }
 
-  onRateSelect(event: MouseEvent) {
+  private onRateSelect(event: MouseEvent) {
     event.stopPropagation();
     const rate = (event.currentTarget as HTMLElement).dataset.rate;
     if (rate) {
@@ -215,10 +246,8 @@ export class PlaybackRate extends UICorePlugin {
     return false;
   }
 
-  onShowMenu() {
-    const t = template(listHtml);
-
-    this.$el.html(t({
+  private onShowMenu() {
+    this.$el.html(PlaybackRate.listTemplate({
       playbackRates: this.playbackRates,
       arrowLeftIcon,
       checkIcon,
@@ -228,15 +257,15 @@ export class PlaybackRate extends UICorePlugin {
     this.highlightCurrentRate();
   }
 
-  goBack() {
+  private goBack() {
     this.core.trigger('gear:refresh');
   }
 
-  updatePlaybackRate(rate: string) {
+  private updatePlaybackRate(rate: string) {
     this.setSelectedRate(rate);
   }
 
-  setSelectedRate(rate: string) {
+  private setSelectedRate(rate: string) {
     // Set <video playbackRate="..."
     this.core.$el.find('video,audio').get(0).playbackRate = rate;
     this.selectedRate = rate;
@@ -244,7 +273,7 @@ export class PlaybackRate extends UICorePlugin {
     // Player.player.trigger('playbackRateChanged', rate);
   }
 
-  getTitle() {
+  private getTitle() {
     let title = this.selectedRate;
 
     this.playbackRates.forEach((r) => {
@@ -256,7 +285,7 @@ export class PlaybackRate extends UICorePlugin {
     return title;
   }
 
-  highlightCurrentRate() {
+  private highlightCurrentRate() {
     this.allRateElements().removeClass('current');
     this.allRateElements().find('a').removeClass('gcore-skin-active');
 

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

@@ -1,6 +1,6 @@
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
+// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
 import { TimeUpdate } from '../../playback.types.js';
@@ -13,6 +13,10 @@ import { ZeptoResult } from '../../utils/types.js';
 
 const { formatTime } = Utils;
 
+/**
+ * The plugin adds a seek time indicator to the media control UI.
+ * @beta
+ */
 export class SeekTime extends UICorePlugin {
   get name() {
     return 'media_control_seek_time';

package/src/plugins/share/Share.ts

@@ -9,6 +9,9 @@ import closeIcon from '../../../assets/icons/old/close-share.svg';
 import fbIcon from '../../../assets/icons/old/fb.svg';
 import twIcon from '../../../assets/icons/old/twitter.svg';
 
+/**
+ * The plugin adds a share button to the media control UI.
+ */
 export class Share extends UICorePlugin {
   private hide = false;
 

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

@@ -7,6 +7,9 @@ import '../../../assets/skip-time/style.scss';
 
 type Position = 'mid' | 'left' | 'right';
 
+/**
+ * The plugin adds skip controls to the media control UI.
+ */
 export class SkipTime extends UICorePluginOriginal {
   get name() {
     return 'skip_time';