scrolling station meta text, autoupdating
This commit is contained in:
Jonas Heinrich
parent
c8e86558d0
commit
c62ee87b49
@ -1,9 +1,11 @@
|
||||
## 0.6.0 – 2017-09-20
|
||||
### Added
|
||||
- Display station metadata
|
||||
[#1523](https://github.com/owncloud/mail/pull/1523) @tahaalibra
|
||||
- Changelog file
|
||||
[#1523](https://github.com/owncloud/mail/pull/1523) @tahaalibra
|
||||
[#22](https://github.com/owncloud/mail/pull/1523) @onny
|
||||
- Add changelog file
|
||||
[#28](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/04b1bbf49c8d7eb95e9e5d08e9e3b4b7cdc7f4ee) @onny
|
||||
- Continious scrolling
|
||||
[#13](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/c8e86558d0a1ceeea21f801f6e2391ab70046a4e) @onny
|
||||
|
||||
### Changed
|
||||
- Minimum server is Nextcloud 10/ownCloud 9.1
|
||||
|
||||
20
css/main.css
20
css/main.css
@ -1,22 +1,26 @@
|
||||
#playbutton{
|
||||
height:60px;
|
||||
width: 60px;
|
||||
margin: 15px;
|
||||
height:50px;
|
||||
width: 50px;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
display: inline;;
|
||||
/* display: inline; */
|
||||
float: left;
|
||||
}
|
||||
|
||||
#volumeslider{
|
||||
width: 120px;
|
||||
width: 150px;
|
||||
display: inline-block;
|
||||
margin-top: 0px;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#station_metadata{
|
||||
margin: 15px;
|
||||
margin: 5px 20px;
|
||||
padding-left: 5px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.play{background: url('../img/play.png') no-repeat;}
|
||||
|
||||
115
js/main.js
115
js/main.js
@ -1,6 +1,23 @@
|
||||
$(function(){
|
||||
|
||||
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 //
|
||||
@ -9,7 +26,17 @@ $(function(){
|
||||
/* Click on a radio station (table entry) and play it */
|
||||
$('body').on('click', '.filename', function() {
|
||||
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);
|
||||
var element = document.getElementById('station_metadata');
|
||||
if (isElementOverflowing(element)) {
|
||||
wrapContentsInMarquee(element);
|
||||
};
|
||||
if (!scheduled){
|
||||
schedule_get_metadata(stationid);
|
||||
};
|
||||
});
|
||||
|
||||
/* Save station to favorites */
|
||||
@ -23,7 +50,16 @@ $(function(){
|
||||
if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) {
|
||||
if(!$(this).data("didfire")) {
|
||||
$(this).data("didfire", true);
|
||||
radio_query(1, "");
|
||||
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 = $(this);
|
||||
setTimeout(function(){
|
||||
ref.data("didfire", false);
|
||||
@ -36,10 +72,28 @@ $(function(){
|
||||
// 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) {
|
||||
var metadata = data['metadata'];
|
||||
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);
|
||||
}).fail(function(){
|
||||
scheduled = false;
|
||||
});
|
||||
};
|
||||
|
||||
function action_favorite(stationid){
|
||||
|
||||
var removed = false;
|
||||
var stations = []
|
||||
var stations = [];
|
||||
var baseUrl = OC.generateUrl('/apps/radio');
|
||||
|
||||
$.get(baseUrl + '/stations', function ( data ) {
|
||||
@ -76,24 +130,15 @@ $(function(){
|
||||
function action_play(stationid){
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
url: "https://onny.project-insanity.org/getmetadata/"+stationid,
|
||||
url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
|
||||
dataType: 'json',
|
||||
success: function(data){
|
||||
var title = data['metadata'];
|
||||
$("#station_metadata").html(title);
|
||||
var streamurl = data['url'];
|
||||
$("#player").attr("src", streamurl);
|
||||
$('#player').trigger('play');
|
||||
$('#playbutton').attr("class", "pause");
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
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");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function render_result(data){
|
||||
@ -113,7 +158,7 @@ $(function(){
|
||||
|
||||
$('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
|
||||
<td class="favcolumn">\
|
||||
<a href="#" class="favpls" onclick="station_fav();">\
|
||||
<a href="#" class="favpls">\
|
||||
<span class="icon-stationfav ' + isstarred + '"></span>\
|
||||
<span class="hidden-visually">Favorite</span>\
|
||||
</a>\
|
||||
@ -183,22 +228,25 @@ $(function(){
|
||||
};
|
||||
|
||||
function switch_menu(type) {
|
||||
$('#app-navigation').find('li').removeClass("active");
|
||||
$("tbody > tr").remove();
|
||||
switch (type) {
|
||||
case 0:
|
||||
$('li.nav-files').addClass('active');
|
||||
radio_query(1);
|
||||
break;
|
||||
case 1:
|
||||
$('li.nav-recent').addClass('active');
|
||||
radio_query(2);
|
||||
break;
|
||||
case 2:
|
||||
$('li.nav-favorites').addClass('active');
|
||||
action_load_favorites();
|
||||
break;
|
||||
}
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(function(){
|
||||
$('#app-navigation').find('li').removeClass("active");
|
||||
$("tbody > tr").remove();
|
||||
switch (type) {
|
||||
case 0:
|
||||
$('li.nav-files').addClass('active');
|
||||
radio_query(1);
|
||||
break;
|
||||
case 1:
|
||||
$('li.nav-recent').addClass('active');
|
||||
radio_query(2);
|
||||
break;
|
||||
case 2:
|
||||
$('li.nav-favorites').addClass('active');
|
||||
action_load_favorites();
|
||||
break;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$('a.nav-icon-files').click(function() {
|
||||
@ -217,6 +265,7 @@ $(function(){
|
||||
if (query != "") {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(function(){
|
||||
$('#app-navigation').find('li').removeClass("active");
|
||||
$("tbody > tr").remove();
|
||||
radio_query(0, query);
|
||||
}, 500);
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<audio id="player" src=""></audio>
|
||||
<button id="playbutton" class="play"></button>
|
||||
<div id="volumeslider"></div>
|
||||
<p id="station_metadata">Test</p>
|
||||
<p id="station_metadata"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user