@gcorevideo/player 2.19.5 → 2.19.7

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

@@ -8,65 +8,220 @@ import { LevelSelector } from '../LevelSelector.js'
 setTracer(new LogTracer('LevelSelector.test'))
 Logger.enable('*')
 
+const LEVELS = [
+  {
+    level: 0,
+    height: 360,
+    width: 640,
+    bitrate: 300000,
+  },
+  {
+    level: 1,
+    height: 720,
+    width: 1280,
+    bitrate: 150000,
+  },
+  {
+    level: 2,
+    height: 1080,
+    width: 1920,
+    bitrate: 250000,
+  },
+]
 describe('LevelSelector', () => {
   let clock: FakeTimers.InstalledClock
+  let core: any
+  let levelSelector: LevelSelector
+  let activePlayback: any
   beforeEach(() => {
     clock = FakeTimers.install()
   })
   afterEach(() => {
     clock.uninstall()
   })
-  describe('options.restrictResolution', () => {
-    let core: any
-    let levelSelector: LevelSelector
-    beforeEach(async () => {
-      const activeContainer = Object.assign(new EventLite(), {
-        $el: {
-          html: vi.fn(),
+  describe('basically', () => {
+    beforeEach(() => {
+      const activeContainer = createContainer()
+      activePlayback = createPlayback()
+      core = Object.assign(new EventLite(), {
+        activeContainer,
+        activePlayback,
+        options: {
+          levelSelector: {
+            // restrictResolution: 360,
+            labels: { 360: '360p', 720: 'HD' },
+          },
         },
       })
-      const activePlayback = Object.assign(new EventLite(), {
-        currentLevel: -1,
-        levels: [],
+      core.mediaControl = new UICorePlugin(core)
+      levelSelector = new LevelSelector(core)
+    })
+    describe('initially', () => {
+      beforeEach(async () => {
+        core.emit('core:active:container:changed')
+        await clock.tickAsync(1)
+        activePlayback.emit('playback:levels:available', LEVELS)
+        await clock.tickAsync(1)
+      })
+      it('should render the proper level label', () => {
+        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) => {
+      beforeEach(async () => {
+        core.emit('core:active:container:changed')
+        await clock.tickAsync(1)
+        // activePlayback.currentLevel = current
+        activePlayback.emit('playback:levels:available', levels)
+        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()
+        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)
       })
+    })
+  })
+  describe('options.restrictResolution', () => {
+    beforeEach(() => {
+      const activeContainer = createContainer()
+      activePlayback = createPlayback()
       core = Object.assign(new EventLite(), {
         activeContainer,
         activePlayback,
         options: {
           levelSelector: {
             restrictResolution: 360,
+            labels: { 360: '360p', 720: '720p' },
           },
         },
       })
-      core.mediaControl = new UICorePlugin(core),
+      core.mediaControl = new UICorePlugin(core)
       levelSelector = new LevelSelector(core)
-      core.emit('core:ready')
-      await clock.tickAsync(1)
-      activePlayback.emit('playback:levels:available', [
-        {
-          level: 0,
-          height: 360,
-          width: 640,
-          bitrate: 300000,
-        },
-        {
-          level: 1,
-          height: 720,
-          width: 1280,
-          bitrate: 150000,
-        },
-        {
-          level: 2,
-          height: 1080,
-          width: 1920,
-          bitrate: 250000,
-        },
-      ])
-      await clock.tickAsync(1)
     })
-    it('should render the restricted quality level label', () => {
-      expect(levelSelector.el.textContent?.replace('/assets/icons/new/arrow-right.svg', '').replace(/\s+/g, ' ')).toContain('Quality 360p')
-      expect(levelSelector.el.innerHTML).toMatchSnapshot()
+    describe('basically', () => {
+      beforeEach(async () => {
+        core.emit('core:active:container:changed')
+        await clock.tickAsync(1)
+        activePlayback.emit('playback:levels:available', LEVELS)
+        await clock.tickAsync(1)
+      })
+      it('should render the restricted quality level label', () => {
+        expect(
+          levelSelector.el.textContent
+        ).toMatchQualityLevelLabel('360p')
+
+        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+      })
+    })
+    describe('given vertical video format levels', () => {
+      beforeEach(async () => {
+        core.emit('core:active:container:changed')
+        await clock.tickAsync(1)
+        activePlayback.emit('playback:levels:available', [
+          {
+            level: 0,
+            width: 360,
+            height: 640,
+            bitrate: 450000,
+          },
+          {
+            level: 1,
+            width: 720,
+            height: 1280,
+            bitrate: 150000,
+          },
+          {
+            level: 2,
+            width: 1920,
+            height: 1080,
+            bitrate: 250000,
+          },
+        ])
+        await clock.tickAsync(1)
+        levelSelector.$el.find('.gear-option').click()
+        await clock.tickAsync(1)
+        // levelSelector.$el.find(`.gear-sub-menu_btn[data-id="0"]`).click()
+        // await clock.tickAsync(1)
+      })
+      it('should recognize vertical orientation', () => {
+        // TODO check the disabled
+        // expect(
+        //   levelSelector.el.textContent
+        //     ?.replace('/assets/icons/new/arrow-right.svg', '')
+        //     .replace(/\s+/g, ' '),
+        // ).toContain('Quality 360p')
+        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+      })
+      it('should properly apply the restriction', () => {
+        expect(levelSelector.$el.find('li:not(.level-disabled)')[0].textContent).toMatchQualityLevelOption('360p')
+      })
     })
   })
 })
+
+function createContainer() {
+  const container = Object.assign(new EventLite(), {
+    $el: {
+      html: vi.fn(),
+    },
+  })
+  return container
+}
+
+function createPlayback() {
+  const playback = Object.assign(new EventLite(), {
+    currentLevel: -1,
+    levels: [],
+  })
+  return playback
+}
+
+expect.extend({
+  toMatchQualityLevelLabel(received, expected) {
+    const { isNot } = this
+    const rendered = received
+      .replace('/assets/icons/new/arrow-right.svg', '')
+      .replace(/\s+/g, ' ')
+      .trim()
+    return {
+      pass: rendered.includes(`Quality ${expected}`),
+      message: () => `Quality label must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+    }
+  },
+  toMatchQualityLevelOption(received, expected) {
+    const { isNot } = this
+    const rendered = received
+      .replace('/assets/icons/new/check.svg', '')
+      .replace(/\s+/g, ' ')
+      .trim()
+    return {
+      pass: rendered === expected,
+      message: () => `Quality option must${isNot ? ' not' : ''} be ${expected} in "${rendered}"`,
+    }
+  }
+})

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

@@ -1,6 +1,126 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LevelSelector > options.restrictResolution > should render the restricted quality level label 1`] = `
+exports[`LevelSelector > basically > auto > should render the proper level labels 1`] = `
+"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
+    Quality
+</button>
+<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">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+            Auto
+        </a>
+    </li>
+    
+    
+        <li class="">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+                <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">
+                <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">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                360p
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`LevelSelector > basically > custom label > should render the proper level labels 1`] = `
+"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
+    Quality
+</button>
+<ul class="gear-sub-menu">
+    
+        <li class="">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+            Auto
+        </a>
+    </li>
+    
+    
+        <li class="">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+                <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">
+                <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">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                360p
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`LevelSelector > basically > standard label > should render the proper level labels 1`] = `
+"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
+    Quality
+</button>
+<ul class="gear-sub-menu">
+    
+        <li class="">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="-1">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+            Auto
+        </a>
+    </li>
+    
+    
+        <li class="">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+                <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">
+                <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">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                360p
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`LevelSelector > options.restrictResolution > basically > should render the restricted quality level label 1`] = `
 "<button class="gplayer-lite-btn gcore-skin-text-color gear-option">
     
     <span>Quality</span>
@@ -9,3 +129,36 @@ exports[`LevelSelector > options.restrictResolution > should render the restrict
 </button>
 "
 `;
+
+exports[`LevelSelector > options.restrictResolution > given vertical video format levels > should recognize vertical orientation 1`] = `
+"<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+    <span class="arrow-left-icon">/assets/icons/new/arrow-left.svg</span>
+    Quality
+</button>
+<ul class="gear-sub-menu">
+    
+    
+        <li class="level-disabled">
+            <a href="#" class="gear-sub-menu_btn gcore-skin-text-color" data-id="2">
+                <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">
+                <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">
+                <span class="check-icon">/assets/icons/new/check.svg</span>
+                360p
+            </a>
+        </li>
+    
+</ul>
+"
+`;

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

@@ -17,7 +17,7 @@ import {
   template,
   $,
 } from '@clappr/core'
-import { type TimeProgress } from '../..//playback.types'
+import { type TimeProgress } from '../../playback.types.js'
 import { reportError } from '@gcorevideo/utils';
 
 import { Kibo } from '../kibo/index.js'

package/src/plugins/poster/Poster.ts

@@ -19,7 +19,7 @@ import type { ZeptoResult } from '../types.js'
 import '../../../assets/poster/poster.scss'
 import posterHTML from '../../../assets/poster/poster.ejs'
 import playIcon from '../../../assets/icons/new/play.svg'
-import { PlaybackError } from '../..//playback.types'
+import { PlaybackError } from '../../playback.types.js'
 
 const T = 'plugins.poster_custom'
 

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

@@ -3,7 +3,7 @@
 // license that can be found in the LICENSE file.
 
 import { Events, Playback, UICorePlugin, Utils, template } from '@clappr/core';
-import { TimeUpdate } from '../..//playback.types';
+import { TimeUpdate } from '../../playback.types.js';
 
 import { CLAPPR_VERSION } from '../build.js';
 

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

@@ -6,7 +6,7 @@ import {
 import {
   type PlaybackError,
   PlaybackErrorCode,
-} from '../..//playback.types'
+} from '../../playback.types.js'
 import {
   type PlayerMediaSourceDesc,
 } from '../..//types'

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

@@ -4,7 +4,8 @@ import EventLite from 'event-lite'
 import FakeTimers from '@sinonjs/fake-timers'
 
 import { SourceController } from '../SourceController'
-import { _MockPlayback, PlaybackErrorCode } from '@gcorevideo/player'
+import { PlaybackErrorCode } from '../../../playback.types.js'
+import { _MockPlayback } from '../../../testUtils.js'
 
 const MOCK_SOURCES = [
   {

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

@@ -3,7 +3,7 @@
 // license that can be found in the LICENSE file.
 
 import { Container, Events, UIContainerPlugin, template } from '@clappr/core';
-import { PlaybackError, PlaybackErrorCode } from '../../playback.types';
+import { PlaybackError, PlaybackErrorCode } from '../../playback.types.js';
 import { trace } from '@gcorevideo/utils';
 
 import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';

package/src/plugins/statistics/Statistics.ts

@@ -1,6 +1,6 @@
 // An example implementation of client side performancestatistics
 import { Container, ContainerPlugin, Events, Playback } from '@clappr/core'
-import type { TimePosition, TimeValue } from '../..//playback.types'
+import type { TimePosition, TimeValue } from '../../playback.types.js'
 import type { PlaybackType } from '../..//types'
 import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'

package/src/plugins/subtitles/Subtitles.ts

@@ -7,7 +7,7 @@ import {
   template,
   $,
 } from '@clappr/core'
-import { type TimeValue } from '../..//playback.types'
+import { type TimeValue } from '../../playback.types.js'
 import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
 

package/src/plugins/thumbnails/Thumbnails.ts

@@ -2,7 +2,7 @@ import { UICorePlugin, Events, template, $, Container } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
 import parseSRT, { type ParsedSRT } from 'parse-srt';
 
-import { TimeValue } from '../..//playback.types';
+import { TimeValue } from '../../playback.types.js';
 
 import { CLAPPR_VERSION } from '../build.js';
 

package/src/plugins/vast-ads/VastAds.ts

@@ -13,7 +13,7 @@ import {
 } from '@clappr/core'
 import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
-import { TimePosition } from '../../playback.types'
+import { TimePosition } from '../../playback.types.js'
 
 import { CLAPPR_VERSION } from '../build.js'
 import { TimerId, ZeptoResult } from '../types.js'

package/src/plugins/volume-fade/VolumeFade.ts

@@ -7,6 +7,9 @@ export enum VolumeFadeEvents {
   FADE = 'core:volume:fade',
 }
 
+/**
+ * @beta
+ */
 export class VolumeFade extends UICorePlugin {
   private _aboveBorderVolume = 0;
 

package/src/typings/vitest.d.ts

@@ -0,0 +1,11 @@
+import 'vitest'
+
+interface CustomMatchers<R = unknown> {
+  toMatchQualityLevelLabel: (expected: string) => R
+  toMatchQualityLevelOption: (expected: string) => R
+}
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining extends CustomMatchers {}
+}