]>
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 | ||
74 | function loadVideoTorrent (magnetUri) { | |
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 | ||
82 | file.renderTo('video', { autoplay: true }) | |
83 | }) | |
84 | } | |
85 | ||
86 | var urlParts = window.location.href.split('/') | |
87 | var videoId = urlParts[urlParts.length - 1] | |
3bb2c7f9 C |
88 | |
89 | loadVideoInfos(videoId, function (videoInfos) { | |
90 | var magnetUri = videoInfos.magnetUri | |
4fab6acb C |
91 | // FIXME: use poster? |
92 | // var videoContainer = document.getElementById('video-container') | |
93 | // var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath | |
94 | // videoContainer.poster = thumbnailUrl | |
3bb2c7f9 C |
95 | |
96 | videojs('video-container', { controls: true, autoplay: false }, function () { | |
97 | var player = this | |
98 | ||
ad4013d5 C |
99 | var Button = videojs.getComponent('Button') |
100 | var peertubeLinkButton = videojs.extend(Button, { | |
101 | constructor: function () { | |
102 | Button.apply(this, arguments) | |
103 | }, | |
104 | ||
105 | createEl: function () { | |
106 | var link = document.createElement('a') | |
107 | link.href = window.location.href.replace('embed', 'watch') | |
108 | link.innerHTML = 'PeerTube' | |
109 | link.title = 'Go to the video page' | |
110 | link.className = 'vjs-peertube-link' | |
ea070c93 | 111 | link.target = '_blank' |
ad4013d5 C |
112 | |
113 | return link | |
ea070c93 C |
114 | }, |
115 | ||
116 | handleClick: function () { | |
117 | player.pause() | |
ad4013d5 C |
118 | } |
119 | }) | |
120 | videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton) | |
121 | ||
122 | var controlBar = player.getChild('controlBar') | |
123 | var addedLink = controlBar.addChild('PeerTubeLinkButton', {}) | |
124 | controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el()) | |
125 | ||
3bb2c7f9 C |
126 | player.dock({ |
127 | title: videoInfos.name | |
128 | }) | |
129 | ||
130 | document.querySelector('.vjs-big-play-button').addEventListener('click', function () { | |
131 | loadVideoTorrent(magnetUri) | |
132 | ||
133 | player.play() | |
134 | }, false) | |
135 | }) | |
136 | }) | |
137 | ||
138 | </script> | |
139 | </body> | |
140 | </html> |