Fixed the remote, and removed materializecss stupid slider that struggles with click events

php/controller.php

@@ -54,7 +54,7 @@
     <h3 id="remote-text"></h3>
     </div>
         <div class="section">
-            <form class="row" id="base" onsubmit="controll();return false;">
+            <form class="row" id="base" onsubmit="window.location.href = '/remote/'+this.chan.value;return false;">
                     <div class="input-field col s12">
                         <input
                             class="input-field"
@@ -75,20 +75,21 @@
                 </div>
             </form>
             <div id="remote-controls" style="display:none;">
-                <a class="chan-link waves-effect btn green">
+                <a class="chan-link waves-effect btn green" onclick="play();">
                     <i id="remote_play" class="mdi-av-play-arrow"></i>
                 </a>
-                <a class="chan-link waves-effect btn gray">
+                <a class="chan-link waves-effect btn gray" onclick="pause();">
                     <i id="remote_pause" class="mdi-av-pause"></i>
                 </a>
-                <a class="chan-link waves-effect btn blue">
+                <a class="chan-link waves-effect btn blue" onclick="skip();">
                     <i id="remote_skip" class="mdi-av-skip-next"></i>
                 </a>
 
             </div>
-            <p class="range-field">
+            <!--<p class="range-field" onclick="console.log('test');">
                 <input type="range" id="volume-control" style="display:none;" min="0" value="100" max="100" />
-            </p>
+            </p>-->
+            <div id="volume-control"></div>
         </div>
 
         <div class="section">

server/server.js

@@ -24,7 +24,6 @@ process.on('uncaughtException', function(e){
 })
 
 io.on('connection', function(socket){
-
   socket.emit("get_list");
 
   var guid = hash_pass(socket.handshake.headers["user-agent"] + socket.handshake.address + socket.handshake.headers["accept-language"]).substring(0,8);

static/css/style.css

@@ -770,3 +770,36 @@ ul #chat-log{
   text-align: center;
 }
 
+#volume-control {
+    cursor:pointer;
+  float:left;
+    position: relative;
+    left: 10px;
+    margin: 13px auto;
+    height:5px;
+    width: 97%;
+    background-color:rgba(0, 0, 0, 0.5);
+    border: none;
+    outline: none;
+    border-radius: 2px;
+}
+
+#volume-control .ui-slider-range-min {
+    height:5px;
+    width: 75px;
+    position: absolute;
+    background-color:rgba(47, 47, 47, 1);
+    border: none;
+    outline: none;
+    border-radius: 2px;
+}
+
+#volume-control .ui-slider-handle {
+    height:15px;
+    width:5px;
+    background-color:black;
+    position: absolute;
+    cursor: pointer;
+    outline: none;
+    border: none;
+}

static/js/hostcontroller.js

@@ -12,11 +12,13 @@ socket.on("id", function(id)
   {
     socket.on(id, function(arr)
     {
+        console.log(arr);
         if(arr[0] == "volume")
         {
           $("#volume").slider("value", arr[1]);
           ytplayer.setVolume(arr[1]);
           localStorage.setItem("volume", arr[1]);
+          choose_button(arr[1], false);
         }else if(arr[0] == "channel")
         {
           socket.emit("change_channel");

static/js/remotecontroller.js

@@ -10,25 +10,25 @@ $(document).ready(function (){
       control();
 });
 
-document.getElementById("remote_play").addEventListener("click", function()
+function play()
 {
   socket.emit("id", [id, "play", "mock"]);
-});
+};
 
-document.getElementById("remote_pause").addEventListener("click", function()
+function pause()
 {
   socket.emit("id", [id, "pause", "mock"]);
-});
+};
 
-document.getElementById("remote_skip").addEventListener("click", function()
+function skip()
 {
   socket.emit("id", [id, "skip", "mock"]);
-});
+};
-
+/*
 document.getElementById("volume-control").addEventListener("click", function()
 {
    socket.emit("id", [id, "volume", $("#volume-control").val()]);
-});
+});*/
 
 function control()
 {
@@ -40,14 +40,32 @@ function control()
 
     $("#volume-control").css("display", "block");
     $("#remote-controls").css("display", "block");
+
+    document.getElementById("base").setAttribute("onsubmit", "control(); return false;");
     $("#remote-text").text("Controlling "+ id.toUpperCase())
-    $("#code-input").attr("length", "18");
+    document.getElementById("search").setAttribute("length", "18");
-    $("#code-input").attr("maxlength", "18");
+    document.getElementById("search").setAttribute("maxlength", "18");
     $("#forsearch").html("Type new channel name to change to");
+
+    $("#volume-control").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", [id, "volume", ui.value]);
+          //console.log(ui.value);
+        }
+  	});
   }else
   {
-    socket.emit("id", [id, "channel", $("#code-input").val().toLowerCase()]);
+    socket.emit("id", [id, "channel", $("#search").val().toLowerCase()]);
-    $("#code-input").val("");
+    $("#search").val("");
   }
 
 }