@gcorevideo/player 2.19.15 → 2.20.1

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

@@ -44,6 +44,7 @@ describe('LevelSelector', () => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
+      let bottomGear: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -57,10 +58,14 @@ describe('LevelSelector', () => {
           if (name === 'media_control') {
             return mediaControl
           }
+          if (name === 'bottom_gear') {
+            return bottomGear
+          }
           return null
         }),
       })
       mediaControl = createMediaControl(core)
+      bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('initially', () => {
@@ -71,29 +76,15 @@ describe('LevelSelector', () => {
         await clock.tickAsync(1)
       })
       it('should render the proper level label', () => {
+        // @ts-ignore
         expect(levelSelector.el.textContent).toMatchQualityLevelLabel('Auto')
       })
     })
     describe.each([
-      [
-        'auto',
-        LEVELS,
-        -1,
-        'Auto',
-      ],
-      [
-        'standard label',
-        LEVELS,
-        0,
-        '360p',
-      ],
-      [
-        'custom label',
-        LEVELS,
-        1,
-        'HD',
-      ],
-    ])("%s", (_, levels, current, label) => {
+      ['auto', LEVELS, -1, 'Auto'],
+      ['standard label', LEVELS, 0, '360p'],
+      ['custom label', LEVELS, 1, 'HD'],
+    ])('%s', (_, levels, current, label) => {
       beforeEach(async () => {
         core.emit('core:active:container:changed')
         await clock.tickAsync(1)
@@ -102,14 +93,19 @@ describe('LevelSelector', () => {
         await clock.tickAsync(1)
         levelSelector.$el.find('.gear-option').click()
         await clock.tickAsync(1)
-        levelSelector.$el.find(`.gear-sub-menu_btn[data-id="${current}"]`).click()
+        levelSelector.$el
+          .find(`.gear-sub-menu_btn[data-id="${current}"]`)
+          .click()
         await clock.tickAsync(1)
       })
       it('should render the proper level labels', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
       })
       it('should render the selected level', () => {
-        expect(levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent).toMatchQualityLevelOption(label)
+        expect(
+          levelSelector.$el.find('ul.gear-sub-menu .current')[0].textContent,
+          // @ts-ignore
+        ).toMatchQualityLevelOption(label)
       })
     })
   })
@@ -118,6 +114,7 @@ describe('LevelSelector', () => {
       const activeContainer = createContainer()
       activePlayback = createPlayback()
       let mediaControl: UICorePlugin | null = null
+      let bottomGear: UICorePlugin | null = null
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
@@ -131,10 +128,14 @@ describe('LevelSelector', () => {
           if (name === 'media_control') {
             return mediaControl
           }
+          if (name === 'bottom_gear') {
+            return bottomGear
+          }
           return null
         }),
       })
       mediaControl = createMediaControl(core)
+      bottomGear = createBottomGear(core)
       levelSelector = new LevelSelector(core)
     })
     describe('basically', () => {
@@ -146,7 +147,8 @@ describe('LevelSelector', () => {
       })
       it('should render the restricted quality level label', () => {
         expect(
-          levelSelector.el.textContent
+          levelSelector.el.textContent,
+          // @ts-ignore
         ).toMatchQualityLevelLabel('360p')
 
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
@@ -185,7 +187,10 @@ describe('LevelSelector', () => {
         expect(levelSelector.el.innerHTML).toMatchSnapshot()
       })
       it('should properly apply the restriction', () => {
-        expect(levelSelector.$el.find('li:not(.level-disabled)')[0].textContent).toMatchQualityLevelOption('360p')
+        expect(
+          levelSelector.$el.find('li:not(.level-disabled)')[0].textContent,
+          // @ts-ignore
+        ).toMatchQualityLevelOption('360p')
       })
     })
   })
@@ -217,7 +222,10 @@ expect.extend({
       .trim()
     return {
       pass: rendered.includes(`Quality ${expected}`),
-      message: () => `Quality label must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+      message: () =>
+        `Quality label must${
+          isNot ? ' not' : ''
+        } be ${expected} in "${rendered}"`,
     }
   },
   toMatchQualityLevelOption(received, expected) {
@@ -228,13 +236,26 @@ expect.extend({
       .trim()
     return {
       pass: rendered === expected,
-      message: () => `Quality option must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+      message: () =>
+        `Quality option must${
+          isNot ? ' not' : ''
+        } be ${expected} in "${rendered}"`,
     }
-  }
+  },
 })
 
 function createMediaControl(core: any) {
   const mediaControl = new UICorePlugin(core)
+  // @ts-ignore
   mediaControl.getElement = vi.fn().mockReturnValue(null)
   return mediaControl
 }
+
+function createBottomGear(core: any) {
+  const bottomGear = new UICorePlugin(core)
+  // @ts-ignore
+  bottomGear.getElement = vi.fn().mockReturnValue(null)
+  // @ts-ignore
+  bottomGear.setContent = vi.fn()
+  return bottomGear
+}

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/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');