2016-11-07 22:35:37 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>PeerTube</title>
|
|
|
|
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
|
|
<link rel="icon" type="image/png" href="/client/assets/favicon.png" />
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
|
|
|
|
|
<link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
|
|
|
|
|
|
|
|
|
|
<script src="/client/assets/webtorrent/webtorrent.min.js"></script>
|
|
|
|
|
<script src="/client/assets/video-js/video.min.js"></script>
|
|
|
|
|
<script src="/client/assets/video-js/videojs-dock.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
video {
|
|
|
|
|
width: 99%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* fill the entire space */
|
|
|
|
|
html, body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-js {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vjs-poster {
|
|
|
|
|
background-size: 100% auto;
|
|
|
|
|
}
|
2016-11-09 23:03:17 +01:00
|
|
|
|
|
|
|
|
.vjs-peertube-link {
|
|
|
|
|
color: white;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-size: 1.3em;
|
|
|
|
|
line-height: 2.20;
|
|
|
|
|
transition: all .4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vjs-peertube-link:hover {
|
|
|
|
|
text-shadow: 0 0 1em #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-07 22:35:37 +01:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function loadVideoInfos (videoId, callback) {
|
|
|
|
|
var xhttp = new XMLHttpRequest()
|
|
|
|
|
xhttp.onreadystatechange = function () {
|
|
|
|
|
if (this.readyState === 4 && this.status === 200) {
|
|
|
|
|
var json = JSON.parse(this.responseText)
|
|
|
|
|
return callback(json)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var url = window.location.origin + '/api/v1/videos/' + videoId
|
|
|
|
|
xhttp.open('GET', url, true)
|
|
|
|
|
xhttp.send()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadVideoTorrent (magnetUri) {
|
|
|
|
|
console.log('Loading video ' + videoId)
|
|
|
|
|
var client = new window.WebTorrent()
|
|
|
|
|
|
|
|
|
|
console.log('Adding magnet ' + magnetUri)
|
|
|
|
|
client.add(magnetUri, function (torrent) {
|
|
|
|
|
var file = torrent.files[0]
|
|
|
|
|
|
|
|
|
|
file.renderTo('video', { autoplay: true })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var urlParts = window.location.href.split('/')
|
|
|
|
|
var videoId = urlParts[urlParts.length - 1]
|
|
|
|
|
|
|
|
|
|
loadVideoInfos(videoId, function (videoInfos) {
|
|
|
|
|
var magnetUri = videoInfos.magnetUri
|
2016-11-08 21:19:57 +01:00
|
|
|
// FIXME: use poster?
|
|
|
|
|
// var videoContainer = document.getElementById('video-container')
|
|
|
|
|
// var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
|
|
|
|
|
// videoContainer.poster = thumbnailUrl
|
2016-11-07 22:35:37 +01:00
|
|
|
|
|
|
|
|
videojs('video-container', { controls: true, autoplay: false }, function () {
|
|
|
|
|
var player = this
|
|
|
|
|
|
2016-11-09 23:03:17 +01:00
|
|
|
var Button = videojs.getComponent('Button')
|
|
|
|
|
var peertubeLinkButton = videojs.extend(Button, {
|
|
|
|
|
constructor: function () {
|
|
|
|
|
Button.apply(this, arguments)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
createEl: function () {
|
|
|
|
|
var link = document.createElement('a')
|
|
|
|
|
link.href = window.location.href.replace('embed', 'watch')
|
|
|
|
|
link.innerHTML = 'PeerTube'
|
|
|
|
|
link.title = 'Go to the video page'
|
|
|
|
|
link.className = 'vjs-peertube-link'
|
|
|
|
|
|
|
|
|
|
return link
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
|
|
|
|
|
|
|
|
|
|
var controlBar = player.getChild('controlBar')
|
|
|
|
|
var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
|
|
|
|
|
controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
|
|
|
|
|
|
2016-11-07 22:35:37 +01:00
|
|
|
player.dock({
|
|
|
|
|
title: videoInfos.name
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
|
|
|
|
|
loadVideoTorrent(magnetUri)
|
|
|
|
|
|
|
|
|
|
player.play()
|
|
|
|
|
}, false)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
