Almost working

php/controller.php

@@ -12,9 +12,10 @@
                 </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="modal-trigger" onclick="$('#about').openModal()">About</a></li>
+                    <li><a class="waves-effect waves-green" title="Remote control a Zöff player" href="remote">Remote</a></li>
-                    <li><a class="modal-trigger" onclick="$('#legal').openModal()">Legal</a></li>
+                    <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
-                    <li><a href="https://github.com/nixolas1/Zoff">GitHub</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>
                 </ul>
             </div>
         </nav>
@@ -54,26 +55,6 @@
     <h3 id="remote-text"></h3>
     </div>
         <div class="section">
-            <form class="row" id="base" onsubmit="controll();return false;">
-                    <div class="input-field col s12">
-                        <input
-                            class="input-field"
-                            type="text"
-                            id="search"
-                            name="chan"
-                            title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
-                            autocomplete="off"
-                            list="searches"
-                            required pattern="[a-zA-Z0-9]+"
-                            spellcheck="false"
-                            maxlength="8"
-                            autocomplete
-                            length="8"
-                            value="<?php /*if(isset($_GET('id'))echo($_GET('id'));*/?>"
-                        />
-                        <label for="search" id="forsearch">Type ID of host to be controlled</label>
-                </div>
-            </form>
             <div id="remote-controls" style="display:none;">
                 <a class="chan-link waves-effect btn green">
                     <i id="remote_play" class="mdi-av-play-arrow"></i>
@@ -87,12 +68,35 @@
               
             </div>
             <p class="range-field">
-                <input type="range" id="volume-control" style="display:none;" min="0" value="100" max="100" />
+                <input type="range" title="Volume" id="volume-control" style="display:none;" min="0" value="100" max="100" />
             </p>
+            <form class="row" id="base" onsubmit="control();return false;">
+                    <div class="input-field col s12">
+                        <input
+                            class="input-field"
+                            type="text"
+                            id="search"
+                            name="id"
+                            title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
+                            autocomplete="off"
+                            list="searches"
+                            required pattern="[a-zA-Z0-9]+"
+                            spellcheck="false"
+                            maxlength="8"
+                            autocomplete
+                            length="8"
+                            value="<?php /*if(isset($_GET('id'))echo($_GET('id'));*/?>"
+                        />
+                        <label for="search" id="forsearch">Type ID of host to be controlled</label>
+                </div>
+            </form>
         </div>
 
         <div class="section">
-
+            <b>Here you can control another Zöff player from any device.</b>
+            <br>
+            To find the ID of your player, click the Conf <i class="mdi-action-settings"></i> icon on the top right of the player page, then "Remote Control".
+            <br>You can either scan the QR code or type the ID manually.
         </div>
     </main>
 

php/footer.php

@@ -81,7 +81,7 @@
 <script type="text/javascript" src="/static/js/admin.js"></script>
 <script type="text/javascript" src="/static/js/chat.js"></script>
 <script type="text/javascript" src="/static/js/hostcontroller.js"></script>
-<script type="text/javascript" src="/static/js/remotecontroller.js"></script>
+<!--<script type="text/javascript" src="/static/js/remotecontroller.js"></script>-->
 <script type="text/javascript" src="/static/js/lib/materialize.js"></script>
 
 <!-- Piwik tracking -->

php/nochan.php

@@ -19,9 +19,10 @@ 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="modal-trigger" onclick="$('#about').openModal()">About</a></li>
+                    <li><a class="waves-effect waves-green" title="Remote control a Zöff player" href="remote">Remote</a></li>
-                    <li><a class="modal-trigger" onclick="$('#legal').openModal()">Legal</a></li>
+                    <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').openModal()">About</a></li>
-                    <li><a href="https://github.com/nixolas1/Zoff">GitHub</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>
                 </ul>
             </div>
         </nav>

php/panel.php

@@ -101,11 +101,12 @@
                 <ul>
                     <li>
                     <a id="code-link">
-                        <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player2">
+                        <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player">
                         <h4 id="code-text">ABBADUR</h4>
-                    </a>           
+                    </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
@@ -138,6 +139,7 @@
                       <input type="range" id="volume-control" style="display:none;" min="0" max="100" />
                     </p>
                     </li>
+                    -->
                 </ul>
             </div>
         </li>

static/css/style.css

@@ -770,3 +770,8 @@ ul #chat-log{
   text-align: center;
 }
 
+#code-link + span{
+  line-height: normal;
+  color: black;
+  text-align: center;
+}

static/js/hostcontroller.js

@@ -8,6 +8,7 @@ socket.on("id", function(id)
   $("#code-text").text(id.toUpperCase())
   $("#code-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
   $("#code-link").attr("href", codeURL);
+  
   if(!began)
   {
     socket.on(id, function(arr)

static/js/remotecontroller.js

@@ -27,14 +27,19 @@ document.getElementById("remote_skip").addEventListener("click", function()
 
 document.getElementById("volume-control").addEventListener("click", function()
 {
-   socket.emit("id", [id, "volume", $("#volume-control").val()]);
+  console.log("Sending...")
+  socket.emit("id", [id, "volume", $("#volume-control").val()]);
+  console.log("Sent new vol signal")
 });
 
 function control()
 {
+  console.log("Start controlling")
   if(start)
   {
-    if(!id)id = $("#code-input").val().toLowerCase();
+    if($("#code-input").val())
+      id = $("#code-input").val().toLowerCase();
+    console.log("id="+id)
     $("#code-input").val("");
     start = false;
 
@@ -49,5 +54,5 @@ function control()
     socket.emit("id", [id, "channel", $("#code-input").val().toLowerCase()]);
     $("#code-input").val("");
   }
-
+  return false;
 }