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