2020-08-05 11:02:14 +02:00
|
|
|
import videojs from 'video.js'
|
2022-03-14 14:28:20 +01:00
|
|
|
import { NextPreviousVideoButtonOptions } from '../../types'
|
2020-08-05 11:02:14 +02:00
|
|
|
|
|
|
|
const Button = videojs.getComponent('Button')
|
|
|
|
|
|
|
|
class NextPreviousVideoButton extends Button {
|
2023-06-29 15:55:00 +02:00
|
|
|
options_: NextPreviousVideoButtonOptions & videojs.ComponentOptions
|
2020-08-05 11:02:14 +02:00
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions & videojs.ComponentOptions) {
|
|
|
|
super(player, options)
|
2020-08-05 11:02:14 +02:00
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
this.player().on('video-change', () => {
|
|
|
|
this.updateDisabled()
|
|
|
|
this.updateShowing()
|
|
|
|
})
|
2020-08-05 11:02:14 +02:00
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
this.updateDisabled()
|
|
|
|
this.updateShowing()
|
2020-08-05 11:02:14 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
createEl () {
|
|
|
|
const type = (this.options_ as NextPreviousVideoButtonOptions).type
|
|
|
|
|
|
|
|
const button = videojs.dom.createEl('button', {
|
|
|
|
className: 'vjs-' + type + '-video'
|
|
|
|
}) as HTMLButtonElement
|
|
|
|
const nextIcon = videojs.dom.createEl('span', {
|
|
|
|
className: 'icon icon-' + type
|
|
|
|
})
|
|
|
|
button.appendChild(nextIcon)
|
|
|
|
|
|
|
|
if (type === 'next') {
|
|
|
|
button.title = this.player_.localize('Next video')
|
|
|
|
} else {
|
|
|
|
button.title = this.player_.localize('Previous video')
|
|
|
|
}
|
|
|
|
|
|
|
|
return button
|
|
|
|
}
|
|
|
|
|
|
|
|
handleClick () {
|
2023-06-29 15:55:00 +02:00
|
|
|
this.options_.handler()
|
2020-08-05 11:02:14 +02:00
|
|
|
}
|
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
updateDisabled () {
|
|
|
|
const disabled = this.options_.isDisabled()
|
2020-08-05 11:02:14 +02:00
|
|
|
|
|
|
|
if (disabled) this.addClass('vjs-disabled')
|
|
|
|
else this.removeClass('vjs-disabled')
|
|
|
|
}
|
2023-06-29 15:55:00 +02:00
|
|
|
|
|
|
|
updateShowing () {
|
|
|
|
if (this.options_.isDisplayed()) this.show()
|
|
|
|
else this.hide()
|
|
|
|
}
|
2020-08-05 11:02:14 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
videojs.registerComponent('NextVideoButton', NextPreviousVideoButton)
|
|
|
|
videojs.registerComponent('PreviousVideoButton', NextPreviousVideoButton)
|