KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Control stuff in sidebar

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-06-04 16:26:37 +02:00
parent 011e906c47
commit 6f3b8e4184
6 changed files with 90 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
php/footer.php
View File

@@ -80,7 +80,8 @@
<script type="text/javascript" src="static/js/search.js"></script>
<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/controller.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/lib/materialize.js"></script>
<!-- Piwik tracking -->

42
php/panel.php
View File

@@ -1,7 +1,7 @@
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="col s9 collapsible-header bold waves-effect admin-settings active">
<a class="col s9 collapsible-header bold waves-effect admin-settings">
Channel Settings
<i class="mdi-image-tune"></i>
<div class="nav-btn close-settings clickable" title="Close" href="#" onclick="hide_settings()">
@@ -91,17 +91,47 @@
</li>
</ul>
</li>
<li class="no-padding hide">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header bold waves-effect">User Settings
<a class="collapsible-header bold waves-effect">Remote Control
<i class="mdi-action-account-circle"></i>
</a>
<div class="collapsible-body">
<ul>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
<li>
<form class="row" id="base" onsubmit="controll();return false;">
<div class="input-field">
<input
class="input-field"
type="text"
id="code-input"
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"
/>
<label for="code-input" id="forcode">Type ID of host to be controlled</label>
</div>
</form>
</li>
<li>
<div id="remote-controls" style="display:none;">
<i id="remote_play" class="mdi-av-play-arrow"></i>
<i id="remote_pause" class="mdi-av-pause"></i>
<i id="remote_skip" class="mdi-av-skip-next"></i>
</div>
</li>
<li>
<p class="range-field">
<input type="range" id="volume-control" style="display:none;" min="0" max="100" />
</p>
</li>
</ul>
</div>
</li>

4
static/css/style.css
View File

@@ -762,7 +762,7 @@ ul #chat-log{
cursor:pointer;
}
#volume-controll {
/*#volume-controll {
cursor:pointer;
float:left;
position: relative;
@@ -794,4 +794,4 @@ ul #chat-log{
cursor: pointer;
outline: none;
border: none;
}
}*/

0
static/js/controller.js → static/js/hostcontroller.js
View File

60
static/js/mobilecontroller.js
View File

@@ -1,60 +0,0 @@
var start = true;
var id;
var socket;
$(document).ready(function (){
setTimeout(function(){$("#search").focus();},500);
socket = io.connect('http://'+window.location.hostname+':3000');
});
document.getElementById("remote_play").addEventListener("click", function()
{
socket.emit("id", [id, "play", "mock"]);
});
document.getElementById("remote_pause").addEventListener("click", function()
{
socket.emit("id", [id, "pause", "mock"]);
});
document.getElementById("remote_skip").addEventListener("click", function()
{
socket.emit("id", [id, "skip", "mock"]);
});
function controll()
{
if(start)
{
id = $("#search").val().toLowerCase();
$("#search").val("");
start = false;
$("#volume-controll").css("display", "block");
$("#remote-controls").css("display", "block");
$("#search").attr("length", "18");
$("#search").attr("maxlength", "18");
$("#forsearch").html("Type new channel name to change to")
$("#volume-controll").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", $("#search").val().toLowerCase()]);
$("#search").val("");
}
}

50
static/js/remotecontroller.js Normal file
View File

@@ -0,0 +1,50 @@
var start = true;
var id;
//var socket;
$(document).ready(function (){
//setTimeout(function(){$("#code-input").focus();},500);
//socket = io.connect('http://'+window.location.hostname+':3000');
});
document.getElementById("remote_play").addEventListener("click", function()
{
socket.emit("id", [id, "play", "mock"]);
});
document.getElementById("remote_pause").addEventListener("click", function()
{
socket.emit("id", [id, "pause", "mock"]);
});
document.getElementById("remote_skip").addEventListener("click", function()
{
socket.emit("id", [id, "skip", "mock"]);
});
document.getElementById("volume-control").addEventListener("click", function()
{
socket.emit("id", [id, "volume", $("#volume-control").val()]);
});
function control()
{
if(start)
{
id = $("#code-input").val().toLowerCase();
$("#code-input").val("");
start = false;
$("#volume-control").css("display", "block");
$("#remote-controls").css("display", "block");
$("#code-input").attr("length", "18");
$("#code-input").attr("maxlength", "18");
$("#forsearch").html("Type new channel name to change to");
}else
{
socket.emit("id", [id, "channel", $("#code-input").val().toLowerCase()]);
$("#code-input").val("");
}
}