1 // Author: Yanko Shterev
2 // Thanks https://github.com/yshterev/videojs-settings-menu
4 import * as videojs from 'video.js'
5 import { toTitleCase } from './utils'
6 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
8 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
9 const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
11 class SettingsMenuItem extends MenuItem {
13 constructor (player: videojs.Player, options, entry: string, menuButton: VideoJSComponentInterface) {
14 super(player, options)
16 this.settingsButton = menuButton
17 this.dialog = this.settingsButton.dialog
18 this.mainMenu = this.settingsButton.menu
19 this.panel = this.dialog.getChild('settingsPanel')
20 this.panelChild = this.panel.getChild('settingsPanelChild')
21 this.panelChildEl = this.panelChild.el_
25 // keep state of what menu type is loading next
26 this.menuToLoad = 'mainmenu'
28 const subMenuName = toTitleCase(entry)
29 const SubMenuComponent = videojsUntyped.getComponent(subMenuName)
31 if (!SubMenuComponent) {
32 throw new Error(`Component ${subMenuName} does not exist`)
34 this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this)
35 const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
36 this.settingsSubMenuEl_.className += ' ' + subMenuClass
41 // Voodoo magic for IOS
45 // Update on rate change
46 player.on('ratechange', this.submenuClickHandler)
54 this.submenuClickHandler = this.onSubmenuClick.bind(this)
55 this.transitionEndHandler = this.onTransitionEnd.bind(this)
58 onSubmenuClick (event) {
61 if (event.type === 'tap') {
64 target = event.currentTarget
67 if (target && target.classList.contains('vjs-back-button')) {
72 // To update the sub menu value on click, setTimeout is needed because
73 // updating the value is not instant
74 setTimeout(() => this.update(event), 0)
78 * Create the component's DOM element
84 const el = videojsUntyped.dom.createEl('li', {
85 className: 'vjs-menu-item'
88 this.settingsSubMenuTitleEl_ = videojsUntyped.dom.createEl('div', {
89 className: 'vjs-settings-sub-menu-title'
92 el.appendChild(this.settingsSubMenuTitleEl_)
94 this.settingsSubMenuValueEl_ = videojsUntyped.dom.createEl('div', {
95 className: 'vjs-settings-sub-menu-value'
98 el.appendChild(this.settingsSubMenuValueEl_)
100 this.settingsSubMenuEl_ = videojsUntyped.dom.createEl('div', {
101 className: 'vjs-settings-sub-menu'
108 * Handle click on menu item
110 * @method handleClick
113 this.menuToLoad = 'submenu'
114 // Remove open class to ensure only the open submenu gets this class
115 videojsUntyped.dom.removeClass(this.el_, 'open')
119 this.mainMenu.el_.style.opacity = '0'
120 // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
121 if (videojsUntyped.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
122 videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
124 // animation not played without timeout
126 this.settingsSubMenuEl_.style.opacity = '1'
127 this.settingsSubMenuEl_.style.marginRight = '0px'
130 this.settingsButton.setDialogSize(this.size)
132 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
139 * @method createBackButton
141 createBackButton () {
142 const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
143 button.name_ = 'BackButton'
144 button.addClass('vjs-back-button')
145 button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_)
149 * Add/remove prefixed event listener for CSS Transition
151 * @method PrefixedEvent
153 PrefixedEvent (element, type, callback, action = 'addEvent') {
154 let prefix = ['webkit', 'moz', 'MS', 'o', '']
156 for (let p = 0; p < prefix.length; p++) {
158 type = type.toLowerCase()
161 if (action === 'addEvent') {
162 element.addEventListener(prefix[p] + type, callback, false)
163 } else if (action === 'removeEvent') {
164 element.removeEventListener(prefix[p] + type, callback, false)
169 onTransitionEnd (event) {
170 if (event.propertyName !== 'margin-right') {
174 if (this.menuToLoad === 'mainmenu') {
176 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
178 // reset opacity to 0
179 this.settingsSubMenuEl_.style.opacity = '0'
184 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
185 this.settingsSubMenuEl_.style.opacity = '0'
190 this.menuToLoad = 'mainmenu'
192 this.mainMenu.el_.style.opacity = '0'
194 // back button will always take you to main menu, so set dialog sizes
195 this.settingsButton.setDialogSize([this.mainMenu.width, this.mainMenu.height])
197 // animation not triggered without timeout (some async stuff ?!?)
199 // animate margin and opacity before hiding the submenu
200 // this triggers CSS Transition event
202 this.mainMenu.el_.style.opacity = '1'
207 const saveUpdateLabel = this.subMenu.updateLabel
208 this.subMenu.updateLabel = () => {
211 saveUpdateLabel.call(this.subMenu)
214 this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
215 this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
216 this.panelChildEl.appendChild(this.settingsSubMenuEl_)
219 this.createBackButton()
221 this.bindClickEvents()
223 // prefixed event listeners for CSS TransitionEnd
225 this.settingsSubMenuEl_,
227 this.transitionEndHandler,
232 update (event?: Event) {
234 let subMenu = this.subMenu.name()
236 if (event && event.type === 'tap') {
237 target = event.target
239 target = event.currentTarget
242 // Playback rate menu button doesn't get a vjs-selected class
243 // or sets options_['selected'] on the selected playback rate.
244 // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
245 if (subMenu === 'PlaybackRateMenuButton') {
246 setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
248 // Loop trough the submenu items to find the selected child
249 for (let subMenuItem of this.subMenu.menu.children_) {
250 if (!(subMenuItem instanceof component)) {
254 if (subMenuItem.hasClass('vjs-selected')) {
255 // Prefer to use the function
256 if (typeof subMenuItem.getLabel === 'function') {
257 this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
261 this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
266 if (target && !target.classList.contains('vjs-back-button')) {
267 this.settingsButton.hideDialog()
272 for (let item of this.subMenu.menu.children()) {
273 if (!(item instanceof component)) {
276 item.on(['tap', 'click'], this.submenuClickHandler)
280 // save size of submenus on first init
281 // if number of submenu items change dynamically more logic will be needed
283 this.dialog.removeClass('vjs-hidden')
284 this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
286 this.dialog.addClass('vjs-hidden')
287 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
291 let [width] = this.size
293 this.settingsSubMenuEl_.style.marginRight = `-${width}px`
300 // after removing settings item this.el_ === null
305 if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
306 videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
307 videojsUntyped.dom.removeClass(this.el_, 'open')
313 SettingsMenuItem.prototype.contentElType = 'button'
314 videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
316 export { SettingsMenuItem }