From 006396cc2a7fe93bd0775be3ed045b97edf45855 Mon Sep 17 00:00:00 2001 From: Wouter van Wijk Date: Sat, 31 Aug 2013 00:19:38 +0200 Subject: [PATCH] first steps to radio support better slider more robust songinfo feedback for buttons no saving of stations (yet) --- webclient/images/icons/mic_18x24.png | Bin 0 -> 371 bytes webclient/index.html | 19 +++++- webclient/js/controls.js | 91 ++++++++++++++++++++++++--- webclient/js/functionsvars.js | 13 +++- webclient/js/gui.js | 66 +++++++++++++------ 5 files changed, 159 insertions(+), 30 deletions(-) create mode 100755 webclient/images/icons/mic_18x24.png diff --git a/webclient/images/icons/mic_18x24.png b/webclient/images/icons/mic_18x24.png new file mode 100755 index 0000000000000000000000000000000000000000..2eb65271f60e5ae2bcfa74bd6033b9b92580f5c5 GIT binary patch literal 371 zcmV-(0gV2MP) 0:00 0:00 - + @@ -233,6 +233,20 @@ +
+

Radio

+
+
+ + +
+
+
    +
    + + diff --git a/webclient/js/controls.js b/webclient/js/controls.js index 254644d..228900b 100755 --- a/webclient/js/controls.js +++ b/webclient/js/controls.js @@ -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 = '
  • '; + child += '

    ' + name + '

    • '; + 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(); +} \ No newline at end of file diff --git a/webclient/js/functionsvars.js b/webclient/js/functionsvars.js index f99dcac..16e09cb 100755 --- a/webclient/js/functionsvars.js +++ b/webclient/js/functionsvars.js @@ -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) ); +} \ No newline at end of file diff --git a/webclient/js/gui.js b/webclient/js/gui.js index 1c5a457..12a0d2f 100755 --- a/webclient/js/gui.js +++ b/webclient/js/gui.js @@ -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 += '' + data.artists[j].name + ''; - artiststext += data.artists[j].name; - if (j != data.artists.length - 1) { - artistshtml += ', '; - artiststext += ', '; - } - } if (data.album) { $("#modalalbum").html('Album: ' + data.album.name + ''); + 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 += '' + data.artists[j].name + ''; + 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() {