aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets/player')
-rw-r--r--client/src/assets/player/dock/peertube-dock-component.ts65
-rw-r--r--client/src/assets/player/dock/peertube-dock-plugin.ts25
-rw-r--r--client/src/assets/player/peertube-player-manager.ts1
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts3
4 files changed, 92 insertions, 2 deletions
diff --git a/client/src/assets/player/dock/peertube-dock-component.ts b/client/src/assets/player/dock/peertube-dock-component.ts
new file mode 100644
index 000000000..183c7a00f
--- /dev/null
+++ b/client/src/assets/player/dock/peertube-dock-component.ts
@@ -0,0 +1,65 @@
1import videojs from 'video.js'
2
3const Component = videojs.getComponent('Component')
4
5export type PeerTubeDockComponentOptions = {
6 title?: string
7 description?: string
8 avatarUrl?: string
9}
10
11class PeerTubeDockComponent extends Component {
12
13 createEl () {
14 const options = this.options_ as PeerTubeDockComponentOptions
15
16 const el = super.createEl('div', {
17 className: 'peertube-dock'
18 })
19
20 if (options.avatarUrl) {
21 const avatar = videojs.dom.createEl('img', {
22 className: 'peertube-dock-avatar',
23 src: options.avatarUrl
24 })
25
26 el.appendChild(avatar)
27 }
28
29 const elWrapperTitleDescription = super.createEl('div', {
30 className: 'peertube-dock-title-description'
31 })
32
33 if (options.title) {
34 const title = videojs.dom.createEl('div', {
35 className: 'peertube-dock-title',
36 title: options.title,
37 innerHTML: options.title
38 })
39
40 elWrapperTitleDescription.appendChild(title)
41 }
42
43 if (options.description) {
44 const description = videojs.dom.createEl('div', {
45 className: 'peertube-dock-description',
46 title: options.description,
47 innerHTML: options.description
48 })
49
50 elWrapperTitleDescription.appendChild(description)
51 }
52
53 if (options.title || options.description) {
54 el.appendChild(elWrapperTitleDescription)
55 }
56
57 return el
58 }
59}
60
61videojs.registerComponent('PeerTubeDockComponent', PeerTubeDockComponent)
62
63export {
64 PeerTubeDockComponent
65}
diff --git a/client/src/assets/player/dock/peertube-dock-plugin.ts b/client/src/assets/player/dock/peertube-dock-plugin.ts
new file mode 100644
index 000000000..245981692
--- /dev/null
+++ b/client/src/assets/player/dock/peertube-dock-plugin.ts
@@ -0,0 +1,25 @@
1import videojs from 'video.js'
2import { PeerTubeDockComponent } from './peertube-dock-component'
3
4const Plugin = videojs.getPlugin('plugin')
5
6export type PeerTubeDockPluginOptions = {
7 title?: string
8 description?: string
9 avatarUrl?: string
10}
11
12class PeerTubeDockPlugin extends Plugin {
13 constructor (player: videojs.Player, options: videojs.PlayerOptions & PeerTubeDockPluginOptions) {
14 super(player, options)
15
16 this.player.addClass('peertube-dock')
17
18 this.player.ready(() => {
19 this.player.addChild('PeerTubeDockComponent', options) as PeerTubeDockComponent
20 })
21 }
22}
23
24videojs.registerPlugin('peertubeDock', PeerTubeDockPlugin)
25export { PeerTubeDockPlugin }
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 2ef42a961..9d2b29811 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,4 +1,3 @@
1import 'videojs-dock'
2import '@peertube/videojs-contextmenu' 1import '@peertube/videojs-contextmenu'
3import './upnext/end-card' 2import './upnext/end-card'
4import './upnext/upnext-plugin' 3import './upnext/upnext-plugin'
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 246f0d390..09996f75d 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,6 +1,7 @@
1import { HlsConfig, Level } from 'hls.js' 1import { HlsConfig, Level } from 'hls.js'
2import videojs from 'video.js' 2import videojs from 'video.js'
3import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models' 3import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
4import { PeerTubeDockPluginOptions } from './dock/peertube-dock-plugin'
4import { Html5Hlsjs } from './p2p-media-loader/hls-plugin' 5import { Html5Hlsjs } from './p2p-media-loader/hls-plugin'
5import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin' 6import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
6import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' 7import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
@@ -50,7 +51,7 @@ declare module 'video.js' {
50 tracks_: (TextTrack & { id: string, label: string, src: string })[] 51 tracks_: (TextTrack & { id: string, label: string, src: string })[]
51 } 52 }
52 53
53 dock (options: { title: string, description: string }): void 54 peertubeDock (options: PeerTubeDockPluginOptions): void
54 55
55 upnext (options: Partial<EndCardOptions>): void 56 upnext (options: Partial<EndCardOptions>): void
56 57