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