Display avatar in embed poster

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 @@
+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component')
+
+export type PeerTubeDockComponentOptions = {
+  title?: string
+  description?: string
+  avatarUrl?: string
+}
+
+class PeerTubeDockComponent extends Component {
+
+  createEl () {
+    const options = this.options_ as PeerTubeDockComponentOptions
+
+    const el = super.createEl('div', {
+      className: 'peertube-dock'
+    })
+
+    if (options.avatarUrl) {
+      const avatar = videojs.dom.createEl('img', {
+        className: 'peertube-dock-avatar',
+        src: options.avatarUrl
+      })
+
+      el.appendChild(avatar)
+    }
+
+    const elWrapperTitleDescription = super.createEl('div', {
+      className: 'peertube-dock-title-description'
+    })
+
+    if (options.title) {
+      const title = videojs.dom.createEl('div', {
+        className: 'peertube-dock-title',
+        title: options.title,
+        innerHTML: options.title
+      })
+
+      elWrapperTitleDescription.appendChild(title)
+    }
+
+    if (options.description) {
+      const description = videojs.dom.createEl('div', {
+        className: 'peertube-dock-description',
+        title: options.description,
+        innerHTML: options.description
+      })
+
+      elWrapperTitleDescription.appendChild(description)
+    }
+
+    if (options.title || options.description) {
+      el.appendChild(elWrapperTitleDescription)
+    }
+
+    return el
+  }
+}
+
+videojs.registerComponent('PeerTubeDockComponent', PeerTubeDockComponent)
+
+export {
+  PeerTubeDockComponent
+}
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 @@
+import videojs from 'video.js'
+import { PeerTubeDockComponent } from './peertube-dock-component'
+
+const Plugin = videojs.getPlugin('plugin')
+
+export type PeerTubeDockPluginOptions = {
+  title?: string
+  description?: string
+  avatarUrl?: string
+}
+
+class PeerTubeDockPlugin extends Plugin {
+  constructor (player: videojs.Player, options: videojs.PlayerOptions & PeerTubeDockPluginOptions) {
+    super(player, options)
+
+    this.player.addClass('peertube-dock')
+
+    this.player.ready(() => {
+      this.player.addChild('PeerTubeDockComponent', options) as PeerTubeDockComponent
+    })
+  }
+}
+
+videojs.registerPlugin('peertubeDock', PeerTubeDockPlugin)
+export { 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 @@
-import 'videojs-dock'
 import '@peertube/videojs-contextmenu'
 import './upnext/end-card'
 import './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 @@
 import { HlsConfig, Level } from 'hls.js'
 import videojs from 'video.js'
 import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
+import { PeerTubeDockPluginOptions } from './dock/peertube-dock-plugin'
 import { Html5Hlsjs } from './p2p-media-loader/hls-plugin'
 import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
@@ -50,7 +51,7 @@ declare module 'video.js' {
       tracks_: (TextTrack & { id: string, label: string, src: string })[]
     }
 
-    dock (options: { title: string, description: string }): void
+    peertubeDock (options: PeerTubeDockPluginOptions): void
 
     upnext (options: Partial<EndCardOptions>): void