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.ts108
1 files changed, 59 insertions, 49 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 54b8fb543..b1261c4a2 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -17,17 +17,13 @@ import 'core-js/es6/set'
17// For google bot that uses Chrome 41 and does not understand fetch 17// For google bot that uses Chrome 41 and does not understand fetch
18import 'whatwg-fetch' 18import 'whatwg-fetch'
19 19
20// FIXME: something weird with our path definition in tsconfig and typings
21// @ts-ignore
22import * as vjs from 'video.js'
23
24import * as Channel from 'jschannel' 20import * as Channel from 'jschannel'
25 21
26import { peertubeTranslate, ResultList, VideoDetails } from '../../../../shared' 22import { peertubeTranslate, ResultList, VideoDetails } from '../../../../shared'
27import { addContextMenu, getServerTranslations, getVideojsOptions, loadLocaleInVideoJS } from '../../assets/player/peertube-player'
28import { PeerTubeResolution } from '../player/definitions' 23import { PeerTubeResolution } from '../player/definitions'
29import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' 24import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
30import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model' 25import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
26import { PeertubePlayerManager, PeertubePlayerManagerOptions } from '../../assets/player/peertube-player-manager'
31 27
32/** 28/**
33 * Embed API exposes control of the embed player to the outside world via 29 * Embed API exposes control of the embed player to the outside world via
@@ -73,16 +69,16 @@ class PeerTubeEmbedApi {
73 } 69 }
74 70
75 private setResolution (resolutionId: number) { 71 private setResolution (resolutionId: number) {
76 if (resolutionId === -1 && this.embed.player.peertube().isAutoResolutionForbidden()) return 72 if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionForbidden()) return
77 73
78 // Auto resolution 74 // Auto resolution
79 if (resolutionId === -1) { 75 if (resolutionId === -1) {
80 this.embed.player.peertube().enableAutoResolution() 76 this.embed.player.webtorrent().enableAutoResolution()
81 return 77 return
82 } 78 }
83 79
84 this.embed.player.peertube().disableAutoResolution() 80 this.embed.player.webtorrent().disableAutoResolution()
85 this.embed.player.peertube().updateResolution(resolutionId) 81 this.embed.player.webtorrent().updateResolution(resolutionId)
86 } 82 }
87 83
88 /** 84 /**
@@ -122,15 +118,17 @@ class PeerTubeEmbedApi {
122 118
123 // PeerTube specific capabilities 119 // PeerTube specific capabilities
124 120
125 this.embed.player.peertube().on('autoResolutionUpdate', () => this.loadResolutions()) 121 if (this.embed.player.webtorrent) {
126 this.embed.player.peertube().on('videoFileUpdate', () => this.loadResolutions()) 122 this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
123 this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
124 }
127 } 125 }
128 126
129 private loadResolutions () { 127 private loadWebTorrentResolutions () {
130 let resolutions = [] 128 let resolutions = []
131 let currentResolutionId = this.embed.player.peertube().getCurrentResolutionId() 129 let currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
132 130
133 for (const videoFile of this.embed.player.peertube().videoFiles) { 131 for (const videoFile of this.embed.player.webtorrent().videoFiles) {
134 let label = videoFile.resolution.label 132 let label = videoFile.resolution.label
135 if (videoFile.fps && videoFile.fps >= 50) { 133 if (videoFile.fps && videoFile.fps >= 50) {
136 label += videoFile.fps 134 label += videoFile.fps
@@ -266,9 +264,8 @@ class PeerTubeEmbed {
266 const urlParts = window.location.pathname.split('/') 264 const urlParts = window.location.pathname.split('/')
267 const videoId = urlParts[ urlParts.length - 1 ] 265 const videoId = urlParts[ urlParts.length - 1 ]
268 266
269 const [ , serverTranslations, videoResponse, captionsResponse ] = await Promise.all([ 267 const [ serverTranslations, videoResponse, captionsResponse ] = await Promise.all([
270 loadLocaleInVideoJS(window.location.origin, vjs, navigator.language), 268 PeertubePlayerManager.getServerTranslations(window.location.origin, navigator.language),
271 getServerTranslations(window.location.origin, navigator.language),
272 this.loadVideoInfo(videoId), 269 this.loadVideoInfo(videoId),
273 this.loadVideoCaptions(videoId) 270 this.loadVideoCaptions(videoId)
274 ]) 271 ])
@@ -292,43 +289,56 @@ class PeerTubeEmbed {
292 289
293 this.loadParams() 290 this.loadParams()
294 291
295 const videojsOptions = getVideojsOptions({ 292 const options: PeertubePlayerManagerOptions = {
296 autoplay: this.autoplay, 293 common: {
297 controls: this.controls, 294 autoplay: this.autoplay,
298 muted: this.muted, 295 controls: this.controls,
299 loop: this.loop, 296 muted: this.muted,
300 startTime: this.startTime, 297 loop: this.loop,
301 subtitle: this.subtitle, 298 captions: videoCaptions.length !== 0,
302 299 startTime: this.startTime,
303 videoCaptions, 300 subtitle: this.subtitle,
304 inactivityTimeout: 1500, 301
305 videoViewUrl: this.getVideoUrl(videoId) + '/views', 302 videoCaptions,
306 playerElement: this.videoElement, 303 inactivityTimeout: 1500,
307 videoFiles: videoInfo.files, 304 videoViewUrl: this.getVideoUrl(videoId) + '/views',
308 videoDuration: videoInfo.duration, 305 playerElement: this.videoElement,
309 enableHotkeys: true, 306 videoDuration: videoInfo.duration,
310 peertubeLink: true, 307 enableHotkeys: true,
311 poster: window.location.origin + videoInfo.previewPath, 308 peertubeLink: true,
312 theaterMode: false 309 poster: window.location.origin + videoInfo.previewPath,
313 }) 310 theaterMode: false,
311
312 serverUrl: window.location.origin,
313 language: navigator.language,
314 embedUrl: window.location.origin + videoInfo.embedPath
315 },
316
317 webtorrent: {
318 videoFiles: videoInfo.files
319 }
320
321 // p2pMediaLoader: {
322 // // playlistUrl: 'https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8'
323 // // playlistUrl: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
324 // playlistUrl: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8'
325 // }
326 }
314 327
315 this.playerOptions = videojsOptions 328 this.player = await PeertubePlayerManager.initialize('webtorrent', options)
316 this.player = vjs(this.videoContainerId, videojsOptions, () => {
317 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
318 329
319 window[ 'videojsPlayer' ] = this.player 330 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
320 331
321 if (this.controls) { 332 window[ 'videojsPlayer' ] = this.player
322 this.player.dock({
323 title: videoInfo.name,
324 description: this.player.localize('Uses P2P, others may know your IP is downloading this video.')
325 })
326 }
327 333
328 addContextMenu(this.player, window.location.origin + videoInfo.embedPath) 334 if (this.controls) {
335 this.player.dock({
336 title: videoInfo.name,
337 description: this.player.localize('Uses P2P, others may know your IP is downloading this video.')
338 })
339 }
329 340
330 this.initializeApi() 341 this.initializeApi()
331 })
332 } 342 }
333 343
334 private handleError (err: Error, translations?: { [ id: string ]: string }) { 344 private handleError (err: Error, translations?: { [ id: string ]: string }) {