Prepare embed page

author: Chocobozzz <florian.bigard@gmail.com> 2016-11-07 22:35:37 +0100
committer: Chocobozzz <florian.bigard@gmail.com> 2016-11-07 22:35:37 +0100
commit: 3bb2c7f99dd495adac8e486e98f135c183642381 (patch)
tree: 9e5d72adc1cc667c96e1c955dfe2048b3d6e2eeb /client/src
parent: 81ca2cd3f4f4ff2808fce512b38d735c9f550218 (diff)
download: PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.tar.gz
PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.tar.zst
PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.zip
2 files changed, 102 insertions, 0 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index e705fa555..1d5fd45ee 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -62,6 +62,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  }
  loadVideo() {
+    console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
    // Reset the error
    this.error = false;
    // We are loading the video
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>
author	Chocobozzz <florian.bigard@gmail.com>	2016-11-07 22:35:37 +0100
committer	Chocobozzz <florian.bigard@gmail.com>	2016-11-07 22:35:37 +0100
commit	3bb2c7f99dd495adac8e486e98f135c183642381 (patch)
tree	9e5d72adc1cc667c96e1c955dfe2048b3d6e2eeb /client/src
parent	81ca2cd3f4f4ff2808fce512b38d735c9f550218 (diff)
download	PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.tar.gz PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.tar.zst PeerTube-3bb2c7f99dd495adac8e486e98f135c183642381.zip

diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts index e705fa555..1d5fd45ee 100644 --- a/client/src/app/videos/video-watch/video-watch.component.ts +++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -62,6 +62,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
62	}	62	}
63		63
64	loadVideo() {	64	loadVideo() {
		65
		66	console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
		67
65	// Reset the error	68	// Reset the error
66	this.error = false;	69	this.error = false;
67	// We are loading the video	70	// We are loading the video


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>