Reorganize player files

[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 eb8076b98b766d1c45cd3f384b2deacd99a25a48..55c26ec3be199bcdc6592da367968c6bd0c68ad1 100644 (file)
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,9 +1,12 @@
 import './embed.scss'
+import '../../assets/player/shared/dock/peertube-dock-component'
+import '../../assets/player/shared/dock/peertube-dock-plugin'
 import videojs from 'video.js'
 import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
 import {
   HTMLServerConfig,
   HttpStatusCode,
+  LiveVideo,
   OAuth2ErrorCode,
   ResultList,
   UserRefreshToken,
@@ -14,15 +17,14 @@ import {
   VideoPlaylistElement,
   VideoStreamingPlaylistType
 } from '../../../../shared/models'
-import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
-import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
+import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode, VideoJSCaption } from '../../assets/player'
 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 { UserLocalStorageKeys, UserTokens } from '../../root-helpers/users'
 import { objectToUrlEncoded } from '../../root-helpers/utils'
+import { isP2PEnabled } from '../../root-helpers/video'
 import { RegisterClientHelpers } from '../../types/register-client-option.model'
 import { PeerTubeEmbedApi } from './embed-api'
 
@@ -92,6 +94,10 @@ export class PeerTubeEmbed {
     return window.location.origin + '/api/v1/videos/' + id
   }
 
+  getLiveUrl (videoId: string) {
+    return window.location.origin + '/api/v1/videos/live/' + videoId
+  }
+
   refreshFetch (url: string, options?: RequestInit) {
     return fetch(url, options)
       .then((res: Response) => {
@@ -164,6 +170,12 @@ export class PeerTubeEmbed {
     return this.refreshFetch(this.getVideoUrl(videoId) + '/captions', { headers: this.headers })
   }
 
+  loadWithLive (video: VideoDetails) {
+    return this.refreshFetch(this.getLiveUrl(video.uuid), { headers: this.headers })
+      .then(res => res.json())
+      .then((live: LiveVideo) => ({ video, live }))
+  }
+
   loadPlaylistInfo (playlistId: string): Promise<Response> {
     return this.refreshFetch(this.getPlaylistUrl(playlistId), { headers: this.headers })
   }
@@ -473,13 +485,15 @@ export class PeerTubeEmbed {
         .then(res => res.json())
     }
 
-    const videoInfoPromise = videoResponse.json()
+    const videoInfoPromise: Promise<{ video: VideoDetails, live?: LiveVideo }> = videoResponse.json()
       .then((videoInfo: VideoDetails) => {
         this.loadParams(videoInfo)
 
-        if (!alreadyHadPlayer && !this.autoplay) this.loadPlaceholder(videoInfo)
+        if (!alreadyHadPlayer && !this.autoplay) this.buildPlaceholder(videoInfo)
 
-        return videoInfo
+        if (!videoInfo.isLive) return { video: videoInfo }
+
+        return this.loadWithLive(videoInfo)
       })
 
     const [ videoInfoTmp, serverTranslations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
@@ -491,11 +505,15 @@ export class PeerTubeEmbed {
 
     await this.loadPlugins(serverTranslations)
 
-    const videoInfo: VideoDetails = videoInfoTmp
+    const { video: videoInfo, live } = videoInfoTmp
 
     const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
     const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
 
+    const liveOptions = videoInfo.isLive
+      ? { latencyMode: live.latencyMode }
+      : undefined
+
     const playlistPlugin = this.currentPlaylistElement
       ? {
         elements: this.playlistElements,
@@ -543,6 +561,7 @@ export class PeerTubeEmbed {
         videoUUID: videoInfo.uuid,
 
         isLive: videoInfo.isLive,
+        liveOptions,
 
         playerElement: this.playerElement,
         onPlayerElementChange: (element: HTMLVideoElement) => {
@@ -558,7 +577,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: {
@@ -664,7 +687,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)
-
     }
   }
 
@@ -675,15 +697,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
       })
     }
   }
@@ -714,7 +743,7 @@ export class PeerTubeEmbed {
     return []
   }
 
-  private loadPlaceholder (video: VideoDetails) {
+  private buildPlaceholder (video: VideoDetails) {
     const placeholder = this.getPlaceholderElement()
 
     const url = window.location.origin + video.previewPath