diff options
Diffstat (limited to 'client/src/standalone/videos/embed.ts')
-rw-r--r-- | client/src/standalone/videos/embed.ts | 91 |
1 files changed, 20 insertions, 71 deletions
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 0698344b0..f2f339bcc 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts | |||
@@ -1,14 +1,11 @@ | |||
1 | import './embed.scss' | 1 | import './embed.scss' |
2 | 2 | ||
3 | import videojs from 'video.js' | 3 | import videojs from 'video.js' |
4 | import '../../assets/player/peertube-videojs-plugin' | ||
4 | import 'videojs-dock/dist/videojs-dock.es.js' | 5 | import 'videojs-dock/dist/videojs-dock.es.js' |
5 | import * as WebTorrent from 'webtorrent' | ||
6 | import { Video } from '../../../../shared' | 6 | import { Video } from '../../../../shared' |
7 | 7 | ||
8 | // videojs typings don't have some method we need | 8 | function loadVideoInfo (videoId: string, callback: (err: Error, res?: Video) => void) { |
9 | const videojsUntyped = videojs as any | ||
10 | |||
11 | function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) { | ||
12 | const xhttp = new XMLHttpRequest() | 9 | const xhttp = new XMLHttpRequest() |
13 | xhttp.onreadystatechange = function () { | 10 | xhttp.onreadystatechange = function () { |
14 | if (this.readyState === 4 && this.status === 200) { | 11 | if (this.readyState === 4 && this.status === 200) { |
@@ -24,84 +21,36 @@ function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => | |||
24 | xhttp.send() | 21 | xhttp.send() |
25 | } | 22 | } |
26 | 23 | ||
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('/') | 24 | const urlParts = window.location.href.split('/') |
52 | const videoId = urlParts[urlParts.length - 1] | 25 | const videoId = urlParts[urlParts.length - 1] |
53 | 26 | ||
54 | loadVideoInfos(videoId, (err, videoInfos) => { | 27 | loadVideoInfo(videoId, (err, videoInfo) => { |
55 | if (err) { | 28 | if (err) { |
56 | console.error(err) | 29 | console.error(err) |
57 | return | 30 | return |
58 | } | 31 | } |
59 | 32 | ||
60 | let magnetUri = '' | 33 | const videoElement = document.getElementById('video-container') as HTMLVideoElement |
61 | if (videoInfos.files !== undefined && videoInfos.files.length !== 0) { | 34 | const previewUrl = window.location.origin + videoInfo.previewPath |
62 | magnetUri = videoInfos.files[0].magnetUri | 35 | videoElement.poster = previewUrl |
36 | |||
37 | const videojsOptions = { | ||
38 | controls: true, | ||
39 | autoplay: false, | ||
40 | plugins: { | ||
41 | peertube: { | ||
42 | videoFiles: videoInfo.files, | ||
43 | playerElement: videoElement, | ||
44 | autoplay: false, | ||
45 | peerTubeLink: true | ||
46 | } | ||
47 | } | ||
63 | } | 48 | } |
64 | 49 | videojs('video-container', videojsOptions, function () { | |
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 | 50 | const player = this |
71 | 51 | ||
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({ | 52 | player.dock({ |
100 | title: videoInfos.name | 53 | title: videoInfo.name |
101 | }) | 54 | }) |
102 | |||
103 | document.querySelector('.vjs-big-play-button').addEventListener('click', () => { | ||
104 | loadVideoTorrent(magnetUri, player) | ||
105 | }, false) | ||
106 | }) | 55 | }) |
107 | }) | 56 | }) |