merge

php/controller.php

@@ -7,7 +7,7 @@
     <header>
         <nav id="fp-nav">
             <div class="nav-wrapper">
-                <a href="zoff.no" class="brand-logo hide-on-small-only">
+                <a href="http://zoff.no" class="brand-logo hide-on-small-only">
                     <img id="zicon" src="/static/images/squareicon_small.png" alt="zöff" title="Zöff">
                 </a>
                 <a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
@@ -55,22 +55,26 @@
     <h3 id="remote-text"></h3>
     </div>
         <div class="section">
+
             <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>              
+                </a>
-              
             </div>
-            <p class="range-field">
+            
+            <div id="volume-control" style="display:none;"></div>
+
+            <!--<p class="range-field">
                 <input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" />
-            </p>
+            </p>-->
-            <form class="row" id="base" onsubmit="control();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"
@@ -87,9 +91,14 @@
                             length="8"
                             value="<?php /*if(isset($_GET('id'))echo($_GET('id'));*/?>"
                         />
-                        <label for="search" id="forsearch">Type ID of host to be controlled</label>
+                        <label for="search" id="forsearch">Type ID of host to be controlled (it can be found under settings on a channel)</label>
                 </div>
             </form>
+
+            <!--<p class="range-field" onclick="console.log('test');">
+                <input type="range" id="volume-control" style="display:none;" min="0" value="100" max="100" />
+            </p>-->
+            
         </div>
 
         <div class="section">

php/nochan.php

@@ -19,7 +19,7 @@ if(isset($_GET['chan'])){
                 </a>
                 <a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
                 <ul id="nav-mobile" class="right hide-on-med-and-down">
-                    <li><a class="waves-effect waves-green" title="Remote control a Zöff player" href="remote">Remote</a></li>
+                    <li><a class="waves-effect green" title="Remote control a Zöff player" href="remote">Remote</a></li>
                     <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
                     <li><a class="modal-trigger waves-effect waves-yellow" onclick="$('#legal').openModal()">Legal</a></li>
                     <li><a class="waves-effect waves-purple" href="https://github.com/nixolas1/Zoff">GitHub</a></li>

php/panel.php

@@ -100,13 +100,14 @@
             <div class="collapsible-body">
                 <ul>
                     <li>
-                    <a id="code-link">
+                    <a id="code-link" target="_blank">
                         <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player">
                         <h4 id="code-text">ABBADUR</h4>
                     </a>   
                     <span>You can control this Zöff instance from another device by going to <b>http://zoff.no/remote</b><span>        
                     </li>
-                    <!--<li>
+                    <!--
+                    <li>
                     <form class="row" id="base" onsubmit="controll();return false;">
                         <div class="input-field">
                             <input

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,8 +770,42 @@ ul #chat-log{
   text-align: center;
 }
 
+
 #code-link + span{
   line-height: normal;
   color: black;
   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

@@ -13,11 +13,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/nochan.js

@@ -76,6 +76,8 @@ function sortFunction(a, b) {
 
 $(document).ready(function (){
 
+    //Materialize.toast("<a href='/remote' style='color:white;'>Try out our new feature, remote!</a>", 8000)
+
     list_html = $("#channels").html();
     $("#channels").empty();
 

static/js/remotecontroller.js

@@ -7,30 +7,32 @@ $(document).ready(function (){
     socket = io.connect('http://'+window.location.hostname+':3000');
     id = window.location.pathname.split("/")[2];
     if(id)
+    {
+      id = id.toLowerCase();
       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()
 {
-  console.log("Sending...")
+   socket.emit("id", [id, "volume", $("#volume-control").val()]);
-  socket.emit("id", [id, "volume", $("#volume-control").val()]);
+});*/
-  console.log("Sent new vol signal")
+>>>>>>> 126fe2fec4a1d36ec179e889d4d7162118b4fc49
-});
 
 function control()
 {
@@ -45,14 +47,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("");
   }
   return false;
 }