@gcorevideo/player 2.21.3 → 2.21.4

package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap

@@ -0,0 +1,175 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MediaControl > putElement > cc > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-cc="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > gear > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-gear="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;
+
+exports[`MediaControl > putElement > pip > should put the element in the right panel 1`] = `
+"<div class="media-control-background" data-background=""></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls="">
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+    
+    
+        <div class="media-control-left-panel" data-media-control="">
+            
+        <div class="drawer-container" data-volume="">
+            <div class="drawer-icon-container" data-volume="">
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-volume="">/assets/icons/new/volume-max.svg</div>
+                <span class="drawer-text" data-volume=""></span>
+            </div>
+            
+    <div class="bar-container" data-volume="">
+        <div class="bar-background" data-volume="">
+            <div class="bar-fill-1 gcore-skin-main-color" data-volume="" style=""></div>
+        </div>
+        <div class="bar-scrubber" data-volume="" style="">
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-volume=""></div>
+        </div>
+    </div>
+    
+        </div>
+    
+
+        <div class="media-clip-container gcore-skin-text-color" data-clipstext="">
+            <div class="media-clip-point gcore-skin-text-color" data-clipstext="">•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-clipstext=""></div>
+        </div>
+    
+        </div>
+    
+    
+    
+        <div class="media-control-right-panel" data-media-control="">
+            
+        <div class="media-control-multicamera" data-multicamera=""></div>
+    
+        <div class="media-control-vr" data-vr=""></div>
+    
+        <div class="my-media-control" data-pip="">test</div></div>
+    
+</div>
+<style>:root {}</style>"
+`;

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

@@ -43,6 +43,8 @@ export class PictureInPicture extends UICorePlugin {
     return VERSION;
   }
 
+  private static buttonTemplate = template(buttonHtml);
+
   /**
    * @internal
    */
@@ -71,8 +73,8 @@ export class PictureInPicture extends UICorePlugin {
 
   private isPiPSupported() {
     trace(`${T} isPiPSupported`, {
-      pictureInPictureEnabled: document.pictureInPictureEnabled,
-      requestPictureInPicture: HTMLVideoElement.prototype.requestPictureInPicture,
+      pictureInPictureEnabled: !!document.pictureInPictureEnabled,
+      requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
     });
 
     return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
@@ -86,9 +88,7 @@ export class PictureInPicture extends UICorePlugin {
       return this;
     }
 
-    const t = template(buttonHtml);
-
-    this.$el.html(t({ pipIcon }));
+    this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
 
     const mediaControl = this.core.getPlugin('media_control');
     if (mediaControl) {

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

@@ -1,23 +1,26 @@
-import { Events, UICorePlugin, Playback, template, Core } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
-import assert from 'assert';
-
-import { CLAPPR_VERSION } from '../../build.js';
-import type { ZeptoResult } from '../../types.js';
-
-import buttonHtml from '../../../assets/playback-rate/button.ejs';
-import listHtml from '../../../assets/playback-rate/list.ejs';
-import speedIcon from '../../../assets/icons/new/speed.svg';
-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 { BottomGear } from '../bottom-gear/BottomGear.js';
-import { PlaybackEvents } from '../../playback/types.js';
-import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js';
+import { Events, UICorePlugin, Playback, template, Core } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+import assert from 'assert'
+
+import { CLAPPR_VERSION } from '../../build.js'
+import type { ZeptoResult } from '../../types.js'
+
+import buttonHtml from '../../../assets/playback-rate/button.ejs'
+import listHtml from '../../../assets/playback-rate/list.ejs'
+import speedIcon from '../../../assets/icons/new/speed.svg'
+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 { BottomGear } from '../bottom-gear/BottomGear.js'
+import { PlaybackEvents } from '../../playback/types.js'
+import {
+  MediaControl,
+  MediaControlEvents,
+} from '../media-control/MediaControl.js'
 
 type PlaybackRateOption = {
-  value: string;
-  label: string;
+  value: string
+  label: string
 }
 
 const DEFAULT_PLAYBACK_RATES = [
@@ -27,12 +30,12 @@ const DEFAULT_PLAYBACK_RATES = [
   { value: '1.25', label: '1.25x' },
   { value: '1.5', label: '1.5x' },
   { value: '1.75', label: '1.75x' },
-  { value: '2.0', label: '2x' }
-];
+  { value: '2.0', label: '2x' },
+]
 
-const DEFAULT_PLAYBACK_RATE = '1.0';
+const DEFAULT_PLAYBACK_RATE = '1.0'
 
-const T = 'plugins.playback_rate';
+const T = 'plugins.playback_rate'
 
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
@@ -49,37 +52,39 @@ const T = 'plugins.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;
+  private playbackRates: PlaybackRateOption[] = DEFAULT_PLAYBACK_RATES
 
   // Saved when an ad starts to restore after it finishes
-  private prevSelectedRate: string | undefined;
+  private prevSelectedRate: string | undefined
 
-  private rendered = false;
+  private rendered = false
 
-  private selectedRate: string = DEFAULT_PLAYBACK_RATE;
+  private selectedRate: string = DEFAULT_PLAYBACK_RATE
 
   /**
    * @internal
    */
   get name() {
-    return 'playback_rate';
+    return 'playback_rate'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
-  private static readonly buttonTemplate = template(buttonHtml);
+  private static readonly buttonTemplate = template(buttonHtml)
 
-  private static readonly listTemplate = template(listHtml);
+  private static readonly listTemplate = template(listHtml)
 
   constructor(core: Core) {
-    super(core);
-    this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
-    this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+    super(core)
+    this.playbackRates =
+      core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES
+    this.selectedRate =
+      core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE
   }
 
   /**
@@ -87,9 +92,8 @@ export class PlaybackRate extends UICorePlugin {
    */
   override get attributes() {
     return {
-      'class': this.name,
-      'data-playback-rate-select': ''
-    };
+      class: 'media-control-playbackrate',
+    }
   }
 
   /**
@@ -100,38 +104,56 @@ export class PlaybackRate extends UICorePlugin {
       'click .gear-sub-menu_btn': 'onRateSelect',
       'click .gear-option': 'onShowMenu',
       'click .go-back': 'goBack',
-    };
+    }
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onActiveContainerChange,
+    )
   }
 
   private onCoreReady() {
-    const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
-    const gear = this.core.getPlugin('bottom_gear') as BottomGear;
-    assert(gear, 'bottom_gear plugin is required');
-    this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+    trace(`${T} onCoreReady`)
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    const gear = this.core.getPlugin('bottom_gear') as BottomGear
+    assert(gear, 'bottom_gear plugin is required')
+    this.listenTo(
+      mediaControl,
+      MediaControlEvents.MEDIACONTROL_GEAR_RENDERED,
+      this.onGearRendered,
+    )
   }
 
   private onActiveContainerChange() {
-    this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
-    this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
-    this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+    trace(`${T} onActiveContainerChange`)
+    this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop)
+    this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay)
+    this.listenTo(
+      this.core.activePlayback,
+      PlaybackEvents.PLAYBACK_RATE_CHANGED,
+      this.onPlaybackRateChange,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      this.onDvrStateChanged,
+    )
   }
 
   private onGearRendered() {
     trace(`${T} onGearRendered`, {
       rendered: this.rendered,
-    });
-    this.rendered = false;
-    this.render();
+    })
+    this.rendered = false
+    this.render()
   }
 
   private onDvrStateChanged(dvrEnabled: boolean) {
@@ -139,40 +161,45 @@ export class PlaybackRate extends UICorePlugin {
       dvrEnabled,
     })
     if (dvrEnabled) {
-      this.render();
+      this.render()
     }
   }
 
   private allRateElements(): ZeptoResult {
-    return this.$('ul.gear-sub-menu li');
+    return this.$('ul.gear-sub-menu li')
   }
 
-  private rateElement(rate = "1"): ZeptoResult {
-    return (this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`) as ZeptoResult).parent();
+  private rateElement(rate = '1'): ZeptoResult {
+    return (
+      this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`) as ZeptoResult
+    ).parent()
   }
 
   private onPlaybackRateChange(playbackRate: number) {
-    const selectedRate = parseInt(this.selectedRate, 10);
+    const selectedRate = parseInt(this.selectedRate, 10)
     // TODO check it doesn't interfere with the DASH.js or HLS.js playback live catchup
     if (Math.abs(playbackRate - selectedRate) > 0.1) {
       trace(`${T} onPlaybackRateChange setting target rate`, {
         playbackRate,
         selectedRate,
       })
-      this.core.activePlayback?.setPlaybackRate(selectedRate);
+      this.core.activePlayback?.setPlaybackRate(selectedRate)
     }
   }
 
   private shouldRender() {
-    if (!this.core.activeContainer) {
-      return false;
+    if (!this.core.activePlayback) {
+      return false
     }
 
-    if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
-      return false;
+    if (
+      this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+      !this.core.activePlayback.dvrEnabled
+    ) {
+      return false
     }
 
-    return 'setPlaybackRate' in this.core.activePlayback;
+    return 'setPlaybackRate' in this.core.activePlayback
   }
 
   /**
@@ -185,99 +212,114 @@ export class PlaybackRate extends UICorePlugin {
     })
 
     if (!this.shouldRender()) {
-      return this;
+      return this
     }
 
     if (this.rendered) {
-      return this;
+      return this
     }
 
     const button = PlaybackRate.buttonTemplate({
       title: this.getTitle(),
       speedIcon,
       arrowRightIcon,
-    });
+      i18n: this.core.i18n,
+    })
 
-    this.$el.html(button);
+    this.$el.html(button)
 
-    (this.core.getPlugin('bottom_gear') as BottomGear)?.getElement('rate')?.html(this.el);
+    ;(this.core.getPlugin('bottom_gear') as BottomGear)
+      ?.getElement('rate')
+      ?.html(this.el)
 
-    this.rendered = true;
+    this.rendered = true
 
-    return this;
+    return this
   }
 
   private onStartAd() {
-    this.prevSelectedRate = this.selectedRate;
-    this.resetPlaybackRate();
-    this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onFinishAd);
+    this.prevSelectedRate = this.selectedRate
+    this.resetPlaybackRate()
+    this.listenToOnce(
+      this.core.activePlayback,
+      Events.PLAYBACK_PLAY,
+      this.onFinishAd,
+    )
   }
 
   private onFinishAd() {
     if (this.prevSelectedRate) {
-      this.setSelectedRate(this.prevSelectedRate);
+      this.setSelectedRate(this.prevSelectedRate)
     }
   }
 
   private onPlay() {
-    if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
-      this.resetPlaybackRate();
+    if (
+      this.core.getPlaybackType() === Playback.LIVE &&
+      !this.core.activePlayback.dvrEnabled
+    ) {
+      this.resetPlaybackRate()
     } else {
-      this.setSelectedRate(this.selectedRate);
+      this.setSelectedRate(this.selectedRate)
     }
   }
 
   private resetPlaybackRate() {
-    this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
+    this.setSelectedRate(DEFAULT_PLAYBACK_RATE)
   }
 
-  private onStop() {
-  }
+  private onStop() {}
 
   private onRateSelect(event: MouseEvent) {
-    event.stopPropagation();
-    const rate = (event.currentTarget as HTMLElement).dataset.rate;
+    event.stopPropagation()
+    const rate = (event.currentTarget as HTMLElement).dataset.rate
     if (rate) {
-      this.setSelectedRate(rate);
-      this.highlightCurrentRate();
+      this.setSelectedRate(rate)
+      this.highlightCurrentRate()
     }
 
-    return false;
+    return false
   }
 
   private onShowMenu() {
-    this.$el.html(PlaybackRate.listTemplate({
-      playbackRates: this.playbackRates,
-      arrowLeftIcon,
-      checkIcon,
-    }));
-    (this.core.getPlugin('bottom_gear') as BottomGear)?.setContent(this.el);
-    this.highlightCurrentRate();
+    this.$el.html(
+      PlaybackRate.listTemplate({
+        playbackRates: this.playbackRates,
+        arrowLeftIcon,
+        checkIcon,
+        i18n: this.core.i18n,
+      }),
+    )
+    ;(this.core.getPlugin('bottom_gear') as BottomGear)?.setContent(this.el)
+    this.highlightCurrentRate()
   }
 
   private goBack() {
     setTimeout(() => {
       this.core.getPlugin('bottom_gear').refresh()
-    }, 0);
+    }, 0)
   }
 
   private setSelectedRate(rate: string) {
     // Set <video playbackRate="..."
-    this.core.activePlayback?.setPlaybackRate(rate);
-    this.selectedRate = rate;
+    this.core.activePlayback?.setPlaybackRate(rate)
+    this.selectedRate = rate
   }
 
   private getTitle() {
-    return this.playbackRates.find((r) => r.value === this.selectedRate)?.label || this.selectedRate;
+    return (
+      this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
+      this.selectedRate
+    )
   }
 
   private highlightCurrentRate() {
-    this.allRateElements().removeClass('current');
-    this.allRateElements().find('a').removeClass('gcore-skin-active');
+    this.allRateElements().removeClass('current')
+    this.allRateElements().find('a').removeClass('gcore-skin-active')
 
-    const currentLevelElement = this.rateElement(this.selectedRate);
+    const currentLevelElement = this.rateElement(this.selectedRate)
 
-    currentLevelElement.addClass('current');
-    currentLevelElement.find('a').addClass('gcore-skin-active');
+    currentLevelElement.addClass('current')
+    currentLevelElement.find('a').addClass('gcore-skin-active')
   }
 }

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

@@ -0,0 +1,65 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { PlaybackRate } from '../PlaybackRate'
+import {
+  createMockCore,
+  createMockMediaControl,
+  createMockPlugin,
+} from '../../../testUtils'
+import { $ } from '@clappr/core'
+import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+
+Logger.enable('*')
+setTracer(new LogTracer('PlaybackRate.test'))
+
+describe('PlaybackRate', () => {
+  let core: any
+  let bottomGear: any
+  beforeEach(() => {
+    core = createMockCore()
+    const mediaControl = createMockMediaControl(core)
+    bottomGear = createMockGearPlugin()
+    core.getPlugin.mockImplementation((name: string) => {
+      if (name === 'bottom_gear') {
+        return bottomGear
+      }
+      if (name === 'media_control') {
+        return mediaControl
+      }
+      return null
+    })
+  })
+  it('should render', () => {
+    const playbackRate = new PlaybackRate(core)
+    core.emit('core:ready')
+    core.activePlayback.getPlaybackType.mockReturnValue('live')
+    core.emit('core:active:container:changed')
+    core.activePlayback.dvrEnabled = true
+    core.activeContainer.emit('container:dvr', true)
+    expect(playbackRate.el.innerHTML).toMatchSnapshot()
+    expect(bottomGear.getElement).toHaveBeenCalledWith('rate')
+    expect(
+      bottomGear.$el
+        .find('[data-rate]')
+        .text()
+        .replace(/\/assets.*\.svg/g, '')
+        .replace(/\s+/g, ' ')
+        .trim(),
+    ).toEqual('playback_rate 1x')
+  })
+})
+
+function createMockGearPlugin() {
+  const elements = {
+    nerd: $(document.createElement('li')).attr('data-nerd', 'nerd'),
+    quality: $(document.createElement('li')).attr('data-quality', 'quality'),
+    rate: $(document.createElement('li')).attr('data-rate', 'rate'),
+  }
+  const $el = $(document.createElement('ul'))
+  $el.append(elements.nerd, elements.quality, elements.rate)
+  const plugin = Object.assign(createMockPlugin(), {
+    setContent: vi.fn(),
+    getElement: vi.fn((name: string) => elements[name]),
+    $el,
+  })
+  return plugin
+}