Speedup embed first paint

4 files changed, 57 insertions, 10 deletions

diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 169e371da..259113215 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -43,7 +43,6 @@ export class PeerTubeEmbedApi {
     channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
     channel.bind('getPlaybackRates', (txn, params) => this.embed.playerOptions.playbackRates)
-
     this.channel = channel
   }
 
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index 5a15bf552..6edf71f48 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -22,5 +22,7 @@
     <video playsinline="true" id="video-container" class="video-js vjs-peertube-skin">
     </video>
 
+    <div id="placeholder-preview" />
+
   </body>
 </html>
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index c40ea1208..95573dabe 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -79,6 +79,16 @@ html, body {
   }
 }
 
+#placeholder-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-size: 100% auto;
+  width: 100%;
+  height: 100%;
+  background-position: 50% 50%;
+}
+
 @media screen and (max-width: 300px) {
   #error-block {
     font-size: 36px;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index bd012f506..f33dd8869 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,16 +1,24 @@
 import './embed.scss'
 
-import { peertubeTranslate, ResultList, ServerConfig, VideoDetails } from '../../../../shared'
+import {
+  getCompleteLocale,
+  is18nLocale,
+  isDefaultLocale,
+  peertubeTranslate,
+  ResultList,
+  ServerConfig,
+  VideoDetails
+} from '../../../../shared'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
 import {
   P2PMediaLoaderOptions,
-  PeertubePlayerManager,
   PeertubePlayerManagerOptions,
   PlayerMode
 } from '../../assets/player/peertube-player-manager'
 import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
 import { PeerTubeEmbedApi } from './embed-api'
+import { TranslationsManager } from '../../assets/player/translations-manager'
 
 export class PeerTubeEmbed {
   videoElement: HTMLVideoElement
@@ -154,20 +162,30 @@ export class PeerTubeEmbed {
     const urlParts = window.location.pathname.split('/')
     const videoId = urlParts[ urlParts.length - 1 ]
 
-    const [ serverTranslations, videoResponse, captionsResponse, configResponse ] = await Promise.all([
-      PeertubePlayerManager.getServerTranslations(window.location.origin, navigator.language),
-      this.loadVideoInfo(videoId),
-      this.loadVideoCaptions(videoId),
-      this.loadConfig()
-    ])
+    const videoPromise = this.loadVideoInfo(videoId)
+    const captionsPromise = this.loadVideoCaptions(videoId)
+    const configPromise = this.loadConfig()
+
+    const translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
+    const videoResponse = await videoPromise
 
     if (!videoResponse.ok) {
+      const serverTranslations = await translationsPromise
+
       if (videoResponse.status === 404) return this.videoNotFound(serverTranslations)
 
       return this.videoFetchError(serverTranslations)
     }
 
     const videoInfo: VideoDetails = await videoResponse.json()
+    this.loadPlaceholder(videoInfo)
+
+    const PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
+
+    const promises = [ translationsPromise, captionsPromise, configPromise, PeertubePlayerManagerModulePromise ]
+    const [ serverTranslations, captionsResponse, configResponse, PeertubePlayerManagerModule ] = await Promise.all(promises)
+
+    const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
     const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
 
     this.loadParams(videoInfo)
@@ -220,7 +238,7 @@ export class PeerTubeEmbed {
       })
     }
 
-    this.player = await PeertubePlayerManager.initialize(this.mode, options, player => this.player = player)
+    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player)
     this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
 
     window[ 'videojsPlayer' ] = this.player
@@ -230,6 +248,8 @@ export class PeerTubeEmbed {
     await this.buildDock(videoInfo, configResponse)
 
     this.initializeApi()
+
+    this.removePlaceholder()
   }
 
   private handleError (err: Error, translations?: { [ id: string ]: string }) {
@@ -282,6 +302,22 @@ export class PeerTubeEmbed {
 
     return []
   }
+
+  private loadPlaceholder (video: VideoDetails) {
+    const placeholder = this.getPlaceholderElement()
+
+    const url = window.location.origin + video.previewPath
+    placeholder.style.backgroundImage = `url("${url}")`
+  }
+
+  private removePlaceholder () {
+    const placeholder = this.getPlaceholderElement()
+    placeholder.parentElement.removeChild(placeholder)
+  }
+
+  private getPlaceholderElement () {
+    return document.getElementById('placeholder-preview')
+  }
 }
 
 PeerTubeEmbed.main()