From 7aed274e63bbe8779782119b2b628db25a1c70a0 Mon Sep 17 00:00:00 2001
From: Marvin Scholz <epirat07@gmail.com>
Date: Sat, 13 May 2017 02:04:43 +0200
Subject: [PATCH] Video support and CSS improvements

Fix #1
---
 socialdragon/templates/index.html | 123 +++++++++++++++++++-----------
 1 file changed, 78 insertions(+), 45 deletions(-)

diff --git a/socialdragon/templates/index.html b/socialdragon/templates/index.html
index 9efb9e7..ad8575d 100755
--- a/socialdragon/templates/index.html
+++ b/socialdragon/templates/index.html
@@ -13,13 +13,11 @@
 		    font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 			color: #FFF;
 			text-transform: uppercase;
-
-		    background: url('/static/img/bg.gif') 50% 0 no-repeat fixed;
-		    -webkit-background-size: cover;
-		    -moz-background-size: cover;
-		    -o-background-size: cover;
-		    background-size: cover;
-
+		    background: url('/static/img/hirsch_big.png') 50% 0 no-repeat fixed;
+			background-color: #000;
+		    background-size: 20% auto;
+			background-position: 1em center;
+			cursor: none;
 		}
 		#left {
 			/*min-width:40%;*/
@@ -41,10 +39,22 @@
 		#image {
 		    vertical-align: middle;
 		    margin-top: 0;
-		    max-width: 100%;
+		    width: 100%;
 		    overflow: hidden;
 		    height: 100%;
 		}
+		#snapwall_image {
+			object-fit: contain;
+			object-position: 50% 50%;
+			height: 100vh;
+			width: 100vw;
+		}
+		#snapwall_video {
+			object-fit: contain;
+			object-position: 50% 50%;
+			height: 100vh;
+			width: 100vw;
+		}
 		h1 {
 			font-size: 60px;
 		}
@@ -60,12 +70,14 @@
 <div id="left">
 	<div id="image">
 		<center>
-			<img style="max-height: 100%; background: green; display: inline-block; vertical-align: middle;" id="snapwall_image" src="" alt="" />
+			<video id="snapwall_video" src="" style="display: none;" autoplay loop muted></video>
+			<img id="snapwall_image" src="" alt="" />
 		</center>
 	</div>
 </div>
 <div id="right">
 	<div id="infos">
+		<!--
 		<center><h1>HTL Ball 2017</h1></center>
 		<br /><br />
 		<div id="infotext">
@@ -74,12 +86,14 @@
 		<div id="othertext">
 			Lorem ipsum dolor sit...<br />
 		</div>
+	 	-->
 	</div>
 </div>
 <div style="clear:both"></div>
 
 <script type="text/javascript">
 var queue = [];
+var archive = [];
 
 var exampleSocket = new WebSocket("ws://Marvins-MacBook-Pro.local:8000/ws");
 exampleSocket.onopen = function (event) {
@@ -90,6 +104,10 @@ exampleSocket.onmessage = function (event) {
     IT = JSON.parse(event.data);
 	if (IT["State"] === 1) {
 		queue.push(IT);
+		archive.push(IT);
+		if (archive.length > 5) {
+			archive.shift();
+		}
 	}
 	console.log(event.data);
 }
@@ -97,53 +115,68 @@ exampleSocket.onmessage = function (event) {
 function displayNewSnap() {
 	var item = queue.shift();
 	if (item) {
-		document.getElementById("snapwall_image").src = item["Path"];
+		setDisplayItem(item);
+		return true;
 	}
+	return false;
+}
+
+function displayArchiveSnap() {
+	var item = archive.shift();
+	if (item) {
+		setDisplayItem(item);
+	}
+	archive.push(item);
 }
 
 setInterval(function() {
-	displayNewSnap();
+	var is_new = displayNewSnap();
+	/* FIXME */
+	if (!is_new) {
+		console.log("No new snaps, displaying archive snap");
+		displayArchiveSnap();
+	}
 }, 7000); // 7 seconds
 
-/* TODO: Load initial approved images to be able to show
+/* Load initial approved images to be able to show
  * something, even when reloading
-*/
-
-</script>
-
-<script type="text/javascript">
-/*
-	var currentImage;
-
-	function HTTPGetRequest() {
-		if (!window.XMLHttpRequest) {
-			return;
-		}
-		xmlhttp = new XMLHttpRequest();
-		xmlhttp.onreadystatechange = function() {
-			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-				var parts = xmlhttp.responseText.split(" ");
-		    	if(parts[0] == "l") { // landscape pic
-		    		document.getElementById("image").style.marginTop = '-140px';
-		    		document.getElementById("left").style.paddingLeft = '1%';
-		    		document.getElementById("left").style.minWidth = '52%';
-		    	} else if(parts[0] == "p") { // portrait pic
-		    		document.getElementById("image").style.marginTop = '0px';
-		    	}
-		    	if(parts[1] != currentImage) { // if new image different from current image
-		    		document.getElementById("snapwall_image").src = parts[1];
-		    		currentImage = xmlhttp.responseText;
-		    	}
+ */
+function loadInitialSnaplist() {
+	if (!window.XMLHttpRequest) {
+		return;
+	}
+	xmlhttp = new XMLHttpRequest();
+	xmlhttp.onreadystatechange = function() {
+		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+			ITs = JSON.parse(xmlhttp.responseText);
+			for (var item in ITs) {
+				if (ITs.hasOwnProperty(item)) {
+					queue.push(ITs[item]);
+					archive.push(ITs[item]);
+				}
 			}
 		}
-		xmlhttp.open("GET","image.txt",true);
-		xmlhttp.send();
 	}
+	xmlhttp.open("GET","listSnaps",true);
+	xmlhttp.send();
+}
 
-	setInterval(function() {
-	    HTTPGetRequest();
-	}, 7000); // 7 seconds
-*/
+function setDisplayItem(item) {
+	var v_el = document.getElementById("snapwall_video");
+	var i_el = document.getElementById("snapwall_image");
+	if (item["IsVideo"]) {
+		v_el.src = item["Path"];
+		v_el.style.display = "block";
+		i_el.style.display = "none";
+	} else {
+		i_el.src = item["Path"];
+		i_el.style.display = "block";
+		v_el.style.display = "none";
+		v_el.src = ""
+	}
+}
+
+loadInitialSnaplist();
 </script>
 
 </body>