zenermerps/SocialDragon
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Video support and CSS improvements

Browse source 
Fix #1
This commit is contained in:
Marvin Scholz 2017-05-13 02:04:43 +02:00
parent bcbb789cdd
commit 7aed274e63
1 changed files with 78 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
socialdragon/templates/index.html
View file

@ -13,13 +13,11 @@
font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF; color: #FFF;
text-transform: uppercase; text-transform: uppercase;
background: url('/static/img/hirsch_big.png') 50% 0 no-repeat fixed;
background: url('/static/img/bg.gif') 50% 0 no-repeat fixed; background-color: #000;
-webkit-background-size: cover; background-size: 20% auto;
-moz-background-size: cover; background-position: 1em center;
-o-background-size: cover; cursor: none;
background-size: cover;
} }
#left { #left {
/*min-width:40%;*/ /*min-width:40%;*/
@ -41,10 +39,22 @@
#image { #image {
vertical-align: middle; vertical-align: middle;
margin-top: 0; margin-top: 0;
max-width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 100%; 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 { h1 {
font-size: 60px; font-size: 60px;
} }
@ -60,12 +70,14 @@
<div id="left"> <div id="left">
<div id="image"> <div id="image">
<center> <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> </center>
</div> </div>
</div> </div>
<div id="right"> <div id="right">
<div id="infos"> <div id="infos">
<!--
<center><h1>HTL Ball 2017</h1></center> <center><h1>HTL Ball 2017</h1></center>
<br /><br /> <br /><br />
<div id="infotext"> <div id="infotext">
@ -74,12 +86,14 @@
<div id="othertext"> <div id="othertext">
Lorem ipsum dolor sit...<br /> Lorem ipsum dolor sit...<br />
</div> </div>
-->
</div> </div>
</div> </div>
<div style="clear:both"></div> <div style="clear:both"></div>
<script type="text/javascript"> <script type="text/javascript">
var queue = []; var queue = [];
var archive = [];
var exampleSocket = new WebSocket("ws://Marvins-MacBook-Pro.local:8000/ws"); var exampleSocket = new WebSocket("ws://Marvins-MacBook-Pro.local:8000/ws");
exampleSocket.onopen = function (event) { exampleSocket.onopen = function (event) {
@ -90,6 +104,10 @@ exampleSocket.onmessage = function (event) {
IT = JSON.parse(event.data); IT = JSON.parse(event.data);
if (IT["State"] === 1) { if (IT["State"] === 1) {
queue.push(IT); queue.push(IT);
archive.push(IT);
if (archive.length > 5) {
archive.shift();
}
} }
console.log(event.data); console.log(event.data);
} }
@ -97,53 +115,68 @@ exampleSocket.onmessage = function (event) {
function displayNewSnap() { function displayNewSnap() {
var item = queue.shift(); var item = queue.shift();
if (item) { 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() { setInterval(function() {
displayNewSnap(); var is_new = displayNewSnap();
/* FIXME */
if (!is_new) {
console.log("No new snaps, displaying archive snap");
displayArchiveSnap();
}
}, 7000); // 7 seconds }, 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 * something, even when reloading
*/ */
function loadInitialSnaplist() {
</script> if (!window.XMLHttpRequest) {
return;
<script type="text/javascript"> }
/* xmlhttp = new XMLHttpRequest();
var currentImage; xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
function HTTPGetRequest() { ITs = JSON.parse(xmlhttp.responseText);
if (!window.XMLHttpRequest) { for (var item in ITs) {
return; if (ITs.hasOwnProperty(item)) {
} queue.push(ITs[item]);
xmlhttp = new XMLHttpRequest(); archive.push(ITs[item]);
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;
}
} }
} }
xmlhttp.open("GET","image.txt",true);
xmlhttp.send();
} }
xmlhttp.open("GET","listSnaps",true);
xmlhttp.send();
}
setInterval(function() { function setDisplayItem(item) {
HTTPGetRequest(); var v_el = document.getElementById("snapwall_video");
}, 7000); // 7 seconds 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> </script>
</body> </body>