]>
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 | |
8cac1b64 | 9 | function getVideoUrl (id: string) { |
7b0956ec | 10 | return window.location.origin + '/api/v1/videos/' + id |
8cac1b64 C |
11 | } |
12 | ||
a16aee73 | 13 | async function loadVideoInfo (videoId: string): Promise<VideoDetails> { |
8cac1b64 | 14 | const response = await fetch(getVideoUrl(videoId)) |
a16aee73 | 15 | return response.json() |
202e7223 C |
16 | } |
17 | ||
202e7223 C |
18 | const urlParts = window.location.href.split('/') |
19 | const videoId = urlParts[urlParts.length - 1] | |
20 | ||
f2f1118f F |
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 | ||
da99ccf2 C |
27 | let autoplay = false |
28 | ||
29 | try { | |
30 | let params = new URL(window.location.toString()).searchParams | |
31 | autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true') | |
32 | } catch (err) { | |
33 | console.error('Cannot get params from URL.', err) | |
34 | } | |
35 | ||
f2f1118f F |
36 | const videojsOptions = { |
37 | controls: true, | |
da99ccf2 | 38 | autoplay, |
60a26a55 | 39 | inactivityTimeout: 500, |
f2f1118f F |
40 | plugins: { |
41 | peertube: { | |
42 | videoFiles: videoInfo.files, | |
43 | playerElement: videoElement, | |
3bcfff7f C |
44 | videoViewUrl: getVideoUrl(videoId) + '/views', |
45 | videoDuration: videoInfo.duration | |
f2f1118f F |
46 | }, |
47 | hotkeys: { | |
48 | enableVolumeScroll: false | |
49 | } | |
3ec8dc09 C |
50 | }, |
51 | controlBar: { | |
52 | children: [ | |
53 | 'playToggle', | |
54 | 'currentTimeDisplay', | |
55 | 'timeDivider', | |
56 | 'durationDisplay', | |
57 | 'liveDisplay', | |
58 | ||
59 | 'flexibleWidthSpacer', | |
60 | 'progressControl', | |
61 | ||
62 | 'webTorrentButton', | |
63 | ||
64 | 'muteToggle', | |
65 | 'volumeControl', | |
66 | ||
67 | 'resolutionMenuButton', | |
68 | 'peerTubeLinkButton', | |
69 | ||
70 | 'fullscreenToggle' | |
71 | ] | |
234b535d | 72 | } |
aa8b6df4 | 73 | } |
f2f1118f F |
74 | videojs('video-container', videojsOptions, function () { |
75 | const player = this | |
202e7223 | 76 | |
f2f1118f | 77 | player.dock({ |
22b59e80 | 78 | title: videoInfo.name, |
606ca5bc | 79 | description: 'Uses P2P, others may know you are watching this video.' |
f2f1118f | 80 | }) |
202e7223 | 81 | }) |
202e7223 | 82 | }) |
a16aee73 | 83 | .catch(err => console.error(err)) |