aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-07-13 18:21:19 +0200
committerChocobozzz <me@florianbigard.com>2018-07-16 11:50:08 +0200
commit16f7022b06fb76c0b00c23c970bc8df605b0ec63 (patch)
tree0677c72b449485dcaa87ee2b470dfb1a8124b9e0 /client/src/standalone/videos
parent40e87e9ecc54e3513fb586928330a7855eb192c6 (diff)
downloadPeerTube-16f7022b06fb76c0b00c23c970bc8df605b0ec63.tar.gz
PeerTube-16f7022b06fb76c0b00c23c970bc8df605b0ec63.tar.zst
PeerTube-16f7022b06fb76c0b00c23c970bc8df605b0ec63.zip
Handle subtitles in player
Diffstat (limited to 'client/src/standalone/videos')
-rw-r--r--client/src/standalone/videos/embed.ts30
1 files changed, 25 insertions, 5 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index a4196600a..1275998b8 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -20,9 +20,11 @@ import 'whatwg-fetch'
20import * as vjs from 'video.js' 20import * as vjs from 'video.js'
21import * as Channel from 'jschannel' 21import * as Channel from 'jschannel'
22 22
23import { VideoDetails } from '../../../../shared' 23import { ResultList, VideoDetails } from '../../../../shared'
24import { addContextMenu, getVideojsOptions, loadLocale } from '../../assets/player/peertube-player' 24import { addContextMenu, getVideojsOptions, loadLocale } from '../../assets/player/peertube-player'
25import { PeerTubeResolution } from '../player/definitions' 25import { PeerTubeResolution } from '../player/definitions'
26import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
27import { VideoCaption } from '../../../../shared/models/videos/video-caption.model'
26 28
27/** 29/**
28 * Embed API exposes control of the embed player to the outside world via 30 * Embed API exposes control of the embed player to the outside world via
@@ -178,6 +180,10 @@ class PeerTubeEmbed {
178 return fetch(this.getVideoUrl(videoId)) 180 return fetch(this.getVideoUrl(videoId))
179 } 181 }
180 182
183 loadVideoCaptions (videoId: string): Promise<Response> {
184 return fetch(this.getVideoUrl(videoId) + '/captions')
185 }
186
181 removeElement (element: HTMLElement) { 187 removeElement (element: HTMLElement) {
182 element.parentElement.removeChild(element) 188 element.parentElement.removeChild(element)
183 } 189 }
@@ -254,15 +260,27 @@ class PeerTubeEmbed {
254 const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ] 260 const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[ 0 ]
255 261
256 await loadLocale(window.location.origin, vjs, navigator.language) 262 await loadLocale(window.location.origin, vjs, navigator.language)
257 let response = await this.loadVideoInfo(videoId) 263 const [ videoResponse, captionsResponse ] = await Promise.all([
264 this.loadVideoInfo(videoId),
265 this.loadVideoCaptions(videoId)
266 ])
258 267
259 if (!response.ok) { 268 if (!videoResponse.ok) {
260 if (response.status === 404) return this.videoNotFound(this.videoElement) 269 if (videoResponse.status === 404) return this.videoNotFound(this.videoElement)
261 270
262 return this.videoFetchError(this.videoElement) 271 return this.videoFetchError(this.videoElement)
263 } 272 }
264 273
265 const videoInfo: VideoDetails = await response.json() 274 const videoInfo: VideoDetails = await videoResponse.json()
275 let videoCaptions: VideoJSCaption[] = []
276 if (captionsResponse.ok) {
277 const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
278 videoCaptions = data.map(c => ({
279 label: c.language.label,
280 language: c.language.id,
281 src: window.location.origin + c.captionPath
282 }))
283 }
266 284
267 this.loadParams() 285 this.loadParams()
268 286
@@ -273,6 +291,7 @@ class PeerTubeEmbed {
273 loop: this.loop, 291 loop: this.loop,
274 startTime: this.startTime, 292 startTime: this.startTime,
275 293
294 videoCaptions,
276 inactivityTimeout: 1500, 295 inactivityTimeout: 1500,
277 videoViewUrl: this.getVideoUrl(videoId) + '/views', 296 videoViewUrl: this.getVideoUrl(videoId) + '/views',
278 playerElement: this.videoElement, 297 playerElement: this.videoElement,
@@ -297,6 +316,7 @@ class PeerTubeEmbed {
297 } 316 }
298 317
299 addContextMenu(this.player, window.location.origin + videoInfo.embedPath) 318 addContextMenu(this.player, window.location.origin + videoInfo.embedPath)
319
300 this.initializeApi() 320 this.initializeApi()
301 }) 321 })
302 } 322 }