projects / github / Chocobozzz / PeerTube.git / blame
| 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 | } | |
| 37 | </style> | |
| 38 | </head> | |
| 39 | ||
| 40 | <body> | |
| 41 | ||
| 42 | <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"> | |
| 43 | </video> | |
| 44 | ||
| 45 | ||
| 46 | <script> | |
| 47 | function loadVideoInfos (videoId, callback) { | |
| 48 | var xhttp = new XMLHttpRequest() | |
| 49 | xhttp.onreadystatechange = function () { | |
| 50 | if (this.readyState === 4 && this.status === 200) { | |
| 51 | var json = JSON.parse(this.responseText) | |
| 52 | return callback(json) | |
| 53 | } | |
| 54 | } | |
| 55 | ||
| 56 | var url = window.location.origin + '/api/v1/videos/' + videoId | |
| 57 | xhttp.open('GET', url, true) | |
| 58 | xhttp.send() | |
| 59 | } | |
| 60 | ||
| 61 | function loadVideoTorrent (magnetUri) { | |
| 62 | console.log('Loading video ' + videoId) | |
| 63 | var client = new window.WebTorrent() | |
| 64 | ||
| 65 | console.log('Adding magnet ' + magnetUri) | |
| 66 | client.add(magnetUri, function (torrent) { | |
| 67 | var file = torrent.files[0] | |
| 68 | ||
| 69 | file.renderTo('video', { autoplay: true }) | |
| 70 | }) | |
| 71 | } | |
| 72 | ||
| 73 | var urlParts = window.location.href.split('/') | |
| 74 | var videoId = urlParts[urlParts.length - 1] | |
| 3bb2c7f9 C |
75 | |
| 76 | loadVideoInfos(videoId, function (videoInfos) { | |
| 77 | var magnetUri = videoInfos.magnetUri | |
| 4fab6acb C |
78 | // FIXME: use poster? |
| 79 | // var videoContainer = document.getElementById('video-container') | |
| 80 | // var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath | |
| 81 | // videoContainer.poster = thumbnailUrl | |
| 3bb2c7f9 C |
82 | |
| 83 | videojs('video-container', { controls: true, autoplay: false }, function () { | |
| 84 | var player = this | |
| 85 | ||
| 86 | player.dock({ | |
| 87 | title: videoInfos.name | |
| 88 | }) | |
| 89 | ||
| 90 | document.querySelector('.vjs-big-play-button').addEventListener('click', function () { | |
| 91 | loadVideoTorrent(magnetUri) | |
| 92 | ||
| 93 | player.play() | |
| 94 | }, false) | |
| 95 | }) | |
| 96 | }) | |
| 97 | ||
| 98 | </script> | |
| 99 | </body> | |
| 100 | </html> |