mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2024-10-26 22:21:38 +03:00
Fix keyboard settings menu keyboard navigation
This commit is contained in:
parent
00b1adab86
commit
2d9e4188b5
@ -15,6 +15,7 @@ import './shared/control-bar/p2p-info-button'
|
|||||||
import './shared/control-bar/peertube-link-button'
|
import './shared/control-bar/peertube-link-button'
|
||||||
import './shared/control-bar/theater-button'
|
import './shared/control-bar/theater-button'
|
||||||
import './shared/control-bar/peertube-live-display'
|
import './shared/control-bar/peertube-live-display'
|
||||||
|
import './shared/settings/menu-focus-fixed'
|
||||||
import './shared/settings/resolution-menu-button'
|
import './shared/settings/resolution-menu-button'
|
||||||
import './shared/settings/resolution-menu-item'
|
import './shared/settings/resolution-menu-item'
|
||||||
import './shared/settings/settings-dialog'
|
import './shared/settings/settings-dialog'
|
||||||
|
79
client/src/assets/player/shared/settings/menu-focus-fixed.ts
Normal file
79
client/src/assets/player/shared/settings/menu-focus-fixed.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import videojs from 'video.js'
|
||||||
|
|
||||||
|
const Menu = videojs.getComponent('Menu')
|
||||||
|
const Component = videojs.getComponent('Component')
|
||||||
|
|
||||||
|
// Default menu doesn't check if the child is disabled/hidden
|
||||||
|
|
||||||
|
class MenuFocusFixed extends Menu {
|
||||||
|
private focusedChild_: number
|
||||||
|
|
||||||
|
handleKeyDown (event: KeyboardEvent) {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
this.trigger('escaped-key')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-expect-error
|
||||||
|
return super.handleKeyDown(event)
|
||||||
|
}
|
||||||
|
|
||||||
|
stepForward () {
|
||||||
|
let stepChild = 0
|
||||||
|
|
||||||
|
if (this.focusedChild_ !== undefined) {
|
||||||
|
stepChild = this.focusedChild_ + 1
|
||||||
|
}
|
||||||
|
this.focus(stepChild)
|
||||||
|
}
|
||||||
|
|
||||||
|
stepBack () {
|
||||||
|
let stepChild = 0
|
||||||
|
|
||||||
|
if (this.focusedChild_ !== undefined) {
|
||||||
|
stepChild = this.focusedChild_ - 1
|
||||||
|
}
|
||||||
|
this.focus(stepChild)
|
||||||
|
}
|
||||||
|
|
||||||
|
focus (item = 0): void {
|
||||||
|
const children = this.children().slice()
|
||||||
|
const haveTitle = children.length && children[0].hasClass('vjs-menu-title')
|
||||||
|
|
||||||
|
if (haveTitle) {
|
||||||
|
children.shift()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (children.length > 0) {
|
||||||
|
if (item < 0) {
|
||||||
|
item = 0
|
||||||
|
} else if (item >= children.length) {
|
||||||
|
item = children.length - 1
|
||||||
|
}
|
||||||
|
|
||||||
|
const el = children[item].el() as HTMLElement
|
||||||
|
|
||||||
|
if (el.classList.contains('vjs-hidden')) {
|
||||||
|
if (this.focusedChild_ < item) {
|
||||||
|
if (item === children.length - 1) return
|
||||||
|
|
||||||
|
return this.focus(item + 1)
|
||||||
|
} else {
|
||||||
|
if (item === 0) return
|
||||||
|
|
||||||
|
return this.focus(item - 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.focusedChild_ = item
|
||||||
|
|
||||||
|
el.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component.registerComponent('MenuFocusFixed', MenuFocusFixed)
|
||||||
|
export { MenuFocusFixed }
|
@ -4,9 +4,9 @@ import { SettingsDialog } from './settings-dialog'
|
|||||||
import { SettingsMenuItem } from './settings-menu-item'
|
import { SettingsMenuItem } from './settings-menu-item'
|
||||||
import { SettingsPanel } from './settings-panel'
|
import { SettingsPanel } from './settings-panel'
|
||||||
import { SettingsPanelChild } from './settings-panel-child'
|
import { SettingsPanelChild } from './settings-panel-child'
|
||||||
|
import { MenuFocusFixed } from './menu-focus-fixed'
|
||||||
|
|
||||||
const Button = videojs.getComponent('Button')
|
const Button = videojs.getComponent('Button')
|
||||||
const Menu = videojs.getComponent('Menu')
|
|
||||||
const Component = videojs.getComponent('Component')
|
const Component = videojs.getComponent('Component')
|
||||||
|
|
||||||
export interface SettingsButtonOptions extends videojs.ComponentOptions {
|
export interface SettingsButtonOptions extends videojs.ComponentOptions {
|
||||||
@ -19,7 +19,7 @@ export interface SettingsButtonOptions extends videojs.ComponentOptions {
|
|||||||
class SettingsButton extends Button {
|
class SettingsButton extends Button {
|
||||||
dialog: SettingsDialog
|
dialog: SettingsDialog
|
||||||
dialogEl: HTMLElement
|
dialogEl: HTMLElement
|
||||||
menu: videojs.Menu
|
menu: MenuFocusFixed
|
||||||
panel: SettingsPanel
|
panel: SettingsPanel
|
||||||
panelChild: SettingsPanelChild
|
panelChild: SettingsPanelChild
|
||||||
|
|
||||||
@ -122,6 +122,7 @@ class SettingsButton extends Button {
|
|||||||
|
|
||||||
bindEvents () {
|
bindEvents () {
|
||||||
document.addEventListener('click', this.documentClickHandler)
|
document.addEventListener('click', this.documentClickHandler)
|
||||||
|
|
||||||
if (this.isInIframe()) {
|
if (this.isInIframe()) {
|
||||||
window.addEventListener('blur', this.documentClickHandler)
|
window.addEventListener('blur', this.documentClickHandler)
|
||||||
}
|
}
|
||||||
@ -153,8 +154,7 @@ class SettingsButton extends Button {
|
|||||||
|
|
||||||
this.setDialogSize(this.getComponentSize(this.menu))
|
this.setDialogSize(this.getComponentSize(this.menu))
|
||||||
|
|
||||||
const firstChild = this.menu.children()[0]
|
this.menu.focus()
|
||||||
if (firstChild) firstChild.focus()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hideDialog () {
|
hideDialog () {
|
||||||
@ -209,7 +209,12 @@ class SettingsButton extends Button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
buildMenu () {
|
buildMenu () {
|
||||||
this.menu = new Menu(this.player())
|
this.menu = new MenuFocusFixed(this.player())
|
||||||
|
this.menu.on('escaped-key', () => {
|
||||||
|
this.hideDialog()
|
||||||
|
this.focus()
|
||||||
|
})
|
||||||
|
|
||||||
this.menu.addClass('vjs-main-menu')
|
this.menu.addClass('vjs-main-menu')
|
||||||
const entries = this.settingsButtonOptions.entries
|
const entries = this.settingsButtonOptions.entries
|
||||||
|
|
||||||
|
@ -144,7 +144,7 @@ class SettingsMenuItem extends MenuItem {
|
|||||||
createEl () {
|
createEl () {
|
||||||
const el = videojs.dom.createEl('li', {
|
const el = videojs.dom.createEl('li', {
|
||||||
className: 'vjs-menu-item',
|
className: 'vjs-menu-item',
|
||||||
tabIndex: -1
|
tabIndex: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
|
this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
|
||||||
@ -191,8 +191,7 @@ class SettingsMenuItem extends MenuItem {
|
|||||||
|
|
||||||
this.settingsButton.setDialogSize(this.size)
|
this.settingsButton.setDialogSize(this.size)
|
||||||
|
|
||||||
const firstChild = this.subMenu.menu.children()[0]
|
this.subMenu.menu.focus()
|
||||||
if (firstChild) firstChild.focus()
|
|
||||||
} else {
|
} else {
|
||||||
videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
|
videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
|
||||||
}
|
}
|
||||||
@ -249,8 +248,7 @@ class SettingsMenuItem extends MenuItem {
|
|||||||
this.setMargin()
|
this.setMargin()
|
||||||
mainMenuEl.style.opacity = '1'
|
mainMenuEl.style.opacity = '1'
|
||||||
|
|
||||||
const firstChild = this.mainMenu.children()[0]
|
this.mainMenu.focus()
|
||||||
if (firstChild) firstChild.focus()
|
|
||||||
}, 0)
|
}, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user