@gcorevideo/player 2.21.1 → 2.21.4

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -0,0 +1,469 @@
+import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core'
+import { reportError, trace } from '@gcorevideo/utils'
+import assert from 'assert'
+
+import { CLAPPR_VERSION } from '../../build.js'
+import type { TextTrackItem } from '../../playback.types.js'
+
+import '../../../assets/subtitles/style.scss'
+import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg'
+import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg'
+import comboboxHTML from '../../../assets/subtitles/combobox.ejs'
+import stringHTML from '../../../assets/subtitles/string.ejs'
+
+import { isFullscreen } from '../utils.js'
+import type { ZeptoResult } from '../../types.js'
+
+const VERSION: string = '2.19.14'
+
+const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
+
+const T = 'plugins.cc'
+
+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 ClosedCaptionsPluginSettings}
+ * @example
+ * ```ts
+ * import { ClosedCaptions } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(ClosedCaptions)
+ *
+ * new Player({
+ *   ...
+ *   cc: {
+ *     language: 'en',
+ *   },
+ * })
+ * ```
+ */
+export class ClosedCaptions extends UICorePlugin {
+  private isPreselectedApplied = false
+
+  private isShowing = false
+
+  private track: TextTrackItem | null = null
+
+  private tracks: TextTrackItem[] = []
+
+  private $line: ZeptoResult | null = null
+
+  /**
+   * @internal
+   */
+  get name() {
+    return 'cc'
+  }
+
+  /**
+   * @internal
+   */
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION }
+  }
+
+  /**
+   * @internal
+   */
+  static get version() {
+    return VERSION
+  }
+
+  private static readonly template = template(comboboxHTML)
+
+  private static readonly templateString = template(stringHTML)
+
+  /**
+   * @internal
+   */
+  override get attributes() {
+    return {
+      class: 'media-control-cc',
+    }
+  }
+
+  /**
+   * @internal
+   */
+  override get events() {
+    return {
+      'click [data-cc-select]': 'onItemSelect',
+      'click [data-cc-button]': 'toggleMenu',
+    }
+  }
+
+  private get preselectedLanguage(): string {
+    return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? ''
+  }
+
+  /**
+   * @internal
+   */
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
+    this.listenTo(
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onContainerChanged,
+    )
+  }
+
+  private onCoreReady() {
+    trace(`${T} onCoreReady`)
+    const mediaControl = this.core.getPlugin('media_control')
+    assert(mediaControl, 'media_control plugin is required')
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render)
+    this.listenTo(
+      mediaControl,
+      Events.MEDIACONTROL_HIDE,
+      this.hideMenu,
+    )
+  }
+
+  private onContainerChanged() {
+    trace(`${T} onContainerChanged`)
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_FULLSCREEN,
+      this.playerResize,
+    )
+    this.listenTo(
+      this.core.activeContainer,
+      'container:advertisement:start',
+      this.onStartAd,
+    )
+    this.listenTo(
+      this.core.activePlayback,
+      Events.PLAYBACK_SUBTITLE_AVAILABLE,
+      this.onSubtitleAvailable,
+    )
+    this.listenTo(
+      this.core.activePlayback,
+      Events.PLAYBACK_SUBTITLE_CHANGED,
+      this.onSubtitleChanged,
+    )
+
+    // fix for iOS
+    const video = this.core.activePlayback.el
+    assert(video, 'video element is required')
+
+    video.addEventListener('webkitbeginfullscreen', () => {
+      if (Browser.isiOS) {
+        video.classList.add('ios-fullscreen')
+      }
+    })
+
+    video.addEventListener('webkitendfullscreen', () => {
+      if (Browser.isiOS) {
+        video.classList.remove('ios-fullscreen')
+      }
+    })
+  }
+
+  private onSubtitleAvailable() {
+    trace(`${T} onSubtitleAvailable`)
+    this.applyTracks()
+  }
+
+  private onSubtitleChanged({ id }: { id: number }) {
+    trace(`${T} onSubtitleChanged`, { id })
+    if (id === -1) {
+      this.clearSubtitleText()
+    }
+    for (const track of this.tracks) {
+      if (track.id === id) {
+        track.track.mode = 'showing'
+
+        this.setSubtitleText(this.getSubtitleText(track.track))
+
+        track.track.oncuechange = (e) => {
+          try {
+            if (track.track.activeCues?.length) {
+              const html = (track.track.activeCues[0] as VTTCue).getCueAsHTML()
+
+              this.setSubtitleText(html)
+            } else {
+              this.clearSubtitleText()
+            }
+          } catch (error) {
+            reportError(error)
+          }
+        }
+      } else {
+        track.track.oncuechange = null
+        track.track.mode = 'hidden'
+      }
+    }
+  }
+
+  private applyTracks() {
+    try {
+      this.tracks = this.core.activePlayback.closedCaptionsTracks
+      this.applyPreselectedSubtitles()
+      this.render()
+    } catch (error) {
+      reportError(error)
+    }
+  }
+
+  private onStartAd() {
+    if (this.isShowing && this.core.activeContainer) {
+      this.hide()
+      this.listenTo(
+        this.core.activeContainer,
+        'container:advertisement:finish',
+        this.onFinishAd,
+      )
+    }
+  }
+
+  private onFinishAd() {
+    this.show()
+    this.stopListening(
+      this.core.activeContainer,
+      'container:advertisement:finish',
+      this.onFinishAd,
+    )
+  }
+
+  private playerResize() {
+    trace(`${T} playerResize`)
+    const shouldShow =
+      this.core.activeContainer &&
+      isFullscreen(this.core.activeContainer.el) &&
+      this.track &&
+      this.track.track.mode &&
+      Browser.isiOS &&
+      this.isShowing
+
+    if (shouldShow) {
+      this.show()
+    }
+
+    try {
+      this.resizeFont()
+    } catch (error) {
+      reportError(error)
+    }
+  }
+
+  /**
+   * Hides the subtitles menu and the subtitles.
+   */
+  hide() {
+    this.isShowing = false
+    this.renderIcon()
+    this.$line.hide()
+    if (this.tracks) {
+      for (const t of this.tracks) {
+        t.track.mode = 'hidden'
+      }
+    }
+  }
+
+  /**
+   * Shows the subtitles menu and the subtitles.
+   */
+  show() {
+    this.isShowing = true
+    this.renderIcon()
+    if (
+      this.core.activeContainer &&
+      isFullscreen(this.core.activeContainer.el) &&
+      this.track &&
+      this.track.track.mode &&
+      Browser.isiOS
+    ) {
+      this.$line.hide()
+      this.track.track.mode = 'showing'
+    } else {
+      this.$line.show()
+    }
+  }
+
+  private shouldRender() {
+    return this.tracks?.length > 0
+  }
+
+  private resizeFont() {
+    if (!this.$line) {
+      return
+    }
+
+    const skinWidth = this.core.activeContainer.$el.width()
+
+    this.$line.find('p').css('font-size', skinWidth * 0.03)
+  }
+
+  /**
+   * @internal
+   */
+  override render() {
+    if (!this.core.activeContainer) {
+      return this
+    }
+
+    if (!this.shouldRender()) {
+      return this
+    }
+
+    const mediaControl = this.core.getPlugin('media_control')
+
+    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.$line)
+    mediaControl.putElement('cc', this.el)
+
+    this.updateSelection()
+
+    this.renderIcon()
+
+    return this
+  }
+
+  private findById(id: number) {
+    return this.tracks.find((track) => track.id === id) ?? null
+  }
+
+  private selectItem(item: TextTrackItem | null) {
+    this.clearSubtitleText()
+    this.track = item
+
+    this.hideMenu()
+    this.updateSelection()
+  }
+
+  private onItemSelect(event: MouseEvent) {
+    const id = (event.target as HTMLElement).dataset.ccSelect ?? '-1'
+
+    trace(`${T} onItemSelect`, { id })
+
+    localStorage.setItem(LOCAL_STORAGE_CC_ID, id)
+    this.selectItem(this.findById(Number(id)))
+
+    return false
+  }
+
+  private applyPreselectedSubtitles() {
+    if (!this.isPreselectedApplied) {
+      this.isPreselectedApplied = true
+      if (!this.preselectedLanguage) {
+        return
+      }
+      setTimeout(() => {
+        this.selectItem(
+          this.tracks.find(
+            (t) => t.track.language === this.preselectedLanguage,
+          ) ?? null,
+        )
+      }, 300) // TODO why delay?
+    }
+  }
+
+  private hideMenu() {
+    ;(this.$('[data-cc] ul') as ZeptoResult).hide()
+  }
+
+  private toggleMenu() {
+    trace(`${T} toggleMenu`)
+    ;(this.$('[data-cc] ul') as ZeptoResult).toggle()
+  }
+
+  private itemElement(id: number): ZeptoResult {
+    return (
+      this.$(`ul li a[data-cc-select="${id}"]`) as ZeptoResult
+    ).parent()
+  }
+
+  private allItemElements(): ZeptoResult {
+    return this.$('[data-cc] li')
+  }
+
+  private selectSubtitles() {
+    const trackId = this.track ? this.track.id : -1
+
+    this.core.activePlayback.closedCaptionsTrackId = trackId
+  }
+
+  private getSubtitleText(track: TextTrack) {
+    const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0
+    const cues = track.cues
+    const lines = []
+
+    if (cues && cues.length) {
+      for (const cue of cues) {
+        if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
+          lines.push((cue as VTTCue).getCueAsHTML().textContent)
+        }
+      }
+    }
+
+    return lines.join('\n')
+  }
+
+  private setSubtitleText(text: string | DocumentFragment) {
+    this.$line.find('p').html(text)
+  }
+
+  private clearSubtitleText() {
+    this.setSubtitleText('')
+  }
+
+  private updateSelection() {
+    if (!this.track) {
+      this.hide()
+    } else {
+      this.show()
+    }
+    this.selectSubtitles()
+    this.highlightCurrentSubtitles()
+  }
+
+  private highlightCurrentSubtitles() {
+    this.allItemElements()
+      .removeClass('current')
+      .find('a')
+      .removeClass('gcore-skin-active')
+
+    trace(`${T} highlightCurrentSubtitles`, {
+      track: this.track?.id,
+    })
+    const currentLevelElement = this.itemElement(this.track ? this.track.id : -1)
+    currentLevelElement
+      .addClass('current')
+      .find('a')
+      .addClass('gcore-skin-active')
+  }
+
+  private renderIcon() {
+    const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon
+
+    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

@@ -126,47 +126,31 @@ export function createMockPlayback(name = 'mock') {
   return Object.assign(emitter, {
     name,
     currentLevel: -1,
+    dvrEnabled: 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(() => '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,
   })
 }
 
@@ -179,6 +163,8 @@ export function createMockContainer(playback: any = createMockPlayback()) {
     $el: $(el),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
+    getPlaybackType: vi.fn().mockReturnValue('live'),
+    isDvrInUse: vi.fn().mockReturnValue(false),
     isPlaying: vi.fn().mockReturnValue(false),
     play: vi.fn(),
     seek: vi.fn(),