@gcorevideo/player 2.25.7 → 2.25.9

package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts

@@ -4,9 +4,9 @@ import { ClosedCaptions } from '../ClosedCaptions.js'
 import { createMockCore, createMockMediaControl } from '../../../testUtils.js'
 import { ExtendedEvents } from '../../media-control/MediaControl.js'
 
-import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 import { Events } from '@clappr/core'
-// import { Events } from '@clappr/core';
+
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 
 // Logger.enable('*')
 // setTracer(new LogTracer('ClosedCaptions.test'))
@@ -18,6 +18,7 @@ describe('ClosedCaptions', () => {
   beforeEach(() => {
     core = createMockCore()
     mediaControl = createMockMediaControl(core)
+    mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(211)
     core.getPlugin = vi.fn().mockImplementation((name) => {
       if (name === 'media_control') {
         return mediaControl
@@ -31,44 +32,60 @@ describe('ClosedCaptions', () => {
       core.emit(Events.CORE_READY)
       core.activePlayback.el = document.createElement('video')
       core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
-      core.activePlayback.closedCaptionsTracks = [
-        {
-          id: 1,
-          name: 'English',
-          track: {
-            language: 'en',
-            kind: 'subtitles',
-            label: 'English',
-            mode: 'hidden',
-            cues: [],
-          },
-        },
-        {
-          id: 2,
-          name: 'Spanish',
-          track: {
-            language: 'es',
-            kind: 'subtitles',
-            label: 'Spanish',
-            mode: 'hidden',
-            cues: [],
-          },
-        },
-      ]
-      core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_AVAILABLE)
-      core.activeContainer.emit(Events.CONTAINER_SUBTITLE_AVAILABLE)
     })
     it('should render', () => {
       expect(cc.el.innerHTML).toMatchSnapshot()
-      expect(cc.$el.find('#cc-button').length).toEqual(1)
-      expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
+      expect(cc.$el.find('#gplayer-cc-button').length).toEqual(1)
+      expect(cc.$el.find('#gplayer-cc-menu').css('display')).toEqual('none')
+      expect(core.activeContainer.$el.find('#gplayer-cc-line').length).toEqual(
+        1,
+      )
+    })
+    it('should clamp popup to availableheight', () => {
+      expect(cc.$el.find('#gplayer-cc-menu').css('max-height')).toBe('211px')
+    })
+    describe('until subtitle tracks are available', () => {
+      it('should not mount', () => {
+        expect(mediaControl.slot).not.toHaveBeenCalledWith(
+          'cc',
+          expect.anything(),
+        )
+        emitSubtitleAvailable(core)
+        expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
+      })
+    })
+    describe('when viewport is resized', () => {
+      beforeEach(() => {
+        mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(197)
+        core.activeContainer.emit(Events.CONTAINER_RESIZE, {
+          width: 320,
+          height: 260,
+        })
+        // core.emit(Events.CORE_RESIZE, { width: 320, height: 260 })
+      })
+      it('should clamp popup height', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('max-height')).toBe('197px')
+      })
+    })
+    describe('when media control is rerendered', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should mount', () => {
+        expect(mediaControl.slot).toHaveBeenCalledWith('cc', cc.$el)
+      })
     })
     describe('when button is clicked', () => {
       beforeEach(() => {
-        cc.$el.find('#cc-button').click()
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click()
       })
       it('should open menu', () => {
-        expect(cc.$el.find('#cc-select').css('display')).not.toBe('none')
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).not.toBe('none')
+        expect(cc.$el.find('#gplayer-cc-button').attr('aria-expanded')).toBe(
+          'true',
+        )
       })
       it('should collapse all other menus', () => {
         expect(mediaControl.trigger).toHaveBeenCalledWith(
@@ -79,20 +96,188 @@ describe('ClosedCaptions', () => {
     })
     describe('when clicked twice', () => {
       beforeEach(() => {
-        cc.$el.find('#cc-button').click().click()
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click().click()
       })
       it('should collapse the menu', () => {
-        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-button').attr('aria-expanded')).toBe(
+          'false',
+        )
       })
     })
     describe('when media control is hidden', () => {
       beforeEach(() => {
+        emitSubtitleAvailable(core)
         cc.$el.find('#cc-button').click()
         mediaControl.trigger(Events.MEDIACONTROL_HIDE)
       })
       it('should hide menu', () => {
-        expect(cc.$el.find('#cc-select').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+      })
+    })
+    describe('when container is clicked', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-button').click()
+        core.activeContainer.emit(Events.CONTAINER_CLICK)
+      })
+      it('should hide menu', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+        expect(cc.$el.find('#gplayer-cc-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+      })
+    })
+    describe('when subtitle is changed', () => {
+      beforeEach(async () => {
+        emitSubtitleAvailable(core)
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        core.activePlayback.getCurrentTime = vi.fn().mockReturnValue(7)
+        core.activeContainer.getCurrentTime = vi.fn().mockReturnValue(7)
+        core.activePlayback.closedCaptionsTracks[1].track.cues = [
+          {
+            startTime: 0,
+            endTime: 5,
+            text: 'Alright this is me',
+            getCueAsHTML: vi
+              .fn()
+              .mockImplementation(() =>
+                document.createTextNode('Alright this is me'),
+              ),
+          },
+          {
+            startTime: 5,
+            endTime: 10,
+            text: 'Welcome to my channel',
+            getCueAsHTML: vi
+              .fn()
+              .mockImplementation(() =>
+                document.createTextNode('Welcome to my channel'),
+              ),
+          },
+          {
+            startTime: 10,
+            endTime: 15,
+            text: 'Thank you for watching',
+            getCueAsHTML: vi
+              .fn()
+              .mockImplementation(() =>
+                document.createTextNode('Thank you for watching'),
+              ),
+          },
+        ]
+        core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_CHANGED, { id: 2 })
+      })
+      it('should activate subtitle track', () => {
+        expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
+          'showing',
+        )
+        expect(core.activePlayback.closedCaptionsTracks[0].track.mode).toBe(
+          'hidden',
+        )
+      })
+      it('should show active subtitle text', () => {
+        expect(
+          core.activeContainer.$el.find('#gplayer-cc-line').text().trim(),
+        ).toEqual('Welcome to my channel')
+      })
+    })
+    describe('when subtitle is selected from menu', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        cc.$el.find('#gplayer-cc-menu li:nth-child(2) a').click()
+      })
+      it('should activate subtitle track', () => {
+        expect(core.activePlayback.closedCaptionsTrackId).toEqual(2)
+      })
+      it('should highlight selected menu item', () => {
+        expect(
+          cc.$el.find('#gplayer-cc-menu li:nth-child(2)').hasClass('current'),
+        ).toBe(true)
+        expect(
+          cc.$el
+            .find('#gplayer-cc-menu li:nth-child(2) a')
+            .attr('aria-checked'),
+        ).toBe('true')
+        expect(cc.$el.find('#gplayer-cc-menu li.current').length).toBe(1)
+        expect(
+          cc.$el.find('#gplayer-cc-menu li a[aria-checked="true"]').length,
+        ).toBe(1)
+      })
+      it('should collapse menu', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+      })
+    })
+    describe('when user turns off subtitles', () => {
+      beforeEach(() => {
+        emitSubtitleAvailable(core)
+        core.activePlayback.closedCaptionsTracks[1].track.mode = 'showing'
+        core.activePlayback.closedCaptionsTrackId = 2
+        core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_CHANGED, { id: 2 })
+        cc.$el.find('#gplayer-cc-button').click()
+        cc.$el.find('#gplayer-cc-menu li:nth-child(3) a').click() // off
+      })
+      it('should hide menu', () => {
+        expect(cc.$el.find('#gplayer-cc-menu').css('display')).toBe('none')
+      })
+      it('should hide subtitle text', () => {
+        expect(
+          core.activeContainer.$el.find('#gplayer-cc-line').text().trim(),
+        ).toBe('')
+      })
+      it('should deactivate subtitle track', () => {
+        expect(core.activePlayback.closedCaptionsTrackId).toEqual(-1)
+        expect(core.activePlayback.closedCaptionsTracks[0].track.mode).toBe(
+          'hidden',
+        )
+        expect(core.activePlayback.closedCaptionsTracks[1].track.mode).toBe(
+          'hidden',
+        )
+      })
+      it('should select menu item', () => {
+        expect(
+          cc.$el.find('#gplayer-cc-menu li:nth-child(3)').hasClass('current'),
+        ).toBe(true)
+        expect(
+          cc.$el
+            .find('#gplayer-cc-menu li:nth-child(3) a')
+            .attr('aria-checked'),
+        ).toBe('true')
+        expect(cc.$el.find('#gplayer-cc-menu li.current').length).toBe(1)
+        expect(
+          cc.$el.find('#gplayer-cc-menu li a[aria-checked="true"]').length,
+        ).toBe(1)
       })
     })
   })
 })
+
+function emitSubtitleAvailable(core: any) {
+  core.activePlayback.closedCaptionsTracks = [
+    {
+      id: 1,
+      name: 'English',
+      track: {
+        language: 'en',
+        kind: 'subtitles',
+        label: 'English',
+        mode: 'hidden',
+        cues: [],
+      },
+    },
+    {
+      id: 2,
+      name: 'Spanish',
+      track: {
+        language: 'es',
+        kind: 'subtitles',
+        label: 'Spanish',
+        mode: 'hidden',
+        cues: [],
+      },
+    },
+  ]
+  core.activePlayback.emit(Events.PLAYBACK_SUBTITLE_AVAILABLE)
+  core.activeContainer.emit(Events.CONTAINER_SUBTITLE_AVAILABLE)
+}

package/src/plugins/subtitles/__tests__/__snapshots__/ClosedCaptions.test.ts.snap

@@ -1,25 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ClosedCaptions > basically > should render 1`] = `
-"<button data-cc-button="" class="media-control-button media-control-icon gcore-skin-button-color" id="cc-button">
-    <span class="cc-text">/assets/icons/new/subtitles-off.svg</span>
-</button>
+"<button class="media-control-button media-control-icon gcore-skin-button-color media-control-dd" id="gplayer-cc-button" aria-haspopup="menu" aria-expanded="false" aria-controls="gplayer-cc-menu">/assets/icons/new/subtitles-off.svg</button>
 
-<ul class="gcore-skin-bg-color" id="cc-select" style="display: none;">
+<ul class="gcore-skin-bg-color media-control-dd__popup" id="gplayer-cc-menu" role="menu" style="display: none; max-height: 211px;">
     
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-cc-select="1">
-                English
-            </a>
-        </li>
-    
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-cc-select="2">
-                Spanish
-            </a>
-        </li>
-    
-    <li class="current"><a href="#" class="gcore-skin-text-color gcore-skin-active" data-cc-select="-1">off</a></li>
-</ul>
-"
+    <li class="current">
+        <a href="#" class="gcore-skin-text-color gcore-skin-active" data-item="-1" role="menuitemradio" aria-checked="true">
+            off
+        </a>
+    </li>
+</ul>"
 `;

package/src/testUtils.ts

@@ -134,6 +134,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300)
   // @ts-ignore
+  mediaControl.getAvailablePopupHeight = vi.fn().mockReturnValue(286)
+  // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
   core.$el.append(mediaControl.$el)