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

Almost working

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-06-07 15:07:59 +02:00
parent 2b9d891098
commit d17304d829
7 changed files with 53 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
php/controller.php
View File

@@ -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="modal-trigger" onclick="$('#legal').openModal()">Legal</a></li>
<li><a href="https://github.com/nixolas1/Zoff">GitHub</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 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>
</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>

2
php/footer.php
View File

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

7
php/nochan.php
View File

@@ -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="modal-trigger" onclick="$('#legal').openModal()">Legal</a></li>
<li><a href="https://github.com/nixolas1/Zoff">GitHub</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 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>
</ul>
</div>
</nav>

8
php/panel.php
View File

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

5
static/css/style.css
View File

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

1
static/js/hostcontroller.js
View File

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

11
static/js/remotecontroller.js
View File

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