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

Merge pull request #118 from nixolas1/control

Browse Source 
Control
This commit is contained in:
Nicolas
2015-06-08 00:23:34 +02:00
parent ada624681e 47c5c414b6
commit a1625d7e5d
7 changed files with 68 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
php/controller.php
View File

@@ -12,9 +12,10 @@
</a> </a>
<a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</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"> <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> </ul>
</div> </div>
</nav> </nav>
@@ -54,6 +55,11 @@
<h3 id="remote-text"></h3> <h3 id="remote-text"></h3>
</div> </div>
<div class="section"> <div class="section">
<!--<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="window.location.href = '/remote/'+this.chan.value;return false;"> <form class="row" id="base" onsubmit="window.location.href = '/remote/'+this.chan.value;return false;">
<div class="input-field col s12"> <div class="input-field col s12">
<input <input
@@ -69,11 +75,11 @@
maxlength="8" maxlength="8"
autocomplete autocomplete
length="8" length="8"
value="<?php /*if(isset($_GET('id'))echo($_GET('id'));*/?>"
/> />
<label for="search" id="forsearch">Type ID of host to be controlled (it can be found under settings on a channel)</label> <label for="search" id="forsearch">Type ID of host to be controlled (it can be found under settings on a channel)</label>
</div> </div>
</form> </form>
<div id="remote-controls" style="display:none;"> <div id="remote-controls" style="display:none;">
<a class="chan-link waves-effect btn green" onclick="play();"> <a class="chan-link waves-effect btn green" onclick="play();">
<i id="remote_play" class="mdi-av-play-arrow"></i> <i id="remote_play" class="mdi-av-play-arrow"></i>
@@ -84,16 +90,25 @@
<a class="chan-link waves-effect btn blue" onclick="skip();"> <a class="chan-link waves-effect btn blue" onclick="skip();">
<i id="remote_skip" class="mdi-av-skip-next"></i> <i id="remote_skip" class="mdi-av-skip-next"></i>
</a> </a>
</div>
<i class="mdi-av-volume-up slider-vol"></i>
<div id="volume-control" style="display:none;" title="Volume">
</div> </div>
<!--<p class="range-field" onclick="console.log('test');"> <!--<p class="range-field" onclick="console.log('test');">
<input type="range" id="volume-control" style="display:none;" min="0" value="100" max="100" /> <input type="range" id="volume-control" style="display:none;" min="0" value="100" max="100" />
</p>--> </p>-->
<div id="volume-control" style="display:none;"></div>
</div> </div>
<div class="section"> <div class="section about-remote">
<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> </div>
</main> </main>

7
php/nochan.php
View File

@@ -19,9 +19,10 @@ if(isset($_GET['chan'])){
</a> </a>
<a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</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"> <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 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> </ul>
</div> </div>
</nav> </nav>

44
php/panel.php
View File

@@ -100,46 +100,12 @@
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li> <li>
<a id="code-link" target="_blank"> <a id="code-link" target="_blank">
<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> <h4 id="code-text">ABBADUR</h4>
</a> </a>
<a>You can control this Zöff instance from another device by going to <b>http://zoff.no/remote</b><a>
</li> </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> </ul>
</div> </div>
</li> </li>

31
static/css/style.css
View File

@@ -770,6 +770,12 @@ ul #chat-log{
text-align: center; text-align: center;
} }
#code-link + a{
line-height: normal;
color: black;
text-align: center;
}
#volume-control { #volume-control {
cursor:pointer; cursor:pointer;
float:left; float:left;
@@ -795,11 +801,22 @@ ul #chat-log{
} }
#volume-control .ui-slider-handle { #volume-control .ui-slider-handle {
height:15px; height: 15px;
width:5px; width: 36px;
background-color:black; background-color: rgb(255, 44, 44);
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
border: none; border: none;
border-radius: 17px;
margin-left: -17px;
}
.slider-vol{
float: left;
font-size: 22px;
}
.about-remote{
padding-top: 50px;
} }

1
static/js/hostcontroller.js
View File

@@ -8,6 +8,7 @@ socket.on("id", function(id)
$("#code-text").text(id.toUpperCase()) $("#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-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); $("#code-link").attr("href", codeURL);
if(!began) if(!began)
{ {
socket.on(id, function(arr) socket.on(id, function(arr)

2
static/js/nochan.js
View File

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

18
static/js/remotecontroller.js
View File

@@ -51,20 +51,20 @@ function control()
$("#forsearch").html("Type new channel name to change to"); $("#forsearch").html("Type new channel name to change to");
$("#volume-control").slider({ $("#volume-control").slider({
min: 0, min: 0,
max: 100, max: 100,
value: 100, value: 100,
range: "min", range: "min",
animate: true, animate: true,
/*slide: function(event, ui) { /*slide: function(event, ui) {
console.log(ui.value); console.log(ui.value);
//localStorage.setItem("volume", ui.value); //localStorage.setItem("volume", ui.value);
},*/ },*/
stop:function(event, ui) { stop:function(event, ui) {
socket.emit("id", [id, "volume", ui.value]); socket.emit("id", [id, "volume", ui.value]);
//console.log(ui.value); //console.log(ui.value);
} }
}); });
}else }else
{ {
socket.emit("id", [id, "channel", $("#search").val().toLowerCase()]); socket.emit("id", [id, "channel", $("#search").val().toLowerCase()]);