@gcorevideo/player 2.28.29 → 2.28.35

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

@@ -26,6 +26,8 @@ import { CLAPPR_VERSION } from '../../build.js'
 import { ZeptoResult } from '../../types.js'
 import { getPageX } from '../utils.js'
 import { fullscreenEnabled, isFullscreen } from '../utils/fullscreen.js'
+import { isMobile } from '../utils/mobile.js'
+import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 import '../../../assets/media-control/media-control.scss'
 
@@ -37,7 +39,6 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg'
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg'
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg'
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg'
-import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 const STANDARD_MEDIA_CONTROL_ELEMENTS: string[] = [
   'duration',
@@ -352,8 +353,6 @@ export class MediaControl extends UICorePlugin {
       'touchmove .bar-container[data-seekbar]': 'mousemoveOnSeekBar',
       'mouseleave .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
       'touchend .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
-      'mouseenter .media-control-layer[data-controls]': 'setUserKeepVisible',
-      'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
     }
   }
 
@@ -470,9 +469,6 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_DBLCLICK,
       this.toggleFullscreen,
     )
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () =>
-      this.clickaway(this.core.activeContainer.$el[0]),
-    )
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
@@ -526,6 +522,7 @@ export class MediaControl extends UICorePlugin {
     )
     this.listenTo(this.core, Events.CONTAINER_DESTROYED, () => {
       this.cancelRenderTimer()
+      this.setKeepVisible(false)
     })
     this.listenTo(
       this.core.activeContainer,
@@ -537,10 +534,6 @@ export class MediaControl extends UICorePlugin {
       Events.CONTAINER_MOUSE_LEAVE,
       this.delayHide,
     )
-
-    this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
-      this.clickaway(null)
-    })
   }
 
   /**
@@ -692,7 +685,7 @@ export class MediaControl extends UICorePlugin {
       this.$playPauseToggle?.append(playIcon)
       this.$playStopToggle?.append(playIcon)
       this.trigger(Events.MEDIACONTROL_NOTPLAYING)
-      if (Browser.isMobile) {
+      if (isMobile()) {
         this.show()
       }
     }
@@ -745,7 +738,7 @@ export class MediaControl extends UICorePlugin {
       width: this.container.$el.width(),
       height: this.container.$el.height(),
       hideVolumeBar: this.options.hideVolumeBar,
-      isMobile: Browser.isMobile,
+      isMobile: isMobile(),
     })
 
     try {
@@ -754,7 +747,7 @@ export class MediaControl extends UICorePlugin {
         this.$el.addClass('w370')
       }
 
-      if (skinWidth <= 270 && !Browser.isMobile) {
+      if (skinWidth <= 270 && !isMobile()) {
         this.verticalVolume = true
         this.$el.addClass('w270')
       }
@@ -769,6 +762,18 @@ export class MediaControl extends UICorePlugin {
     return false
   }
 
+  private play() {
+    this.container && this.container.play()
+  }
+
+  private pause() {
+    this.container && this.container.pause()
+  }
+
+  private stop() {
+    this.container && this.container.stop()
+  }
+
   private togglePlayStop() {
     this.container.isPlaying()
       ? this.container.stop({ ui: true })
@@ -893,11 +898,11 @@ export class MediaControl extends UICorePlugin {
   }
 
   private toggleFullscreen() {
-    if (!Browser.isMobile) {
+    if (!isMobile()) {
       this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name)
       this.core.activeContainer.fullscreen()
       this.core.toggleFullscreen()
-      this.resetUserKeepVisible()
+      // this.resetUserKeepVisible()
     }
   }
 
@@ -1048,15 +1053,6 @@ export class MediaControl extends UICorePlugin {
     this.setSeekPercentage(pos)
   }
 
-  private setUserKeepVisible(e?: MouseEvent) {
-    this.userKeepVisible = true
-    this.clickaway(this.core.activeContainer.$el[0])
-  }
-
-  private resetUserKeepVisible = (e?: MouseEvent) => {
-    this.userKeepVisible = false
-  }
-
   private isVisible() {
     return !this.$el.hasClass('media-control-hide')
   }
@@ -1066,7 +1062,6 @@ export class MediaControl extends UICorePlugin {
       return
     }
 
-    const timeout = DEFAULT_HIDE_DELAY
     const mousePointerMoved =
       event &&
       event.clientX !== this.lastMouseX &&
@@ -1077,6 +1072,8 @@ export class MediaControl extends UICorePlugin {
         clearTimeout(this.hideId)
         this.hideId = null
       }
+      this.hideId = setTimeout(() => this.hide(), DEFAULT_HIDE_DELAY)
+
       this.$el.show()
       this.trigger(Events.MEDIACONTROL_SHOW, this.name)
       this.core.activeContainer?.trigger(
@@ -1084,15 +1081,13 @@ export class MediaControl extends UICorePlugin {
         this.name,
       )
       this.$el.removeClass('media-control-hide')
-      this.hideId = setTimeout(() => this.hide(), timeout)
       if (event) {
         this.lastMouseX = event.clientX
         this.lastMouseY = event.clientY
       }
     }
-    const showing = true
 
-    this.updateCursorStyle(showing)
+    this.updateCursorStyle(true)
   }
 
   private hide(delay = 0) {
@@ -1100,10 +1095,9 @@ export class MediaControl extends UICorePlugin {
       return
     }
 
-    const timeout = delay || 2000
-
     if (this.hideId !== null) {
       clearTimeout(this.hideId)
+      this.hideId = null
     }
 
     if (!this.disabled && this.options.hideMediaControl === false) {
@@ -1117,7 +1111,7 @@ export class MediaControl extends UICorePlugin {
       !this.disabled &&
       (delay || hasKeepVisibleRequested || hasDraggingAction)
     ) {
-      this.hideId = setTimeout(() => this.hide(), timeout)
+      this.hideId = setTimeout(() => this.hide(), delay || 2000)
     } else {
       if (!this.options.controlsDontHide || isFullscreen(this.container.el)) {
         this.trigger(Events.MEDIACONTROL_HIDE, this.name)
@@ -1278,18 +1272,13 @@ export class MediaControl extends UICorePlugin {
   /**
    * Set or reset the keep visibility state
    *
-   * Keep visibility state controls whether the media control is hidden automatically after a delay.
-   * Keep visibility prevents the the auto-hide behaviour
+   * Keep visibility state controls whether the media control is hidden automatically after a delay, which is a default behaviour.
    *
    * @param keepVisible - The state
    */
   setKeepVisible(keepVisible: boolean) {
     this.keepVisible = keepVisible
-    if (keepVisible) {
-      this.clickaway(this.core.activeContainer.$el[0])
-    } else {
-      this.clickaway(null)
-    }
+    this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null)
   }
 
   private getMountParent(name: MediaControlSlotMountPoint): ZeptoResult {
@@ -1390,7 +1379,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   private bindKeyEvents() {
-    if (Browser.isMobile || this.options.disableKeyboardShortcuts) {
+    if (isMobile() || this.options.disableKeyboardShortcuts) {
       return
     }
 
@@ -1491,6 +1480,7 @@ export class MediaControl extends UICorePlugin {
    * @internal
    */
   override destroy() {
+    this.cancelTimers()
     this.cancelRenderTimer()
     $(document).unbind('mouseup', this.stopDrag)
     $(document).unbind('mousemove', this.updateDrag)
@@ -1500,6 +1490,18 @@ export class MediaControl extends UICorePlugin {
     return super.destroy()
   }
 
+  private cancelTimers() {
+    if (this.hideId !== null) {
+      clearTimeout(this.hideId)
+      this.hideId = null
+    }
+    if (this.hideVolumeId !== null) {
+      clearTimeout(this.hideVolumeId)
+      this.hideVolumeId = null
+    }
+    this.cancelRenderTimer()
+  }
+
   private cancelRenderTimer() {
     if (this.renderTimerId) {
       clearTimeout(this.renderTimerId)
@@ -1537,7 +1539,7 @@ export class MediaControl extends UICorePlugin {
 
     // Video volume cannot be changed with Safari on mobile devices
     // Display mute/unmute icon only if Safari version >= 10
-    if (Browser.isSafari && Browser.isMobile) {
+    if (Browser.isSafari && isMobile()) {
       if (Browser.version < 10) {
         this.$volumeContainer?.css({ display: 'none' })
       } else {
@@ -1557,7 +1559,7 @@ export class MediaControl extends UICorePlugin {
     setTimeout(() => {
       !this.settings.seekEnabled &&
         this.$seekBarContainer?.addClass('seek-disabled')
-      !Browser.isMobile &&
+      !isMobile() &&
         !this.options.disableKeyboardShortcuts &&
         this.bindKeyEvents()
       this.playerResize({
@@ -1587,6 +1589,7 @@ export class MediaControl extends UICorePlugin {
     this.container.fullscreen()
     // TODO: fix after it full screen will be fixed on iOS
     if (Browser.isiOS) {
+      // TODO use isFullscreen utility function
       if (this.core.isFullscreen()) {
         Fullscreen.cancelFullscreen(this.core.el)
       } else {
@@ -1595,7 +1598,6 @@ export class MediaControl extends UICorePlugin {
     } else {
       this.core.toggleFullscreen()
     }
-    this.resetUserKeepVisible()
   }
 
   private static getPageX(event: MouseEvent | TouchEvent): number {
@@ -1653,7 +1655,7 @@ export class MediaControl extends UICorePlugin {
     this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY)
   }
 
-  private clickaway = mediaControlClickaway(() => this.resetUserKeepVisible())
+  private clickaway = mediaControlClickaway(() => this.setKeepVisible(false))
 }
 
 MediaControl.extend = function (properties) {

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

@@ -237,41 +237,38 @@ describe('MediaControl', () => {
         )
         expect(el.length).toEqual(0)
       })
-      it(`should ${
-        settings.seekEnabled ? '' : 'not '
-      }render the seek bar`, () => {
-        const seekbar = mediaControl.$el.find(
-          '.media-control-center-panel [data-seekbar]',
-        )
-        expect(seekbar.length).toBeGreaterThan(1)
-        if (settings.seekEnabled) {
-          expect(seekbar.hasClass('seek-disabled')).toBe(false)
-        } else {
-          expect(seekbar.hasClass('seek-disabled')).toBe(true)
-        }
-      })
-      it(`should ${
-        settings.left.includes('volume') ? '' : 'not '
-      }render the volume control`, () => {
-        const volume = mediaControl.$el.find('.drawer-container[data-volume]')
-        if (settings.left.includes('volume')) {
-          expect(volume.length).toEqual(1)
-        } else {
-          expect(volume.length).toEqual(0)
-        }
-      })
-      it(`should ${
-        settings.right.includes('fullscreen') ? '' : 'not '
-      }render the fullscreen control`, () => {
-        const fullscreen = mediaControl.$el.find(
-          '.media-control-right-panel [data-fullscreen]',
-        )
-        if (settings.right.includes('fullscreen')) {
-          expect(fullscreen.length).toEqual(1)
-        } else {
-          expect(fullscreen.length).toEqual(0)
-        }
-      })
+      it(`should ${settings.seekEnabled ? '' : 'not '
+        }render the seek bar`, () => {
+          const seekbar = mediaControl.$el.find(
+            '.media-control-center-panel [data-seekbar]',
+          )
+          expect(seekbar.length).toBeGreaterThan(1)
+          if (settings.seekEnabled) {
+            expect(seekbar.hasClass('seek-disabled')).toBe(false)
+          } else {
+            expect(seekbar.hasClass('seek-disabled')).toBe(true)
+          }
+        })
+      it(`should ${settings.left.includes('volume') ? '' : 'not '
+        }render the volume control`, () => {
+          const volume = mediaControl.$el.find('.drawer-container[data-volume]')
+          if (settings.left.includes('volume')) {
+            expect(volume.length).toEqual(1)
+          } else {
+            expect(volume.length).toEqual(0)
+          }
+        })
+      it(`should ${settings.right.includes('fullscreen') ? '' : 'not '
+        }render the fullscreen control`, () => {
+          const fullscreen = mediaControl.$el.find(
+            '.media-control-right-panel [data-fullscreen]',
+          )
+          if (settings.right.includes('fullscreen')) {
+            expect(fullscreen.length).toEqual(1)
+          } else {
+            expect(fullscreen.length).toEqual(0)
+          }
+        })
     })
     describe('basically', () => {
       let handler: MockedFunction<() => void>
@@ -338,6 +335,37 @@ describe('MediaControl', () => {
       expect(mediaControl.el.innerHTML).toMatchSnapshot()
     })
   })
+  describe('auto-hide', () => {
+    beforeEach(async () => {
+      mediaControl = new MediaControl(core)
+      core.emit(Events.CORE_READY)
+      core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+      await runMetadataLoaded(core)
+    })
+    describe('when rendered', () => {
+      it('should auto-hide', async () => {
+        expect(mediaControl.$el.hasClass('media-control-hide')).toBe(false)
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+        expect(mediaControl.$el.hasClass('media-control-hide')).toBe(true)
+      })
+    })
+    describe('after rendered', () => {
+      beforeEach(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+      })
+      describe('after user interaction', () => {
+        beforeEach(async () => {
+          core.activeContainer.trigger(Events.CONTAINER_MOUSE_ENTER)
+          await new Promise((resolve) => setTimeout(resolve, 0))
+        })
+        it('should auto-hide', async () => {
+          expect(mediaControl.$el.hasClass('media-control-hide')).toBe(false)
+          await new Promise((resolve) => setTimeout(resolve, 2000))
+          expect(mediaControl.$el.hasClass('media-control-hide')).toBe(true)
+        })
+      })
+    })
+  })
 })
 
 function arraySubtract<T extends string>(arr1: T[], arr2: T[]) {

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -1,5 +1,5 @@
 import { Events, UICorePlugin, Browser, template, $ } from '@clappr/core'
-import { reportError, trace } from '@gcorevideo/utils'
+import { reportError } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -19,7 +19,8 @@ import { VTTCueInfo } from '../../playback.types.js'
 
 const VERSION: string = '2.19.14'
 
-const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
+// TODO review
+// const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
 
 const T = 'plugins.cc'
 
@@ -35,6 +36,9 @@ export type ClosedCaptionsPluginSettings = {
 
   /**
    * Whether to use builtin subtitles.
+   *
+   * native: video player element renders the subtitles
+   * custom: plugin manages the subtitles rendition
    */
   mode?: 'native' | 'custom'
 }
@@ -75,12 +79,14 @@ export type ClosedCaptionsPluginSettings = {
  * ```
  */
 export class ClosedCaptions extends UICorePlugin {
-  private isPreselectedApplied = false
+  private isSelectedApplied = false
 
   private active = false
 
   private open = false
 
+  private userSelectedItemId: number = -1
+
   private track: TextTrackItem | null = null
 
   private tracks: TextTrackItem[] = []
@@ -223,11 +229,10 @@ export class ClosedCaptions extends UICorePlugin {
       }
     })
 
-    this.isPreselectedApplied = false
+    this.isSelectedApplied = false
   }
 
   private onPlaybackReady() {
-    trace(`${T} onPlaybackReady`)
     this.core.activePlayback.oncueenter = (e: VTTCueInfo) => {
       this.setSubtitleText(e.text)
     }
@@ -251,7 +256,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private activateTrack(id: number) {
-    if (['dash', 'hls'].includes(this.core.activePlayback?.name)) {
+    if (this.core.activePlayback && ['dash', 'hls'].includes(this.core.activePlayback.name)) {
       this.core.activePlayback.setTextTrack(id)
       return
     }
@@ -289,7 +294,7 @@ export class ClosedCaptions extends UICorePlugin {
     try {
       // TODO ensure to apply only once
       this.currentTracks = this.core.activePlayback.closedCaptionsTracks
-      this.applyPreselectedSubtitles()
+      this.applySelectedSubtitles()
       this.render()
     } catch (error) {
       reportError(error)
@@ -418,29 +423,40 @@ export class ClosedCaptions extends UICorePlugin {
 
   private onItemSelect(event: MouseEvent) {
     // event.target does not exist for some reason in tests
-    const id =
+    const id = Number(
       ((event.target ?? event.currentTarget) as HTMLElement).dataset?.item ??
-      '-1'
+      '-1',
+    )
 
-    localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
-    this.selectItem(this.findById(Number(id)))
+    // TODO review, make configurable, and emit event in addition
+    // localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
+    this.userSelectedItemId = id
+    this.selectItem(this.findById(id))
     this.hideMenu()
     return false
   }
 
-  private applyPreselectedSubtitles() {
-    if (!this.isPreselectedApplied) {
-      this.isPreselectedApplied = true
-      // if the language is undefined, then let the engine decide
-      // to hide the subtitles forcefully, set the language to 'none'
-      setTimeout(() => {
-        this.selectItem(
-          this.tracks.find((t) =>
-            this.isPreselectedLanguage(t.track.language),
-          ) ?? null,
-        )
-      }, 0)
+  private applySelectedSubtitles() {
+    if (this.isSelectedApplied) {
+      return;
+    }
+    this.isSelectedApplied = true
+    // If user selected a language, activate that
+    // Otherwise, if there is no configured language, then let the engine decide
+    // To hide the subtitles initially forcefully, set the language to 'none'
+    let matcher: (track: TextTrackItem) => boolean;
+    if (this.userSelectedItemId !== -1) {
+      matcher = (track: TextTrackItem) => track.id === this.userSelectedItemId;
+    } else if (this.preselectedLanguage) {
+      matcher = (track: TextTrackItem) => this.isPreselectedLanguage(track.track.language);
+    } else {
+      return;
     }
+    setTimeout(() => {
+      this.selectItem(
+        this.tracks.find(matcher) ?? null,
+      )
+    }, 0)
   }
 
   private hideMenu() {
@@ -479,11 +495,9 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private selectSubtitles() {
-    const trackId = this.currentTrack?.id ?? -1
-
-    // TODO find out if this is needed
-    this.core.activePlayback.closedCaptionsTrackId = trackId
-    // this.core.activePlayback.closedCaptionsTrackId = -1
+    if (this.currentTrack) {
+      this.core.activePlayback.closedCaptionsTrackId = this.currentTrack.id
+    }
   }
 
   private getSubtitleText(track: TextTrack) {