]>
Commit | Line | Data |
---|---|---|
202e7223 C |
1 | import './embed.scss' |
2 | ||
63c4db6d | 3 | import * as videojs from 'video.js' |
2ccaeeb3 | 4 | import 'videojs-hotkeys' |
aa8b6df4 | 5 | import '../../assets/player/peertube-videojs-plugin' |
202e7223 | 6 | import 'videojs-dock/dist/videojs-dock.es.js' |
404b54e1 | 7 | import { VideoDetails } from '../../../../shared' |
202e7223 | 8 | |
404b54e1 | 9 | function loadVideoInfo (videoId: string, callback: (err: Error, res?: VideoDetails) => void) { |
202e7223 C |
10 | const xhttp = new XMLHttpRequest() |
11 | xhttp.onreadystatechange = function () { | |
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 | } | |
24 | ||
202e7223 C |
25 | const urlParts = window.location.href.split('/') |
26 | const videoId = urlParts[urlParts.length - 1] | |
27 | ||
aa8b6df4 | 28 | loadVideoInfo(videoId, (err, videoInfo) => { |
202e7223 C |
29 | if (err) { |
30 | console.error(err) | |
31 | return | |
32 | } | |
33 | ||
aa8b6df4 C |
34 | const videoElement = document.getElementById('video-container') as HTMLVideoElement |
35 | const previewUrl = window.location.origin + videoInfo.previewPath | |
36 | videoElement.poster = previewUrl | |
37 | ||
38 | const videojsOptions = { | |
39 | controls: true, | |
40 | autoplay: false, | |
41 | plugins: { | |
42 | peertube: { | |
43 | videoFiles: videoInfo.files, | |
44 | playerElement: videoElement, | |
aa8b6df4 | 45 | peerTubeLink: true |
d7701449 | 46 | }, |
234b535d C |
47 | hotkeys: { |
48 | enableVolumeScroll: false | |
49 | } | |
aa8b6df4 | 50 | } |
93e1258c | 51 | } |
aa8b6df4 | 52 | videojs('video-container', videojsOptions, function () { |
202e7223 C |
53 | const player = this |
54 | ||
202e7223 | 55 | player.dock({ |
aa8b6df4 | 56 | title: videoInfo.name |
202e7223 | 57 | }) |
202e7223 C |
58 | }) |
59 | }) |