@gcorevideo/player 2.21.3 → 2.21.6

package/src/plugins/subtitles/{Subtitles.ts → ClosedCaptions.ts}

@@ -16,42 +16,50 @@ import type { ZeptoResult } from '../../types.js'
 
 const VERSION: string = '2.19.14'
 
-const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected'
+const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
 
-const T = 'plugins.subtitles'
+const T = 'plugins.cc'
 
-export type SubtitlesPluginSettings = {
+export type ClosedCaptionsPluginSettings = {
   /**
    * Initially selected subtitles language
    */
   language?: string
 }
 
+/**
+ * @deprecated Use {@link ClosedCaptionsPluginSettings} instead.
+ */
+export type SubtitlesPluginSettings = ClosedCaptionsPluginSettings;
+
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
  *
  * @remarks
+ * The plugin is activated when closed captions tracks are provided with the media source.
+ * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
+ *
  * Depends on:
  *
  * - {@link MediaControl}
  *
- * Configuration options -  {@link SubtitlesPluginSettings}
+ * Configuration options -  {@link ClosedCaptionsPluginSettings}
  * @example
  * ```ts
- * import { Subtitles } from '@gcorevideo/player'
+ * import { ClosedCaptions } from '@gcorevideo/player'
  *
- * Player.registerPlugin(Subtitles)
+ * Player.registerPlugin(ClosedCaptions)
  *
  * new Player({
  *   ...
- *   subtitles: {
+ *   cc: {
  *     language: 'en',
  *   },
  * })
  * ```
  */
-export class Subtitles extends UICorePlugin {
+export class ClosedCaptions extends UICorePlugin {
   private isPreselectedApplied = false
 
   private isShowing = false
@@ -60,13 +68,13 @@ export class Subtitles extends UICorePlugin {
 
   private tracks: TextTrackItem[] = []
 
-  private $string: ZeptoResult | null = null
+  private $line: ZeptoResult | null = null
 
   /**
    * @internal
    */
   get name() {
-    return 'subtitles'
+    return 'cc'
   }
 
   /**
@@ -92,8 +100,7 @@ export class Subtitles extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: 'media-control-subtitles',
-      'data-subtitles': '',
+      class: 'media-control-cc',
     }
   }
 
@@ -102,13 +109,13 @@ export class Subtitles extends UICorePlugin {
    */
   override get events() {
     return {
-      'click [data-subtitles-select]': 'onItemSelect',
-      'click [data-subtitles-button]': 'toggleMenu',
+      'click [data-cc-select]': 'onItemSelect',
+      'click [data-cc-button]': 'toggleMenu',
     }
   }
 
   private get preselectedLanguage(): string {
-    return this.core.options.subtitles?.language ?? ''
+    return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? ''
   }
 
   /**
@@ -269,7 +276,7 @@ export class Subtitles extends UICorePlugin {
   hide() {
     this.isShowing = false
     this.renderIcon()
-    this.$string.hide()
+    this.$line.hide()
     if (this.tracks) {
       for (const t of this.tracks) {
         t.track.mode = 'hidden'
@@ -290,25 +297,25 @@ export class Subtitles extends UICorePlugin {
       this.track.track.mode &&
       Browser.isiOS
     ) {
-      this.$string.hide()
+      this.$line.hide()
       this.track.track.mode = 'showing'
     } else {
-      this.$string.show()
+      this.$line.show()
     }
   }
 
   private shouldRender() {
-    return this.tracks.length > 0
+    return this.tracks?.length > 0
   }
 
   private resizeFont() {
-    if (!this.$string) {
+    if (!this.$line) {
       return
     }
 
     const skinWidth = this.core.activeContainer.$el.width()
 
-    this.$string.find('p').css('font-size', skinWidth * 0.03)
+    this.$line.find('p').css('font-size', skinWidth * 0.03)
   }
 
   /**
@@ -325,13 +332,13 @@ export class Subtitles extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control')
 
-    this.$el.html(Subtitles.template({ tracks: this.tracks }))
-    this.core.activeContainer.$el.find('.subtitle-string').remove()
-    this.$string = $(Subtitles.templateString())
+    this.$el.html(ClosedCaptions.template({ tracks: this.tracks }))
+    this.core.activeContainer.$el.find('#cc-line').remove()
+    this.$line = $(ClosedCaptions.templateString())
     this.resizeFont()
 
-    this.core.activeContainer.$el.append(this.$string)
-    mediaControl.putElement('subtitlesSelector', this.$el)
+    this.core.activeContainer.$el.append(this.$line)
+    mediaControl.putElement('cc', this.el)
 
     this.updateSelection()
 
@@ -353,11 +360,11 @@ export class Subtitles extends UICorePlugin {
   }
 
   private onItemSelect(event: MouseEvent) {
-    const id = (event.target as HTMLElement).dataset.subtitlesSelect ?? '-1'
+    const id = (event.target as HTMLElement).dataset.ccSelect ?? '-1'
 
     trace(`${T} onItemSelect`, { id })
 
-    localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id)
+    localStorage.setItem(LOCAL_STORAGE_CC_ID, id)
     this.selectItem(this.findById(Number(id)))
 
     return false
@@ -380,21 +387,22 @@ export class Subtitles extends UICorePlugin {
   }
 
   private hideMenu() {
-    ;(this.$('[data-subtitles] ul') as ZeptoResult).hide()
+    ;(this.$('[data-cc] ul') as ZeptoResult).hide()
   }
 
   private toggleMenu() {
-    ;(this.$('[data-subtitles] ul') as ZeptoResult).toggle()
+    trace(`${T} toggleMenu`)
+    ;(this.$('[data-cc] ul') as ZeptoResult).toggle()
   }
 
   private itemElement(id: number): ZeptoResult {
     return (
-      this.$(`ul li a[data-subtitles-select="${id}"]`) as ZeptoResult
+      this.$(`ul li a[data-cc-select="${id}"]`) as ZeptoResult
     ).parent()
   }
 
   private allItemElements(): ZeptoResult {
-    return this.$('[data-subtitles] li')
+    return this.$('[data-cc] li')
   }
 
   private selectSubtitles() {
@@ -420,7 +428,7 @@ export class Subtitles extends UICorePlugin {
   }
 
   private setSubtitleText(text: string | DocumentFragment) {
-    this.$string.find('p').html(text)
+    this.$line.find('p').html(text)
   }
 
   private clearSubtitleText() {
@@ -456,6 +464,6 @@ export class Subtitles extends UICorePlugin {
   private renderIcon() {
     const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon
 
-    this.$el.find('span.subtitle-text').html(icon)
+    this.$el.find('span.cc-text').html(icon)
   }
 }

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

@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ClosedCaptions } from '../ClosedCaptions.js'
+import { createMockCore, createMockMediaControl } from '../../../testUtils.js';
+
+describe('ClosedCaptions', () => {
+  let core: any;
+  let mediaControl: any;
+  let cc: ClosedCaptions;
+  beforeEach(() => {
+    core = createMockCore()
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi.fn().mockImplementation((name) => {
+      if (name === 'media_control') {
+        return mediaControl
+      }
+      return null
+    })
+    cc = new ClosedCaptions(core)
+  })
+  describe('basically', () => {
+    beforeEach(() => {
+      core.emit('core:ready')
+      core.activePlayback.el = document.createElement('video')
+      core.emit('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('playback:subtitle:available')
+      core.activeContainer.emit('container:subtitle:available')
+    })
+    it('should render', () => {
+      expect(cc.el.innerHTML).toMatchSnapshot()
+      expect(cc.$el.find('[data-cc-button]').length).toEqual(1)
+      expect(mediaControl.putElement).toHaveBeenCalledWith('cc', cc.el)
+    })
+  })
+})

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

@@ -0,0 +1,25 @@
+// 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>
+
+<ul class="gcore-skin-bg-color" id="cc-select">
+    
+        <li>
+            <a href="#" class="gcore-skin-text-color" data-cc-select="1">
+                English
+            </a>
+        </li>
+    
+        <li>
+            <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>
+"
+`;

package/src/testUtils.ts

@@ -1,4 +1,4 @@
-import { $, UICorePlugin } from '@clappr/core'
+import { $, Playback, UICorePlugin } from '@clappr/core'
 import Events from 'eventemitter3'
 import { vi } from 'vitest'
 /**
@@ -42,7 +42,7 @@ export class _MockPlayback extends Events {
   exitPiP() {}
 
   getPlaybackType() {
-    return 'live'
+    return Playback.LIVE
   }
 
   getStartTimeOffset() {
@@ -100,7 +100,7 @@ export function createMockCore(
       ...options,
     },
     configure: vi.fn(),
-    getPlaybackType: vi.fn(),
+    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
     getPlugin: vi.fn(),
     load: vi.fn(),
     trigger: emitter.emit,
@@ -126,52 +126,38 @@ export function createMockPlayback(name = 'mock') {
   return Object.assign(emitter, {
     name,
     currentLevel: -1,
+    el: document.createElement('video'),
+    dvrEnabled: false,
+    dvrInUse: false,
     levels: [],
     consent() {},
     play() {},
     pause() {},
     stop() {},
-    destroy() {},
-    seek() {},
-    seekPercentage() {},
-    getDuration() {
-      return 100
-    },
-    enterPiP() {},
-    exitPiP() {},
-    getPlaybackType() {
-      return 'live'
-    },
-    getStartTimeOffset() {
-      return 0
-    },
-    getCurrentTime() {
-      return 0
-    },
-    isHighDefinitionInUse() {
-      return false
-    },
-    mute() {},
-    unmute() {},
-    volume() {},
-    configure() {},
-    attemptAutoPlay() {
-      return true
-    },
-    canAutoPlay() {
-      return true
-    },
-    onResize() {
-      return true
-    },
-    trigger(event: string, ...args: any[]) {
-      emitter.emit(event, ...args)
-    },
+    destroy: vi.fn(),
+    seek: vi.fn(),
+    seekPercentage: vi.fn(),
+    getDuration: vi.fn().mockImplementation(() => 100),
+    enterPiP: vi.fn(),
+    exitPiP: vi.fn(),
+    getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
+    getStartTimeOffset: vi.fn().mockImplementation(() => 0),
+    getCurrentTime: vi.fn().mockImplementation(() => 0),
+    isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
+    mute: vi.fn(),
+    unmute: vi.fn(),
+    volume: vi.fn(),
+    configure: vi.fn(),
+    attemptAutoPlay: vi.fn().mockImplementation(() => true),
+    canAutoPlay: vi.fn().mockImplementation(() => true),
+    onResize: vi.fn().mockImplementation(() => true),
+    setPlaybackRate: vi.fn(),
+    trigger: emitter.emit,
   })
 }
 
 export function createMockContainer(playback: any = createMockPlayback()) {
-  const el = document.createElement('div')
+  const el = playback.el
   const emitter = new Events()
   return Object.assign(emitter, {
     el,
@@ -179,6 +165,9 @@ export function createMockContainer(playback: any = createMockPlayback()) {
     $el: $(el),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
+    getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+    isDvrInUse: vi.fn().mockReturnValue(false),
+    isDvrEnabled: vi.fn().mockReturnValue(false),
     isPlaying: vi.fn().mockReturnValue(false),
     play: vi.fn(),
     seek: vi.fn(),
@@ -201,10 +190,6 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.putElement = vi.fn()
   // @ts-ignore
-  mediaControl.getLeftPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-left-panel'))
-  // @ts-ignore
-  mediaControl.getRightPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-right-panel'))
-  // @ts-ignore
-  mediaControl.getCenterPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-center-panel'))
+  mediaControl.toggleElement = vi.fn()
   return mediaControl
 }