diff options
Diffstat (limited to 'client/src/assets/player/videojs-components/settings-menu-item.ts')
-rw-r--r-- | client/src/assets/player/videojs-components/settings-menu-item.ts | 159 |
1 files changed, 85 insertions, 74 deletions
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 84d394c0e..f5671f49d 100644 --- a/client/src/assets/player/videojs-components/settings-menu-item.ts +++ b/client/src/assets/player/videojs-components/settings-menu-item.ts | |||
@@ -1,57 +1,63 @@ | |||
1 | // Author: Yanko Shterev | 1 | // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu |
2 | // Thanks https://github.com/yshterev/videojs-settings-menu | ||
3 | |||
4 | // FIXME: something weird with our path definition in tsconfig and typings | ||
5 | // @ts-ignore | ||
6 | import * as videojs from 'video.js' | ||
7 | |||
8 | import { toTitleCase } from '../utils' | 2 | import { toTitleCase } from '../utils' |
9 | import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings' | 3 | import videojs, { VideoJsPlayer } from 'video.js' |
10 | 4 | import { SettingsButton } from './settings-menu-button' | |
11 | const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem') | 5 | import { SettingsDialog } from './settings-dialog' |
12 | const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component') | 6 | import { SettingsPanel } from './settings-panel' |
7 | import { SettingsPanelChild } from './settings-panel-child' | ||
8 | |||
9 | const MenuItem = videojs.getComponent('MenuItem') | ||
10 | const component = videojs.getComponent('Component') | ||
11 | |||
12 | export interface SettingsMenuItemOptions extends videojs.MenuItemOptions { | ||
13 | entry: string | ||
14 | menuButton: SettingsButton | ||
15 | } | ||
13 | 16 | ||
14 | class SettingsMenuItem extends MenuItem { | 17 | class SettingsMenuItem extends MenuItem { |
15 | settingsButton: any | 18 | settingsButton: SettingsButton |
16 | dialog: any | 19 | dialog: SettingsDialog |
17 | mainMenu: any | 20 | mainMenu: videojs.Menu |
18 | panel: any | 21 | panel: SettingsPanel |
19 | panelChild: any | 22 | panelChild: SettingsPanelChild |
20 | panelChildEl: any | 23 | panelChildEl: HTMLElement |
21 | size: any | 24 | size: number[] |
22 | menuToLoad: string | 25 | menuToLoad: string |
23 | subMenu: any | 26 | subMenu: SettingsButton |
24 | 27 | ||
25 | submenuClickHandler: Function | 28 | submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick |
26 | transitionEndHandler: Function | 29 | transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd |
27 | 30 | ||
28 | settingsSubMenuTitleEl_: any | 31 | settingsSubMenuTitleEl_: HTMLElement |
29 | settingsSubMenuValueEl_: any | 32 | settingsSubMenuValueEl_: HTMLElement |
30 | settingsSubMenuEl_: any | 33 | settingsSubMenuEl_: HTMLElement |
31 | 34 | ||
32 | constructor (player: videojs.Player, options: any, entry: string, menuButton: VideoJSComponentInterface) { | 35 | constructor (player: VideoJsPlayer, options?: SettingsMenuItemOptions) { |
33 | super(player, options) | 36 | super(player, options) |
34 | 37 | ||
35 | this.settingsButton = menuButton | 38 | this.settingsButton = options.menuButton |
36 | this.dialog = this.settingsButton.dialog | 39 | this.dialog = this.settingsButton.dialog |
37 | this.mainMenu = this.settingsButton.menu | 40 | this.mainMenu = this.settingsButton.menu |
38 | this.panel = this.dialog.getChild('settingsPanel') | 41 | this.panel = this.dialog.getChild('settingsPanel') |
39 | this.panelChild = this.panel.getChild('settingsPanelChild') | 42 | this.panelChild = this.panel.getChild('settingsPanelChild') |
40 | this.panelChildEl = this.panelChild.el_ | 43 | this.panelChildEl = this.panelChild.el() as HTMLElement |
41 | 44 | ||
42 | this.size = null | 45 | this.size = null |
43 | 46 | ||
44 | // keep state of what menu type is loading next | 47 | // keep state of what menu type is loading next |
45 | this.menuToLoad = 'mainmenu' | 48 | this.menuToLoad = 'mainmenu' |
46 | 49 | ||
47 | const subMenuName = toTitleCase(entry) | 50 | const subMenuName = toTitleCase(options.entry) |
48 | const SubMenuComponent = videojsUntyped.getComponent(subMenuName) | 51 | const SubMenuComponent = videojs.getComponent(subMenuName) |
49 | 52 | ||
50 | if (!SubMenuComponent) { | 53 | if (!SubMenuComponent) { |
51 | throw new Error(`Component ${subMenuName} does not exist`) | 54 | throw new Error(`Component ${subMenuName} does not exist`) |
52 | } | 55 | } |
53 | this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this) | 56 | |
54 | const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0] | 57 | const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this }) |
58 | |||
59 | this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings | ||
60 | const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ] | ||
55 | this.settingsSubMenuEl_.className += ' ' + subMenuClass | 61 | this.settingsSubMenuEl_.className += ' ' + subMenuClass |
56 | 62 | ||
57 | this.eventHandlers() | 63 | this.eventHandlers() |
@@ -72,7 +78,7 @@ class SettingsMenuItem extends MenuItem { | |||
72 | player.on('captionsChanged', () => { | 78 | player.on('captionsChanged', () => { |
73 | setTimeout(() => { | 79 | setTimeout(() => { |
74 | this.settingsSubMenuEl_.innerHTML = '' | 80 | this.settingsSubMenuEl_.innerHTML = '' |
75 | this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_) | 81 | this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el()) |
76 | this.update() | 82 | this.update() |
77 | this.bindClickEvents() | 83 | this.bindClickEvents() |
78 | }, 0) | 84 | }, 0) |
@@ -119,27 +125,27 @@ class SettingsMenuItem extends MenuItem { | |||
119 | * @method createEl | 125 | * @method createEl |
120 | */ | 126 | */ |
121 | createEl () { | 127 | createEl () { |
122 | const el = videojsUntyped.dom.createEl('li', { | 128 | const el = videojs.dom.createEl('li', { |
123 | className: 'vjs-menu-item' | 129 | className: 'vjs-menu-item' |
124 | }) | 130 | }) |
125 | 131 | ||
126 | this.settingsSubMenuTitleEl_ = videojsUntyped.dom.createEl('div', { | 132 | this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', { |
127 | className: 'vjs-settings-sub-menu-title' | 133 | className: 'vjs-settings-sub-menu-title' |
128 | }) | 134 | }) as HTMLElement |
129 | 135 | ||
130 | el.appendChild(this.settingsSubMenuTitleEl_) | 136 | el.appendChild(this.settingsSubMenuTitleEl_) |
131 | 137 | ||
132 | this.settingsSubMenuValueEl_ = videojsUntyped.dom.createEl('div', { | 138 | this.settingsSubMenuValueEl_ = videojs.dom.createEl('div', { |
133 | className: 'vjs-settings-sub-menu-value' | 139 | className: 'vjs-settings-sub-menu-value' |
134 | }) | 140 | }) as HTMLElement |
135 | 141 | ||
136 | el.appendChild(this.settingsSubMenuValueEl_) | 142 | el.appendChild(this.settingsSubMenuValueEl_) |
137 | 143 | ||
138 | this.settingsSubMenuEl_ = videojsUntyped.dom.createEl('div', { | 144 | this.settingsSubMenuEl_ = videojs.dom.createEl('div', { |
139 | className: 'vjs-settings-sub-menu' | 145 | className: 'vjs-settings-sub-menu' |
140 | }) | 146 | }) as HTMLElement |
141 | 147 | ||
142 | return el | 148 | return el as HTMLLIElement |
143 | } | 149 | } |
144 | 150 | ||
145 | /** | 151 | /** |
@@ -147,17 +153,17 @@ class SettingsMenuItem extends MenuItem { | |||
147 | * | 153 | * |
148 | * @method handleClick | 154 | * @method handleClick |
149 | */ | 155 | */ |
150 | handleClick () { | 156 | handleClick (event: videojs.EventTarget.Event) { |
151 | this.menuToLoad = 'submenu' | 157 | this.menuToLoad = 'submenu' |
152 | // Remove open class to ensure only the open submenu gets this class | 158 | // Remove open class to ensure only the open submenu gets this class |
153 | videojsUntyped.dom.removeClass(this.el_, 'open') | 159 | videojs.dom.removeClass(this.el(), 'open') |
154 | 160 | ||
155 | super.handleClick() | 161 | super.handleClick(event); |
156 | 162 | ||
157 | this.mainMenu.el_.style.opacity = '0' | 163 | (this.mainMenu.el() as HTMLElement).style.opacity = '0' |
158 | // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element | 164 | // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element |
159 | if (videojsUntyped.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) { | 165 | if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) { |
160 | videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden') | 166 | videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden') |
161 | 167 | ||
162 | // animation not played without timeout | 168 | // animation not played without timeout |
163 | setTimeout(() => { | 169 | setTimeout(() => { |
@@ -167,7 +173,7 @@ class SettingsMenuItem extends MenuItem { | |||
167 | 173 | ||
168 | this.settingsButton.setDialogSize(this.size) | 174 | this.settingsButton.setDialogSize(this.size) |
169 | } else { | 175 | } else { |
170 | videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') | 176 | videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') |
171 | } | 177 | } |
172 | } | 178 | } |
173 | 179 | ||
@@ -178,9 +184,9 @@ class SettingsMenuItem extends MenuItem { | |||
178 | */ | 184 | */ |
179 | createBackButton () { | 185 | createBackButton () { |
180 | const button = this.subMenu.menu.addChild('MenuItem', {}, 0) | 186 | const button = this.subMenu.menu.addChild('MenuItem', {}, 0) |
181 | button.name_ = 'BackButton' | 187 | |
182 | button.addClass('vjs-back-button') | 188 | button.addClass('vjs-back-button'); |
183 | button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_) | 189 | (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText()) |
184 | } | 190 | } |
185 | 191 | ||
186 | /** | 192 | /** |
@@ -189,17 +195,17 @@ class SettingsMenuItem extends MenuItem { | |||
189 | * @method PrefixedEvent | 195 | * @method PrefixedEvent |
190 | */ | 196 | */ |
191 | PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') { | 197 | PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') { |
192 | const prefix = ['webkit', 'moz', 'MS', 'o', ''] | 198 | const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ] |
193 | 199 | ||
194 | for (let p = 0; p < prefix.length; p++) { | 200 | for (let p = 0; p < prefix.length; p++) { |
195 | if (!prefix[p]) { | 201 | if (!prefix[ p ]) { |
196 | type = type.toLowerCase() | 202 | type = type.toLowerCase() |
197 | } | 203 | } |
198 | 204 | ||
199 | if (action === 'addEvent') { | 205 | if (action === 'addEvent') { |
200 | element.addEventListener(prefix[p] + type, callback, false) | 206 | element.addEventListener(prefix[ p ] + type, callback, false) |
201 | } else if (action === 'removeEvent') { | 207 | } else if (action === 'removeEvent') { |
202 | element.removeEventListener(prefix[p] + type, callback, false) | 208 | element.removeEventListener(prefix[ p ] + type, callback, false) |
203 | } | 209 | } |
204 | } | 210 | } |
205 | } | 211 | } |
@@ -211,7 +217,7 @@ class SettingsMenuItem extends MenuItem { | |||
211 | 217 | ||
212 | if (this.menuToLoad === 'mainmenu') { | 218 | if (this.menuToLoad === 'mainmenu') { |
213 | // hide submenu | 219 | // hide submenu |
214 | videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') | 220 | videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') |
215 | 221 | ||
216 | // reset opacity to 0 | 222 | // reset opacity to 0 |
217 | this.settingsSubMenuEl_.style.opacity = '0' | 223 | this.settingsSubMenuEl_.style.opacity = '0' |
@@ -219,25 +225,27 @@ class SettingsMenuItem extends MenuItem { | |||
219 | } | 225 | } |
220 | 226 | ||
221 | reset () { | 227 | reset () { |
222 | videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') | 228 | videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') |
223 | this.settingsSubMenuEl_.style.opacity = '0' | 229 | this.settingsSubMenuEl_.style.opacity = '0' |
224 | this.setMargin() | 230 | this.setMargin() |
225 | } | 231 | } |
226 | 232 | ||
227 | loadMainMenu () { | 233 | loadMainMenu () { |
234 | const mainMenuEl = this.mainMenu.el() as HTMLElement | ||
228 | this.menuToLoad = 'mainmenu' | 235 | this.menuToLoad = 'mainmenu' |
229 | this.mainMenu.show() | 236 | this.mainMenu.show() |
230 | this.mainMenu.el_.style.opacity = '0' | 237 | mainMenuEl.style.opacity = '0' |
231 | 238 | ||
232 | // back button will always take you to main menu, so set dialog sizes | 239 | // back button will always take you to main menu, so set dialog sizes |
233 | this.settingsButton.setDialogSize([this.mainMenu.width, this.mainMenu.height]) | 240 | const mainMenuAny = this.mainMenu as any |
241 | this.settingsButton.setDialogSize([ mainMenuAny.width, mainMenuAny.height ]) | ||
234 | 242 | ||
235 | // animation not triggered without timeout (some async stuff ?!?) | 243 | // animation not triggered without timeout (some async stuff ?!?) |
236 | setTimeout(() => { | 244 | setTimeout(() => { |
237 | // animate margin and opacity before hiding the submenu | 245 | // animate margin and opacity before hiding the submenu |
238 | // this triggers CSS Transition event | 246 | // this triggers CSS Transition event |
239 | this.setMargin() | 247 | this.setMargin() |
240 | this.mainMenu.el_.style.opacity = '1' | 248 | mainMenuEl.style.opacity = '1' |
241 | }, 0) | 249 | }, 0) |
242 | } | 250 | } |
243 | 251 | ||
@@ -251,8 +259,8 @@ class SettingsMenuItem extends MenuItem { | |||
251 | this.update() | 259 | this.update() |
252 | }) | 260 | }) |
253 | 261 | ||
254 | this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_) | 262 | this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText()) |
255 | this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_) | 263 | this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el()) |
256 | this.panelChildEl.appendChild(this.settingsSubMenuEl_) | 264 | this.panelChildEl.appendChild(this.settingsSubMenuEl_) |
257 | this.update() | 265 | this.update() |
258 | 266 | ||
@@ -283,7 +291,8 @@ class SettingsMenuItem extends MenuItem { | |||
283 | // or sets options_['selected'] on the selected playback rate. | 291 | // or sets options_['selected'] on the selected playback rate. |
284 | // Thus we get the submenu value based on the labelEl of playbackRateMenuButton | 292 | // Thus we get the submenu value based on the labelEl of playbackRateMenuButton |
285 | if (subMenu === 'PlaybackRateMenuButton') { | 293 | if (subMenu === 'PlaybackRateMenuButton') { |
286 | setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250) | 294 | const html = (this.subMenu as any).labelEl_.innerHTML |
295 | setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250) | ||
287 | } else { | 296 | } else { |
288 | // Loop trough the submenu items to find the selected child | 297 | // Loop trough the submenu items to find the selected child |
289 | for (const subMenuItem of this.subMenu.menu.children_) { | 298 | for (const subMenuItem of this.subMenu.menu.children_) { |
@@ -292,13 +301,15 @@ class SettingsMenuItem extends MenuItem { | |||
292 | } | 301 | } |
293 | 302 | ||
294 | if (subMenuItem.hasClass('vjs-selected')) { | 303 | if (subMenuItem.hasClass('vjs-selected')) { |
304 | const subMenuItemUntyped = subMenuItem as any | ||
305 | |||
295 | // Prefer to use the function | 306 | // Prefer to use the function |
296 | if (typeof subMenuItem.getLabel === 'function') { | 307 | if (typeof subMenuItemUntyped.getLabel === 'function') { |
297 | this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel() | 308 | this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.getLabel() |
298 | break | 309 | break |
299 | } | 310 | } |
300 | 311 | ||
301 | this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label | 312 | this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.options_.label |
302 | } | 313 | } |
303 | } | 314 | } |
304 | } | 315 | } |
@@ -313,7 +324,7 @@ class SettingsMenuItem extends MenuItem { | |||
313 | if (!(item instanceof component)) { | 324 | if (!(item instanceof component)) { |
314 | continue | 325 | continue |
315 | } | 326 | } |
316 | item.on(['tap', 'click'], this.submenuClickHandler) | 327 | item.on([ 'tap', 'click' ], this.submenuClickHandler) |
317 | } | 328 | } |
318 | } | 329 | } |
319 | 330 | ||
@@ -321,11 +332,11 @@ class SettingsMenuItem extends MenuItem { | |||
321 | // if number of submenu items change dynamically more logic will be needed | 332 | // if number of submenu items change dynamically more logic will be needed |
322 | setSize () { | 333 | setSize () { |
323 | this.dialog.removeClass('vjs-hidden') | 334 | this.dialog.removeClass('vjs-hidden') |
324 | videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden') | 335 | videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden') |
325 | this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_) | 336 | this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_) |
326 | this.setMargin() | 337 | this.setMargin() |
327 | this.dialog.addClass('vjs-hidden') | 338 | this.dialog.addClass('vjs-hidden') |
328 | videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') | 339 | videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') |
329 | } | 340 | } |
330 | 341 | ||
331 | setMargin () { | 342 | setMargin () { |
@@ -341,19 +352,19 @@ class SettingsMenuItem extends MenuItem { | |||
341 | */ | 352 | */ |
342 | hideSubMenu () { | 353 | hideSubMenu () { |
343 | // after removing settings item this.el_ === null | 354 | // after removing settings item this.el_ === null |
344 | if (!this.el_) { | 355 | if (!this.el()) { |
345 | return | 356 | return |
346 | } | 357 | } |
347 | 358 | ||
348 | if (videojsUntyped.dom.hasClass(this.el_, 'open')) { | 359 | if (videojs.dom.hasClass(this.el(), 'open')) { |
349 | videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') | 360 | videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden') |
350 | videojsUntyped.dom.removeClass(this.el_, 'open') | 361 | videojs.dom.removeClass(this.el(), 'open') |
351 | } | 362 | } |
352 | } | 363 | } |
353 | 364 | ||
354 | } | 365 | } |
355 | 366 | ||
356 | SettingsMenuItem.prototype.contentElType = 'button' | 367 | (SettingsMenuItem as any).prototype.contentElType = 'button' |
357 | videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem) | 368 | videojs.registerComponent('SettingsMenuItem', SettingsMenuItem) |
358 | 369 | ||
359 | export { SettingsMenuItem } | 370 | export { SettingsMenuItem } |