Added player at frontpage because of fun

index.php

@@ -270,6 +270,7 @@
         <div id="playbar">
         </div>
     </main>
+    <div id="frontpage_player"></div>
 
     <?php include("php/footer.php"); ?>
     </body>

php/nochan.php

@@ -170,6 +170,7 @@ if(isset($_GET['chan'])){
             </div>
         </div>
     </main>
+    <div id="frontpage_player"></div>
 
     <?php include("php/footer.php"); ?>
 	</body>

static/css/style.css

@@ -79,6 +79,29 @@
   user-select: initial;
 }
 
+#closePlayer{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+  font-size: 18px;
+  color: white;
+  text-shadow: 0px 0px 2px black;
+}
+
+#frontpage_player{
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 10;
+  cursor:pointer;
+}
+
+#frontpage_player #player{
+  width:200px;
+  cursor:pointer;
+}
+
 #text-chat-input{
   border-top: 1px solid #9e9e9e;
 }
@@ -104,6 +127,11 @@ body {
     min-height: 100vh;
     flex-direction: column;
     overflow-x: hidden;
+    -webkit-transition: background-color 1s;  
+    -moz-transition:background-color 1s;
+    -ms-transition:background-color 1s;
+    -o-transition:background-color 1s;
+    transition:background-color 1s;  
 }
 
 .main, #main-row, .video-container, #playlist{

static/js/list.js

@@ -26,7 +26,7 @@ var List = {
                 List.voted_song(msg[1], msg[2]);
                 break;
             case "song_change":
-                List.song_change(msg[1]);
+                if(window.location.pathname != "/") List.song_change(msg[1]);
                 break;
         }
     },

static/js/listeners.js

@@ -74,6 +74,8 @@ $().ready(function(){
 
 function init(){
 
+	var no_socket = true;
+
 	chan = $("#chan").html();
 	mobile_beginning = window.mobilecheck();
 	var side = window.mobilecheck() ? "left" : "right";
@@ -132,8 +134,11 @@ function init(){
 			socket.emit("password", [localStorage[chan.toLowerCase()], chan.toLowerCase()]);
 	}*/
 
+	if(socket == undefined){
+		no_socket = false;
+		socket = io.connect(''+add+':8880', connection_options);
+	}
 
-	socket = io.connect(''+add+':8880', connection_options);
 	Player.setup_youtube_listener(chan);
 	    
 	    Admin.admin_listener();
@@ -164,6 +169,8 @@ function init(){
 			Player.getTitle(song_title, viewers);
 	});
 
+	if(no_socket) socket.emit('list', chan.toLowerCase());
+
 
 	if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
 		document.getElementById("search").blur();
@@ -530,30 +537,36 @@ function onepage_load(){
 		Player.stopInterval = true;
 		Admin.display_logged_out();
 		Admin.beginning 	 = true;
-		chan 				 = "";
 		began 				 = false;
 		durationBegun  		 = false;
 		$("#embed-button").css("display", "none");
 
 
-		socket.removeAllListeners();
+		//socket.removeAllListeners();
+		//$("#player").appendTo("#frontpage_player");
 
 		$.ajax({
 		    url: "php/nochan.php",
 		    success: function(e){
 
-		    	socket.disconnect();
+		    	//socket.disconnect();
-
+		    	socket.removeEventListener("chat.all");
+		    	socket.removeEventListener("chat");
 		    	document.getElementById("volume-button").removeEventListener("click", Playercontrols.mute_video);
     			document.getElementById("playpause").removeEventListener("click", Playercontrols.play_pause);
     			document.getElementById("fullscreen").removeEventListener("click", Playercontrols.fullscreen);
 			    	
-		    	video_id   = "";
+		    	//video_id   = "";
-		    	song_title = "";
+		    	//song_title = "";
 
 		    	$("meta[name=theme-color]").attr("content", "#2D2D2D"); 
 
 		    	if(!/iPad|iPhone|iPod/.test(navigator.userAgent)) Player.ytplayer.destroy();
+		    	if(!window.mobilecheck()){
+		    		$("<a id='closePlayer'>X</a>").appendTo("#frontpage_player");
+		    		$("#player").appendTo("#frontpage_player");
+		    		Player.onYouTubeIframeAPIReady();
+		    	}
 
 				$(".drag-target").remove();
 				$("#sidenav-overlay").remove();

static/js/nochan.js

@@ -224,16 +224,19 @@ var Nochan = {
     $("#channel-load").css("display", "block");
     window.scrollTo(0, 0);
     frontpage = false;
-
+    //socket.removeAllListeners();
-    socket.removeAllListeners();
+    $("body").css("background-color", "#2d2d2d"); 
-
     $.ajax({
       url: chan + "/php/index.php",
       
       success: function(e){
 
-        $("body").css("background-color", "#2d2d2d");
+        if(Player.ytplayer != ""){
-        socket.disconnect();
+          Player.ytplayer.destroy();
+          socket.emit("change_channel");
+        }
+        $("#frontpage_player").empty();
+        //socket.disconnect();
 
         if(!popstate){
           window.history.pushState("to the channel!", "Title", "/" + chan);
@@ -259,7 +262,6 @@ var Nochan = {
       }
     });
   }
-
 }
 
 String.prototype.capitalizeFirstLetter = function() {
@@ -386,6 +388,15 @@ $(document).on('click', '#cookieok', function() {
     });
 });
 
+$(document).on("click", "#closePlayer", function(e){
+  e.preventDefault();
+  socket.emit("change_channel");
+  Player.ytplayer.destroy();
+  Player.ytplayer = "";
+  document.title = "Zöff";
+  $("#frontpage_player").empty();
+});
+
 $(document).on('click', '#toast-container', function(){
   $(this).fadeOut(function(){
         $(this).remove();

static/js/player.js

@@ -11,7 +11,6 @@ var Player = {
     	socket.on("np", function(obj)
     	{
             Player.loaded      = false;
-
     		if(obj.length == 0){
 
     			document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
@@ -46,8 +45,10 @@ var Player = {
                     }
                     Suggestions.fetchYoutubeSuggests(video_id);
                 }catch(e){}
-          		Player.getTitle(song_title, viewers);
+                if(window.location.pathname != "/"){
-    			Player.setBGimage(video_id);
+              		Player.getTitle(song_title, viewers);
+        			Player.setBGimage(video_id);
+                }
     			//if(player_ready && !window.mobilecheck())
                 if(player_ready && !window.MSStream)
     			{
@@ -94,7 +95,7 @@ var Player = {
                 playing = false;
                 paused  = false;
 
-    			socket.emit("end", video_id);
+    			socket.emit("end", {id: video_id, channel: chan.toLowerCase()});
     			break;
     		case 1:
     			playing = true;
@@ -103,14 +104,16 @@ var Player = {
                     beginning = false;
                     mobile_beginning = false;
                 }
-                if(!embed) Helper.addClass("#player_overlay", "hide");
+                if(!embed && window.location.pathname != "/") Helper.addClass("#player_overlay", "hide");
-    			if(document.getElementById("play").className.split(" ").length == 1)
+                if(window.location.pathname != "/"){
-    				$("#play").toggleClass("hide");
+        			if(document.getElementById("play").className.split(" ").length == 1)
-    			if(document.getElementById("pause").className.split(" ").length == 2)
+        				$("#play").toggleClass("hide");
-    				$("#pause").toggleClass("hide");
+        			if(document.getElementById("pause").className.split(" ").length == 2)
+        				$("#pause").toggleClass("hide");
+                }
     			if(paused)
     			{
-    				socket.emit('pos');
+    				socket.emit('pos', {channel: chan.toLowerCase()});
     				paused = false;
     			}
     			break;
@@ -118,7 +121,7 @@ var Player = {
                 /*if(window.mobilecheck() || embed)
                 {*/
     			    paused = true;
-                    Playercontrols.play_pause_show();
+                    if(window.location.pathname != "/") Playercontrols.play_pause_show();
                     mobile_beginning = true;
                 /*}
                 else
@@ -158,7 +161,7 @@ var Player = {
             curr_playing = Player.ytplayer.getVideoUrl().replace("https://www.youtube.com/watch?v=", "");
 
             
-                socket.emit("skip", {error: newState.data, id: video_id, pass: adminpass});
+                socket.emit("skip", {error: newState.data, id: video_id, pass: adminpass, channel: chan.toLowerCase});
                 //console.log(video_id, Player.ytplayer.getVideoUrl(), Player.ytplayer.getPlayerState());
             
             /*}else{