@gcorevideo/player 2.19.6 → 2.19.8

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

@@ -1,8 +1,9 @@
 import { Events, template, UICorePlugin } from '@clappr/core'
-import { type QualityLevel } from '../..//playback.types'
 import { reportError, trace } from '@gcorevideo/utils'
+
+import { type QualityLevel } from '../../playback.types.js'
 import { CLAPPR_VERSION } from '../build.js'
-import { ZeptoResult } from '../types.js'
+import { ZeptoResult } from '../../utils/types.js'
 
 import buttonHtml from '../../../assets/level-selector/button.ejs'
 import listHtml from '../../../assets/level-selector/list.ejs'
@@ -30,7 +31,6 @@ type TemplateFunction = (data: Record<string, unknown>) => string
  *
  * - `labels`: The labels to show in the level selector. [vertical resolution]: string
  * - `restrictResolution`: The maximum resolution to allow in the level selector.
- * - `title`: The title to show in the level selector.
  *
  * @example
  * ```ts
@@ -178,7 +178,6 @@ export class LevelSelector extends UICorePlugin {
     if (!this.buttonTemplate) {
       this.buttonTemplate = template(buttonHtml)
     }
-
     if (!this.isOpen) {
       const html = this.buttonTemplate?.({
         arrowRightIcon,
@@ -214,7 +213,7 @@ export class LevelSelector extends UICorePlugin {
     return maxRes
       ? this.levels.findIndex(
           (level) =>
-            level.height === maxRes,
+            (level.height > level.width ? level.width : level.height) === maxRes,
         )
       : -1
   }
@@ -225,9 +224,8 @@ export class LevelSelector extends UICorePlugin {
     this.makeLevelsLabels()
     if (maxResolution) {
       this.removeAuto = true
-      // TODO account for vertical resolutions, i.e, normalize the resolution to the width
       const initialLevel = levels
-        .filter((level) => level.height <= maxResolution)
+        .filter((level) => (level.width > level.height ? level.height : level.width) <= maxResolution)
         .pop()
       this.setLevel(initialLevel?.level ?? 0)
     }
@@ -246,10 +244,6 @@ export class LevelSelector extends UICorePlugin {
     }
   }
 
-  private findLevelBy(id: number): QualityLevel | undefined {
-    return this.levels.find((level) => level.level === id)
-  }
-
   private onLevelSelect(event: MouseEvent) {
     const selectedLevel = parseInt(
       (event.currentTarget as HTMLElement)?.dataset?.id ?? '-1',
@@ -303,10 +297,6 @@ export class LevelSelector extends UICorePlugin {
     ).parent()
   }
 
-  private getTitle() {
-    return (this.core.options.levelSelector || {}).title
-  }
-
   private onLevelSwitchStart() {
     this.core.activePlayback.trigger('playback:level:select:start')
     this.levelElement(this.selectedLevelId).addClass('changing')

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

@@ -8,65 +8,213 @@ 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)
+      })
+      it('should recognize vertical orientation', () => {
+        expect(levelSelector.el.innerHTML).toMatchSnapshot()
+        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,69 @@ 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>
+"
+`;
+
+exports[`LevelSelector > options.restrictResolution > given vertical video format levels > should recognize vertical orientation 2`] = `
+"<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/logo/Logo.ts

@@ -2,7 +2,7 @@ import { UIContainerPlugin, Events, template as t, Container } from '@clappr/cor
 
 import { CLAPPR_VERSION } from '../build.js';
 import { calculateSize } from './utils/index.js';
-import { ZeptoResult } from '../types.js';
+import { ZeptoResult } from '../../utils/types.js';
 
 import logoHTML from '../../../assets/logo/templates/logo.ejs';
 import '../../../assets/logo/styles/logo.scss';