]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/assets/player/videojs-components/settings-menu-item.ts
Fix "Off" player string localization
[github/Chocobozzz/PeerTube.git] / client / src / assets / player / videojs-components / settings-menu-item.ts
CommitLineData
9df52d66 1import videojs from 'video.js'
f5fcd9f7 2// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
2adfc7ea 3import { toTitleCase } from '../utils'
f5fcd9f7 4import { SettingsDialog } from './settings-dialog'
9df52d66 5import { SettingsButton } from './settings-menu-button'
f5fcd9f7
C
6import { SettingsPanel } from './settings-panel'
7import { SettingsPanelChild } from './settings-panel-child'
8
9const MenuItem = videojs.getComponent('MenuItem')
10const component = videojs.getComponent('Component')
11
12export interface SettingsMenuItemOptions extends videojs.MenuItemOptions {
13 entry: string
14 menuButton: SettingsButton
15}
c6352f2c
C
16
17class SettingsMenuItem extends MenuItem {
f5fcd9f7
C
18 settingsButton: SettingsButton
19 dialog: SettingsDialog
20 mainMenu: videojs.Menu
21 panel: SettingsPanel
22 panelChild: SettingsPanelChild
23 panelChildEl: HTMLElement
24 size: number[]
16b55259 25 menuToLoad: string
f5fcd9f7 26 subMenu: SettingsButton
16b55259 27
f5fcd9f7
C
28 submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
29 transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
16b55259 30
f5fcd9f7
C
31 settingsSubMenuTitleEl_: HTMLElement
32 settingsSubMenuValueEl_: HTMLElement
33 settingsSubMenuEl_: HTMLElement
c6352f2c 34
7e37e111 35 constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
c6352f2c
C
36 super(player, options)
37
f5fcd9f7 38 this.settingsButton = options.menuButton
c6352f2c
C
39 this.dialog = this.settingsButton.dialog
40 this.mainMenu = this.settingsButton.menu
41 this.panel = this.dialog.getChild('settingsPanel')
42 this.panelChild = this.panel.getChild('settingsPanelChild')
f5fcd9f7 43 this.panelChildEl = this.panelChild.el() as HTMLElement
c6352f2c
C
44
45 this.size = null
46
47 // keep state of what menu type is loading next
48 this.menuToLoad = 'mainmenu'
49
f5fcd9f7
C
50 const subMenuName = toTitleCase(options.entry)
51 const SubMenuComponent = videojs.getComponent(subMenuName)
c6352f2c
C
52
53 if (!SubMenuComponent) {
54 throw new Error(`Component ${subMenuName} does not exist`)
55 }
f5fcd9f7
C
56
57 const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
58
59 this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
9df52d66 60 const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
16f7022b 61 this.settingsSubMenuEl_.className += ' ' + subMenuClass
c6352f2c
C
62
63 this.eventHandlers()
64
65 player.ready(() => {
b335ccec
C
66 // Voodoo magic for IOS
67 setTimeout(() => {
bfbd9128
C
68 // Player was destroyed
69 if (!this.player_) return
70
b335ccec 71 this.build()
5363a766
C
72
73 // Update on rate change
74 player.on('ratechange', this.submenuClickHandler)
75
c32bf839
C
76 if (subMenuName === 'CaptionsButton') {
77 // Hack to regenerate captions on HTTP fallback
78 player.on('captionsChanged', () => {
79 setTimeout(() => {
80 this.settingsSubMenuEl_.innerHTML = ''
f5fcd9f7 81 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
c32bf839
C
82 this.update()
83 this.bindClickEvents()
c32bf839
C
84 }, 0)
85 })
86 }
87
b335ccec
C
88 this.reset()
89 }, 0)
c6352f2c
C
90 })
91 }
92
93 eventHandlers () {
94 this.submenuClickHandler = this.onSubmenuClick.bind(this)
95 this.transitionEndHandler = this.onTransitionEnd.bind(this)
96 }
97
244b4ae3 98 onSubmenuClick (event: any) {
c6352f2c
C
99 let target = null
100
101 if (event.type === 'tap') {
102 target = event.target
103 } else {
104 target = event.currentTarget
105 }
106
9df52d66 107 if (target?.classList.contains('vjs-back-button')) {
c6352f2c
C
108 this.loadMainMenu()
109 return
110 }
111
112 // To update the sub menu value on click, setTimeout is needed because
113 // updating the value is not instant
114 setTimeout(() => this.update(event), 0)
42aac9fc
C
115
116 // Seems like videojs adds a vjs-hidden class on the caption menu after a click
117 // We don't need it
118 this.subMenu.menu.removeClass('vjs-hidden')
c6352f2c
C
119 }
120
121 /**
122 * Create the component's DOM element
123 *
c6352f2c
C
124 */
125 createEl () {
f5fcd9f7 126 const el = videojs.dom.createEl('li', {
c6352f2c
C
127 className: 'vjs-menu-item'
128 })
129
f5fcd9f7 130 this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
c6352f2c 131 className: 'vjs-settings-sub-menu-title'
f5fcd9f7 132 }) as HTMLElement
c6352f2c
C
133
134 el.appendChild(this.settingsSubMenuTitleEl_)
135
f5fcd9f7 136 this.settingsSubMenuValueEl_ = videojs.dom.createEl('div', {
c6352f2c 137 className: 'vjs-settings-sub-menu-value'
f5fcd9f7 138 }) as HTMLElement
c6352f2c
C
139
140 el.appendChild(this.settingsSubMenuValueEl_)
141
f5fcd9f7 142 this.settingsSubMenuEl_ = videojs.dom.createEl('div', {
c6352f2c 143 className: 'vjs-settings-sub-menu'
f5fcd9f7 144 }) as HTMLElement
c6352f2c 145
f5fcd9f7 146 return el as HTMLLIElement
c6352f2c
C
147 }
148
149 /**
150 * Handle click on menu item
151 *
152 * @method handleClick
153 */
f5fcd9f7 154 handleClick (event: videojs.EventTarget.Event) {
c6352f2c
C
155 this.menuToLoad = 'submenu'
156 // Remove open class to ensure only the open submenu gets this class
f5fcd9f7 157 videojs.dom.removeClass(this.el(), 'open')
c6352f2c 158
f5fcd9f7 159 super.handleClick(event);
c6352f2c 160
f5fcd9f7 161 (this.mainMenu.el() as HTMLElement).style.opacity = '0'
c6352f2c 162 // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
f5fcd9f7
C
163 if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
164 videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
c6352f2c
C
165
166 // animation not played without timeout
167 setTimeout(() => {
168 this.settingsSubMenuEl_.style.opacity = '1'
169 this.settingsSubMenuEl_.style.marginRight = '0px'
170 }, 0)
171
172 this.settingsButton.setDialogSize(this.size)
173 } else {
f5fcd9f7 174 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
c6352f2c
C
175 }
176 }
177
178 /**
179 * Create back button
180 *
181 * @method createBackButton
182 */
183 createBackButton () {
184 const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
f5fcd9f7
C
185
186 button.addClass('vjs-back-button');
187 (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
c6352f2c
C
188 }
189
190 /**
191 * Add/remove prefixed event listener for CSS Transition
192 *
193 * @method PrefixedEvent
194 */
244b4ae3 195 PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
f5fcd9f7 196 const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
c6352f2c
C
197
198 for (let p = 0; p < prefix.length; p++) {
9df52d66 199 if (!prefix[p]) {
c6352f2c
C
200 type = type.toLowerCase()
201 }
202
203 if (action === 'addEvent') {
9df52d66 204 element.addEventListener(prefix[p] + type, callback, false)
c6352f2c 205 } else if (action === 'removeEvent') {
9df52d66 206 element.removeEventListener(prefix[p] + type, callback, false)
c6352f2c
C
207 }
208 }
209 }
210
244b4ae3 211 onTransitionEnd (event: any) {
c6352f2c
C
212 if (event.propertyName !== 'margin-right') {
213 return
214 }
215
216 if (this.menuToLoad === 'mainmenu') {
217 // hide submenu
f5fcd9f7 218 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
c6352f2c
C
219
220 // reset opacity to 0
221 this.settingsSubMenuEl_.style.opacity = '0'
222 }
223 }
224
225 reset () {
f5fcd9f7 226 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
c6352f2c
C
227 this.settingsSubMenuEl_.style.opacity = '0'
228 this.setMargin()
229 }
230
231 loadMainMenu () {
f5fcd9f7 232 const mainMenuEl = this.mainMenu.el() as HTMLElement
c6352f2c
C
233 this.menuToLoad = 'mainmenu'
234 this.mainMenu.show()
f5fcd9f7 235 mainMenuEl.style.opacity = '0'
c6352f2c
C
236
237 // back button will always take you to main menu, so set dialog sizes
f5fcd9f7
C
238 const mainMenuAny = this.mainMenu as any
239 this.settingsButton.setDialogSize([ mainMenuAny.width, mainMenuAny.height ])
c6352f2c
C
240
241 // animation not triggered without timeout (some async stuff ?!?)
242 setTimeout(() => {
243 // animate margin and opacity before hiding the submenu
244 // this triggers CSS Transition event
245 this.setMargin()
f5fcd9f7 246 mainMenuEl.style.opacity = '1'
c6352f2c
C
247 }, 0)
248 }
249
250 build () {
e367da94 251 this.subMenu.on('labelUpdated', () => {
c6352f2c 252 this.update()
2adfc7ea 253 })
3b6f205c
C
254 this.subMenu.on('menuChanged', () => {
255 this.bindClickEvents()
256 this.setSize()
257 this.update()
258 })
c6352f2c 259
f5fcd9f7
C
260 this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText())
261 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
c6352f2c
C
262 this.panelChildEl.appendChild(this.settingsSubMenuEl_)
263 this.update()
264
265 this.createBackButton()
3b6f205c 266 this.setSize()
c6352f2c
C
267 this.bindClickEvents()
268
269 // prefixed event listeners for CSS TransitionEnd
270 this.PrefixedEvent(
271 this.settingsSubMenuEl_,
272 'TransitionEnd',
273 this.transitionEndHandler,
274 'addEvent'
275 )
276 }
277
244b4ae3 278 update (event?: any) {
c199c427 279 let target: HTMLElement = null
c4710631 280 const subMenu = this.subMenu.name()
c6352f2c
C
281
282 if (event && event.type === 'tap') {
283 target = event.target
284 } else if (event) {
285 target = event.currentTarget
286 }
287
288 // Playback rate menu button doesn't get a vjs-selected class
289 // or sets options_['selected'] on the selected playback rate.
290 // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
291 if (subMenu === 'PlaybackRateMenuButton') {
f5fcd9f7 292 const html = (this.subMenu as any).labelEl_.innerHTML
9df52d66
C
293
294 setTimeout(() => {
295 this.settingsSubMenuValueEl_.innerHTML = html
296 }, 250)
c6352f2c
C
297 } else {
298 // Loop trough the submenu items to find the selected child
c4710631 299 for (const subMenuItem of this.subMenu.menu.children_) {
c6352f2c
C
300 if (!(subMenuItem instanceof component)) {
301 continue
302 }
303
a8462c8e 304 if (subMenuItem.hasClass('vjs-selected')) {
f5fcd9f7
C
305 const subMenuItemUntyped = subMenuItem as any
306
a8462c8e 307 // Prefer to use the function
f5fcd9f7
C
308 if (typeof subMenuItemUntyped.getLabel === 'function') {
309 this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.getLabel()
c6352f2c 310 break
a8462c8e 311 }
c6352f2c 312
efcadd3d 313 this.settingsSubMenuValueEl_.innerHTML = this.player().localize(subMenuItemUntyped.options_.label)
c6352f2c
C
314 }
315 }
316 }
317
318 if (target && !target.classList.contains('vjs-back-button')) {
319 this.settingsButton.hideDialog()
320 }
321 }
322
323 bindClickEvents () {
c4710631 324 for (const item of this.subMenu.menu.children()) {
c6352f2c
C
325 if (!(item instanceof component)) {
326 continue
327 }
f5fcd9f7 328 item.on([ 'tap', 'click' ], this.submenuClickHandler)
c6352f2c
C
329 }
330 }
331
332 // save size of submenus on first init
333 // if number of submenu items change dynamically more logic will be needed
3b6f205c 334 setSize () {
c6352f2c 335 this.dialog.removeClass('vjs-hidden')
f5fcd9f7 336 videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
c6352f2c
C
337 this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
338 this.setMargin()
339 this.dialog.addClass('vjs-hidden')
f5fcd9f7 340 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
c6352f2c
C
341 }
342
343 setMargin () {
d275e754
C
344 if (!this.size) return
345
c4710631 346 const [ width ] = this.size
c6352f2c
C
347
348 this.settingsSubMenuEl_.style.marginRight = `-${width}px`
349 }
350
351 /**
352 * Hide the sub menu
353 */
354 hideSubMenu () {
355 // after removing settings item this.el_ === null
f5fcd9f7 356 if (!this.el()) {
c6352f2c
C
357 return
358 }
359
f5fcd9f7
C
360 if (videojs.dom.hasClass(this.el(), 'open')) {
361 videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
362 videojs.dom.removeClass(this.el(), 'open')
c6352f2c
C
363 }
364 }
365
366}
367
f5fcd9f7
C
368(SettingsMenuItem as any).prototype.contentElType = 'button'
369videojs.registerComponent('SettingsMenuItem', SettingsMenuItem)
c6352f2c
C
370
371export { SettingsMenuItem }