]>
Commit | Line | Data |
---|---|---|
1 | import './embed.scss' | |
2 | ||
3 | import videojs from 'video.js' | |
4 | import '../../assets/player/peertube-videojs-plugin' | |
5 | import 'videojs-dock/dist/videojs-dock.es.js' | |
6 | import { VideoDetails } from '../../../../shared' | |
7 | ||
8 | function loadVideoInfo (videoId: string, callback: (err: Error, res?: VideoDetails) => void) { | |
9 | const xhttp = new XMLHttpRequest() | |
10 | xhttp.onreadystatechange = function () { | |
11 | if (this.readyState === 4 && this.status === 200) { | |
12 | const json = JSON.parse(this.responseText) | |
13 | return callback(null, json) | |
14 | } | |
15 | } | |
16 | ||
17 | xhttp.onerror = err => callback(err.error) | |
18 | ||
19 | const url = window.location.origin + '/api/v1/videos/' + videoId | |
20 | xhttp.open('GET', url, true) | |
21 | xhttp.send() | |
22 | } | |
23 | ||
24 | const urlParts = window.location.href.split('/') | |
25 | const videoId = urlParts[urlParts.length - 1] | |
26 | ||
27 | loadVideoInfo(videoId, (err, videoInfo) => { | |
28 | if (err) { | |
29 | console.error(err) | |
30 | return | |
31 | } | |
32 | ||
33 | const videoElement = document.getElementById('video-container') as HTMLVideoElement | |
34 | const previewUrl = window.location.origin + videoInfo.previewPath | |
35 | videoElement.poster = previewUrl | |
36 | ||
37 | const videojsOptions = { | |
38 | controls: true, | |
39 | autoplay: false, | |
40 | plugins: { | |
41 | peertube: { | |
42 | videoFiles: videoInfo.files, | |
43 | playerElement: videoElement, | |
44 | autoplay: false, | |
45 | peerTubeLink: true | |
46 | } | |
47 | } | |
48 | } | |
49 | videojs('video-container', videojsOptions, function () { | |
50 | const player = this | |
51 | ||
52 | player.dock({ | |
53 | title: videoInfo.name | |
54 | }) | |
55 | }) | |
56 | }) |