aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos/embed.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/standalone/videos/embed.ts')
-rw-r--r--client/src/standalone/videos/embed.ts54
1 files changed, 45 insertions, 9 deletions
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 @@
1import './embed.scss' 1import './embed.scss'
2 2
3import { peertubeTranslate, ResultList, ServerConfig, VideoDetails } from '../../../../shared' 3import {
4 getCompleteLocale,
5 is18nLocale,
6 isDefaultLocale,
7 peertubeTranslate,
8 ResultList,
9 ServerConfig,
10 VideoDetails
11} from '../../../../shared'
4import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' 12import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
5import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model' 13import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
6import { 14import {
7 P2PMediaLoaderOptions, 15 P2PMediaLoaderOptions,
8 PeertubePlayerManager,
9 PeertubePlayerManagerOptions, 16 PeertubePlayerManagerOptions,
10 PlayerMode 17 PlayerMode
11} from '../../assets/player/peertube-player-manager' 18} from '../../assets/player/peertube-player-manager'
12import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type' 19import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
13import { PeerTubeEmbedApi } from './embed-api' 20import { PeerTubeEmbedApi } from './embed-api'
21import { TranslationsManager } from '../../assets/player/translations-manager'
14 22
15export class PeerTubeEmbed { 23export class PeerTubeEmbed {
16 videoElement: HTMLVideoElement 24 videoElement: HTMLVideoElement
@@ -154,20 +162,30 @@ export class PeerTubeEmbed {
154 const urlParts = window.location.pathname.split('/') 162 const urlParts = window.location.pathname.split('/')
155 const videoId = urlParts[ urlParts.length - 1 ] 163 const videoId = urlParts[ urlParts.length - 1 ]
156 164
157 const [ serverTranslations, videoResponse, captionsResponse, configResponse ] = await Promise.all([ 165 const videoPromise = this.loadVideoInfo(videoId)
158 PeertubePlayerManager.getServerTranslations(window.location.origin, navigator.language), 166 const captionsPromise = this.loadVideoCaptions(videoId)
159 this.loadVideoInfo(videoId), 167 const configPromise = this.loadConfig()
160 this.loadVideoCaptions(videoId), 168
161 this.loadConfig() 169 const translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
162 ]) 170 const videoResponse = await videoPromise
163 171
164 if (!videoResponse.ok) { 172 if (!videoResponse.ok) {
173 const serverTranslations = await translationsPromise
174
165 if (videoResponse.status === 404) return this.videoNotFound(serverTranslations) 175 if (videoResponse.status === 404) return this.videoNotFound(serverTranslations)
166 176
167 return this.videoFetchError(serverTranslations) 177 return this.videoFetchError(serverTranslations)
168 } 178 }
169 179
170 const videoInfo: VideoDetails = await videoResponse.json() 180 const videoInfo: VideoDetails = await videoResponse.json()
181 this.loadPlaceholder(videoInfo)
182
183 const PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
184
185 const promises = [ translationsPromise, captionsPromise, configPromise, PeertubePlayerManagerModulePromise ]
186 const [ serverTranslations, captionsResponse, configResponse, PeertubePlayerManagerModule ] = await Promise.all(promises)
187
188 const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
171 const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse) 189 const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
172 190
173 this.loadParams(videoInfo) 191 this.loadParams(videoInfo)
@@ -220,7 +238,7 @@ export class PeerTubeEmbed {
220 }) 238 })
221 } 239 }
222 240
223 this.player = await PeertubePlayerManager.initialize(this.mode, options, player => this.player = player) 241 this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player)
224 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations)) 242 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
225 243
226 window[ 'videojsPlayer' ] = this.player 244 window[ 'videojsPlayer' ] = this.player
@@ -230,6 +248,8 @@ export class PeerTubeEmbed {
230 await this.buildDock(videoInfo, configResponse) 248 await this.buildDock(videoInfo, configResponse)
231 249
232 this.initializeApi() 250 this.initializeApi()
251
252 this.removePlaceholder()
233 } 253 }
234 254
235 private handleError (err: Error, translations?: { [ id: string ]: string }) { 255 private handleError (err: Error, translations?: { [ id: string ]: string }) {
@@ -282,6 +302,22 @@ export class PeerTubeEmbed {
282 302
283 return [] 303 return []
284 } 304 }
305
306 private loadPlaceholder (video: VideoDetails) {
307 const placeholder = this.getPlaceholderElement()
308
309 const url = window.location.origin + video.previewPath
310 placeholder.style.backgroundImage = `url("${url}")`
311 }
312
313 private removePlaceholder () {
314 const placeholder = this.getPlaceholderElement()
315 placeholder.parentElement.removeChild(placeholder)
316 }
317
318 private getPlaceholderElement () {
319 return document.getElementById('placeholder-preview')
320 }
285} 321}
286 322
287PeerTubeEmbed.main() 323PeerTubeEmbed.main()