Added remotecontroller in channel for mobile

static/css/style.css

@@ -1329,6 +1329,10 @@ nav ul li:hover, nav ul li.active {
       right: 0;
     }
 
+    #remote_channel{
+      color:#2d2d2d;
+    }
+
     #all_chat, #channelchat{
       height: calc(100vh - 352px);
     }
@@ -1567,7 +1571,7 @@ nav ul li:hover, nav ul li.active {
   color: black;
   text-align: center;
 }
-#volume-control {
+#volume-control, #volume-control-remote {
     cursor:pointer;
   float:left;
     position: relative;
@@ -1581,7 +1585,7 @@ nav ul li:hover, nav ul li.active {
     border-radius: 2px;
 }
 
-#volume-control .ui-slider-range-min {
+#volume-control .ui-slider-range-min, , #volume-control-remote .ui-slider-range-min{
     height:5px;
     width: 75px;
     position: absolute;
@@ -1591,7 +1595,7 @@ nav ul li:hover, nav ul li.active {
     border-radius: 2px;
 }
 
-#volume-control .ui-slider-handle {
+#volume-control .ui-slider-handle, #volume-control-remote .ui-slider-range-min {
   height: 15px;
   width: 36px;
   background: rgb(255, 44, 44);
@@ -1604,6 +1608,26 @@ nav ul li:hover, nav ul li.active {
   margin-top:0px;
 }
 
+#volume-control-remote{
+  float:none;
+  width:75%;
+  margin:auto;
+  margin-top:40px;
+}
+
+#volume-control-remote .ui-slider-range-min{
+  margin-left:0px;
+  margin-top:-4px;
+  height:10px;
+}
+
+#volume-control-remote .ui-slider-handle{
+  margin-left:-25px !important;
+  margin-top:-3px;
+  background: #2d2d2d;
+  border:none;
+}
+
 .slider-vol{
   float: left;
   font-size: 22px;

static/js/listeners.js

@@ -173,6 +173,9 @@ function init(){
  		window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
  		Player.loadPlayer();
  	}
+
+ 	if(window.mobilecheck()) Mobile_remote.initiate_volume();
+
 	Chat.setup_chat_listener(chan);
 	Chat.allchat_listener();
 	if(!window.mobilecheck()) Hostcontroller.host_listener();
@@ -259,6 +262,26 @@ $(document).on("change", "#autoplay", function() {
 	}
 });
 
+$(document).on("click", "#playbutton_remote", function(e) {
+	e.preventDefault();
+	Mobile_remote.play_remote();
+});
+
+$(document).on("click", "#pausebutton_remote", function(e) {
+	e.preventDefault();
+	Mobile_remote.pause_remote();
+});
+
+$(document).on("click", "#skipbutton_remote", function(e) {
+	e.preventDefault();
+	Mobile_remote.skip_remote();
+});
+
+$(document).on("submit", "#remoteform", function(e) {
+	e.preventDefault();
+	Mobile_remote.get_input($("#remote_channel").val());
+});
+
 $(document).on("click", "#chat-btn", function(){
 	$("#text-chat-input").focus();
     //$("#chat-btn").css("color", "white");

static/js/mobileremote.js

@@ -0,0 +1,59 @@
+var Mobile_remote = {
+	id: "",
+
+	get_input: function(value) {
+		console.log(value, Mobile_remote.id);
+		if(Mobile_remote.id == "") {
+			Mobile_remote.set_id(value);
+		} else {
+			Mobile_remote.set_channel(value);
+		}
+	},
+
+	set_id: function(id) {
+		console.log(id);
+		Mobile_remote.id = id;
+		$("#pausebutton_remote").attr("disabled", false);
+		$("#skipbutton_remote").attr("disabled", false);
+		$("#playbutton_remote").attr("disabled", false);
+		$("#skipbutton_remote").attr("disabled", false);
+		$("#remote_channel").val("");
+		$("#remote_channel").attr("placeholder", "Change channel");
+	},
+
+	set_channel: function(channel_name) {
+		socket.emit("id", [id, "channel", channel_name]);
+	},
+
+	play_remote: function() {
+		socket.emit("id", [Mobile_remote.id, "play", "mock"]);
+	},
+
+	pause_remote: function() {
+		socket.emit("id", [Mobile_remote.id, "pause", "mock"]);
+	},
+
+	skip_remote: function() {
+		socket.emit("id", [Mobile_remote.id, "skip", "mock"]);
+	},
+
+	initiate_volume: function() {
+		$("#volume-control-remote").slider({
+          min: 0,
+          max: 100,
+          value: 100,
+          range: "min",
+          animate: true,
+          /*slide: function(event, ui) {
+            console.log(ui.value);
+            //localStorage.setItem("volume", ui.value);
+          },*/
+          stop:function(event, ui) {
+            socket.emit("id", [Mobile_remote.id, "volume", ui.value]);
+            console.log("volume");
+            //console.log(ui.value);
+          }
+      });
+	}
+
+}