Fix settings menu escape key

client/src/standalone/player/src/shared/control-bar/p2p-info-button.ts

@@ -11,8 +11,7 @@ class P2PInfoButton extends Button {
     }) as HTMLDivElement
     div.appendChild(subDivP2P)
 
-    const downloadIcon = videojs.dom.createEl('span', {
-      className: 'icon icon-download',
+    const downloadIcon = videojs.dom.createEl('span', { className: 'icon icon-download' }, {
       role: 'img',
       ariaLabel: this.player().localize('Download speed:')
     })
@@ -25,10 +24,9 @@ class P2PInfoButton extends Button {
     downloadSpeedText.appendChild(downloadSpeedUnit)
     subDivP2P.appendChild(downloadSpeedText)
 
-    const uploadIcon = videojs.dom.createEl('span', {
+    const uploadIcon = videojs.dom.createEl('span', { className: 'icon icon-upload' }, {
       role: 'img',
-      ariaLabel: this.player().localize('Upload speed:'),
-      className: 'icon icon-upload'
+      ariaLabel: this.player().localize('Upload speed:')
     })
     subDivP2P.appendChild(uploadIcon)
 

client/src/standalone/player/src/shared/peertube/peertube-plugin.ts

@@ -254,6 +254,7 @@ class PeerTubePlugin extends Plugin {
     if (isMobile()) this.player.addClass('vjs-is-mobile')
 
     this.initSmoothProgressBar()
+    this.patchMenuEscapeKey()
 
     this.player.ready(() => {
       this.listenControlBarMouse()
@@ -654,6 +655,22 @@ class PeerTubePlugin extends Plugin {
     }
   }
 
+  private patchMenuEscapeKey () {
+    const Menu = videojs.getComponent('Menu') as any
+
+    const fn = Menu.prototype.handleKeyDown
+    Menu.prototype.handleKeyDown = function handleKeyDown (event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+        this.trigger('escaped-key')
+        return
+      }
+
+      fn.call(this, event)
+    }
+  }
+
   private getCaptionsButton () {
     const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
 

client/src/standalone/player/src/shared/settings/menu-focus-fixed.ts

@@ -8,20 +8,6 @@ const Component = videojs.getComponent('Component')
 class MenuFocusFixed extends Menu {
   declare private focusedChild_: number
 
-  handleKeyDown (event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      event.preventDefault()
-      event.stopPropagation()
-      this.trigger('escaped-key')
-      return
-    }
-
-    // FIXME: super misses handleKeyDown
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    return super.handleKeyDown(event)
-  }
-
   stepForward () {
     let stepChild = 0
 

client/src/standalone/player/src/shared/settings/settings-menu-button.ts

@@ -145,7 +145,6 @@ class SettingsButton extends Button {
 
   showDialog () {
     this.player().peertube().onMenuOpened()
-
     ;(this.menu.el() as HTMLElement).style.opacity = '1'
 
     this.dialog.show()
@@ -252,6 +251,11 @@ class SettingsButton extends Button {
 
     // Whether to add or remove selected class on the settings sub menu element
     settingsMenuItem.on('click', openSubMenu)
+
+    settingsMenuItem.on('escaped-key', () => {
+      this.hideDialog()
+      this.focus()
+    })
   }
 
   resetChildren () {

client/src/standalone/player/src/shared/settings/settings-menu-item.ts

@@ -139,7 +139,6 @@ class SettingsMenuItem extends MenuItem {
 
   /**
    * Create the component's DOM element
-   *
    */
   createEl () {
     const el = videojs.dom.createEl('li', {
@@ -176,9 +175,8 @@ class SettingsMenuItem extends MenuItem {
     // Remove open class to ensure only the open submenu gets this class
     videojs.dom.removeClass(this.el(), 'open')
 
-    super.handleClick(event);
-
-    (this.mainMenu.el() as HTMLElement).style.opacity = '0'
+    super.handleClick(event)
+    ;(this.mainMenu.el() as HTMLElement).style.opacity = '0'
     // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
     if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
       videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
@@ -206,9 +204,8 @@ class SettingsMenuItem extends MenuItem {
     const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
 
     button.setAttribute('aria-label', this.player().localize('Go back'))
-    button.addClass('vjs-back-button');
-
-    (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
+    button.addClass('vjs-back-button')
+    ;(button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
   }
 
   onTransitionEnd (event: any) {
@@ -284,7 +281,6 @@ class SettingsMenuItem extends MenuItem {
 
         const subMenuItemExtended = subMenuItem as MenuItemExtended
         if (subMenuItemExtended.isSelected_) {
-
           // Prefer to use the function
           if (typeof subMenuItemExtended.getLabel === 'function') {
             this.settingsSubMenuValueEl_.innerHTML = subMenuItemExtended.getLabel()
@@ -354,6 +350,10 @@ class SettingsMenuItem extends MenuItem {
   private rebuildAfterMenuChange () {
     debugLogger('Rebuilding menu ' + this.subMenu.name() + ' after change')
 
+    this.subMenu.menu.on('escaped-key', () => {
+      this.trigger('escaped-key')
+    })
+
     this.settingsSubMenuEl_.innerHTML = ''
     this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
     this.update()
@@ -361,10 +361,9 @@ class SettingsMenuItem extends MenuItem {
     this.setSize()
     this.bindClickEvents()
   }
-
 }
 
-(SettingsMenuItem as any).prototype.contentElType = 'button'
+;(SettingsMenuItem as any).prototype.contentElType = 'button'
 videojs.registerComponent('SettingsMenuItem', SettingsMenuItem)
 
 export { SettingsMenuItem }