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 #114 from nixolas1/control

Browse Source 
Control
This commit is contained in:
KasperRT
2015-06-07 18:55:51 +02:00
parent 21b4b39dc2 2fb840f311
commit 2184e96bb4
11 changed files with 581 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.htaccess
View File

@@ -4,6 +4,9 @@ RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L] RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
RewriteRule ^remote/(.*) php/controller.php?id=$1 [L]
RewriteRule ^remote php/controller.php [L]
RewriteCond %{REQUEST_URI} !(/$|\.) RewriteCond %{REQUEST_URI} !(/$|\.)
RewriteRule (.*) %{REQUEST_URI}/ [R=301,L] RewriteRule (.*) %{REQUEST_URI}/ [R=301,L]

45
php/controller.php
View File

@@ -1,13 +1,14 @@
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head> <head>
<?php include("header.php"); ?> <title>Zöff Remote</title>
<?php include("header.php"); ?>
</head> </head>
<body> <body>
<header> <header>
<nav id="fp-nav"> <nav id="fp-nav">
<div class="nav-wrapper"> <div class="nav-wrapper">
<a href="#" class="brand-logo hide-on-small-only"> <a href="zoff.no" class="brand-logo hide-on-small-only">
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff"> <img id="zicon" src="/static/images/squareicon_small.png" alt="zöff" title="Zöff">
</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">
@@ -49,8 +50,11 @@
</header> </header>
<main class="center-align container"> <main class="center-align container">
<div class="section">
<h3 id="remote-text"></h3>
</div>
<div class="section"> <div class="section">
<form class="row" id="base" onsubmit="controll();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
class="input-field" class="input-field"
@@ -65,18 +69,27 @@
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</label> <label for="search" id="forsearch">Type ID of host to be controlled</label>
<datalist id="searches">
</datalist>
</div> </div>
</form> </form>
<div id="remote-controls" style="display:none;"> <div id="remote-controls" style="display:none;">
<i id="remote_play" class="mdi-av-play-arrow"></i> <a class="chan-link waves-effect btn green" onclick="play();">
<i id="remote_pause" class="mdi-av-pause"></i> <i id="remote_play" class="mdi-av-play-arrow"></i>
<i id="remote_skip" class="mdi-av-skip-next"></i> </a>
<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" onclick="skip();">
<i id="remote_skip" class="mdi-av-skip-next"></i>
</a>
</div> </div>
<div id="volume-controll" style="display:none;"></div> <!--<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 id="volume-control"></div>
</div> </div>
<div class="section"> <div class="section">
@@ -102,19 +115,19 @@
<ul> <ul>
<li> <li>
<a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff"> <a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff">
<img title="Get it on Google Play" src="static/images/google_play.png"> <img title="Get it on Google Play" src="/static/images/google_play.png">
</a> </a>
<a href="https://github.com/nixolas1/Zoff"> <a href="https://github.com/nixolas1/Zoff">
<img title="Contribute on GitHub" src="static/images/GitHub_Logo.png"> <img title="Contribute on GitHub" src="/static/images/GitHub_Logo.png">
</a> </a>
<p> <p>
<a class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>','Share Playlist','width=600,height=300')"> <a class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST']; ?>','Share Playlist','width=600,height=300')">
<img class="left" src="static/images/facebook.png">Share on Facebook <img class="left" src="/static/images/facebook.png">Share on Facebook
</a> </a>
</p> </p>
<p> <p>
<a class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&text=Check out Zöff!&via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&text=Check out Zöff!&via=zoffmusic','Share Playlist','width=600,height=300')"> <a class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&text=Check out Zöff!&via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST']; ?>&text=Check out Zöff!&via=zoffmusic','Share Playlist','width=600,height=300')">
<img class="left" src="static/images/twitter.png">Share on Twitter <img class="left" src="/static/images/twitter.png">Share on Twitter
</a> </a>
</p> </p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
@@ -146,8 +159,8 @@
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="//cdn.socket.io/socket.io-1.2.0.js"></script> <script src="//cdn.socket.io/socket.io-1.2.0.js"></script>
<script type="text/javascript" src="static/js/lib/materialize.js"></script> <script type="text/javascript" src="/static/js/lib/materialize.js"></script>
<script type="text/javascript" src="static/js/mobilecontroller.js"></script> <script type="text/javascript" src="/static/js/remotecontroller.js"></script>
<noscript><p><img src="//zoff.no/analyse/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript> <noscript><p><img src="//zoff.no/analyse/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
</body> </body>
</html> </html>

33
php/footer.php
View File

@@ -16,19 +16,19 @@
<ul> <ul>
<li> <li>
<a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff"> <a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff">
<img title="Get it on Google Play" src="static/images/google_play.png"> <img title="Get it on Google Play" src="/static/images/google_play.png">
</a> </a>
<a href="https://github.com/nixolas1/Zoff"> <a href="https://github.com/nixolas1/Zoff">
<img title="Contribute on GitHub" src="static/images/GitHub_Logo.png"> <img title="Contribute on GitHub" src="/static/images/GitHub_Logo.png">
</a> </a>
<p> <p>
<a class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>','Share Playlist','width=600,height=300')"> <a class="waves-effect waves-light btn light-blue share shareface" href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>','Share Playlist','width=600,height=300')">
<img class="left" src="static/images/facebook.png">Share on&nbspFacebook <img class="left" src="/static/images/facebook.png">Share on&nbspFacebook
</a> </a>
</p> </p>
<p> <p>
<a class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&text=Check out this playlist <?php echo ucfirst($list); ?> on Zöff!&via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&text=Check out this playlist <?php echo ucfirst($list); ?> on Zöff!&via=zoffmusic','Share Playlist','width=600,height=300')"> <a class="waves-effect waves-light btn light-blue share" href="http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&text=Check out this playlist <?php echo ucfirst($list); ?> on Zöff!&via=zoffmusic" target="popup" onclick="window.open('http://twitter.com/intent/tweet?url=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&text=Check out this playlist <?php echo ucfirst($list); ?> on Zöff!&via=zoffmusic','Share Playlist','width=600,height=300')">
<img class="left" src="static/images/twitter.png">Share on&nbspTwitter <img class="left" src="/static/images/twitter.png">Share on&nbspTwitter
</a> </a>
</p> </p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
@@ -58,10 +58,10 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="static/js/lib/jquery-2.1.3.min.js"></script> <!--<script type="text/javascript" src="/static/js/lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="static/js/lib/jquery-ui-1.10.3.min.js"></script>--> <script type="text/javascript" src="/static/js/lib/jquery-ui-1.10.3.min.js"></script>-->
<script src="//cdn.socket.io/socket.io-1.2.0.js"></script> <script src="//cdn.socket.io/socket.io-1.2.0.js"></script>
<!--<script type="text/javascript" src="static/js/lib/iscroll-min.js"></script>--> <!--<script type="text/javascript" src="/static/js/lib/iscroll-min.js"></script>-->
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script> <script>
var socket = io.connect('http://'+window.location.hostname+':3000'); var socket = io.connect('http://'+window.location.hostname+':3000');
@@ -73,15 +73,16 @@
</script> </script>
<script type="text/javascript" src="static/js/list.js"></script> <script type="text/javascript" src="/static/js/list.js"></script>
<script type="text/javascript" src="static/js/searchlist.js"></script> <script type="text/javascript" src="/static/js/searchlist.js"></script>
<script type="text/javascript" src="static/js/playercontrols.js"></script> <script type="text/javascript" src="/static/js/playercontrols.js"></script>
<script type="text/javascript" src="static/js/youtube.js"></script> <script type="text/javascript" src="/static/js/youtube.js"></script>
<script type="text/javascript" src="static/js/search.js"></script> <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/admin.js"></script>
<script type="text/javascript" src="static/js/chat.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/lib/materialize.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 --> <!-- Piwik tracking -->
<script type="text/javascript"> <script type="text/javascript">

8
php/header.php
View File

@@ -10,10 +10,10 @@
<meta name="description" content="The shared YouTube radio."> <meta name="description" content="The shared YouTube radio.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:image" content="static/images/highlogo.png" /> <meta property="og:image" content="/static/images/highlogo.png" />
<meta property="og:title" content="Zöff"> <meta property="og:title" content="Zöff">
<meta property="og:description" content="The shared YouTube radio."> <meta property="og:description" content="The shared YouTube radio.">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<link type="text/css" rel="stylesheet" href="static/css/materialize.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="static/css/style.css" title="Default" /> <link rel="stylesheet" type="text/css" href="/static/css/style.css" title="Default" />
<link rel="icon" id="favicon" type="image/png" href="static/images/favicon.png"/> <link rel="icon" id="favicon" type="image/png" href="/static/images/favicon.png"/>

50
php/panel.php
View File

@@ -1,7 +1,7 @@
<li class="no-padding"> <li class="no-padding">
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<li> <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 Channel Settings
<i class="mdi-image-tune"></i> <i class="mdi-image-tune"></i>
<div class="nav-btn close-settings clickable" title="Close" href="#" onclick="hide_settings()"> <div class="nav-btn close-settings clickable" title="Close" href="#" onclick="hide_settings()">
@@ -91,17 +91,55 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="no-padding hide"> <li class="no-padding">
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion">
<li> <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> <i class="mdi-action-account-circle"></i>
</a> </a>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li><a href="#!">Second</a></li> <li>
<li><a href="#!">Third</a></li> <a id="code-link" target="_blank">
<li><a href="#!">Fourth</a></li> <img id="code-qr" alt="QR code for control" title="Link to control this Zöff player2">
<h4 id="code-text">ABBADUR</h4>
</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> </ul>
</div> </div>
</li> </li>

1
server/server.js
View File

@@ -24,7 +24,6 @@ process.on('uncaughtException', function(e){
}) })
io.on('connection', function(socket){ io.on('connection', function(socket){
socket.emit("get_list"); socket.emit("get_list");
var guid = hash_pass(socket.handshake.headers["user-agent"] + socket.handshake.address + socket.handshake.headers["accept-language"]).substring(0,8); var guid = hash_pass(socket.handshake.headers["user-agent"] + socket.handshake.address + socket.handshake.headers["accept-language"]).substring(0,8);

16
static/css/style.css
View File

@@ -762,7 +762,15 @@ ul #chat-log{
cursor:pointer; cursor:pointer;
} }
#volume-controll { #code-text{
color:#000;
}
#code-link{
height: auto;
text-align: center;
}
#volume-control {
cursor:pointer; cursor:pointer;
float:left; float:left;
position: relative; position: relative;
@@ -776,17 +784,17 @@ ul #chat-log{
border-radius: 2px; border-radius: 2px;
} }
#volume-controll .ui-slider-range-min { #volume-control .ui-slider-range-min {
height:5px; height:5px;
width: 75px; width: 75px;
position: absolute; position: absolute;
background-color:rgba(55, 255, 0, 1); background-color:rgba(47, 47, 47, 1);
border: none; border: none;
outline: none; outline: none;
border-radius: 2px; border-radius: 2px;
} }
#volume-controll .ui-slider-handle { #volume-control .ui-slider-handle {
height:15px; height:15px;
width:5px; width:5px;
background-color:black; background-color:black;

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

@@ -3,16 +3,22 @@ var id
socket.on("id", function(id) socket.on("id", function(id)
{ {
console.log(id); console.log("Unique remote control ID: " + id);
var codeURL = "http://"+window.location.hostname+"/remote/"+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) if(!began)
{ {
socket.on(id, function(arr) socket.on(id, function(arr)
{ {
console.log(arr);
if(arr[0] == "volume") if(arr[0] == "volume")
{ {
$("#volume").slider("value", arr[1]); $("#volume").slider("value", arr[1]);
ytplayer.setVolume(arr[1]); ytplayer.setVolume(arr[1]);
localStorage.setItem("volume", arr[1]); localStorage.setItem("volume", arr[1]);
choose_button(arr[1], false);
}else if(arr[0] == "channel") }else if(arr[0] == "channel")
{ {
socket.emit("change_channel"); socket.emit("change_channel");

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("");
}
}

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

@@ -0,0 +1,71 @@
var start = true;
var id;
//var socket;
$(document).ready(function (){
setTimeout(function(){$("#code-input").focus();},500);
socket = io.connect('http://'+window.location.hostname+':3000');
id = window.location.pathname.split("/")[2];
if(id)
control();
});
function play()
{
socket.emit("id", [id, "play", "mock"]);
};
function pause()
{
socket.emit("id", [id, "pause", "mock"]);
};
function skip()
{
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)
{
if(!id)id = $("#code-input").val().toLowerCase();
$("#code-input").val("");
start = false;
$("#volume-control").css("display", "block");
$("#remote-controls").css("display", "block");
document.getElementById("base").setAttribute("onsubmit", "control(); return false;");
$("#remote-text").text("Controlling "+ id.toUpperCase())
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", $("#search").val().toLowerCase()]);
$("#search").val("");
}
}

394
typescript Normal file
View File

File diff suppressed because one or more lines are too long