andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'develop'

Browse Source 
Conflicts:
	flatclient/css/webclient.css
	flatclient/index.html
	flatclient/js/controls.js
	flatclient/js/functionsvars.js
	flatclient/js/gui.js
	flatclient/js/library.js
This commit is contained in:
woutervanwijk 2013-12-28 15:40:48 +01:00
commit 99b3706422
11 changed files with 326 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
flatclient/css/webclient.css
View File

@ -316,13 +316,21 @@
.currenttrack2 {
background-image: url('../images/icons/play_alt_12x12.png');
background-repeat: no-repeat;
<<<<<<< HEAD
background-position: 4px center;
=======
background-position: 4px 51%;
>>>>>>> develop
}
.currenttrack {
background-image: url('../images/icons/play_alt_16x16.png');
background-repeat: no-repeat;
background-color: #eee;
<<<<<<< HEAD
background-position: 6px center;
=======
background-position: 4px 50%;
>>>>>>> develop
}
.currenttrack2 a {
@ -584,10 +592,24 @@ a {
}
/* disable text selection for mouse swipe */
<<<<<<< HEAD
=======
>>>>>>> develop
body * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
<<<<<<< HEAD
=======
}
/* but fix for text input (safari certainly needs it)*/
input[type=text] {
-moz-user-select: text;
-webkit-user-select: text;
-o-user-select: text;
user-select: text;
>>>>>>> develop
}

19
flatclient/dialog-success.html Executable file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" class="dialog-actionsheet">
<div data-role="content">
<h3>Initiating shutdown/reboot...</h3>
</div>
</div>
</body>
</html>

15
flatclient/index.html
View File

@ -51,7 +51,11 @@
<body>
<div data-role="page" id="page" class="ui-responsive-panel" data-theme="c">
<<<<<<< HEAD
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="reveal"> <!-- data-position-fixed="true"> -->
=======
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="reveal" data-position-fixed="true">
>>>>>>> develop
<ul class="ui-listview mainNav" data-role="listview" data-theme="a">
@ -84,6 +88,13 @@
<span class="navtxt"> Exit Fullscreen </span><i class="fa fa-desktop"></i></a>
</li>
<<<<<<< HEAD
=======
<li id="navshutdown" data-icon="false">
<a href="system.html" data-rel="dialog" data-transition="slidedown">
<span class="navtxt">System </span><i class="fa fa-power-off"></i></a>
</li>
>>>>>>> develop
<li id="" data-icon="false">
<div><!-- slider for volume -->
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt=""/></a>
@ -322,7 +333,11 @@
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
<div id="songinfo" class="">
<<<<<<< HEAD
<img id="infocover" src="images/icons/cd_32x32.png" width="36" height="36"/>
=======
<a href="#"><img id="infocover" src="images/icons/cd_32x32.png" width="36" height="36"/></a>
>>>>>>> develop
<div class="songinfo-text">
<div id="infoname"></div>

48
flatclient/js/controls.js vendored
View File

@ -65,7 +65,11 @@ function playTrack(addtoqueue) {
}
mopidy.playback.play(); //tracks[selected]);
<<<<<<< HEAD
console.log(selected);
=======
//console.log(selected);
>>>>>>> develop
return false;
}
@ -75,6 +79,10 @@ function playTrack(addtoqueue) {
* @returns {boolean}
*/
function playTrackByUri(uri, playlisturi){
<<<<<<< HEAD
=======
//console.log('playuri');
>>>>>>> develop
//stop directly, for user feedback
mopidy.playback.stop(true);
mopidy.tracklist.clear();
@ -111,7 +119,11 @@ function playTrackByUri(uri, playlisturi){
}
mopidy.playback.play(); //tracks[selected]);
<<<<<<< HEAD
console.log(selected);
=======
// console.log(selected);
>>>>>>> develop
return false;
}
@ -126,6 +138,10 @@ function playTrackByUri(uri, playlisturi){
* @returns {boolean}
*/
function playTrackQueueByUri(uri, playlisturi){
<<<<<<< HEAD
=======
//console.log('playqu');
>>>>>>> develop
//stop directly, for user feedback
//console.log('qu');
mopidy.playback.stop(true);
@ -144,7 +160,11 @@ function playTrackQueueByUri(uri, playlisturi){
}
mopidy.playback.play(); //currentplaylist[track]);
<<<<<<< HEAD
console.log(track, currentplaylist[track]);
=======
//console.log(track, currentplaylist[track]);
>>>>>>> develop
return false;
}
@ -262,8 +282,15 @@ function setRandom(nwrandom) {
function doRandom() {
if (random == false) {
<<<<<<< HEAD
mopidy.playback.setRandom(true).then();
} else {
=======
// mopidy.tracklist.setRandom(true).then();
mopidy.playback.setRandom(true).then();
} else {
//mopidy.tracklist.setRandom(false).then();
>>>>>>> develop
mopidy.playback.setRandom(false).then();
}
setRandom(!random);
@ -271,8 +298,15 @@ function doRandom() {
function doRepeat() {
if (repeat == false) {
<<<<<<< HEAD
mopidy.playback.setRepeat(true).then();
} else {
=======
//mopidy.tracklist.setRepeat(true).then();
mopidy.playback.setRepeat(true).then();
} else {
//mopidy.tracklist.setRepeat(false).then();
>>>>>>> develop
mopidy.playback.setRepeat(false).then();
}
setRepeat(!repeat);
@ -520,3 +554,17 @@ function saveRadioStations() {
$.cookie('radioStations', radioStations);
}
<<<<<<< HEAD
=======
function haltSystem() {
window.history.back();
$.post("/haltSystem");
toast('Stopping system...', 3000);
}
function rebootSystem() {
window.history.back();
$.post("/rebootSystem");
toast('Rebooting...', 3000);
}
>>>>>>> develop

34
flatclient/js/functionsvars.js
View File

@ -135,7 +135,11 @@ function albumTracksToTable(pl, target, uri) {
for (var i = 0; i < pl.length; i++) {
popupData[pl[i].uri] = pl[i];
liID = targetmin + '-' + pl[i].uri;
<<<<<<< HEAD
tmp += renderSongLi(pl[i], liID, uri);
=======
tmp += renderSongLi(pl[i], liID, uri, 'playTrackByUri');
>>>>>>> develop
//child = '<li id="' + targetmin + '-' + pl[i].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
// child += '<p style="float:right; display: inline;">' + timeFromSeconds(pl[i].length / 1000) + '</p><h1>' + pl[i].name + '</h1></a></li>';
@ -146,6 +150,7 @@ function albumTracksToTable(pl, target, uri) {
$(target).attr('data', uri);
}
<<<<<<< HEAD
function renderSongLi(song, liID, uri){
var hash = document.location.hash.split('?');
//this is so dirty... ... ...
@ -159,6 +164,9 @@ function renderSongLi(song, liID, uri){
// console.log(playlistType);
// songLi = '';
=======
function renderSongLi(song, liID, uri, playlistType){
>>>>>>> develop
songLi = '<li class="song albumli" id="' + liID + '">' +
'<a href="#" class="moreBtn" onclick="return popupTracks(event, \'' + uri + '\',\'' + song.uri + '\');">' +
'<i class="fa fa-ellipsis-vertical"></i>' +
@ -171,14 +179,22 @@ function renderSongLi(song, liID, uri){
}
function resultsToTables(results, target, uri) {
<<<<<<< HEAD
var hash = document.location.hash.split('?');
var divid = hash[0].substr(1), playlistType;
if (divid == 'current') {
=======
// console.log(target);
if (target == '#currenttable') {
>>>>>>> develop
playlistType = 'playTrackQueueByUri';
} else {
playlistType = 'playTrackByUri';
}
<<<<<<< HEAD
// console.log(playlistType);
=======
>>>>>>> develop
var newalbum = [];
var nexturi = '';
@ -241,6 +257,7 @@ function resultsToTables(results, target, uri) {
html += '<li class="albumdivider">';
html += '<a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');"><img id="' +
targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" /><h1>' + results[i].album.name + '</h1><p>';
<<<<<<< HEAD
for (j = 0; j < results[i].album.artists.length; j++) {
html += results[i].album.artists[j].name;
html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
@ -250,6 +267,19 @@ function resultsToTables(results, target, uri) {
break;
}
}
=======
if (results[i].album.artists) {
for (j = 0; j < results[i].album.artists.length; j++) {
html += results[i].album.artists[j].name;
html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
//stop after 3
if (j > 2) {
child += '...';
break;
}
}
}
>>>>>>> develop
html += '</p></a></li>';
for (j = 0; j < newalbum.length; j++) {
popupData[newalbum[j].uri] = newalbum[j];
@ -257,7 +287,11 @@ function resultsToTables(results, target, uri) {
//hERE!
var liID = targetmin + '-' + newalbum[j].uri;
<<<<<<< HEAD
html+= renderSongLi(newalbum[j], liID, uri);
=======
html+= renderSongLi(newalbum[j], liID, uri, playlistType);
>>>>>>> develop
//html += '<li class="albumli" id="' + targetmin + '-' + newalbum[j].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[j].uri + '\');">';
//html += '<p class="pright">' + timeFromSeconds(newalbum[j].length / 1000) + '</p><h1>' + newalbum[j].name + '</h1></a></li>';

50
flatclient/js/gui.js
View File

@ -380,6 +380,12 @@ function updateStatusOfAll() {
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
mopidy.playback.getState().then(processPlaystate, console.error);
<<<<<<< HEAD
=======
// mopidy.tracklist.getRepeat().then(processRepeat, console.error);
// mopidy.tracklist.getRandom().then(processRandom, console.error);
>>>>>>> develop
mopidy.playback.getRepeat().then(processRepeat, console.error);
mopidy.playback.getRandom().then(processRandom, console.error);
@ -484,6 +490,10 @@ $(document).ready(function(event) {
switchContent("playlists");
}
<<<<<<< HEAD
=======
>>>>>>> develop
initgui = false;
window.onhashchange = locationHashChanged;
// Log all events
@ -505,6 +515,7 @@ $(document).ready(function(event) {
//navigation temporary, rewrite this!
<<<<<<< HEAD
$('#normalFooter').click(
function() {
if(!$(event.target).is("#playimg"))
@ -513,6 +524,14 @@ $(document).ready(function(event) {
$('#nowPlayingpane, #controlspopupimage').click(
function() {return switchContent('current')}
);
=======
$('#songinfo').click(
function()
{return switchContent('nowPlaying')} );
$('#controlspopupimage').click(
function() {
return switchContent('current')} );
>>>>>>> develop
$('#navEnterFullscreen').click(function(){
enterFullscreen();
});
@ -555,14 +574,45 @@ $(document).ready(function(event) {
$('#navExitFullscreen').hide();
}
<<<<<<< HEAD
$.event.special.swipe.horizontalDistanceThreshold = 150; // (default: 30px) Swipe horizontal displacement must be more than this.
=======
$.event.special.swipe.horizontalDistanceThreshold = 125; // (default: 30px) Swipe horizontal displacement must be more than this.
>>>>>>> develop
$.event.special.swipe.verticalDistanceThreshold = 50; // (default: 75px) Swipe vertical displacement must be less than this.
// $.event.special.swipe.scrollSupressionThreshold = 20;
$.event.special.swipe.durationThreshold = 500;
// swipe songinfo and panel
<<<<<<< HEAD
$( "#normalFooter" ).on( "swiperight", doPrevious );
$( "#normalFooter" ).on( "swipeleft", doNext );
$( "#page, #header, #panel, .pane" ).on( "swiperight", function() { $("#panel").panel("open") } );
$( "#page, #header, #panel, .pane" ).on( "swipeleft", function() { $("#panel").panel("close") });
});
=======
$( "#normalFooter, #nowPlayingFooter" ).on( "swiperight", doPrevious );
$( "#normalFooter, #nowPlayingFooter" ).on( "swipeleft", doNext );
$( "#nowPlayingpane, .ui-body-c, #header, #panel, .pane" ).on( "swiperight", function() {
if(!$(event.target).is("#normalFooter") && !$(event.target).is("#nowPlayingFooter")) {
$("#panel").panel("open");
event.stopImmediatePropagation(); }
} );
$( "#nowPlayingpane, .ui-body-c, #header, #panel, .pane" ).on( "swipeleft", function() {
if(!$(event.target).is("#normalFooter") && !$(event.target).is("#nowPlayingFooter")) {
$("#panel").panel("close");
event.stopImmediatePropagation(); }
} );
//mopidy.on("state:online", debug);
});
function debug() {
if (mopidy.tracklist === undefined) {
alert('Broke at ' + new Date());
} else {
setTimeout(debug, 100);
}
}
>>>>>>> develop

9
flatclient/js/library.js
View File

@ -46,7 +46,11 @@ function processSearchResults(resultArr) {
var results = {'tracks': [], 'artists': [], 'albums': []};
var emptyResult = true;
<<<<<<< HEAD
console.log(resultArr, 'resultArr');
=======
// console.log(resultArr, 'resultArr');
>>>>>>> develop
for (var i = 0; i < resultArr.length; ++i) {
for (var prop in results) {
@ -134,7 +138,12 @@ function processSearchResults(resultArr) {
$('#expandsearch').show();
// Track results
<<<<<<< HEAD
playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
=======
// playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
resultsToTables(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
>>>>>>> develop
setSongInfo();
showLoading(false);

BIN
flatclient/settings/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

29
flatclient/settings/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mopidy Settings</title>
<link rel="stylesheet" type="text/css" href="mopidy.css">
</head>
<body>
<div class="box focus">
<h1>Settings</h1>
<h2>Spotify</h2>
<p>Please provide your username, password to enable playing music from Spotify.</p>
<form action="/updateSettings" method="post">
<p>Username</p>
<input type="text" name="SPOTIFY_USERNAME" value="" size="15" maxlength="40"/>
<p>Password</p>
<input type="password" name="SPOTIFY_PASSWORD" value="" size="10" maxlength="40"/>
<h2>Last.FM</h2>
<p>Please provide the username, password to enable scrobbling via Last.FM.</p>
<p>Username</p>
<input type="text" name="LASTFM_USERNAME" value="" size="15" maxlength="40"/>
<p>Password</p>
<input type="password" name="LASTFM_PASSWORD" value="" size="10" maxlength="40"/>
<p><input type="submit" value="Update"/></p>
</form>
</div>
</body>
</html>

75
flatclient/settings/mopidy.css Normal file
View File

@ -0,0 +1,75 @@
html {
background: #e8ecef;
color: #555;
font-family: "Droid Serif", "Georgia", "Times New Roman", "Palatino",
"Hoefler Text", "Baskerville", serif;
font-size: 150%;
line-height: 1.4em;
}
body {
max-width: 20em;
margin: 0 auto;
}
div.box {
background: white;
border-radius: 5px;
box-shadow: 5px 5px 5px #d8dcdf;
margin: 2em 0;
padding: 1em;
}
div.box.focus {
background: #465158;
color: #e8ecef;
}
div.icon {
float: right;
}
h1, h2 {
font-family: "Ubuntu", "Arial", "Helvetica", "Lucida Grande",
"Verdana", "Gill Sans", sans-serif;
line-height: 1.1em;
}
h2 {
margin: 0.2em 0 0;
}
p.next {
text-align: right;
}
a {
color: #555;
text-decoration: none;
border-bottom: 1px dotted;
}
img {
border: 0;
}
code, pre {
font-family: "Droid Sans Mono", Menlo, Courier New, Courier, Mono, monospace;
font-size: 9pt;
line-height: 1.2em;
padding: 0.5em 1em;
margin: 1em 0;
white-space: pre;
overflow: auto;
}
.box code,
.box pre {
background: #e8ecef;
color: #555;
}
.box a {
color: #465158;
}
.box a:hover {
opacity: 0.8;
}
.box.focus a {
color: #e8ecef;
}
.center {
text-align: center;
}
#ws-console {
height: 200px;
overflow: auto;
}

25
flatclient/system.html Executable file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/controls.js"></script>
<script src="js/functionsvars.js"></script>
</head>
<body>
<div data-role="page" class="dialog-actionsheet">
<div data-role="content" data-theme="c">
<h2>System</h2>
<a href="#" onclick="haltSystem(); return false;" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Shutdown</a>
<a href="#" onclick="rebootSystem(); return false;" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b">Reboot</a>
<a href="index.html" data-role="button" data-rel="back" data-theme="a">Cancel</a>
</div>
</div>
</body>
</html>