Navigating from channel to frontpage and back-and-forth now works a lot better

index.php

@@ -166,12 +166,13 @@
         </div>
     <main class="container center-align main">
         <div id="main-row" class="row">
-            <div class="col s12 m9 video-container no-opacity click-through">
+            <div id="video-container" class="col s12 m9 video-container no-opacity click-through">
                 <!--
                   width: calc(100% - 261px);
                   display: inline;
                   -->
                 <div id="player" class="ytplayer"></div>
+                <div id="main_components">
                 <div id="player_overlay" class="hide valign-wrapper">
                   <div id="player_overlay_text" class="valign center-align">
                     Waiting for Video
@@ -196,6 +197,7 @@
                   <div id="viewers"></div>
                   <div id="bar"></div>
                 </div>
+                </div>
             </div>
             <div id="playlist" class="col s12 m3">
               <div id="top-button" title="Scroll to the top" class="rounded-bottom hide top-button-with-tabs hide-on-small-only">Top</div>
@@ -270,7 +272,6 @@
         <div id="playbar">
         </div>
     </main>
-    <div id="frontpage_player"></div>
 
     <?php include("php/footer.php"); ?>
     </body>

php/nochan.php

@@ -138,7 +138,7 @@ if(isset($_GET['chan'])){
             <div class="indeterminate" id="channel-load-move"></div>
         </div>
     <main class="center-align container">
-        <div class="section">
+        <div id="main_section_frontpage" class="section">
             <div id="preloader" class="progress">
                 <div class="indeterminate"></div>
             </div>
@@ -170,7 +170,6 @@ if(isset($_GET['chan'])){
             </div>
         </div>
     </main>
-    <div id="frontpage_player"></div>
 
     <?php include("php/footer.php"); ?>
 	</body>

static/js/listeners.js

@@ -139,35 +139,45 @@ function init(){
 		socket = io.connect(''+add+':8880', connection_options);
 	}
 
-	Player.setup_youtube_listener(chan);
+	if($("#alreadychannel").length == 0){
+		Player.setup_youtube_listener(chan);
 
-	    Admin.admin_listener();
+		socket.on("get_list", function(){
-		List.channel_listener();
+		    //setTimeout(function(){
+		    	socket.emit('list', chan.toLowerCase());
+		    	/*if(Crypt.get_pass(chan.toLowerCase()) != undefined){
+		    		socket.emit("password", [Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase())), chan.toLowerCase()]);
+		    	}*/
+		});
 
-	socket.on("get_list", function(){
+		socket.on("suggested", function(params){
-	    //setTimeout(function(){
+			var single = true;
-	    	socket.emit('list', chan.toLowerCase());
+			if(params.id == undefined)
-	    	/*if(Crypt.get_pass(chan.toLowerCase()) != undefined){
+				single = false;
-	    		socket.emit("password", [Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase())), chan.toLowerCase()]);
+			//setTimeout(function(){
-	    	}*/
+				Suggestions.catchUserSuggests(params, single);
-	});
+				//}, 1000);
+		});
 
-	socket.on("suggested", function(params){
+		socket.on("viewers", function(view)
-		var single = true;
+		{
-		if(params.id == undefined)
+			viewers = view;
-			single = false;
-		//setTimeout(function(){
-			Suggestions.catchUserSuggests(params, single);
-			//}, 1000);
-	});
 
-	socket.on("viewers", function(view)
+			if(song_title !== undefined)
-	{
+				Player.getTitle(song_title, viewers);
-		viewers = view;
+		});
+	} else {
+        $("#channel-load").css("display", "none");
+		$("#player").css("opacity", "1");
+		$("#controls").css("opacity", "1");
+		$(".playlist").css("opacity", "1");
+		Player.readyLooks();
+		Playercontrols.initYoutubeControls(Player.ytplayer);
+		Playercontrols.initSlider();
+		Player.ytplayer.setVolume(Crypt.get_volume());
+        $(".video-container").removeClass("no-opacity");
 
-		if(song_title !== undefined)
+	}
-			Player.getTitle(song_title, viewers);
-	});
 
 	if(no_socket) socket.emit('list', chan.toLowerCase());
 
@@ -177,11 +187,13 @@ function init(){
 		$("#channel-load").css("display", "none");
  	} else {
  		window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
- 		Player.loadPlayer();
+ 		if(Player.ytplayer == "" || Player.ytplayer == undefined) Player.loadPlayer();
  	}
 
  	if(window.mobilecheck()) Mobile_remote.initiate_volume();
 
+ 	Admin.admin_listener();
+	List.channel_listener();
 	Chat.setup_chat_listener(chan);
 	Chat.allchat_listener();
 	if(!window.mobilecheck()) Hostcontroller.host_listener();
@@ -553,6 +565,11 @@ function onepage_load(){
 		    	else {
 			    	socket.removeEventListener("chat.all");
 			    	socket.removeEventListener("chat");
+			    	socket.removeEventListener("conf");
+			    	socket.removeEventListener("pw");
+			    	socket.removeEventListener("toast");
+			    	socket.removeEventListener("id");
+			    	socket.removeEventListener(id);
 			    }
 		    	document.getElementById("volume-button").removeEventListener("click", Playercontrols.mute_video);
     			document.getElementById("playpause").removeEventListener("click", Playercontrols.play_pause);
@@ -570,10 +587,12 @@ function onepage_load(){
 		    		$("#player").appendTo("#frontpage_player");
 		    		Player.onYouTubeIframeAPIReady();*/
 		    		$("main").append("<a id='closePlayer'>X</a>");
-		    		$("#player_overlay").remove();
+		    		/*$("#player_overlay").remove();
-		    		$("#controls").remove();
+		    		$("#controls").remove();*/
+		    		$("#playbar").remove();
 		    		$("#playlist").remove();
 		    		$(".ui-resizable-handle").remove();
+		    		$("#main_components").remove();
 		    		$("#player").addClass("player_bottom");
 		    		$("#main-row").addClass("frontpage_modified_heights");
 		    	} else {
@@ -611,8 +630,6 @@ function onepage_load(){
 
 				document.title = "Zöff";
 
-				window.initfp();
-
 		    }
 		});
 	}

static/js/nochan.js

@@ -233,7 +233,7 @@ var Nochan = {
       success: function(e){
 
         if(Player.ytplayer != ""){
-          Player.ytplayer.destroy();
+          //Player.ytplayer.destroy();
           socket.emit("change_channel", {channel: chan.toLowerCase()});
         }
         $("#frontpage_player").empty();
@@ -244,12 +244,23 @@ var Nochan = {
           window.chan = new_channel;
         }
 
+        
         $(".mega").remove();
         $(".mobile-search").remove();
         $("main").attr("class", "container center-align main");
         $("body").attr("id", "channelpage");
         $("header").html($($(e)[61]).html());
-        $("main").html($($(e)[65]).html());
+        if($("#alreadychannel").length == 0) $("main").html($($(e)[65]).html());
+        else {
+          var main = $($($($($(e)[65]).html())[0]).html());
+          $("#main-row").append($(main[2]).clone().wrap("<div>").parent().html());
+          $("#video-container").append($($($(main[0]).html())[4]).clone().wrap("<div>").parent().html());
+          $("#main-row").append("<div id='playbar'></div>");
+          $("#player").removeClass("player_bottom");
+          $("#main-row").removeClass("frontpage_modified_heights");
+          $("#main_section_frontpage").remove();
+          $("#closePlayer").remove();
+        }
         $("#search").attr("placeholder", "Find song on YouTube...");
         $(".page-footer").addClass("padding-bottom-novideo");
         if($("#alreadychannel").length == 1){
@@ -270,7 +281,9 @@ String.prototype.capitalizeFirstLetter = function() {
 }
 
 $().ready(function(){
-  if(!window.fromChannel && window.location.pathname == "/") initfp();
+  if(!window.fromChannel && window.location.pathname == "/"){
+    initfp();
+  }
 });
 
 function share_link_modifier_frontpage(){
@@ -312,15 +325,16 @@ function initfp(){
 
     if(window.location.hostname == "zoff.no") add = "https://zoff.no";
     else add = window.location.hostname;
-    socket = io.connect(''+add+':8880', connection_options);
+    if(socket == undefined) socket = io.connect(''+add+':8880', connection_options);
-    socket.on('playlists', function(msg){
+    if($("#alreadyfp").length == 0){
-        $("#channels").empty();
+      socket.on('playlists', function(msg){
+          $("#channels").empty();
+          frontpage = true;
+          Nochan.populate_channels(msg.channels);
 
-        frontpage = true;
+          Nochan.set_viewers(msg.viewers);
-        Nochan.populate_channels(msg.channels);
+      });
-
+    }
-        Nochan.set_viewers(msg.viewers);
-    });
 
 
     socket.emit('frontpage_lists');