diff options
Diffstat (limited to 'client/src/standalone/videos/embed.ts')
-rw-r--r-- | client/src/standalone/videos/embed.ts | 58 |
1 files changed, 33 insertions, 25 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 7daa03f23..54b8fb543 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -157,10 +157,11 @@ class PeerTubeEmbed { | |||
157 | player: any | 157 | player: any |
158 | playerOptions: any | 158 | playerOptions: any |
159 | api: PeerTubeEmbedApi = null | 159 | api: PeerTubeEmbedApi = null |
160 | autoplay = false | 160 | autoplay: boolean |
161 | controls = true | 161 | controls: boolean |
162 | muted = false | 162 | muted: boolean |
163 | loop = false | 163 | loop: boolean |
164 | subtitle: string | ||
164 | enableApi = false | 165 | enableApi = false |
165 | startTime: number | string = 0 | 166 | startTime: number | string = 0 |
166 | scope = 'peertube' | 167 | scope = 'peertube' |
@@ -191,34 +192,40 @@ class PeerTubeEmbed { | |||
191 | element.parentElement.removeChild(element) | 192 | element.parentElement.removeChild(element) |
192 | } | 193 | } |
193 | 194 | ||
194 | displayError (text: string) { | 195 | displayError (text: string, translations?: { [ id: string ]: string }) { |
195 | // Remove video element | 196 | // Remove video element |
196 | if (this.videoElement) this.removeElement(this.videoElement) | 197 | if (this.videoElement) this.removeElement(this.videoElement) |
197 | 198 | ||
198 | document.title = 'Sorry - ' + text | 199 | const translatedText = peertubeTranslate(text, translations) |
200 | const translatedSorry = peertubeTranslate('Sorry', translations) | ||
201 | |||
202 | document.title = translatedSorry + ' - ' + translatedText | ||
199 | 203 | ||
200 | const errorBlock = document.getElementById('error-block') | 204 | const errorBlock = document.getElementById('error-block') |
201 | errorBlock.style.display = 'flex' | 205 | errorBlock.style.display = 'flex' |
202 | 206 | ||
207 | const errorTitle = document.getElementById('error-title') | ||
208 | errorTitle.innerHTML = peertubeTranslate('Sorry', translations) | ||
209 | |||
203 | const errorText = document.getElementById('error-content') | 210 | const errorText = document.getElementById('error-content') |
204 | errorText.innerHTML = text | 211 | errorText.innerHTML = translatedText |
205 | } | 212 | } |
206 | 213 | ||
207 | videoNotFound () { | 214 | videoNotFound (translations?: { [ id: string ]: string }) { |
208 | const text = 'This video does not exist.' | 215 | const text = 'This video does not exist.' |
209 | this.displayError(text) | 216 | this.displayError(text, translations) |
210 | } | 217 | } |
211 | 218 | ||
212 | videoFetchError () { | 219 | videoFetchError (translations?: { [ id: string ]: string }) { |
213 | const text = 'We cannot fetch the video. Please try again later.' | 220 | const text = 'We cannot fetch the video. Please try again later.' |
214 | this.displayError(text) | 221 | this.displayError(text, translations) |
215 | } | 222 | } |
216 | 223 | ||
217 | getParamToggle (params: URLSearchParams, name: string, defaultValue: boolean) { | 224 | getParamToggle (params: URLSearchParams, name: string, defaultValue?: boolean) { |
218 | return params.has(name) ? (params.get(name) === '1' || params.get(name) === 'true') : defaultValue | 225 | return params.has(name) ? (params.get(name) === '1' || params.get(name) === 'true') : defaultValue |
219 | } | 226 | } |
220 | 227 | ||
221 | getParamString (params: URLSearchParams, name: string, defaultValue: string) { | 228 | getParamString (params: URLSearchParams, name: string, defaultValue?: string) { |
222 | return params.has(name) ? params.get(name) : defaultValue | 229 | return params.has(name) ? params.get(name) : defaultValue |
223 | } | 230 | } |
224 | 231 | ||
@@ -241,15 +248,15 @@ class PeerTubeEmbed { | |||
241 | try { | 248 | try { |
242 | let params = new URL(window.location.toString()).searchParams | 249 | let params = new URL(window.location.toString()).searchParams |
243 | 250 | ||
244 | this.autoplay = this.getParamToggle(params, 'autoplay', this.autoplay) | 251 | this.autoplay = this.getParamToggle(params, 'autoplay') |
245 | this.controls = this.getParamToggle(params, 'controls', this.controls) | 252 | this.controls = this.getParamToggle(params, 'controls') |
246 | this.muted = this.getParamToggle(params, 'muted', this.muted) | 253 | this.muted = this.getParamToggle(params, 'muted') |
247 | this.loop = this.getParamToggle(params, 'loop', this.loop) | 254 | this.loop = this.getParamToggle(params, 'loop') |
248 | this.enableApi = this.getParamToggle(params, 'api', this.enableApi) | 255 | this.enableApi = this.getParamToggle(params, 'api', this.enableApi) |
249 | this.scope = this.getParamString(params, 'scope', this.scope) | ||
250 | 256 | ||
251 | const startTimeParamString = params.get('start') | 257 | this.scope = this.getParamString(params, 'scope', this.scope) |
252 | if (startTimeParamString) this.startTime = startTimeParamString | 258 | this.subtitle = this.getParamString(params, 'subtitle') |
259 | this.startTime = this.getParamString(params, 'start') | ||
253 | } catch (err) { | 260 | } catch (err) { |
254 | console.error('Cannot get params from URL.', err) | 261 | console.error('Cannot get params from URL.', err) |
255 | } | 262 | } |
@@ -267,9 +274,9 @@ class PeerTubeEmbed { | |||
267 | ]) | 274 | ]) |
268 | 275 | ||
269 | if (!videoResponse.ok) { | 276 | if (!videoResponse.ok) { |
270 | if (videoResponse.status === 404) return this.videoNotFound() | 277 | if (videoResponse.status === 404) return this.videoNotFound(serverTranslations) |
271 | 278 | ||
272 | return this.videoFetchError() | 279 | return this.videoFetchError(serverTranslations) |
273 | } | 280 | } |
274 | 281 | ||
275 | const videoInfo: VideoDetails = await videoResponse.json() | 282 | const videoInfo: VideoDetails = await videoResponse.json() |
@@ -291,6 +298,7 @@ class PeerTubeEmbed { | |||
291 | muted: this.muted, | 298 | muted: this.muted, |
292 | loop: this.loop, | 299 | loop: this.loop, |
293 | startTime: this.startTime, | 300 | startTime: this.startTime, |
301 | subtitle: this.subtitle, | ||
294 | 302 | ||
295 | videoCaptions, | 303 | videoCaptions, |
296 | inactivityTimeout: 1500, | 304 | inactivityTimeout: 1500, |
@@ -306,7 +314,7 @@ class PeerTubeEmbed { | |||
306 | 314 | ||
307 | this.playerOptions = videojsOptions | 315 | this.playerOptions = videojsOptions |
308 | this.player = vjs(this.videoContainerId, videojsOptions, () => { | 316 | this.player = vjs(this.videoContainerId, videojsOptions, () => { |
309 | this.player.on('customError', (event: any, data: any) => this.handleError(data.err)) | 317 | this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations)) |
310 | 318 | ||
311 | window[ 'videojsPlayer' ] = this.player | 319 | window[ 'videojsPlayer' ] = this.player |
312 | 320 | ||
@@ -323,11 +331,11 @@ class PeerTubeEmbed { | |||
323 | }) | 331 | }) |
324 | } | 332 | } |
325 | 333 | ||
326 | private handleError (err: Error) { | 334 | private handleError (err: Error, translations?: { [ id: string ]: string }) { |
327 | if (err.message.indexOf('from xs param') !== -1) { | 335 | if (err.message.indexOf('from xs param') !== -1) { |
328 | this.player.dispose() | 336 | this.player.dispose() |
329 | this.videoElement = null | 337 | this.videoElement = null |
330 | this.displayError('This video is not available because the remote instance is not responding.') | 338 | this.displayError('This video is not available because the remote instance is not responding.', translations) |
331 | return | 339 | return |
332 | } | 340 | } |
333 | } | 341 | } |