]>
Commit | Line | Data |
---|---|---|
202e7223 C |
1 | import './embed.scss' |
2 | ||
3 | import videojs from 'video.js' | |
4 | import 'videojs-dock/dist/videojs-dock.es.js' | |
5 | import * as WebTorrent from 'webtorrent' | |
6 | import { Video } from '../../../../shared' | |
7 | ||
8 | // videojs typings don't have some method we need | |
9 | const videojsUntyped = videojs as any | |
10 | ||
11 | function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) { | |
12 | const xhttp = new XMLHttpRequest() | |
13 | xhttp.onreadystatechange = function () { | |
14 | if (this.readyState === 4 && this.status === 200) { | |
15 | const json = JSON.parse(this.responseText) | |
16 | return callback(null, json) | |
17 | } | |
18 | } | |
19 | ||
20 | xhttp.onerror = err => callback(err.error) | |
21 | ||
22 | const url = window.location.origin + '/api/v1/videos/' + videoId | |
23 | xhttp.open('GET', url, true) | |
24 | xhttp.send() | |
25 | } | |
26 | ||
27 | function loadVideoTorrent (magnetUri: string, player: videojs.Player) { | |
28 | console.log('Loading video ' + videoId) | |
29 | const client = new WebTorrent() | |
30 | ||
31 | console.log('Adding magnet ' + magnetUri) | |
32 | client.add(magnetUri, torrent => { | |
33 | const file = torrent.files[0] | |
34 | ||
35 | file.renderTo('video', err => { | |
36 | if (err) { | |
37 | console.error(err) | |
38 | return | |
39 | } | |
40 | ||
41 | // Hack to "simulate" src link in video.js >= 6 | |
42 | // If no, we can't play the video after pausing it | |
43 | // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633 | |
44 | (player as any).src = () => true | |
45 | ||
46 | player.play() | |
47 | }) | |
48 | }) | |
49 | } | |
50 | ||
51 | const urlParts = window.location.href.split('/') | |
52 | const videoId = urlParts[urlParts.length - 1] | |
53 | ||
54 | loadVideoInfos(videoId, (err, videoInfos) => { | |
55 | if (err) { | |
56 | console.error(err) | |
57 | return | |
58 | } | |
59 | ||
93e1258c C |
60 | let magnetUri = '' |
61 | if (videoInfos.files !== undefined && videoInfos.files.length !== 0) { | |
62 | magnetUri = videoInfos.files[0].magnetUri | |
63 | } | |
64 | ||
202e7223 C |
65 | const videoContainer = document.getElementById('video-container') as HTMLVideoElement |
66 | const previewUrl = window.location.origin + videoInfos.previewPath | |
67 | videoContainer.poster = previewUrl | |
68 | ||
69 | videojs('video-container', { controls: true, autoplay: false }, function () { | |
70 | const player = this | |
71 | ||
72 | const Button = videojsUntyped.getComponent('Button') | |
73 | const peertubeLinkButton = videojsUntyped.extend(Button, { | |
74 | constructor: function () { | |
75 | Button.apply(this, arguments) | |
76 | }, | |
77 | ||
78 | createEl: function () { | |
79 | const link = document.createElement('a') | |
80 | link.href = window.location.href.replace('embed', 'watch') | |
81 | link.innerHTML = 'PeerTube' | |
82 | link.title = 'Go to the video page' | |
83 | link.className = 'vjs-peertube-link' | |
84 | link.target = '_blank' | |
85 | ||
86 | return link | |
87 | }, | |
88 | ||
89 | handleClick: function () { | |
90 | player.pause() | |
91 | } | |
92 | }) | |
93 | videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton) | |
94 | ||
95 | const controlBar = player.getChild('controlBar') | |
96 | const addedLink = controlBar.addChild('PeerTubeLinkButton', {}) | |
97 | controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el()) | |
98 | ||
99 | player.dock({ | |
100 | title: videoInfos.name | |
101 | }) | |
102 | ||
103 | document.querySelector('.vjs-big-play-button').addEventListener('click', () => { | |
104 | loadVideoTorrent(magnetUri, player) | |
105 | }, false) | |
106 | }) | |
107 | }) |