PeerTube/client/src/assets/player/shared/playlist/playlist-button.ts

61 lines
1.7 KiB
TypeScript

import videojs from 'video.js'
import { PlaylistPluginOptions } from '../../types'
import { PlaylistMenu } from './playlist-menu'
const ClickableComponent = videojs.getComponent('ClickableComponent')
class PlaylistButton extends ClickableComponent {
private playlistInfoElement: HTMLElement
private wrapper: HTMLElement
options_: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
// FIXME: eslint -> it's not a useless constructor, we need to extend constructor options typings
// eslint-disable-next-line @typescript-eslint/no-useless-constructor
constructor (
player: videojs.Player,
options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
) {
super(player, options)
}
createEl () {
this.wrapper = super.createEl('div', {
className: 'vjs-playlist-button',
tabIndex: -1
}) as HTMLElement
const icon = super.createEl('div', {
className: 'vjs-playlist-icon',
tabIndex: -1
})
this.playlistInfoElement = super.createEl('div', {
className: 'vjs-playlist-info',
tabIndex: -1
}) as HTMLElement
this.wrapper.appendChild(icon)
this.wrapper.appendChild(this.playlistInfoElement)
this.update()
return this.wrapper
}
update () {
this.playlistInfoElement.innerText = this.options_.getCurrentPosition() + '/' + this.options_.playlist.videosLength
this.wrapper.title = this.player().localize('Playlist: {1}', [ this.options_.playlist.displayName ])
}
handleClick () {
const playlistMenu = this.options_.playlistMenu
playlistMenu.open()
}
}
videojs.registerComponent('PlaylistButton', PlaylistButton)
export { PlaylistButton }