Merge branch 'master' of https://github.com/makitsune/hifi-things

makidoll · Apr 9, 2019 · 9f28325 · 9f28325
2 parents c60ecca + cb7bb2c
commit 9f28325
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 5 deletions.
diff --git a/express-routes/video-sync/admin.html b/express-routes/video-sync/admin.html
@@ -68,15 +68,31 @@
 				background: #000;
 				border-radius: 10px;
 			}
+
+			.poster {
+				cursor: pointer;
+				border-radius: 25px;
+				width: 100%;
+			}
+
+			.poster:hover {
+				transform: scale(0.95);
+			}
 		</style>
 	</head>
 	<body>
 		<h1><b>[room_name]</b> - video sync</h1>
 		<br>
-		<video controls muted></video>
+		<video muted></video>
 
 		<br><br>
 		<div style="width: 640px;">
+			<button style="width: 50%" onclick="setInfo({playing:true})">Play</button>
+			<br><br>
+			<button style="width: 50%" onclick="setInfo({playing:false})">Pause</button>
+			<br><br>
+			<button style="width: 50%" onclick="setInfo({position:0})">Back to the start</button>
+			<br><br>
 			<h2 style=" margin-bottom: 10px;">Current URL</h2>
 			<input type="url"/>
 			<br><br>
@@ -89,11 +105,19 @@ <h2 style=" margin-bottom: 10px;">Current Volume</h2>
 		<div style="margin-top: 50px; width: 750px;">		
 			<h2>List of hosted movies</h2>
 			<br>
+			<h2>3D</h2>
+			<br>
 			<table style="width: 100%; margin: -25px; table-layout: fixed;" cellspacing="25">
 				<tr>
-					<td><button onclick="setSrc('https://maki.cat/webm/despicable-me.webm')">Despicable Me 3D</button></td>
-					<td><button onclick="setSrc('https://maki.cat/webm/avatar.webm')">Avatar 3D</button></td>
-					<td></td>
+					<td><img class="poster"
+						src="https://img.yts.am/assets/images/movies/zootopia_2016/medium-cover.jpg"
+						onclick="setSrc('https://maki.cat/webm/3d/zootopia.webm')"/></td>
+					<td><img class="poster"
+						src="https://img.yts.am/assets/images/movies/Despicable_Me_2010/medium-cover.jpg"
+						onclick="setSrc('https://maki.cat/webm/3d/despicable-me.webm')"/></td>
+					<td><img class="poster"
+						src="https://img.yts.am/assets/images/movies/Avatar_2009/medium-cover.jpg"
+						onclick="setSrc('https://maki.cat/webm/3d/avatar.webm')"/></td>
 				</tr>
 			</table>
 		</div>

diff --git a/express-routes/video-sync/player.html b/express-routes/video-sync/player.html
@@ -17,12 +17,35 @@
 				width: 100vw;
 				height: 100vh;
 			}
+
+			canvas {
+				position: fixed; margin: auto;
+				top: 0; left: 0;
+				width: 256px;
+				height: 256px;
+				image-rendering: pixelated;
+			}
+
+			h2 {
+				position: fixed; margin: auto;
+				top: 256px; left: 0;
+				image-rendering: pixelated;
+				text-shadow: 0 0 32px #000;
+				color: #fff;
+			}
 		</style>
 	</head>
 	<body>
 		<video></video>
-		<script src="socket.io.js"></script>
+		<script src="../socket.io.js"></script>
 		<script type="text/javascript">
+			var _GET = {};
+			window.location.search.substr(1).split("&").forEach(function(e, i) {
+				if (e=="") return;
+				let param = e.split("=");
+				_GET[param[0]] = param[1];
+			});
+
 			var socket = io("[namespace]");
 			var video = document.querySelector("video");
 
@@ -52,6 +75,45 @@
 				video.volume = info.volume;
 			});
 			socket.emit("getInfo");
+
+			if (_GET.dynamicLights) {
+				let canvas = document.createElement("canvas");
+				canvas.width = canvas.height = 3;
+				//document.body.appendChild(canvas);
+
+				//let debug = document.createElement("h2");
+				//document.body.appendChild(debug);
+
+				let ctx = canvas.getContext("2d");
+
+				function getColors() {
+					let colors = new Array();
+					[
+						ctx.getImageData(0,0,1,1).data,
+						ctx.getImageData(1,0,1,1).data,
+						ctx.getImageData(2,0,1,1).data,
+
+						ctx.getImageData(0,1,1,1).data,
+						ctx.getImageData(2,1,1,1).data,
+
+						ctx.getImageData(0,2,1,1).data,
+						ctx.getImageData(1,2,1,1).data,
+						ctx.getImageData(2,2,1,1).data,
+					].forEach(c=>{
+						colors = colors.concat([c[0],c[1],c[2]]);
+					});
+					//debug.textContent = colors.join(",");
+					return colors.join(",");
+				}
+
+				let renderWidth = 3;
+				if (_GET["3D"])renderWidth = 6;
+
+				if (window.qt) setInterval(()=>{
+					ctx.drawImage(video, 0, 0, renderWidth, 3);
+					EventBridge.emitWebEvent(getColors());
+				}, 1000/30);
+			}
 		</script>
 	</body>
 </html>