Added remotecontroller in channel for mobile

php/controller.php

@@ -67,7 +67,7 @@
     <h3 id="remote-text">Remote Controller</h3>
     </div>
         <div class="section">
-            <form action="#" class="row" id="remoteform" onsubmit="return false;">
+            <form action="#" class="row" id="remoteform">
                     <div class="input-field col s12">
                         <input
                             class="input-field"

php/panel.php

@@ -155,6 +155,46 @@
     </ul>
 </li>
 
+<li class="no-padding hide-on-large-only">
+    <ul class="collapsible collapsible-accordion">
+        <li>
+            <a class="collapsible-header bold waves-effect import-a">Remote Controller
+                <i class="mdi-communication-import-export"></i>
+            </a>
+            <div class="collapsible-body">
+                <ul>
+                    <li class="white-bg">
+                        <form action="#" class="row" id="remoteform">
+                            <div class="input-field col s12">
+                                <input
+                                    class="input-field"
+                                    type="text"
+                                    id="remote_channel"
+                                    name="chan"
+                                    autocomplete="off"
+                                    spellcheck="false"
+                                    maxlength="10"
+                                    data-length="10"
+                                    placeholder="ID to remotecontroll"
+                                />
+                            </div>
+                        </form>
+                        <button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
+                            <i id="remote_play" class="mdi-av-play-arrow"></i>
+                        </button>
+                        <button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
+                        <i id="remote_pause" class="mdi-av-pause"></i></button>
+                        <button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
+                            <i id="remote_skip" class="mdi-av-skip-next"></i>
+                        </button>
+                        <i class="mdi-av-volume-up slider-vol"></i>
+                        <div class="" id="volume-control-remote" title="Volume"></div>
+                    </li>   
+                </ul>
+            </div>
+        </li>
+    </ul>
+</li>
 <!--
 <li class="no-padding">
     <h5 id="desc-title">List description</h5>

service-worker.js

@@ -1,6 +1,6 @@
 //importScripts('/static/dist/lib/cache-polyfill.js');
 
-var version = 'v1.1';
+var version = 'v1.2';
 var CACHE_FILES = [
     'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.no/&choe=UTF-8&chld=L%7C1',
     'https://fonts.googleapis.com/icon?family=Material+Icons',

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);
+          }
+      });
+	}
+
+}