From 6f30b14ca5bf47f28ed159f24c3a6a1caa4db71c Mon Sep 17 00:00:00 2001 From: kasperrt Date: Sun, 28 Dec 2014 12:57:36 +0100 Subject: [PATCH] added an overlay to when the playlist is empty --- index.php | 1 + js/list.js | 150 ++++++++++++++++++++++++----------------------- js/youtube.js | 52 ++++++++-------- php/change.php | 10 ++++ static/style.css | 3 + 5 files changed, 119 insertions(+), 97 deletions(-) diff --git a/index.php b/index.php index 14bfb7bb..c68429ef 100755 --- a/index.php +++ b/index.php @@ -34,6 +34,7 @@
+
Empty Playlist
diff --git a/js/list.js b/js/list.js index ca9efcf9..20dbffc9 100755 --- a/js/list.js +++ b/js/list.js @@ -14,86 +14,88 @@ function updateList() url: "php/change.php", async: false }).responseText; - list = $.parseJSON(list); - conf = list["conf"]; - if(conf.hasOwnProperty("addsongs") && conf["addsongs"] == "true") adminadd = 1; - else adminadd = 0; - if(conf.hasOwnProperty("allvideos") && conf["allvideos"] == "true") music = 1; - else music = 0; - if(conf.hasOwnProperty("longsongs") && conf["longsongs"] == "true") longS = 1; - else longS = 0; - if(conf.hasOwnProperty("vote") && conf["vote"] == "true") adminvote = 1; - else adminvote = 0; - if(conf.hasOwnProperty("adminpass") && conf["adminpass"] != "") hasadmin = 1; - else hasadmin = 0; - /*list[0].shift(); - list[3].shift(); - list[2].shift();*/ + if(list != "empty"){ + list = $.parseJSON(list); + conf = list["conf"]; + if(conf.hasOwnProperty("addsongs") && conf["addsongs"] == "true") adminadd = 1; + else adminadd = 0; + if(conf.hasOwnProperty("allvideos") && conf["allvideos"] == "true") music = 1; + else music = 0; + if(conf.hasOwnProperty("longsongs") && conf["longsongs"] == "true") longS = 1; + else longS = 0; + if(conf.hasOwnProperty("vote") && conf["vote"] == "true") adminvote = 1; + else adminvote = 0; + if(conf.hasOwnProperty("adminpass") && conf["adminpass"] != "") hasadmin = 1; + else hasadmin = 0; + /*list[0].shift(); + list[3].shift(); + list[2].shift();*/ - setTimeout(function() - { - - $("#wrapper").empty(); - - $.each(list["songs"], function(j, listeID){ - - var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&"); - var video_id = listeID["id"]; - var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/default.jpg"; - var odd = ""; if(j%2==0)odd=" oddlist"; - var delsong = ""; if(pass_corr=="correct")delsong=""; - var finalhtml="
"+ - ""+ - "
"+video_title+"
"+ - "
"+listeID["votes"]+ - "+"+ - "-"+ - delsong+ - "
"+ - "
"; - $("#wrapper").append(finalhtml); - }); - if($("#playlist").height() != $("#player").height()) + setTimeout(function() { - if(!window.mobilecheck()) + + $("#wrapper").empty(); + + $.each(list["songs"], function(j, listeID){ + + var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&"); + var video_id = listeID["id"]; + var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/default.jpg"; + var odd = ""; if(j%2==0)odd=" oddlist"; + var delsong = ""; if(pass_corr=="correct")delsong=""; + var finalhtml="
"+ + ""+ + "
"+video_title+"
"+ + "
"+listeID["votes"]+ + "+"+ + "-"+ + delsong+ + "
"+ + "
"; + $("#wrapper").append(finalhtml); + }); + if($("#playlist").height() != $("#player").height()) { - $("#playlist").css({height: $("#player").height()-$("#adminPanel").outerHeight(true)+30}); - $("#playlist").css({overflow: "hidden"}); - if(scroller == false) + if(!window.mobilecheck()) { - myScroll = new IScroll('#playlist', { - mouseWheel: true, - scrollbars: false, - scrollY: true, - interactiveScrollbars: false - }); - scroller = true; - }else - { - myScroll.refresh(); + $("#playlist").css({height: $("#player").height()-$("#adminPanel").outerHeight(true)+30}); + $("#playlist").css({overflow: "hidden"}); + if(scroller == false) + { + myScroll = new IScroll('#playlist', { + mouseWheel: true, + scrollbars: false, + scrollY: true, + interactiveScrollbars: false + }); + scroller = true; + }else + { + myScroll.refresh(); + } } } - } - myScroll.refresh(); - if(window.mobilecheck()) - { - document.getElementById("player").style.display="none"; - ytplayer.pauseVideo(); - } - if(!adminTogg) - { - names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay"]; - for (var i = 0; i < names.length; i++) { - document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true"); - document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false"); - }; - - if(hasadmin) - $("#setpass").text("Channel has admin") - else - $("#setpass").text("Channel has no admin") - } - }, 2500); + myScroll.refresh(); + if(window.mobilecheck()) + { + document.getElementById("player").style.display="none"; + ytplayer.pauseVideo(); + } + if(!adminTogg) + { + names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay"]; + for (var i = 0; i < names.length; i++) { + document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true"); + document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false"); + }; + + if(hasadmin) + $("#setpass").text("Channel has admin") + else + $("#setpass").text("Channel has no admin") + } + }, 2500); + } } function vote(id, vote){ diff --git a/js/youtube.js b/js/youtube.js index 1c40dbc9..b5fc58c9 100755 --- a/js/youtube.js +++ b/js/youtube.js @@ -48,20 +48,18 @@ $(document).ready(function() url: "php/change.php", async: false }).responseText; - //console.log(response); - response = $.parseJSON(response); - console.log(response["nowPlaying"].length); - conf = response["conf"]; - console.log(conf); + console.log(response); + + try{ + response = $.parseJSON(response); + conf = response["conf"]; for(first in response["nowPlaying"]) break; - console.log(first); response = first; }catch(err){ - response = "1"; + response = "empty"; } - $.ajax({ type: 'get', url: 'php/timedifference.php', @@ -104,21 +102,9 @@ function onYouTubeIframeAPIReady() { 'onPlaybackQualityChange': logQ } }); + if(response == "empty") setOverlay(true); } -/** - -Legger sangen inn i
en, via swfobject - - -var params = { allowScriptAccess: "always"}; -var atts = { id: "myytplayer" }; -swfobject.embedSWF("http://www.youtube.com/v/"+response+"?enablejsapi=1&playerapiid=ytplayer&version=3&controls=1&iv_load_policy=3", - "ytapiplayer", "825", "462", "8", null, null, params, atts); - - -eventlistener for når playeren endres -*/ function onPlayerStateChange(newState) { console.log("new state: "+newState.data); console.log("beginning: "+beginning); @@ -317,8 +303,14 @@ function errorHandler(newState) console.log("error! deleted video"); } }).responseText; - ytplayer.loadVideoById(response); - setBGimage(response); + if(response != "empty") + { + ytplayer.loadVideoById(response); + setBGimage(response); + setOverlay(false); + }else{ + setOverlay(true); + } },2500); /* setTimeout(function(){ @@ -351,3 +343,17 @@ function setBGimage(id){ } } + +function setOverlay(param){ + yp = $(".ytplayer"); + olay = $("#olay"); + if(param){ + if(olay.hasClass("hide")) olay.toggleClass("hide"); + olay.height(yp.height()); + olay.width(yp.width()); + document.getElementById("olay").style.top = document.getElementById("player").offsetTop + "px"; + document.getElementById("olay").style.left = document.getElementById("player").offsetLeft + "px"; + }else{ + if(!olay.hasClass("hide")) olay.toggleClass("hide"); + } +} diff --git a/php/change.php b/php/change.php index 89a1d645..ec7d5c3e 100755 --- a/php/change.php +++ b/php/change.php @@ -57,6 +57,11 @@ if(is_array($data["conf"]["views"])){ //If test for either saving when the song is done, or an error has occured if(isset($_REQUEST['thisUrl'])){ + if(count($data["nowPlaying"]) == 0 && count($data["songs"]) == 0) + { + echo "empty"; + return; + } $string = $_REQUEST['thisUrl']; //saving string as the id of the song $action = isset($_REQUEST['act']); //checking the action of the request, either save or del $firstToAdd = $firstSong[0]["id"]; //getting the id of the first in the queue @@ -249,6 +254,11 @@ else if(isset($_GET['skip'])){ //skip, echo "wrong"; } }else{ //printing the whole data array json encoded for youtube.js or list.js to pick up + if(count($data["nowPlaying"]) == 0 && count($data["songs"]) == 0) + { + echo "empty"; + return; + } echo json_encode($data); } diff --git a/static/style.css b/static/style.css index b955437d..237deddb 100755 --- a/static/style.css +++ b/static/style.css @@ -89,6 +89,9 @@ input[type="radio"]{display: none;} .button{background-color: rgba(255,255,255,0.2); border-radius: 4px; border: none;color: white;padding: 5px 15px; margin-top: 15px; transition: all 0.1s ease-in-out;} .button:hover{background-color: rgba(255,255,255,0.4); } +#olay{background-color:black;position:absolute;display:block;} +.hide{display:none !important;} +#olay span{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} @-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}