diff --git a/css/main.css b/css/main.css index bed79ab..2b348d9 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,22 @@ +#playbutton{ + height:60px; + width: 60px; + margin: 15px; + border: none; + background-size: 100%; + background-position: center; + display: inline;; +} +#volumeslider{ + width: 120px; + display: inline-block; + margin-top: 0px; + margin-left: 10px; +} +.play{background: url('../img/play.png') no-repeat;} +.pause{background: url('../img/pause.png') no-repeat;} + + /* SETTINGS */ #files-setting-showhidden { padding-bottom: 8px; diff --git a/img/pause.png b/img/pause.png new file mode 100644 index 0000000..fe93c00 Binary files /dev/null and b/img/pause.png differ diff --git a/img/play.png b/img/play.png new file mode 100644 index 0000000..6e5905d Binary files /dev/null and b/img/play.png differ diff --git a/js/main.js b/js/main.js index ea8951a..0bc50da 100644 --- a/js/main.js +++ b/js/main.js @@ -2,11 +2,13 @@ $(function(){ searchTimeout = null; - /*$('body').on('click', 'tr', function() { + /* Click on a radio station (table entry) and play it */ + $('body').on('click', 'tr', function() { var stationid = $(this).attr('data-id'); play_station(stationid); - }); */ + }); +/* $('body').on('click', 'tr .icon', function() { alert('test'); }); @@ -14,16 +16,18 @@ $(function(){ $('.icon-star').click(function (){ alert('test'); }); + */ function play_station(stationid){ $.ajax({ method: "GET", - url: "http://www.radio-browser.info/webservice/v2/json/url/"+stationid, + url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid, dataType: 'json', success: function(data){ var sourceUrl = data['url']; $("#player").attr("src", sourceUrl); $('#player').trigger('play'); + $('#playbutton').attr("class", "pause"); return true; } }); @@ -146,5 +150,31 @@ $(function(){ } }); + $('#playbutton').click(function() { + var music = document.getElementById('player'); + if (music.paused && $("#player").attr("src") != "") { + music.play(); + playbutton.className = ""; + playbutton.className = "pause"; + } else { + music.pause(); + playbutton.className = ""; + playbutton.className = "play"; + } + }); + + $('#volumeslider').slider({ + orientation: "horizontal", + value: player.volume, + min: 0, + max: 1, + range: 'min', + animate: true, + step: .1, + slide: function(e, ui) { + player.volume = ui.value; + } + }); + switch_menu(0); }); diff --git a/templates/main.php b/templates/main.php index 703d269..594495d 100755 --- a/templates/main.php +++ b/templates/main.php @@ -24,7 +24,9 @@