533 lines
15 KiB
JavaScript
533 lines
15 KiB
JavaScript
$(function(){
|
|
|
|
var last_volume = 0;
|
|
|
|
$(document).ready(function () {
|
|
|
|
// Player icon pause/stop
|
|
var vid = document.getElementById("player");
|
|
vid.onwaiting = function () {
|
|
$('#playbutton').attr("class", "buffering");
|
|
};
|
|
vid.onplaying = function () {
|
|
$('#playbutton').attr("class", "pause");
|
|
};
|
|
vid.onpause = function () {
|
|
$('#playbutton').attr("class", "play");
|
|
};
|
|
|
|
// Scroll event handler
|
|
$(window).scroll(function(){
|
|
var station_list = $("#app-content-files");
|
|
if ( ( $(window).scrollTop() + $(window).height() ) == $(document).height() ) {
|
|
if(!station_list.data("didfire")) {
|
|
station_list.data("didfire", true);
|
|
if ($('li.nav-files').hasClass('active')){
|
|
radio_query(1, "");
|
|
} else if ($('li.nav-recent').hasClass('active')) {
|
|
radio_query(2, "");
|
|
} else if ($('li.nav-favorites').hasClass('active')) {
|
|
console.log("todo");
|
|
} else {
|
|
var query = $('#searchbox').val();
|
|
radio_query(0, query);
|
|
};
|
|
var ref = station_list;
|
|
setTimeout(function(){
|
|
ref.data("didfire", false);
|
|
}, 500);
|
|
};
|
|
};
|
|
});
|
|
|
|
});
|
|
|
|
searchTimeout = null;
|
|
var scheduled;
|
|
|
|
function isElementOverflowing(element) {
|
|
var overflowX = element.offsetWidth < element.scrollWidth,
|
|
overflowY = element.offsetHeight < element.scrollHeight;
|
|
|
|
return (overflowX || overflowY);
|
|
}
|
|
|
|
function wrapContentsInMarquee(element) {
|
|
var marquee = document.createElement('marquee'),
|
|
contents = element.innerText;
|
|
|
|
marquee.innerText = contents;
|
|
element.innerHTML = '';
|
|
element.appendChild(marquee);
|
|
}
|
|
|
|
/* ==============
|
|
// EVENTS //
|
|
/===============*/
|
|
|
|
/* Click on a radio station (table entry) and play it */
|
|
$('body').on('click', '.filename', function(e) {
|
|
e.preventDefault();
|
|
$('#playbutton').attr("class", "buffering");
|
|
var stationid = $(this).parent().attr('data-id');
|
|
var stationname = $(this).parent().find('.nametext').text();
|
|
action_play(stationid);
|
|
$('#player').attr('data-id',stationid);
|
|
$("#station_metadata").html("Playing: "+stationname);
|
|
|
|
/* dirty fix missing background color for first td */
|
|
$('tbody tr').css("background-color", "white");
|
|
$(this).parent().css("background-color", "#f8f8f8");
|
|
|
|
var element = document.getElementById('station_metadata');
|
|
if (isElementOverflowing(element)) {
|
|
wrapContentsInMarquee(element);
|
|
};
|
|
if (!scheduled){
|
|
schedule_get_metadata(stationid);
|
|
};
|
|
});
|
|
|
|
/* Save station to favorites */
|
|
$('body').on('click', '.favorite', function() {
|
|
var stationid = $(this).parent().parent().attr('data-id');
|
|
action_favorite(stationid);
|
|
});
|
|
|
|
/* Playbutton click */
|
|
$('#playbutton').click(function() {
|
|
var music = document.getElementById('player');
|
|
if (music.paused && $("#player").attr("src") != "") {
|
|
music.play();
|
|
} else {
|
|
music.pause();
|
|
}
|
|
});
|
|
|
|
/* Click on menus */
|
|
$('a.nav-icon-files').click(function(e) {
|
|
e.preventDefault();
|
|
switch_menu(0);
|
|
});
|
|
|
|
$('a.nav-icon-recent').click(function(e) {
|
|
e.preventDefault();
|
|
switch_menu(1);
|
|
});
|
|
|
|
$('a.nav-icon-favorites').click(function(e) {
|
|
e.preventDefault();
|
|
switch_menu(2);
|
|
});
|
|
|
|
/* ==============
|
|
// ACTIONS //
|
|
/===============*/
|
|
|
|
function schedule_get_metadata(stationid){
|
|
scheduled = true;
|
|
var stationid = $('#player').attr('data-id');
|
|
req = $.get('https://onny.project-insanity.org/getmetadata/'+stationid, function(data) {
|
|
if (data.hasOwnProperty('metadata')) {
|
|
var metadata = data['metadata'].toString();
|
|
if (metadata != $("#station_metadata").text()) {
|
|
$("#station_metadata").html(metadata);
|
|
var element = document.getElementById('station_metadata');
|
|
if (isElementOverflowing(element)) {
|
|
wrapContentsInMarquee(element);
|
|
};
|
|
};
|
|
setTimeout(function(){schedule_get_metadata(stationid);}, 10000);
|
|
} else {
|
|
scheduled = false;
|
|
};
|
|
}).fail(function(){
|
|
scheduled = false;
|
|
});
|
|
};
|
|
|
|
function action_favorite(stationid){
|
|
|
|
var removed = false;
|
|
var stations = [];
|
|
var baseUrl = OC.generateUrl('/apps/radio');
|
|
|
|
$.get(baseUrl + '/stations', function ( data ) {
|
|
for (var station in data) {
|
|
if (data[station]["stationid"] == stationid){
|
|
removed = true;
|
|
$.ajax({
|
|
url: baseUrl + '/stations/' + data[station]["id"],
|
|
method: 'DELETE'
|
|
}).done(function(){
|
|
$( "tr[data-id='" + stationid + "']" ).find('.icon-stationfav').removeClass('starred');
|
|
});
|
|
};
|
|
};
|
|
|
|
if (removed == true) {
|
|
return true;
|
|
} else {
|
|
var station = {
|
|
"stationid": stationid
|
|
};
|
|
$.ajax({
|
|
url: baseUrl + '/stations',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(station)
|
|
}).done(function(){
|
|
$( "tr[data-id='"+stationid+"']" ).find('.icon-stationfav').addClass('starred');
|
|
});
|
|
};
|
|
});
|
|
};
|
|
|
|
function action_play(stationid){
|
|
$.ajax({
|
|
method: "GET",
|
|
url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
|
|
dataType: 'json',
|
|
success: function(data){
|
|
var streamurl = data['url'];
|
|
$("#player").attr("src", streamurl);
|
|
$('#player').trigger('play');
|
|
}
|
|
});
|
|
};
|
|
|
|
function render_results(data){
|
|
|
|
var baseUrl = OC.generateUrl('/apps/radio');
|
|
$.get(baseUrl + '/stations', function ( fav_stations ) {
|
|
|
|
if (data.length == 0) {
|
|
$('#filestable').hide();
|
|
$('#emptycontent').addClass('hidden');
|
|
$('.nofilterresults').removeClass('hidden');
|
|
$('.loading').addClass('hidden');
|
|
} else {
|
|
$('#emptycontent').addClass('hidden');
|
|
$('#filestable').show();
|
|
$('.nofilterresults').addClass('hidden');
|
|
$('.loading').addClass('hidden');
|
|
};
|
|
|
|
$.each(data, function(i, station) {
|
|
|
|
var isstarred = ""
|
|
|
|
for (var fav_station in fav_stations) {
|
|
if (fav_stations[fav_station]["stationid"] == station['id']) {
|
|
isstarred = "starred";
|
|
break;
|
|
}
|
|
};
|
|
|
|
$('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
|
|
<td class="favcolumn">\
|
|
<a href="#" class="favorite">\
|
|
<span class="icon-stationfav ' + isstarred + '"></span>\
|
|
<span class="hidden-visually">Favorite</span>\
|
|
</a>\
|
|
</td>\
|
|
<td class="filename">\
|
|
<label for="select-files-3">\
|
|
<div class="thumbnail" style="background-image:url('+station['favicon']+'); background-size: 32px;"></div>\
|
|
</label>\
|
|
<a class="name" href="#">\
|
|
<span class="nametext"><span class="innernametext">'+station['name']+'</span></span>\
|
|
</a>\
|
|
</td>\
|
|
</tr>');
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
function action_load_favorites(){
|
|
var stations = []
|
|
var baseUrl = OC.generateUrl('/apps/radio');
|
|
|
|
$.get(baseUrl + '/stations', function ( data ) {
|
|
for (var station in data) {
|
|
stations.push(data[station]["stationid"]);
|
|
};
|
|
if (stations.length == 0) {
|
|
$('#filestable').hide();
|
|
$('#emptycontent').removeClass('hidden');
|
|
$('.loading').addClass('hidden');
|
|
} else {
|
|
query_stations(stations);
|
|
};
|
|
});
|
|
};
|
|
|
|
function query_stations(station_ids){
|
|
var station_array = [];
|
|
|
|
station_ids.forEach(function (station_id, idx) {
|
|
|
|
$.ajax({
|
|
method: "GET",
|
|
url: "https://www.radio-browser.info/webservice/json/stations/byid/"+station_ids[idx],
|
|
dataType: 'json',
|
|
}).success( function(data){
|
|
station_array = station_array.concat(data);
|
|
if (station_ids.length == (idx+1)){
|
|
render_results(station_array);
|
|
};
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
function radio_query(type, query){
|
|
var offset = $('tbody > tr').length;
|
|
switch (type) {
|
|
case 0:
|
|
var url = "https://www.radio-browser.info/webservice/json/stations/search";
|
|
break;
|
|
case 1:
|
|
var url = "https://www.radio-browser.info/webservice/json/stations/topclick";
|
|
break;
|
|
case 2:
|
|
var url = "https://www.radio-browser.info/webservice/json/stations/lastchange";
|
|
break;
|
|
};
|
|
$.ajax({
|
|
method: "POST",
|
|
url: url,
|
|
data: {
|
|
name: query,
|
|
limit: 20,
|
|
offset: offset
|
|
},
|
|
dataType: 'json',
|
|
}).success( function(data){
|
|
render_results(data);
|
|
});
|
|
};
|
|
|
|
function load_menu_state() {
|
|
var menu_state = 0;
|
|
var baseUrl = OC.generateUrl('/apps/radio/getMenuState');
|
|
$.get(baseUrl, function ( data ) {
|
|
if ("menu_state" in data) {
|
|
menu_state = data["menu_state"];
|
|
}
|
|
switch_menu(menu_state);
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function save_menu_state(menu_state) {
|
|
var baseUrl = OC.generateUrl('/apps/radio/saveMenuState');
|
|
var settings = {
|
|
"menu_state": menu_state
|
|
};
|
|
$.ajax({
|
|
url: baseUrl,
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(settings)
|
|
}).done(function(data){
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function switch_menu(type) {
|
|
|
|
var state = Number(type);
|
|
|
|
$('#filestable').hide();
|
|
$('#emptycontent').addClass('hidden');
|
|
$('.nofilterresults').addClass('hidden');
|
|
$('.loading').removeClass('hidden');
|
|
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(function(){
|
|
$('#app-navigation').find('li').removeClass("active");
|
|
$("tbody > tr").remove();
|
|
save_menu_state(state)
|
|
switch (state) {
|
|
case 0:
|
|
history.pushState("", "", "#top");
|
|
$('li.nav-files').addClass('active');
|
|
radio_query(1);
|
|
break;
|
|
case 1:
|
|
history.pushState("", "", "#recent");
|
|
$('li.nav-recent').addClass('active');
|
|
radio_query(2);
|
|
break;
|
|
case 2:
|
|
history.pushState("", "", "#favorites");
|
|
$('li.nav-favorites').addClass('active');
|
|
action_load_favorites();
|
|
break;
|
|
}
|
|
}, 500);
|
|
};
|
|
|
|
// Search function
|
|
new OCA.Search(function (query) {
|
|
$('#app-navigation').find('li').removeClass("active");
|
|
$("tbody > tr").remove();
|
|
radio_query(0, query);
|
|
}, function (arg) {
|
|
switch_menu(0);
|
|
});
|
|
|
|
function debounce(func, wait, immediate) {
|
|
var timeout;
|
|
return function() {
|
|
var context = this,
|
|
args = arguments;
|
|
var later = function() {
|
|
timeout = null;
|
|
if (!immediate) func.apply(context, args);
|
|
};
|
|
var callNow = immediate && !timeout;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
if (callNow) func.apply(context, args);
|
|
};
|
|
};
|
|
|
|
// Volume slider
|
|
$('#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;
|
|
if (ui.value < 0.2) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","silent");
|
|
}
|
|
if (ui.value > 0.5) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","full");
|
|
}
|
|
if (ui.value < 0.5 && ui.value > 0.2) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","mid");
|
|
}
|
|
}
|
|
});
|
|
|
|
$("#volumeslider").on("slidestop", debounce(function(e, ui) {
|
|
save_volume_state(ui.value);
|
|
}, 700)
|
|
);
|
|
|
|
$("#volumeicon").on("click", function(e) {
|
|
if (player.volume > 0) {
|
|
last_volume = player.volume;
|
|
player.volume = 0;
|
|
$('#volumeslider').slider('value',0);
|
|
save_volume_state(0);
|
|
} else {
|
|
if (!last_volume == 0) {
|
|
player.volume = last_volume;
|
|
$('#volumeslider').slider('value',last_volume);
|
|
save_volume_state(last_volume);
|
|
} else {
|
|
player.volume = 1;
|
|
$('#volumeslider').slider('value',1);
|
|
save_volume_state(1);
|
|
}
|
|
}
|
|
if (player.volume < 0.2) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","silent");
|
|
}
|
|
if (player.volume > 0.5) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","full");
|
|
}
|
|
if (player.volume < 0.5 && player.volume > 0.2) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","mid");
|
|
}
|
|
});
|
|
|
|
function load_volume_state() {
|
|
var volume_state = 0;
|
|
var baseUrl = OC.generateUrl('/apps/radio/getVolumeState');
|
|
$.get(baseUrl, function ( data ) {
|
|
if ("volume_state" in data) {
|
|
volume_state = data["volume_state"];
|
|
if (volume_state == "") {
|
|
player.volume = 1;
|
|
last_volume = 1;
|
|
$('#volumeslider').slider('value',1);
|
|
} else {
|
|
last_volume = volume_state;
|
|
player.volume = Number(volume_state);
|
|
$('#volumeslider').slider('value',Number(volume_state));
|
|
if (volume_state < 0.2) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","silent");
|
|
}
|
|
if (volume_state > 0.5) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","full");
|
|
}
|
|
if (volume_state < 0.5 && volume_state > 0.2) {
|
|
$("#volumeicon").removeClass();
|
|
$("#volumeicon").attr("class","mid");
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function save_volume_state(volume_state) {
|
|
var baseUrl = OC.generateUrl('/apps/radio/saveVolumeState');
|
|
var settings = {
|
|
"volume_state": volume_state
|
|
};
|
|
$.ajax({
|
|
url: baseUrl,
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(settings)
|
|
}).done(function(data){
|
|
return true;
|
|
});
|
|
}
|
|
|
|
// On app start, load top list
|
|
if(window.location.hash) {
|
|
var hash = String(window.location.hash.replace('#',''));
|
|
switch(hash) {
|
|
case "top":
|
|
switch_menu(0);
|
|
break;
|
|
case "recent":
|
|
switch_menu(1);
|
|
break;
|
|
case "favorites":
|
|
switch_menu(2);
|
|
break;
|
|
default:
|
|
switch_menu(0);
|
|
break;
|
|
}
|
|
} else {
|
|
load_menu_state();
|
|
};
|
|
|
|
// Load volume state
|
|
load_volume_state();
|
|
|
|
});
|