Fix live duration in player

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / videojs-components / settings-menu-item.ts

diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index f5671f49d9be2a98e2fa69247afa8135c4701912..31d42c456dabd73236e8b68fbb0b6189afff90f6 100644 (file)
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -1,8 +1,8 @@
+import videojs from 'video.js'
 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { toTitleCase } from '../utils'
-import videojs, { VideoJsPlayer } from 'video.js'
-import { SettingsButton } from './settings-menu-button'
 import { SettingsDialog } from './settings-dialog'
+import { SettingsButton } from './settings-menu-button'
 import { SettingsPanel } from './settings-panel'
 import { SettingsPanelChild } from './settings-panel-child'
 
@@ -32,7 +32,7 @@ class SettingsMenuItem extends MenuItem {
   settingsSubMenuValueEl_: HTMLElement
   settingsSubMenuEl_: HTMLElement
 
-  constructor (player: VideoJsPlayer, options?: SettingsMenuItemOptions) {
+  constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
     super(player, options)
 
     this.settingsButton = options.menuButton
@@ -56,8 +56,8 @@ class SettingsMenuItem extends MenuItem {
 
     const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
 
-    this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
-    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ]
+    this.subMenu = new SubMenuComponent(this.player(), newOptions) as SettingsButton
+    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
     this.settingsSubMenuEl_.className += ' ' + subMenuClass
 
     this.eventHandlers()
@@ -101,10 +101,10 @@ class SettingsMenuItem extends MenuItem {
     if (event.type === 'tap') {
       target = event.target
     } else {
-      target = event.currentTarget
+      target = event.currentTarget || event.target
     }
 
-    if (target && target.classList.contains('vjs-back-button')) {
+    if (target?.classList.contains('vjs-back-button')) {
       this.loadMainMenu()
       return
     }
@@ -121,12 +121,11 @@ class SettingsMenuItem extends MenuItem {
   /**
    * Create the component's DOM element
    *
-   * @return {Element}
-   * @method createEl
    */
   createEl () {
     const el = videojs.dom.createEl('li', {
-      className: 'vjs-menu-item'
+      className: 'vjs-menu-item',
+      tabIndex: -1
     })
 
     this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
@@ -172,6 +171,9 @@ class SettingsMenuItem extends MenuItem {
       }, 0)
 
       this.settingsButton.setDialogSize(this.size)
+
+      const firstChild = this.subMenu.menu.children()[0]
+      if (firstChild) firstChild.focus()
     } else {
       videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
     }
@@ -198,14 +200,14 @@ class SettingsMenuItem extends MenuItem {
     const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
 
     for (let p = 0; p < prefix.length; p++) {
-      if (!prefix[ p ]) {
+      if (!prefix[p]) {
         type = type.toLowerCase()
       }
 
       if (action === 'addEvent') {
-        element.addEventListener(prefix[ p ] + type, callback, false)
+        element.addEventListener(prefix[p] + type, callback, false)
       } else if (action === 'removeEvent') {
-        element.removeEventListener(prefix[ p ] + type, callback, false)
+        element.removeEventListener(prefix[p] + type, callback, false)
       }
     }
   }
@@ -246,11 +248,14 @@ class SettingsMenuItem extends MenuItem {
       // this triggers CSS Transition event
       this.setMargin()
       mainMenuEl.style.opacity = '1'
+
+      const firstChild = this.mainMenu.children()[0]
+      if (firstChild) firstChild.focus()
     }, 0)
   }
 
   build () {
-    this.subMenu.on('updateLabel', () => {
+    this.subMenu.on('labelUpdated', () => {
       this.update()
     })
     this.subMenu.on('menuChanged', () => {
@@ -292,7 +297,10 @@ class SettingsMenuItem extends MenuItem {
     // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
     if (subMenu === 'PlaybackRateMenuButton') {
       const html = (this.subMenu as any).labelEl_.innerHTML
-      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250)
+
+      setTimeout(() => {
+        this.settingsSubMenuValueEl_.innerHTML = html
+      }, 250)
     } else {
       // Loop trough the submenu items to find the selected child
       for (const subMenuItem of this.subMenu.menu.children_) {
@@ -309,7 +317,7 @@ class SettingsMenuItem extends MenuItem {
             break
           }
 
-          this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.options_.label
+          this.settingsSubMenuValueEl_.innerHTML = this.player().localize(subMenuItemUntyped.options_.label)
         }
       }
     }