Display avatar in embed poster

[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / embed.ts

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 874be580dbd9a72704005dc4b67b329e737fd00b..38ff398904942b7d4bcbb494398915537f5914b6 100644 (file)
--- 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 {
@@ -7,18 +9,21 @@ import {
   OAuth2ErrorCode,
   ResultList,
   UserRefreshToken,
+  Video,
   VideoCaption,
   VideoDetails,
   VideoPlaylist,
   VideoPlaylistElement,
   VideoStreamingPlaylistType
 } from '../../../../shared/models'
-import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
+import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { TranslationsManager } from '../../assets/player/translations-manager'
+import { isP2PEnabled } from '../../assets/player/utils'
+import { getBoolOrDefault } from '../../root-helpers/local-storage-utils'
 import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
 import { PluginsManager } from '../../root-helpers/plugins-manager'
-import { Tokens } from '../../root-helpers/users'
+import { UserLocalStorageKeys, UserTokens } from '../../root-helpers/users'
 import { objectToUrlEncoded } from '../../root-helpers/utils'
 import { RegisterClientHelpers } from '../../types/register-client-option.model'
 import { PeerTubeEmbedApi } from './embed-api'
@@ -42,13 +47,14 @@ export class PeerTubeEmbed {
   title: boolean
   warningTitle: boolean
   peertubeLink: boolean
+  p2pEnabled: boolean
   bigPlayBackgroundColor: string
   foregroundColor: string
 
   mode: PlayerMode
   scope = 'peertube'
 
-  userTokens: Tokens
+  userTokens: UserTokens
   headers = new Headers()
   LOCAL_STORAGE_OAUTH_CLIENT_KEYS = {
     CLIENT_ID: 'client_id',
@@ -118,7 +124,7 @@ export class PeerTubeEmbed {
             return res.json()
           }).then((obj: UserRefreshToken & { code?: OAuth2ErrorCode }) => {
             if (!obj || obj.code === OAuth2ErrorCode.INVALID_GRANT) {
-              Tokens.flush()
+              UserTokens.flushLocalStorage(peertubeLocalStorage)
               this.removeTokensFromHeaders()
 
               return resolve()
@@ -126,7 +132,7 @@ export class PeerTubeEmbed {
 
             this.userTokens.accessToken = obj.access_token
             this.userTokens.refreshToken = obj.refresh_token
-            this.userTokens.save()
+            UserTokens.saveToLocalStorage(peertubeLocalStorage, this.userTokens)
 
             this.setHeadersFromTokens()
 
@@ -138,7 +144,7 @@ export class PeerTubeEmbed {
 
         return refreshingTokenPromise
           .catch(() => {
-            Tokens.flush()
+            UserTokens.flushLocalStorage(peertubeLocalStorage)
 
             this.removeTokensFromHeaders()
           }).then(() => fetch(url, {
@@ -258,7 +264,7 @@ export class PeerTubeEmbed {
   }
 
   async init () {
-    this.userTokens = Tokens.load()
+    this.userTokens = UserTokens.getUserTokens(peertubeLocalStorage)
     await this.initCore()
   }
 
@@ -281,6 +287,7 @@ export class PeerTubeEmbed {
       this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
       this.warningTitle = this.getParamToggle(params, 'warningTitle', true)
       this.peertubeLink = this.getParamToggle(params, 'peertubeLink', true)
+      this.p2pEnabled = this.getParamToggle(params, 'p2p', this.isP2PEnabled(video))
 
       this.scope = this.getParamString(params, 'scope', this.scope)
       this.subtitle = this.getParamString(params, 'subtitle')
@@ -515,6 +522,8 @@ export class PeerTubeEmbed {
         muted: this.muted,
         loop: this.loop,
 
+        p2pEnabled: this.p2pEnabled,
+
         captions: videoCaptions.length !== 0,
         subtitle: this.subtitle,
 
@@ -551,7 +560,11 @@ export class PeerTubeEmbed {
         serverUrl: window.location.origin,
         language: navigator.language,
         embedUrl: window.location.origin + videoInfo.embedPath,
-        embedTitle: videoInfo.name
+        embedTitle: videoInfo.name,
+
+        errorNotifier: () => {
+          // Empty, we don't have a notifier in the embed
+        }
       },
 
       webtorrent: {
@@ -657,7 +670,6 @@ export class PeerTubeEmbed {
       this.player.dispose()
       this.playerElement = null
       this.displayError('This video is not available because the remote instance is not responding.', translations)
-
     }
   }
 
@@ -668,15 +680,22 @@ export class PeerTubeEmbed {
     if (!this.player.player_) return
 
     const title = this.title ? videoInfo.name : undefined
-
-    const description = this.warningTitle && (!videoInfo.isLocal || this.config.tracker.enabled)
+    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
       })
     }
   }
@@ -784,6 +803,15 @@ export class PeerTubeEmbed {
       translate: (value: string) => Promise.resolve(peertubeTranslate(value, translations))
     }
   }
+
+  private isP2PEnabled (video: Video) {
+    const userP2PEnabled = getBoolOrDefault(
+      peertubeLocalStorage.getItem(UserLocalStorageKeys.P2P_ENABLED),
+      this.config.defaults.p2p.embed.enabled
+    )
+
+    return isP2PEnabled(video, this.config, userP2PEnabled)
+  }
 }
 
 PeerTubeEmbed.main()