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.ts58
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 }