Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

working on category browser

Browse Source
This commit is contained in:
Jonas Heinrich 2019-05-11 17:03:20 +02:00
parent 2af0acf591
commit 386036fc4c
5 changed files with 169 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -1,4 +1,12 @@
## 0.6.4 – 2018-XX
## 0.6.5 - 2019-05
### Added
- Smooth audio fade-in/out when changing stations
[#80](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/80) @onny
### Fixed
- Prevent list from jumping back to top when adding station to favorites
[#85](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/85) @onny
## 0.6.4 – 2019-01
### Added
- Support for Nextcloud 15
[#82](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/82) @onny

250
js/main.js
View File

@ -1,9 +1,12 @@
var MODULE = (function (radio) {
var version = "0.6.3"
$(document).ready(function () {
var version = "0.6.5";
var current_stationid = "";
var searchTimeout = null;
var scheduled = false;
// Scroll event handler
$(window).scroll(function(){
var station_list = $("#app-content-files");
@ -30,49 +33,15 @@ var MODULE = (function (radio) {
});
searchTimeout = null;
var scheduled;
/* ==============
// 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();
radio.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 (radio.isElementOverflowing(element)) {
radio.wrapContentsInMarquee(element);
};
if (!scheduled){
radio.schedule_get_metadata(stationid);
};
});
/* Save station to favorites */
$('body').on('click', '.favorite', function() {
var stationid = $(this).parent().parent().attr('data-id');
radio.action_favorite(stationid);
});
/* ==============
// ACTIONS //
/===============*/
radio.schedule_get_metadata = function(stationid){
scheduled = true;
var stationid = $('#player').attr('data-id');
radio.scheduled = true;
var stationid = radio.current_stationid;
req = $.get('https://onny.project-insanity.org/getmetadata/'+stationid, function(data) {
if (data.hasOwnProperty('metadata')) {
var metadata = data['metadata'].toString();
@ -85,34 +54,30 @@ var MODULE = (function (radio) {
};
setTimeout(function(){radio.schedule_get_metadata(stationid);}, 10000);
} else {
scheduled = false;
radio.scheduled = false;
};
}).fail(function(){
scheduled = false;
radio.scheduled = false;
});
};
radio.action_favorite = function(stationid){
var removed = false;
var stations = [];
var exists = false;
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');
});
exists = true;
};
};
if (removed == true) {
return true;
if (exists == true) {
$.ajax({
url: baseUrl + '/stations/' + data[station]["id"],
method: 'DELETE'
}).done(function(){
console.log("delete ", stationid);
$( "tr[data-src='#station/"+stationid+"']").find('.icon-stationfav').removeClass('starred');
});
} else {
var station = {
"stationid": stationid
@ -123,13 +88,13 @@ var MODULE = (function (radio) {
contentType: 'application/json',
data: JSON.stringify(station)
}).done(function(){
$( "tr[data-id='"+stationid+"']" ).find('.icon-stationfav').addClass('starred');
$( "tr[data-src='#station/"+stationid+"']" ).find('.icon-stationfav').addClass('starred');
});
};
});
};
radio.render_results = function(data){
radio.parse_results = function(data){
var baseUrl = OC.generateUrl('/apps/radio');
$.get(baseUrl + '/stations', function ( fav_stations ) {
@ -147,32 +112,14 @@ var MODULE = (function (radio) {
};
$.each(data, function(i, station) {
var isstarred = ""
var isstarred = false;
for (var fav_station in fav_stations) {
if (fav_stations[fav_station]["stationid"] == station['id']) {
isstarred = "starred";
isstarred = true;
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>');
radio.render_entry("station", isstarred, '#station/'+station['id'], station['favicon'], station['name']);
});
});
@ -203,7 +150,7 @@ var MODULE = (function (radio) {
station_ids.forEach(function (station_id, idx) {
var url = "https://www.radio-browser.info/webservice/json/stations/byid/"+station_ids[idx];
$.getJSON( url , {"User-Agent": "Nextcloud Radio/"+version }, function( data ) {
$.getJSON( url , {"User-Agent": "Nextcloud Radio/"+radio.version }, function( data ) {
if (data.length === 0) {
station_array = station_array.concat([{'id': station_id, 'name': 'Broken radio station entry :(', 'favicon': '', 'url': ''}])
@ -222,7 +169,7 @@ var MODULE = (function (radio) {
});
});
radio.render_results(station_array_new);
radio.parse_results(station_array_new);
};
});
@ -230,31 +177,48 @@ var MODULE = (function (radio) {
};
radio.radio_query = function(type, query){
radio.radio_query = function(hashurl){
console.log(hashurl);
var offset = $('tbody > tr').length;
switch (type) {
case 0:
var url = "https://www.radio-browser.info/webservice/json/stations/search";
var query = "";
var api_baseurl = "https://www.radio-browser.info/webservice/json/";
switch (hashurl) {
case "#top":
var query_url = "stations/topclick";
break;
case 1:
var url = "https://www.radio-browser.info/webservice/json/stations/topclick";
case "#recent":
var query_url = "stations/lastchange";
break;
case 2:
var url = "https://www.radio-browser.info/webservice/json/stations/lastchange";
case "#categories/countries":
var query_url = "countries";
break;
case "#categories/states":
var query_url = "states";
break;
case "#categories/languages":
var query_url = "languages";
break;
case "#categories/tags":
var query_url = "tags";
break;
case (hashurl.match(/^#search/) || {}).input:
var query_url = "stations/search";
var query = hashurl.substring(8);
break;
};
console.log(api_baseurl + query_url, query);
$.ajax({
method: "POST",
url: url,
url: api_baseurl + query_url,
data: {
name: query,
limit: 20,
"User-Agent": "Nextcloud Radio/"+version,
"User-Agent": "Nextcloud Radio/"+radio.version,
offset: offset
},
dataType: 'json',
}).success( function(data){
radio.render_results(data);
radio.parse_results(data);
});
};
@ -262,80 +226,68 @@ var MODULE = (function (radio) {
new OCA.Search(function (query) {
$('#app-navigation').find('li').removeClass("active");
$("tbody > tr").remove();
radio.radio_query(0, query);
radio.radio_query("#search/"+query);
}, function (arg) {
radio.switch_menu(0);
});
radio.action_load_categories = function (){
$('#emptycontent').addClass('hidden');
$('#filestable').show();
$('.nofilterresults').addClass('hidden');
$('.loading').addClass('hidden');
$('tbody').append('<tr>\
radio.render_entry = function(entry_type, starred, hashurl, iconurl, title){
if (entry_type == "folder") {
var icon_class = "icon-stationfav-disabled";
var icon = "icon-filetype-folder";
} else {
var icon_class = "icon-stationfav";
var icon = '" style="background-image:url('+iconurl+'); background-size: 32px;';
}
if (starred) {
var starred = "starred";
} else {
var starred = "";
}
$('tbody').append('<tr data-src="'+hashurl+'">\
<td class="favcolumn">\
<a href="#" class="favorite">\
<span class="icon-stationfav-disabled"></span>\
<span class="'+icon_class+' '+starred+'"></span>\
<span class="hidden-visually">Favorite</span>\
</a>\
</td>\
<td class="filename">\
<label for="select-files-3">\
<div class="thumbnail icon-filetype-folder" background-size: 32px;"></div>\
<div class="thumbnail '+icon+'"></div>\
</label>\
<a class="name" href="#">\
<span class="nametext"><span class="innernametext">Countries</span></span>\
<span class="nametext"><span class="innernametext">'+title+'</span></span>\
</a>\
</td>\
</tr>\
<tr>\
<td class="favcolumn">\
<a href="#" class="favorite">\
<span class="icon-stationfav-disabled"></span>\
<span class="hidden-visually">Favorite</span>\
</a>\
</td>\
<td class="filename">\
<label for="select-files-3">\
<div class="thumbnail icon-filetype-folder"); background-size: 32px;"></div>\
</label>\
<a class="name" href="#">\
<span class="nametext"><span class="innernametext">States</span></span>\
</a>\
</td>\
</tr>\
<tr>\
<td class="favcolumn">\
<a href="#" class="favorite">\
<span class="icon-stationfav-disabled"></span>\
<span class="hidden-visually">Favorite</span>\
</a>\
</td>\
<td class="filename">\
<label for="select-files-3">\
<div class="thumbnail icon-filetype-folder"); background-size: 32px;"></div>\
</label>\
<a class="name" href="#">\
<span class="nametext"><span class="innernametext">Languages</span></span>\
</a>\
</td>\
</tr>\
<td class="favcolumn">\
<a href="#" class="favorite">\
<span class="icon-stationfav-disabled"></span>\
<span class="hidden-visually">Favorite</span>\
</a>\
</td>\
<td class="filename">\
<label for="select-files-3">\
<div class="thumbnail icon-filetype-folder"); background-size: 32px;"></div>\
</label>\
<a class="name" href="#">\
<span class="nametext"><span class="innernametext">Tags</span></span>\
</a>\
</td>\
</tr>');
};
</tr>')
}
radio.action_load_categories = function (){
$('#emptycontent').addClass('hidden');
$('#filestable').show();
$('.nofilterresults').addClass('hidden');
$('.loading').addClass('hidden');
var categories = [{
'hashurl': '#categories/countries',
'name': 'Countires'
},{
'hashurl': '#categories/states',
'name': 'States'
},{
'hashurl': '#categories/languages',
'name': 'Languages'
},{
'hashurl': '#categories/tags',
'name': 'Tags'
}];
categories.forEach(function(category_entry) {
radio.render_entry("folder", false, category_entry["hashurl"], false, category_entry["name"]);
})
}
return radio;
}(MODULE || {}));

100
js/navigation.js
View File

@ -1,42 +1,47 @@
var MODULE = (function (radio) {
/* Click on menus */
$('a.nav-icon-files').click(function(e) {
$('#app-navigation ul a').click(function(e) {
e.preventDefault();
radio.switch_menu(0);
radio.action_navigate($(this).attr('href'));
});
$('a.nav-icon-recent').click(function(e) {
/* Click on a radio station (table entry) and play it */
$('body').on('click', '.filename', function(e) {
e.preventDefault();
radio.switch_menu(1);
var entry_src = $(this).parent().attr('data-src');
if (entry_src.substring(0,9) == "#station/") {
var stationid = entry_src.substring(9);
var stationname = $(this).parent().find('.nametext').text();
radio.action_play(stationid, stationname);
} else {
radio.action_navigate(entry_src);
}
});
$('a.nav-icon-favorites').click(function(e) {
/* Save station to favorites */
$('body').on('click', '.favorite', function(e) {
e.preventDefault();
radio.switch_menu(2);
var entry_src = $(this).parent().parent().attr('data-src');
var stationid = entry_src.substring(9);
radio.action_favorite(stationid);
});
$('a.nav-icon-systemtagsfilter').click(function(e) {
e.preventDefault();
radio.switch_menu(3);
});
radio.load_menu_state = function() {
var menu_state = 0;
radio.action_load_menu_state = function() {
var baseUrl = OC.generateUrl('/apps/radio/getMenuState');
$.get(baseUrl, function ( data ) {
if ("menu_state" in data) {
menu_state = data["menu_state"];
var hashurl = data["menu_state"];
}
radio.switch_menu(menu_state);
radio.action_navigate(hashurl);
return true;
});
}
radio.save_menu_state = function(menu_state) {
radio.action_save_menu_state = function(hashurl) {
var baseUrl = OC.generateUrl('/apps/radio/saveMenuState');
var settings = {
"menu_state": menu_state
"menu_state": hashurl
};
$.ajax({
url: baseUrl,
@ -48,67 +53,50 @@ var MODULE = (function (radio) {
});
}
radio.switch_menu = function(type) {
var state = Number(type);
radio.action_navigate = function(hashurl) {
$('#filestable').hide();
$('#emptycontent').addClass('hidden');
$('.nofilterresults').addClass('hidden');
$('.loading').removeClass('hidden');
$('#app-navigation').find('li').removeClass("active");
$("tbody > tr").remove();
clearTimeout(searchTimeout);
searchTimeout = setTimeout(function(){
$('#app-navigation').find('li').removeClass("active");
$("tbody > tr").remove();
radio.save_menu_state(state)
switch (state) {
case 0:
history.pushState("", "", "#top");
history.pushState("", "", hashurl);
radio.action_save_menu_state(hashurl)
clearTimeout(radio.searchTimeout);
radio.searchTimeout = setTimeout(function(){
switch (hashurl) {
case "#top":
$('li.nav-files').addClass('active');
radio.radio_query(1);
radio.radio_query(hashurl);
break;
case 1:
history.pushState("", "", "#recent");
case "#recent":
$('li.nav-recent').addClass('active');
radio.radio_query(2);
radio.radio_query(hashurl);
break;
case 2:
history.pushState("", "", "#favorites");
case "#favorites":
$('li.nav-favorites').addClass('active');
radio.action_load_favorites();
break;
case 3:
history.pushState("", "", "#categories");
case "#categories":
$('li.nav-categories').addClass('active');
radio.action_load_categories();
break;
case (hashurl.match(/^#categories/) || {}).input:
$('li.nav-categories').addClass('active');
radio.radio_query(hashurl);
break;
}
}, 500);
};
// On app start, load top list
if(window.location.hash) {
var hash = String(window.location.hash.replace('#',''));
switch(hash) {
case "top":
radio.switch_menu(0);
break;
case "recent":
radio.switch_menu(1);
break;
case "favorites":
radio.switch_menu(2);
break;
case "categories":
radio.switch_menu(3);
break;
default:
radio.switch_menu(0);
break;
}
var hashurl = window.location.hash;
radio.action_navigate(hashurl);
} else {
radio.load_menu_state();
radio.action_load_menu_state();
};
return radio;

16
js/player.js
View File

@ -35,7 +35,21 @@ var MODULE = (function (radio) {
};
});
radio.action_play = function(stationid){
radio.action_play = function(stationid, stationname){
$('#playbutton').attr("class", "buffering");
$('#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 (radio.isElementOverflowing(element)) {
radio.wrapContentsInMarquee(element);
};
if (!radio.scheduled){
radio.schedule_get_metadata(stationid);
};
if (typeof radio.sound !== "undefined") {
var volume_state = $('#volumeslider').slider('value');
radio.sound.fade(volume_state, 0, 500);

1
templates/main.php
View File

@ -31,7 +31,6 @@
</li>
</ul>
<div id="app-settings">
<audio id="player" src=""></audio>
<button id="playbutton" class="play"></button>
<div id="volumeicon" class="full"></div>
<div id="volumeslider"></div>