1 // Author: Yanko Shterev
2 // Thanks https://github.com/yshterev/videojs-settings-menu
4 // FIXME: something weird with our path definition in tsconfig and typings
6 import * as videojs from 'video.js'
8 import { toTitleCase } from './utils'
9 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
11 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
12 const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
14 class SettingsMenuItem extends MenuItem {
16 constructor (player: videojs.Player, options: any, entry: string, menuButton: VideoJSComponentInterface) {
17 super(player, options)
19 this.settingsButton = menuButton
20 this.dialog = this.settingsButton.dialog
21 this.mainMenu = this.settingsButton.menu
22 this.panel = this.dialog.getChild('settingsPanel')
23 this.panelChild = this.panel.getChild('settingsPanelChild')
24 this.panelChildEl = this.panelChild.el_
28 // keep state of what menu type is loading next
29 this.menuToLoad = 'mainmenu'
31 const subMenuName = toTitleCase(entry)
32 const SubMenuComponent = videojsUntyped.getComponent(subMenuName)
34 if (!SubMenuComponent) {
35 throw new Error(`Component ${subMenuName} does not exist`)
37 this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this)
38 const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
39 this.settingsSubMenuEl_.className += ' ' + subMenuClass
44 // Voodoo magic for IOS
48 // Update on rate change
49 player.on('ratechange', this.submenuClickHandler)
57 this.submenuClickHandler = this.onSubmenuClick.bind(this)
58 this.transitionEndHandler = this.onTransitionEnd.bind(this)
61 onSubmenuClick (event: any) {
64 if (event.type === 'tap') {
67 target = event.currentTarget
70 if (target && target.classList.contains('vjs-back-button')) {
75 // To update the sub menu value on click, setTimeout is needed because
76 // updating the value is not instant
77 setTimeout(() => this.update(event), 0)
81 * Create the component's DOM element
87 const el = videojsUntyped.dom.createEl('li', {
88 className: 'vjs-menu-item'
91 this.settingsSubMenuTitleEl_ = videojsUntyped.dom.createEl('div', {
92 className: 'vjs-settings-sub-menu-title'
95 el.appendChild(this.settingsSubMenuTitleEl_)
97 this.settingsSubMenuValueEl_ = videojsUntyped.dom.createEl('div', {
98 className: 'vjs-settings-sub-menu-value'
101 el.appendChild(this.settingsSubMenuValueEl_)
103 this.settingsSubMenuEl_ = videojsUntyped.dom.createEl('div', {
104 className: 'vjs-settings-sub-menu'
111 * Handle click on menu item
113 * @method handleClick
116 this.menuToLoad = 'submenu'
117 // Remove open class to ensure only the open submenu gets this class
118 videojsUntyped.dom.removeClass(this.el_, 'open')
122 this.mainMenu.el_.style.opacity = '0'
123 // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
124 if (videojsUntyped.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
125 videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
127 // animation not played without timeout
129 this.settingsSubMenuEl_.style.opacity = '1'
130 this.settingsSubMenuEl_.style.marginRight = '0px'
133 this.settingsButton.setDialogSize(this.size)
135 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
142 * @method createBackButton
144 createBackButton () {
145 const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
146 button.name_ = 'BackButton'
147 button.addClass('vjs-back-button')
148 button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_)
152 * Add/remove prefixed event listener for CSS Transition
154 * @method PrefixedEvent
156 PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
157 let prefix = ['webkit', 'moz', 'MS', 'o', '']
159 for (let p = 0; p < prefix.length; p++) {
161 type = type.toLowerCase()
164 if (action === 'addEvent') {
165 element.addEventListener(prefix[p] + type, callback, false)
166 } else if (action === 'removeEvent') {
167 element.removeEventListener(prefix[p] + type, callback, false)
172 onTransitionEnd (event: any) {
173 if (event.propertyName !== 'margin-right') {
177 if (this.menuToLoad === 'mainmenu') {
179 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
181 // reset opacity to 0
182 this.settingsSubMenuEl_.style.opacity = '0'
187 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
188 this.settingsSubMenuEl_.style.opacity = '0'
193 this.menuToLoad = 'mainmenu'
195 this.mainMenu.el_.style.opacity = '0'
197 // back button will always take you to main menu, so set dialog sizes
198 this.settingsButton.setDialogSize([this.mainMenu.width, this.mainMenu.height])
200 // animation not triggered without timeout (some async stuff ?!?)
202 // animate margin and opacity before hiding the submenu
203 // this triggers CSS Transition event
205 this.mainMenu.el_.style.opacity = '1'
210 const saveUpdateLabel = this.subMenu.updateLabel
211 this.subMenu.updateLabel = () => {
214 saveUpdateLabel.call(this.subMenu)
217 this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
218 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
219 this.panelChildEl.appendChild(this.settingsSubMenuEl_)
222 this.createBackButton()
224 this.bindClickEvents()
226 // prefixed event listeners for CSS TransitionEnd
228 this.settingsSubMenuEl_,
230 this.transitionEndHandler,
235 update (event?: any) {
236 let target: HTMLElement = null
237 let subMenu = this.subMenu.name()
239 if (event && event.type === 'tap') {
240 target = event.target
242 target = event.currentTarget
245 // Playback rate menu button doesn't get a vjs-selected class
246 // or sets options_['selected'] on the selected playback rate.
247 // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
248 if (subMenu === 'PlaybackRateMenuButton') {
249 setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
251 // Loop trough the submenu items to find the selected child
252 for (let subMenuItem of this.subMenu.menu.children_) {
253 if (!(subMenuItem instanceof component)) {
257 if (subMenuItem.hasClass('vjs-selected')) {
258 // Prefer to use the function
259 if (typeof subMenuItem.getLabel === 'function') {
260 this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
264 this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
269 if (target && !target.classList.contains('vjs-back-button')) {
270 this.settingsButton.hideDialog()
275 for (let item of this.subMenu.menu.children()) {
276 if (!(item instanceof component)) {
279 item.on(['tap', 'click'], this.submenuClickHandler)
283 // save size of submenus on first init
284 // if number of submenu items change dynamically more logic will be needed
286 this.dialog.removeClass('vjs-hidden')
287 this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
289 this.dialog.addClass('vjs-hidden')
290 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
294 let [width] = this.size
296 this.settingsSubMenuEl_.style.marginRight = `-${width}px`
303 // after removing settings item this.el_ === null
308 if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
309 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
310 videojsUntyped.dom.removeClass(this.el_, 'open')
316 SettingsMenuItem.prototype.contentElType = 'button'
317 videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
319 export { SettingsMenuItem }