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

first steps to radio support

Browse Source 
better slider
more robust songinfo
 feedback for buttons
no saving of stations (yet)
This commit is contained in:
Wouter van Wijk 2013-08-31 00:19:38 +02:00
parent 210e53b622
commit 006396cc2a
5 changed files with 159 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
webclient/images/icons/mic_18x24.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 B

19
webclient/index.html
View File

@ -158,7 +158,7 @@
<div id="slidercontainer" class="ui-block-c">
<span id="songelapsed" class="pull-left"> 0:00 </span>
<span id="songlength" class="pull-right"> 0:00 </span>
<label for="trackslider" class="ui-hidden-accessible">Position</label>
<label for="trackslider" disabled="disabled" class="ui-hidden-accessible">Position</label>
<input id="trackslider" name="trackslider" data-mini="true" type="range" onchange="doSeekPos(this.value);" />
</div>
@ -233,6 +233,20 @@
</div>
<!-- search div -->
<div data-role="content" class="pane" id="radiopane">
<h4>Radio</h4>
<div class="">
<form>
<input id="radioinput" placeholder="Playlist URI" class="span2" data-clear-btn="true" onkeypress="return radioPressed(event.keyCode);" id="appendedInputButton" type="text" />
<button class="btn" type="button" onclick="return addRadioUri();" >
Play
</button>
</form>
</div>
<ul id="radiostationstable" class="table"></ul>
</div>
<div data-role="footer" id="footer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
<ul>
@ -245,6 +259,9 @@
<li id="navsearch">
<a href="#search" onclick="switchContent('search' ); return false;" ><img src="images/icons/magnifying_glass_24x24.png" /> Search </a>
</li>
<li id="navradio">
<a href="#radio" onclick="switchContent('radio' ); return false;" ><img src="images/icons/mic_18x24.png" /> Radio </a>
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

91
webclient/js/controls.js vendored
View File

@ -104,6 +104,7 @@ function setPlayState(nwplay) {
//play or pause
function doPlay() {
toast('Please wait...', 250);
if (!play) {
mopidy.playback.play();
} else {
@ -113,10 +114,12 @@ function doPlay() {
}
function doPrevious() {
toast('Playing previous track...');
mopidy.playback.previous();
}
function doNext() {
toast('Playing next track...');
mopidy.playback.next();
}
@ -179,20 +182,23 @@ function doRepeat() {
function doSeekPos(value) {
var val = $("#trackslider").val();
newposition = Math.round(val);
clearTimeout(seekTimer);
if (!initgui) {
pauseTimer();
//set timer to not trigger it too much
posChanging = true;
seekTimer = setTimeout(triggerPos, 200);
clearTimeout(seekTimer);
$("#songelapsed").html(timeFromSeconds(val / 1000));
seekTimer = setTimeout(triggerPos, 500);
}
}
function triggerPos() {
if (mopidy) {
mopidy.playback.stop();
posChanging = true;
// mopidy.playback.pause();
// console.log(newposition);
mopidy.playback.seek(newposition);
mopidy.playback.resume();
// mopidy.playback.resume();
resumeTimer();
posChanging = false;
}
}
@ -227,15 +233,15 @@ function setVolume(value) {
function doVolume(value) {
if (!initgui) {
volumeChanging = true;
volumeChanging = value;
clearInterval(volumeTimer);
volumeTimer = setTimeout(triggerVolume, 2000);
mopidy.playback.setVolume(parseInt(value));
volumeTimer = setTimeout(triggerVolume, 500);
}
}
function triggerVolume() {
volumeChanging = false;
mopidy.playback.setVolume(parseInt(volumeChanging));
volumeChanging = 0;
}
function doMute() {
@ -265,7 +271,9 @@ function updateTimer() {
function resumeTimer() {
pauseTimer();
posTimer = setInterval(updateTimer, TRACK_TIMER);
if(songlength > 0) {
posTimer = setInterval(updateTimer, TRACK_TIMER);
}
}
function initTimer() {
@ -277,3 +285,66 @@ function initTimer() {
function pauseTimer() {
clearInterval(posTimer);
}
/*********************************
* Radio
*********************************/
function radioPressed(key) {
if (key == 13) {
addRadioUri();
return false;
}
return true;
}
function addRadioUri(value) {
var value = value || $('#radioinput').val();
if (validUrl(value)) {
showLoading(true);
//stop directly, for user feedback
mopidy.playback.stop(true);
//hide ios/android keyboard
document.activeElement.blur();
$("input").blur();
clearQueue();
mopidy.tracklist.add(null,null, value );
//add station to list and check for doubles
for (var key in radioStations) {
rs = radioStations[key];
if (rs[1] == value) {
delete radioStations[key];
}
};
radioStations.unshift(['', value]);
mopidy.playback.play();
updateRadioStations();
showLoading(false);
} else {
toast ('No valid url!');
}
return false;
}
function updateRadioStations() {
var tmp = '';
$('#radiostationstable').empty();
var child = '';
for (var key in radioStations) {
var rs = radioStations[key];
if(rs) {
name = rs[0] || rs[1];
child = '<li><a href="#" onclick="return addRadioUri(\'' + rs[1] + '\');">';
child += '<h1>' + name + '</h1></a></li>';
tmp += child;
}
};
$('#radiostationstable').html(tmp);
}
function initRadio() {
radioStations.push(['3FM', 'http://icecast.omroep.nl/3fm-bb-mp3']);
radioStations.push(['', 'http://icecast-bnr.cdp.triple-it.nl/bnr_mp3_128_03']);
radioStations.push(['Arrow', 'http://81.173.3.132:8082']);
radioStations.push(['', 'http://icecast.omroep.nl/radio1-bb-mp3']);
updateRadioStations();
}

13
webclient/js/functionsvars.js
View File

@ -72,6 +72,8 @@ TRACK_TIMER = 1000;
//check status timer, every 5 or 10 sec
STATUS_TIMER = 10000;
var radioStations = [];
/*******
*
*/
@ -307,4 +309,13 @@ function toast (message, delay) {
}
}
/* from stackoverflow */
function validUrl(str) {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
return ( pattern.test(str) );
}

66
webclient/js/gui.js
View File

@ -9,6 +9,7 @@
function resetSong() {
if (!posChanging) {
pauseTimer();
setPlayState(false);
setPosition(0);
var data = new Object;
@ -106,7 +107,7 @@ function setSongInfo(data) {
if (this.id == 'artiststable-' + data.uri) {
$(this).addClass('currenttrack2');
}
});
});1
$('#albumstable li').each(function() {
$(this).removeClass("currenttrack2");
if (this.id == 'albumstable-' + data.uri) {
@ -125,33 +126,45 @@ function setSongInfo(data) {
artistshtml = '';
artiststext = '';
for (var j = 0; j < data.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
artiststext += data.artists[j].name;
if (j != data.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
if (data.album) {
$("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
}
$("#modalname").html(data.name);
getCover(artiststext, data.album.name, '#infocover, #controlspopupimage', 'extralarge');
var arttmp = 'Artist';
if (data.artists.length > 1) {
arttmp += 's';
if (!data.length || data.length == 0) {
songlength = 0;
$("#songlength").html('');
pauseTimer();
$('#trackslider').slider('disable');
} else {
songlength = data.length;
$("#songlength").html(timeFromSeconds(data.length / 1000));
$('#trackslider').slider('enable');
}
if(data.artists) {
for (var j = 0; j < data.artists.length; j++) {
artistshtml += '<a href="#" onclick="return showArtist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
artiststext += data.artists[j].name;
if (j != data.artists.length - 1) {
artistshtml += ', ';
artiststext += ', ';
}
}
var arttmp = 'Artist';
if (data.artists.length > 1) {
arttmp += 's';
}
}
$("#modalartist").html(arttmp + ': ' + artistshtml);
$("#trackslider").attr("min", 0);
songlength = data.length;
$("#trackslider").attr("max", data.length);
$("#songlength").html(timeFromSeconds(data.length / 1000));
resizeMb();
}
@ -355,7 +368,24 @@ $(document).ready(function() {
$(window).resize(function() {
resizeMb();
});
initRadio();
/* $(document).keypress( function (event) {
if (event.target.tagName != 'INPUT') {
event.preventDefault();
switch(event.which) {
case 'p':
doPlay();
break;
case ']':
doNext();
break;
case '[':
doPrevious();
break;
}
}
});
*/
});
$(document).bind("pageinit", function() {