added an overlay to when the playlist is empty

index.php

@@ -34,6 +34,7 @@
 					</div>
 				</div>
 				<div id="controls"></div>
+				<div id="olay" class="hide"><span>Empty Playlist</span></div>
 			</div>
 		</div>
 		<?php include("php/footer.php"); ?>

js/list.js

@@ -14,86 +14,88 @@ function updateList()
 		url: "php/change.php",   
 		async: false
 	}).responseText;
-	list = $.parseJSON(list);
+	if(list != "empty"){
-	conf = list["conf"];
+		list = $.parseJSON(list);
-	if(conf.hasOwnProperty("addsongs") && conf["addsongs"] == "true") adminadd = 1;
+		conf = list["conf"];
-	else adminadd = 0;
+		if(conf.hasOwnProperty("addsongs") && conf["addsongs"] == "true") adminadd = 1;
-	if(conf.hasOwnProperty("allvideos") && conf["allvideos"] == "true") music = 1;
+		else adminadd = 0;
-	else music = 0;
+		if(conf.hasOwnProperty("allvideos") && conf["allvideos"] == "true") music = 1;
-	if(conf.hasOwnProperty("longsongs") && conf["longsongs"] == "true") longS = 1;
+		else music = 0;
-	else longS = 0;
+		if(conf.hasOwnProperty("longsongs") && conf["longsongs"] == "true") longS = 1;
-	if(conf.hasOwnProperty("vote") && conf["vote"] == "true") adminvote = 1;
+		else longS = 0;
-	else adminvote = 0;
+		if(conf.hasOwnProperty("vote") && conf["vote"] == "true") adminvote = 1;
-	if(conf.hasOwnProperty("adminpass") && conf["adminpass"] != "") hasadmin = 1;
+		else adminvote = 0;
-	else hasadmin = 0;
+		if(conf.hasOwnProperty("adminpass") && conf["adminpass"] != "") hasadmin = 1;
-	/*list[0].shift();
+		else hasadmin = 0;
-	list[3].shift();
+		/*list[0].shift();
-	list[2].shift();*/
+		list[3].shift();
+		list[2].shift();*/
 
-	setTimeout(function()
+		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="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">";
-			var finalhtml="<div id='result' class='result lresult"+odd+"'>"+
-			"<img src='"+video_thumb+"' class='thumb lthumb'>"+
-			"<div class='ltitle'>"+video_title+"</div>"+
-			"<div class='votes'>"+listeID["votes"]+
-                    "<a onclick=\"vote('"+video_id+"','pos');\" id='plus'>+</a>"+
-                    "<a onclick=\"vote('"+video_id+"','neg');\" id='minus'>-</a>"+
-                    delsong+
-                    "</div>"+
-			"</div>";
-			$("#wrapper").append(finalhtml);
-		});
-		if($("#playlist").height() != $("#player").height())
 		{
-			if(!window.mobilecheck())
+
+			$("#wrapper").empty();
+
+			$.each(list["songs"], function(j, listeID){
+
+				var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/&quot;/g,"'").replace(/&amp;/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="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">";
+				var finalhtml="<div id='result' class='result lresult"+odd+"'>"+
+				"<img src='"+video_thumb+"' class='thumb lthumb'>"+
+				"<div class='ltitle'>"+video_title+"</div>"+
+				"<div class='votes'>"+listeID["votes"]+
+						"<a onclick=\"vote('"+video_id+"','pos');\" id='plus'>+</a>"+
+						"<a onclick=\"vote('"+video_id+"','neg');\" id='minus'>-</a>"+
+						delsong+
+						"</div>"+
+				"</div>";
+				$("#wrapper").append(finalhtml);
+			});
+			if($("#playlist").height() != $("#player").height())
 			{
-				$("#playlist").css({height: $("#player").height()-$("#adminPanel").outerHeight(true)+30});
+				if(!window.mobilecheck())
-				$("#playlist").css({overflow: "hidden"});
-				if(scroller == false)
 				{
-					myScroll = new IScroll('#playlist', {
+					$("#playlist").css({height: $("#player").height()-$("#adminPanel").outerHeight(true)+30});
-						mouseWheel: true,
+					$("#playlist").css({overflow: "hidden"});
-						scrollbars: false,
+					if(scroller == false)
-						scrollY: true,
+					{
-						interactiveScrollbars: false
+						myScroll = new IScroll('#playlist', {
-					});
+							mouseWheel: true,
-					scroller = true;
+							scrollbars: false,
-				}else
+							scrollY: true,
-				{
+							interactiveScrollbars: false
-					myScroll.refresh();
+						});
+						scroller = true;
+					}else
+					{
+						myScroll.refresh();
+					}
 				}
 			}
-		}
+			myScroll.refresh();
-		myScroll.refresh();
+			if(window.mobilecheck())
-		if(window.mobilecheck())
+			{
-		{
+				document.getElementById("player").style.display="none";
-			document.getElementById("player").style.display="none";
+				ytplayer.pauseVideo();
-			ytplayer.pauseVideo();
+			}
-		}
+			if(!adminTogg)
-		if(!adminTogg)
+			{
-		{
+				names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay"];
-			names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay"];
+				for (var i = 0; i < names.length; i++) {
-			for (var i = 0; i < names.length; i++) {
+					document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true");
-				document.getElementsByName(names[i])[0].checked = (conf[names[i]] === "true");
+					document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false");
-				document.getElementsByName(names[i])[1].checked = (conf[names[i]] === "false");
+				};
-			};
+				
-			
+				if(hasadmin)
-			if(hasadmin)
+					$("#setpass").text("Channel has admin")
-				$("#setpass").text("Channel has admin")
+				else
-			else
+					$("#setpass").text("Channel has no admin")
-				$("#setpass").text("Channel has no admin")
+			}
-		}
+		}, 2500);
-	}, 2500);
+	}
 }
 
 function vote(id, vote){

js/youtube.js

@@ -48,20 +48,18 @@ $(document).ready(function()
 		url: "php/change.php",   
 		async: false
 	}).responseText;
-	//console.log(response);
+	console.log(response);
-	response = $.parseJSON(response);
+	
-	console.log(response["nowPlaying"].length);
+	
-	conf = response["conf"];
-	console.log(conf);
 	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 <div>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);
+		if(response != "empty")
-		setBGimage(response);
+		{
+			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");
+	}	
+}

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); 
 }
 

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;}}