2022-03-08 16:26:30 +01:00
|
|
|
import videojs from 'video.js'
|
|
|
|
|
|
|
|
const Component = videojs.getComponent('Component')
|
|
|
|
|
|
|
|
export type PeerTubeDockComponentOptions = {
|
|
|
|
title?: string
|
|
|
|
description?: string
|
|
|
|
avatarUrl?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
class PeerTubeDockComponent extends Component {
|
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
options_: videojs.ComponentOptions & PeerTubeDockComponentOptions
|
2022-03-08 16:26:30 +01:00
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-useless-constructor
|
|
|
|
constructor (player: videojs.Player, options: videojs.ComponentOptions & PeerTubeDockComponentOptions) {
|
|
|
|
super(player, options)
|
|
|
|
}
|
|
|
|
|
|
|
|
createEl () {
|
|
|
|
const el = super.createEl('div', { className: 'peertube-dock' })
|
2022-03-08 16:26:30 +01:00
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
if (this.options_.avatarUrl) {
|
2022-03-08 16:26:30 +01:00
|
|
|
const avatar = videojs.dom.createEl('img', {
|
|
|
|
className: 'peertube-dock-avatar',
|
2023-06-29 15:55:00 +02:00
|
|
|
src: this.options_.avatarUrl
|
2022-03-08 16:26:30 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
el.appendChild(avatar)
|
|
|
|
}
|
|
|
|
|
|
|
|
const elWrapperTitleDescription = super.createEl('div', {
|
|
|
|
className: 'peertube-dock-title-description'
|
|
|
|
})
|
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
if (this.options_.title) {
|
2022-03-08 16:26:30 +01:00
|
|
|
const title = videojs.dom.createEl('div', {
|
|
|
|
className: 'peertube-dock-title',
|
2023-06-29 15:55:00 +02:00
|
|
|
title: this.options_.title,
|
2024-04-04 13:24:41 +02:00
|
|
|
innerText: this.options_.title
|
2022-03-08 16:26:30 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
elWrapperTitleDescription.appendChild(title)
|
|
|
|
}
|
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
if (this.options_.description) {
|
2022-03-08 16:26:30 +01:00
|
|
|
const description = videojs.dom.createEl('div', {
|
|
|
|
className: 'peertube-dock-description',
|
2023-06-29 15:55:00 +02:00
|
|
|
title: this.options_.description,
|
2024-04-04 13:24:41 +02:00
|
|
|
innerText: this.options_.description
|
2022-03-08 16:26:30 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
elWrapperTitleDescription.appendChild(description)
|
|
|
|
}
|
|
|
|
|
2023-06-29 15:55:00 +02:00
|
|
|
if (this.options_.title || this.options_.description) {
|
2022-03-08 16:26:30 +01:00
|
|
|
el.appendChild(elWrapperTitleDescription)
|
|
|
|
}
|
|
|
|
|
|
|
|
return el
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
videojs.registerComponent('PeerTubeDockComponent', PeerTubeDockComponent)
|
|
|
|
|
|
|
|
export {
|
|
|
|
PeerTubeDockComponent
|
|
|
|
}
|