diff options
Diffstat (limited to 'client/src/standalone/videos/embed.html')
-rw-r--r-- | client/src/standalone/videos/embed.html | 135 |
1 files changed, 2 insertions, 133 deletions
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html index f72080937..627acb5af 100644 --- a/client/src/standalone/videos/embed.html +++ b/client/src/standalone/videos/embed.html | |||
@@ -7,143 +7,12 @@ | |||
7 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 7 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
8 | 8 | ||
9 | <link rel="icon" type="image/png" href="/client/assets/favicon.png" /> | 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 | } | ||
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 | |||
50 | </style> | ||
51 | </head> | 10 | </head> |
52 | 11 | ||
53 | <body> | 12 | <body> |
54 | 13 | ||
55 | <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"> | 14 | <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered"> |
56 | </video> | 15 | </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, player) { | ||
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', 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 | }) | ||
95 | }) | ||
96 | } | ||
97 | |||
98 | var urlParts = window.location.href.split('/') | ||
99 | var videoId = urlParts[urlParts.length - 1] | ||
100 | |||
101 | loadVideoInfos(videoId, function (videoInfos) { | ||
102 | var magnetUri = videoInfos.magnetUri | ||
103 | var videoContainer = document.getElementById('video-container') | ||
104 | var previewUrl = window.location.origin + videoInfos.previewPath | ||
105 | videoContainer.poster = previewUrl | ||
106 | |||
107 | videojs('video-container', { controls: true, autoplay: false }, function () { | ||
108 | var player = this | ||
109 | |||
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' | ||
122 | link.target = '_blank' | ||
123 | |||
124 | return link | ||
125 | }, | ||
126 | |||
127 | handleClick: function () { | ||
128 | player.pause() | ||
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 | |||
137 | player.dock({ | ||
138 | title: videoInfos.name | ||
139 | }) | ||
140 | |||
141 | document.querySelector('.vjs-big-play-button').addEventListener('click', function () { | ||
142 | loadVideoTorrent(magnetUri, player) | ||
143 | }, false) | ||
144 | }) | ||
145 | }) | ||
146 | 16 | ||
147 | </script> | ||
148 | </body> | 17 | </body> |
149 | </html | 18 | </html |