1 files changed, 99 insertions, 0 deletions
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
new file mode 100644
index 000000000..5b0541df3
--- /dev/null
+++ b/client/src/standalone/videos/embed.html
@@ -0,0 +1,99 @@
+<!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;
+      }
+    </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]
+  var videoContainer = document.getElementById('video-container')
+  loadVideoInfos(videoId, function (videoInfos) {
+    var magnetUri = videoInfos.magnetUri
+    var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
+    videoContainer.poster = thumbnailUrl
+    videojs('video-container', { controls: true, autoplay: false }, function () {
+      var player = this
+      player.dock({
+        title: videoInfos.name
+      })
+      document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
+        loadVideoTorrent(magnetUri)
+        player.play()
+      }, false)
+    })
+  })
+  </script>
+  </body>
+</html>

diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html new file mode 100644 index 000000000..5b0541df3 --- /dev/null +++ b/client/src/standalone/videos/embed.html
@@ -0,0 +1,99 @@
	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]
	75	var videoContainer = document.getElementById('video-container')
	76
	77	loadVideoInfos(videoId, function (videoInfos) {
	78	var magnetUri = videoInfos.magnetUri
	79	var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
	80	videoContainer.poster = thumbnailUrl
	81
	82	videojs('video-container', { controls: true, autoplay: false }, function () {
	83	var player = this
	84
	85	player.dock({
	86	title: videoInfos.name
	87	})
	88
	89	document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
	90	loadVideoTorrent(magnetUri)
	91
	92	player.play()
	93	}, false)
	94	})
	95	})
	96
	97	</script>
	98	</body>
	99	</html>