This commit is contained in:
Nicolas A. Tonne
2015-06-07 23:32:56 +02:00
8 changed files with 96 additions and 29 deletions

View File

@@ -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>
<form class="row" id="base" onsubmit="control();return false;">
</p>-->
<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">

View File

@@ -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>

View File

@@ -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

View File

@@ -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);

View File

@@ -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;
}

View File

@@ -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");

View File

@@ -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();

View File

@@ -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()]);
console.log("Sent new vol signal")
});
socket.emit("id", [id, "volume", $("#volume-control").val()]);
});*/
>>>>>>> 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");
$("#code-input").attr("maxlength", "18");
document.getElementById("search").setAttribute("length", "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()]);
$("#code-input").val("");
socket.emit("id", [id, "channel", $("#search").val().toLowerCase()]);
$("#search").val("");
}
return false;
}