diff options
Diffstat (limited to 'client/src/standalone')
-rw-r--r-- | client/src/standalone/videos/embed.ts | 70 |
1 files changed, 29 insertions, 41 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 9c672529f..d0676968e 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -6,54 +6,42 @@ import '../../assets/player/peertube-videojs-plugin' | |||
6 | import 'videojs-dock/dist/videojs-dock.es.js' | 6 | import 'videojs-dock/dist/videojs-dock.es.js' |
7 | import { VideoDetails } from '../../../../shared' | 7 | import { VideoDetails } from '../../../../shared' |
8 | 8 | ||
9 | function loadVideoInfo (videoId: string, callback: (err: Error, res?: VideoDetails) => void) { | 9 | async function loadVideoInfo (videoId: string) { |
10 | const xhttp = new XMLHttpRequest() | 10 | const response = await fetch(window.location.origin + '/api/v1/videos/' + videoId) |
11 | xhttp.onreadystatechange = function () { | 11 | return response.json(); |
12 | if (this.readyState === 4 && this.status === 200) { | ||
13 | const json = JSON.parse(this.responseText) | ||
14 | return callback(null, json) | ||
15 | } | ||
16 | } | ||
17 | |||
18 | xhttp.onerror = err => callback(err.error) | ||
19 | |||
20 | const url = window.location.origin + '/api/v1/videos/' + videoId | ||
21 | xhttp.open('GET', url, true) | ||
22 | xhttp.send() | ||
23 | } | 12 | } |
24 | 13 | ||
25 | const urlParts = window.location.href.split('/') | 14 | const urlParts = window.location.href.split('/') |
26 | const videoId = urlParts[urlParts.length - 1] | 15 | const videoId = urlParts[urlParts.length - 1] |
27 | 16 | ||
28 | loadVideoInfo(videoId, (err, videoInfo) => { | 17 | loadVideoInfo(videoId) |
29 | if (err) { | 18 | .then(videoInfo => { |
30 | console.error(err) | 19 | const videoElement = document.getElementById('video-container') as HTMLVideoElement |
31 | return | 20 | const previewUrl = window.location.origin + videoInfo.previewPath |
32 | } | 21 | videoElement.poster = previewUrl |
33 | 22 | ||
34 | const videoElement = document.getElementById('video-container') as HTMLVideoElement | 23 | const videojsOptions = { |
35 | const previewUrl = window.location.origin + videoInfo.previewPath | 24 | controls: true, |
36 | videoElement.poster = previewUrl | 25 | autoplay: false, |
37 | 26 | plugins: { | |
38 | const videojsOptions = { | 27 | peertube: { |
39 | controls: true, | 28 | videoFiles: videoInfo.files, |
40 | autoplay: false, | 29 | playerElement: videoElement, |
41 | plugins: { | 30 | peerTubeLink: true |
42 | peertube: { | 31 | }, |
43 | videoFiles: videoInfo.files, | 32 | hotkeys: { |
44 | playerElement: videoElement, | 33 | enableVolumeScroll: false |
45 | peerTubeLink: true | 34 | } |
46 | }, | ||
47 | hotkeys: { | ||
48 | enableVolumeScroll: false | ||
49 | } | 35 | } |
50 | } | 36 | } |
51 | } | 37 | videojs('video-container', videojsOptions, function () { |
52 | videojs('video-container', videojsOptions, function () { | 38 | const player = this |
53 | const player = this | ||
54 | 39 | ||
55 | player.dock({ | 40 | player.dock({ |
56 | title: videoInfo.name | 41 | title: videoInfo.name |
42 | }) | ||
57 | }) | 43 | }) |
58 | }) | 44 | }) |
59 | }) | 45 | .catch(err => { |
46 | console.error(err); | ||
47 | }) | ||