Updated look of remote on mobile, and fixed changing channel remotely

php/panel.php

@@ -104,7 +104,7 @@
     <ul class="collapsible collapsible-accordion">
         <li>
             <a class="collapsible-header bold waves-effect">Remote Control
-                <i class="mdi-action-account-circle"></i>
+                <i class="material-icons">settings_remote</i>
             </a>
             <div class="collapsible-body">
                 <ul>
@@ -155,15 +155,16 @@
     </ul>
 </li>
 
-<li class="no-padding hide-on-large-only">
+<li class="no-padding show-only-mobile">
     <ul class="collapsible collapsible-accordion">
         <li>
             <a class="collapsible-header bold waves-effect import-a">Remote Controller
-                <i class="mdi-communication-import-export"></i>
+                <i class="material-icons">settings_remote</i>
             </a>
             <div class="collapsible-body">
                 <ul>
                     <li class="white-bg">
+                        <p id="remote_header">Control another client</p>
                         <form action="#" class="row" id="remoteform">
                             <div class="input-field col s12">
                                 <input

static/css/style.css

@@ -1318,6 +1318,8 @@ nav ul li:hover, nav ul li.active {
 ***************************************************************************/
 
 .mobile-search{display:none;}
+.show-only-mobile{display:none;
+}
 
 @media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px)  and (orientation: landscape){
     #playbar{
@@ -1331,6 +1333,19 @@ nav ul li:hover, nav ul li.active {
 
     #remote_channel{
       color:#2d2d2d;
+      width:90%;
+    }
+    .show-only-mobile{display:block;}
+
+    #volume-control-remote{
+      display: none;
+    }
+
+    #remote_header{
+      color: #2d2d2d;
+      font-size: 1.5em;
+      padding: 10px;
+      text-align: center;
     }
 
     #all_chat, #channelchat{

static/js/hostcontroller.js

@@ -24,6 +24,7 @@ var Hostcontroller = {
         began = true;
         socket.on(id, function(arr)
         {
+
           if(enabled){
             if(arr[0] == "volume"){
               $("#volume").slider("value", arr[1]);
@@ -31,6 +32,7 @@ var Hostcontroller = {
               localStorage.setItem("volume", arr[1]);
               Playercontrols.choose_button(arr[1], false);
             }else if(arr[0] == "channel"){
+              console.log("changing channel");
               socket.emit("change_channel");
               Admin.beginning = true;
 

static/js/listeners.js

@@ -75,7 +75,6 @@ $().ready(function(){
 function init(){
 
 	chan = $("#chan").html();
-	console.log(chan);
 	mobile_beginning = window.mobilecheck();
 	var side = window.mobilecheck() ? "left" : "right";
 

static/js/mobileremote.js

@@ -2,7 +2,6 @@ var Mobile_remote = {
 	id: "",
 
 	get_input: function(value) {
-		console.log(value, Mobile_remote.id);
 		if(Mobile_remote.id == "") {
 			Mobile_remote.set_id(value);
 		} else {
@@ -11,7 +10,6 @@ var Mobile_remote = {
 	},
 
 	set_id: function(id) {
-		console.log(id);
 		Mobile_remote.id = id;
 		$("#pausebutton_remote").attr("disabled", false);
 		$("#skipbutton_remote").attr("disabled", false);
@@ -19,10 +17,12 @@ var Mobile_remote = {
 		$("#skipbutton_remote").attr("disabled", false);
 		$("#remote_channel").val("");
 		$("#remote_channel").attr("placeholder", "Change channel");
+		$("#remote_header").html("Controlling " + id);
+		$("#volume-control-remote").css("display", "block");
 	},
 
 	set_channel: function(channel_name) {
-		socket.emit("id", [id, "channel", channel_name]);
+		socket.emit("id", [Mobile_remote.id, "channel", channel_name]);
 	},
 
 	play_remote: function() {