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,6 +14,7 @@ function updateList()
 		url: "php/change.php",   
 		async: false
 	}).responseText;
+	if(list != "empty"){
 		list = $.parseJSON(list);
 		conf = list["conf"];
 		if(conf.hasOwnProperty("addsongs") && conf["addsongs"] == "true") adminadd = 1;
@@ -95,6 +96,7 @@ function updateList()
 			}
 		}, 2500);
 	}
+}
 
 function vote(id, vote){
 	console.log(adminpass);

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

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