]>
Commit | Line | Data |
---|---|---|
1 | import './embed.scss' | |
2 | ||
3 | import * as videojs from 'video.js' | |
4 | import 'videojs-hotkeys' | |
5 | import '../../assets/player/peertube-videojs-plugin' | |
6 | import 'videojs-dock/dist/videojs-dock.es.js' | |
7 | import { VideoDetails } from '../../../../shared' | |
8 | ||
9 | function getVideoUrl (id: string) { | |
10 | return window.location.origin + '/api/v1/videos/' + id | |
11 | } | |
12 | ||
13 | async function loadVideoInfo (videoId: string): Promise<VideoDetails> { | |
14 | const response = await fetch(getVideoUrl(videoId)) | |
15 | return response.json() | |
16 | } | |
17 | ||
18 | const urlParts = window.location.href.split('/') | |
19 | const videoId = urlParts[urlParts.length - 1] | |
20 | ||
21 | loadVideoInfo(videoId) | |
22 | .then(videoInfo => { | |
23 | const videoElement = document.getElementById('video-container') as HTMLVideoElement | |
24 | const previewUrl = window.location.origin + videoInfo.previewPath | |
25 | videoElement.poster = previewUrl | |
26 | ||
27 | const videojsOptions = { | |
28 | controls: true, | |
29 | autoplay: false, | |
30 | plugins: { | |
31 | peertube: { | |
32 | videoFiles: videoInfo.files, | |
33 | playerElement: videoElement, | |
34 | videoViewUrl: getVideoUrl(videoId) + '/views', | |
35 | videoDuration: videoInfo.duration | |
36 | }, | |
37 | hotkeys: { | |
38 | enableVolumeScroll: false | |
39 | } | |
40 | }, | |
41 | controlBar: { | |
42 | children: [ | |
43 | 'playToggle', | |
44 | 'currentTimeDisplay', | |
45 | 'timeDivider', | |
46 | 'durationDisplay', | |
47 | 'liveDisplay', | |
48 | ||
49 | 'flexibleWidthSpacer', | |
50 | 'progressControl', | |
51 | ||
52 | 'webTorrentButton', | |
53 | ||
54 | 'muteToggle', | |
55 | 'volumeControl', | |
56 | ||
57 | 'resolutionMenuButton', | |
58 | 'peerTubeLinkButton', | |
59 | ||
60 | 'fullscreenToggle' | |
61 | ] | |
62 | } | |
63 | } | |
64 | videojs('video-container', videojsOptions, function () { | |
65 | const player = this | |
66 | ||
67 | player.dock({ | |
68 | title: videoInfo.name, | |
69 | description: 'Uses P2P, others may know you are watching this video.' | |
70 | }) | |
71 | }) | |
72 | }) | |
73 | .catch(err => console.error(err)) |