Display avatar in embed poster

2 files changed, 12 insertions, 4 deletions

diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index c2ee16ae2..91ab822c8 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -1,7 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 @use 'video.js/dist/video-js';
-@use 'videojs-dock/dist/videojs-dock';
 
 $assets-path: '../../assets/';
 @use '../../sass/player/index';
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 054f771ab..38ff39890 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,4 +1,6 @@
 import './embed.scss'
+import '../../assets/player/dock/peertube-dock-component'
+import '../../assets/player/dock/peertube-dock-plugin'
 import videojs from 'video.js'
 import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
 import {
@@ -678,15 +680,22 @@ export class PeerTubeEmbed {
     if (!this.player.player_) return
 
     const title = this.title ? videoInfo.name : undefined
-
     const description = this.warningTitle && this.p2pEnabled
       ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
       : undefined
 
+    const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
+    const avatar = availableAvatars.length !== 0
+      ? availableAvatars[0]
+      : undefined
+
     if (title || description) {
-      this.player.dock({
+      this.player.peertubeDock({
         title,
-        description
+        description,
+        avatarUrl: title && avatar
+          ? avatar.path
+          : undefined
       })
     }
   }