]>
Commit | Line | Data |
---|---|---|
3bb2c7f9 C |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
4 | <title>PeerTube</title> | |
5 | ||
6 | <meta charset="UTF-8"> | |
7 | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
8 | ||
9 | <link rel="icon" type="image/png" href="/client/assets/favicon.png" /> | |
10 | ||
11 | <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css"> | |
12 | <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css"> | |
13 | ||
14 | <script src="/client/assets/webtorrent/webtorrent.min.js"></script> | |
15 | <script src="/client/assets/video-js/video.min.js"></script> | |
16 | <script src="/client/assets/video-js/videojs-dock.min.js"></script> | |
17 | ||
18 | <style> | |
19 | video { | |
20 | width: 99%; | |
21 | } | |
22 | ||
23 | /* fill the entire space */ | |
24 | html, body { | |
25 | height: 100%; | |
26 | margin: 0; | |
27 | } | |
28 | ||
29 | .video-js { | |
30 | width: 100%; | |
31 | height: 100%; | |
32 | } | |
33 | ||
34 | .vjs-poster { | |
35 | background-size: 100% auto; | |
36 | } | |
ad4013d5 C |
37 | |
38 | .vjs-peertube-link { | |
39 | color: white; | |
40 | text-decoration: none; | |
41 | font-size: 1.3em; | |
42 | line-height: 2.20; | |
43 | transition: all .4s; | |
44 | } | |
45 | ||
46 | .vjs-peertube-link:hover { | |
47 | text-shadow: 0 0 1em #fff; | |
48 | } | |
49 | ||
3bb2c7f9 C |
50 | </style> |
51 | </head> | |
52 | ||
53 | <body> | |
54 | ||
55 | <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"> | |
56 | </video> | |
57 | ||
58 | ||
59 | <script> | |
60 | function loadVideoInfos (videoId, callback) { | |
61 | var xhttp = new XMLHttpRequest() | |
62 | xhttp.onreadystatechange = function () { | |
63 | if (this.readyState === 4 && this.status === 200) { | |
64 | var json = JSON.parse(this.responseText) | |
65 | return callback(json) | |
66 | } | |
67 | } | |
68 | ||
69 | var url = window.location.origin + '/api/v1/videos/' + videoId | |
70 | xhttp.open('GET', url, true) | |
71 | xhttp.send() | |
72 | } | |
73 | ||
78d5b189 | 74 | function loadVideoTorrent (magnetUri, player) { |
3bb2c7f9 C |
75 | console.log('Loading video ' + videoId) |
76 | var client = new window.WebTorrent() | |
77 | ||
78 | console.log('Adding magnet ' + magnetUri) | |
79 | client.add(magnetUri, function (torrent) { | |
80 | var file = torrent.files[0] | |
81 | ||
78d5b189 BF |
82 | file.renderTo('video', function (err) { |
83 | if (err) { | |
84 | console.error(err) | |
85 | return | |
86 | } | |
87 | ||
88 | // Hack to "simulate" src link in video.js >= 6 | |
89 | // If no, we can't play the video after pausing it | |
90 | // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633 | |
91 | player.src = function () { return true } | |
92 | ||
93 | player.play() | |
94 | }) | |
3bb2c7f9 C |
95 | }) |
96 | } | |
97 | ||
98 | var urlParts = window.location.href.split('/') | |
99 | var videoId = urlParts[urlParts.length - 1] | |
3bb2c7f9 C |
100 | |
101 | loadVideoInfos(videoId, function (videoInfos) { | |
102 | var magnetUri = videoInfos.magnetUri | |
43f61d26 | 103 | var videoContainer = document.getElementById('video-container') |
d063f8ca | 104 | var previewUrl = window.location.origin + videoInfos.previewPath |
43f61d26 | 105 | videoContainer.poster = previewUrl |
3bb2c7f9 C |
106 | |
107 | videojs('video-container', { controls: true, autoplay: false }, function () { | |
108 | var player = this | |
109 | ||
ad4013d5 C |
110 | var Button = videojs.getComponent('Button') |
111 | var peertubeLinkButton = videojs.extend(Button, { | |
112 | constructor: function () { | |
113 | Button.apply(this, arguments) | |
114 | }, | |
115 | ||
116 | createEl: function () { | |
117 | var link = document.createElement('a') | |
118 | link.href = window.location.href.replace('embed', 'watch') | |
119 | link.innerHTML = 'PeerTube' | |
120 | link.title = 'Go to the video page' | |
121 | link.className = 'vjs-peertube-link' | |
ea070c93 | 122 | link.target = '_blank' |
ad4013d5 C |
123 | |
124 | return link | |
ea070c93 C |
125 | }, |
126 | ||
127 | handleClick: function () { | |
128 | player.pause() | |
ad4013d5 C |
129 | } |
130 | }) | |
131 | videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton) | |
132 | ||
133 | var controlBar = player.getChild('controlBar') | |
134 | var addedLink = controlBar.addChild('PeerTubeLinkButton', {}) | |
135 | controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el()) | |
136 | ||
3bb2c7f9 C |
137 | player.dock({ |
138 | title: videoInfos.name | |
139 | }) | |
140 | ||
141 | document.querySelector('.vjs-big-play-button').addEventListener('click', function () { | |
78d5b189 | 142 | loadVideoTorrent(magnetUri, player) |
3bb2c7f9 C |
143 | }, false) |
144 | }) | |
145 | }) | |
146 | ||
147 | </script> | |
148 | </body> | |
78d5b189 | 149 | </html |