@gcorevideo/player 2.28.28 → 2.28.30

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/multi-camera/MultiCamera.ts

@@ -457,11 +457,11 @@ export class MultiCamera extends UICorePlugin {
   }
 
   private hideSelectLevelMenu() {
-    ;(this.$('.multicamera ul') as ZeptoResult).hide()
+    ; (this.$('.multicamera ul') as ZeptoResult).hide()
   }
 
   private toggleContextMenu() {
-    ;(this.$('.multicamera ul') as ZeptoResult).toggle()
+    ; (this.$('.multicamera ul') as ZeptoResult).toggle()
   }
 
   // private buttonElement(): ZeptoResult {
@@ -475,9 +475,9 @@ export class MultiCamera extends UICorePlugin {
   private levelElement(id?: number): ZeptoResult {
     return this.$(
       '.multicamera ul li > div' +
-        (id !== undefined
-          ? '[data-multicamera-selector-select="' + id + '"]'
-          : ''),
+      (id !== undefined
+        ? '[data-multicamera-selector-select="' + id + '"]'
+        : ''),
     )
   }
 

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -15,6 +15,7 @@ import { isFullscreen } from '../utils/fullscreen.js'
 import type { ZeptoResult } from '../../types.js'
 import { ExtendedEvents } from '../media-control/MediaControl.js'
 import { mediaControlClickaway } from '../../utils/clickaway.js'
+import { VTTCueInfo } from '../../playback.types.js'
 
 const VERSION: string = '2.19.14'
 
@@ -153,6 +154,8 @@ export class ClosedCaptions extends UICorePlugin {
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
       this.onContainerChanged,
     )
+    this.listenTo(this.core, Events.PLAYBACK_READY, this.onPlaybackReady)
+
   }
 
   private onCoreReady() {
@@ -171,9 +174,11 @@ export class ClosedCaptions extends UICorePlugin {
         }
       },
     )
+    this.onPlaybackReady()
   }
 
   private onContainerChanged() {
+    this.tracks = []
     this.listenTo(
       this.core.activeContainer,
       Events.CONTAINER_FULLSCREEN,
@@ -187,11 +192,6 @@ export class ClosedCaptions extends UICorePlugin {
     this.listenTo(this.core.activeContainer, Events.CONTAINER_DESTROYED, () => {
       this.clickaway(null)
     })
-    // this.listenTo(
-    //   this.core.activeContainer,
-    //   'container:advertisement:start',
-    //   this.onStartAd,
-    // )
     this.listenTo(
       this.core.activePlayback,
       Events.PLAYBACK_SUBTITLE_AVAILABLE,
@@ -226,21 +226,24 @@ export class ClosedCaptions extends UICorePlugin {
     this.isPreselectedApplied = false
   }
 
+  private onPlaybackReady() {
+    trace(`${T} onPlaybackReady`)
+    this.core.activePlayback.oncueenter = (e: VTTCueInfo) => {
+      this.setSubtitleText(e.text)
+    }
+    this.core.activePlayback.oncueexit = () => {
+      this.clearSubtitleText()
+    }
+  }
+
   private onSubtitleAvailable() {
-    trace(`${T} onSubtitleAvailable`, {
-      tracks: this.core.activePlayback.closedCaptionsTracks.length,
-    })
     this.applyTracks()
     this.mount()
   }
 
   private onSubtitleChanged({ id: changedId }: { id: number }) {
     // ignoring the subtitle selected by the playback engine or user agent
-    const id = this.track?.id ?? -1
-    trace(`${T} onSubtitleChanged`, {
-      changedId,
-      id,
-    })
+    const id = this.currentTrack?.id ?? -1
     if (id === -1) {
       this.clearSubtitleText()
     }
@@ -248,7 +251,11 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private activateTrack(id: number) {
-    for (const track of this.tracks) {
+    if (['dash', 'hls'].includes(this.core.activePlayback?.name)) {
+      this.core.activePlayback.setTextTrack(id)
+      return
+    }
+    for (const track of this.currentTracks) {
       if (track.id === id) {
         if (this.useNativeSubtitles) {
           track.track.mode = 'showing'
@@ -272,7 +279,7 @@ export class ClosedCaptions extends UICorePlugin {
           }
         }
       } else {
-        track.track.oncuechange = null
+        track.track.oncuechange = () => { }
         track.track.mode = 'disabled'
       }
     }
@@ -280,7 +287,8 @@ export class ClosedCaptions extends UICorePlugin {
 
   private applyTracks() {
     try {
-      this.tracks = this.core.activePlayback.closedCaptionsTracks
+      // TODO ensure to apply only once
+      this.currentTracks = this.core.activePlayback.closedCaptionsTracks
       this.applyPreselectedSubtitles()
       this.render()
     } catch (error) {
@@ -288,32 +296,12 @@ export class ClosedCaptions extends UICorePlugin {
     }
   }
 
-  // private onStartAd() {
-  //   if (this.active && 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 onContainerResize() {
     const shouldShow =
       this.core.activeContainer &&
       isFullscreen(this.core.activeContainer.el) &&
-      this.track &&
-      this.track.track.mode &&
+      this.currentTrack &&
+      this.currentTrack.track.mode &&
       Browser.isiOS &&
       this.active
 
@@ -339,10 +327,8 @@ export class ClosedCaptions extends UICorePlugin {
     this.$el.find('#gplayer-cc-menu').hide()
     this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false')
     this.$line.hide()
-    if (this.tracks) {
-      for (const t of this.tracks) {
-        t.track.mode = 'hidden'
-      }
+    for (const track of this.currentTracks) {
+      track.track.mode = 'hidden'
     }
   }
 
@@ -355,19 +341,20 @@ export class ClosedCaptions extends UICorePlugin {
     if (
       this.core.activeContainer &&
       isFullscreen(this.core.activeContainer.el) &&
-      this.track &&
-      this.track.track.mode &&
+      this.currentTrack &&
+      // this.currentTrack.track.mode &&
       (Browser.isiOS || this.useNativeSubtitles)
     ) {
       this.$line.hide()
-      this.track.track.mode = 'showing'
+      this.currentTrack.track.mode = 'showing'
     } else {
       this.$line.show()
     }
   }
 
   private shouldRender() {
-    return this.tracks?.length > 0
+    // this might not have been fully initialized yet since `render` is called from the parent class constructor
+    return this.currentTracks?.length > 0
   }
 
   private resizeFont() {
@@ -384,15 +371,18 @@ export class ClosedCaptions extends UICorePlugin {
    * @internal
    */
   override render() {
+    if (!this.shouldRender()) {
+      return this
+    }
     if (!this.core.activeContainer) {
       return this
     }
 
     this.$el.html(
       ClosedCaptions.templateControl({
-        tracks: this.tracks ?? [],
+        tracks: this.currentTracks,
         i18n: this.core.i18n,
-        current: this.track?.id ?? -1,
+        current: this.currentTrack?.id ?? -1,
       }),
     )
     this.$el.find('#gplayer-cc-menu').hide()
@@ -411,13 +401,13 @@ export class ClosedCaptions extends UICorePlugin {
     return this
   }
 
-  private findById(id: number) {
-    return this.tracks.find((track) => track.id === id) ?? null
+  private findById(id: number): TextTrackItem | null {
+    return this.currentTracks.find((track) => track.id === id) || null
   }
 
   private selectItem(item: TextTrackItem | null) {
     this.clearSubtitleText()
-    this.track = item
+    this.currentTrack = item
     const trackId = item?.id ?? -1
     this.core.activePlayback.closedCaptionsTrackId = trackId
 
@@ -489,7 +479,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private selectSubtitles() {
-    const trackId = this.track ? this.track.id : -1
+    const trackId = this.currentTrack?.id ?? -1
 
     // TODO find out if this is needed
     this.core.activePlayback.closedCaptionsTrackId = trackId
@@ -522,7 +512,7 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private updateSelection() {
-    if (!this.track) {
+    if (!this.currentTrack) {
       this.hide()
     } else {
       this.show()
@@ -539,7 +529,7 @@ export class ClosedCaptions extends UICorePlugin {
       .attr('aria-checked', 'false')
 
     const currentLevelElement = this.itemElement(
-      this.track ? this.track.id : -1,
+      this.currentTrack?.id ?? -1,
     )
     currentLevelElement
       .addClass('current')
@@ -569,9 +559,6 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private get useNativeSubtitles() {
-    if (this.core.activePlayback?.name === 'dash') {
-      return true
-    }
     const mode =
       this.core.options.cc?.mode ??
       this.core.options.subtitles?.mode ??
@@ -580,5 +567,25 @@ export class ClosedCaptions extends UICorePlugin {
     return mode === 'native'
   }
 
+  private get currentTracks(): TextTrackItem[] {
+    return this.tracks
+  }
+
+  private get currentTrack(): TextTrackItem | null {
+    return this.track
+  }
+
+  private set currentTrack(track: TextTrackItem | null) {
+    this.track = track
+  }
+
+  private set currentTracks(tracks: TextTrackItem[]) {
+    this.tracks = tracks.map(track => ({
+      id: track.id,
+      name: !track.name || track.name === "null" ? track.track.language : track.name,
+      track: track.track,
+    }))
+  }
+
   private clickaway = mediaControlClickaway(() => this.hideMenu())
 }