]>
Commit | Line | Data |
---|---|---|
202e7223 C |
1 | import './embed.scss' |
2 | ||
cd4d7a2c C |
3 | // For google bot that uses Chrome 41 and does not understand fetch |
4 | import 'whatwg-fetch' | |
5 | ||
63c4db6d | 6 | import * as videojs from 'video.js' |
c6352f2c | 7 | |
404b54e1 | 8 | import { VideoDetails } from '../../../../shared' |
c6352f2c | 9 | import { getVideojsOptions } from '../../assets/player/peertube-player' |
202e7223 | 10 | |
8cac1b64 | 11 | function getVideoUrl (id: string) { |
7b0956ec | 12 | return window.location.origin + '/api/v1/videos/' + id |
8cac1b64 C |
13 | } |
14 | ||
d4f3fea6 C |
15 | function loadVideoInfo (videoId: string): Promise<Response> { |
16 | return fetch(getVideoUrl(videoId)) | |
17 | } | |
18 | ||
19 | function removeElement (element: HTMLElement) { | |
20 | element.parentElement.removeChild(element) | |
21 | } | |
22 | ||
23 | function displayError (videoElement: HTMLVideoElement, text: string) { | |
24 | // Remove video element | |
25 | removeElement(videoElement) | |
26 | ||
27 | document.title = 'Sorry - ' + text | |
28 | ||
29 | const errorBlock = document.getElementById('error-block') | |
30 | errorBlock.style.display = 'flex' | |
31 | ||
32 | const errorText = document.getElementById('error-content') | |
33 | errorText.innerHTML = text | |
34 | } | |
35 | ||
36 | function videoNotFound (videoElement: HTMLVideoElement) { | |
37 | const text = 'This video does not exist.' | |
38 | displayError(videoElement, text) | |
39 | } | |
40 | ||
41 | function videoFetchError (videoElement: HTMLVideoElement) { | |
42 | const text = 'We cannot fetch the video. Please try again later.' | |
43 | displayError(videoElement, text) | |
202e7223 C |
44 | } |
45 | ||
202e7223 C |
46 | const urlParts = window.location.href.split('/') |
47 | const videoId = urlParts[urlParts.length - 1] | |
48 | ||
f2f1118f | 49 | loadVideoInfo(videoId) |
d4f3fea6 | 50 | .then(async response => { |
c6352f2c | 51 | const videoContainerId = 'video-container' |
c6352f2c | 52 | const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement |
d4f3fea6 C |
53 | |
54 | if (!response.ok) { | |
55 | if (response.status === 404) return videoNotFound(videoElement) | |
56 | ||
57 | return videoFetchError(videoElement) | |
58 | } | |
59 | ||
60 | const videoInfo: VideoDetails = await response.json() | |
61 | ||
da99ccf2 | 62 | let autoplay = false |
f37bad63 | 63 | let startTime = 0 |
da99ccf2 C |
64 | |
65 | try { | |
66 | let params = new URL(window.location.toString()).searchParams | |
67 | autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true') | |
f37bad63 C |
68 | |
69 | const startTimeParamString = params.get('start') | |
70 | const startTimeParamNumber = parseInt(startTimeParamString, 10) | |
71 | if (isNaN(startTimeParamNumber) === false) startTime = startTimeParamNumber | |
da99ccf2 C |
72 | } catch (err) { |
73 | console.error('Cannot get params from URL.', err) | |
74 | } | |
75 | ||
c6352f2c | 76 | const videojsOptions = getVideojsOptions({ |
da99ccf2 | 77 | autoplay, |
c6352f2c C |
78 | inactivityTimeout: 1500, |
79 | videoViewUrl: getVideoUrl(videoId) + '/views', | |
80 | playerElement: videoElement, | |
81 | videoFiles: videoInfo.files, | |
82 | videoDuration: videoInfo.duration, | |
83 | enableHotkeys: true, | |
33d78552 | 84 | peertubeLink: true, |
f37bad63 C |
85 | poster: window.location.origin + videoInfo.previewPath, |
86 | startTime | |
c6352f2c C |
87 | }) |
88 | videojs(videoContainerId, videojsOptions, function () { | |
f2f1118f | 89 | const player = this |
202e7223 | 90 | |
f2f1118f | 91 | player.dock({ |
22b59e80 | 92 | title: videoInfo.name, |
606ca5bc | 93 | description: 'Uses P2P, others may know you are watching this video.' |
f2f1118f | 94 | }) |
202e7223 | 95 | }) |
202e7223 | 96 | }) |
a16aee73 | 97 | .catch(err => console.error(err)) |