forked from axiom-team/astrXbian
574 lines
25 KiB
JavaScript
574 lines
25 KiB
JavaScript
var browser = function() {
|
|
|
|
var history = [{
|
|
source: "",
|
|
artist: {
|
|
name: "",
|
|
},
|
|
album: {
|
|
name: "",
|
|
artist: "",
|
|
},
|
|
track: {
|
|
name: "",
|
|
}
|
|
}];
|
|
var displaypointer = 0;
|
|
var panelclosed = {artist: false, album: false, track: false};
|
|
var waitingon = {artist: false, album: false, track: false, index: -1, source: null};
|
|
var extraPlugins = [];
|
|
var maxhistorylength = 20;
|
|
var sources = nowplaying.getAllPlugins();
|
|
var doneone = false;
|
|
|
|
function displayTheData(ptr, showartist, showalbum, showtrack) {
|
|
var a = waitingon.artist;
|
|
var b = waitingon.album;
|
|
var c = waitingon.track;
|
|
waitingon = { artist: a || showartist,
|
|
album: b || showalbum,
|
|
track: c || showtrack,
|
|
index: history[ptr].mastercollection.nowplayingindex,
|
|
source: history[ptr].source
|
|
};
|
|
debug.log("BROWSER", "Waiting on source",waitingon.source,"for index", waitingon.index);
|
|
if (waitingon.source != prefs.infosource) {
|
|
// Need to do this here rather than in switchsource otherwise it prevents
|
|
// the browser from accepting the update
|
|
$("#button_source"+prefs.infosource).removeClass("currentbun");
|
|
prefs.save({infosource: waitingon.source});
|
|
debug.log("BROWSER", "Source switched to",prefs.infosource);
|
|
$("#button_source"+prefs.infosource).addClass("currentbun");
|
|
}
|
|
for (var i in waitingon) {
|
|
if (waitingon[i] === true) {
|
|
$("#"+i+"information").html(waitingBanner(i));
|
|
}
|
|
}
|
|
for (var i = 1; i < history.length-1; i++) {
|
|
history[i].mastercollection.stopDisplaying();
|
|
}
|
|
// Remember, here we tell artist, album, and track to display even if we only want one of them.
|
|
// This is because we need the new collections to handle clicks and other stuff,
|
|
// as otherwise it all gets very out of hand and impossible to follow,
|
|
// mainly because it's super tricky to keep the stopDisplaying/displayData displaying flags
|
|
// all in sync since they're global to one dataCollection and not individual for artist,
|
|
// album, and track. (This was tried before and got stupid).
|
|
history[ptr].mastercollection.sendDataToBrowser(waitingon);
|
|
if (displaypointer == history.length-1) {
|
|
// We only allow artist switching on the current playing track.
|
|
// It's not that it doesn't work, but it means the artist switch gets added to
|
|
// the end of history and then you have to go back to get to the current track,
|
|
// which means things stop auto-updating.
|
|
// Also it makes truncating the history really hard.
|
|
// TODO perhaps artist switches should be spliced in?
|
|
history[ptr].mastercollection.doArtistChoices();
|
|
} else {
|
|
if ($("#artistchooser").is(':visible')) {
|
|
$("#artistchooser").slideUp('fast');
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function waitingBanner(which) {
|
|
var html = '<div class="containerbox infosection menuitem">';
|
|
html += '<h2 class="expand"><span class="ucfirst">'+language.gettext("label_"+which)+
|
|
'</span> : '+language.gettext("info_gettinginfo")+'</h2>';
|
|
html += '<div class="fixed alignmid"><i class="icon-spin6 svg-square spinner"></i></div>';
|
|
html += '</div>';
|
|
return html;
|
|
}
|
|
|
|
function banner(data, title, hidden, source, close) {
|
|
var html = '<div class="containerbox infosection menuitem">';
|
|
if (source) {
|
|
html += '<h2 class="expand"><span class="ucfirst">'+
|
|
language.gettext("label_"+title)+'</span> : ' + data.name + '</h2>';
|
|
} else {
|
|
html += '<h2 class="expand">' + data.name + '</h2>';
|
|
}
|
|
html += '<div class="fixed alignmid">';
|
|
html += '<i class="icon-menu svg-square infoclick clickicon frog tooltip" title="'+language.gettext('label_hidepanel')+'"></i>';
|
|
html += '</div>';
|
|
if (data.help) {
|
|
html += '<div class="fixed alignmid"><a href="'+data.help+'" target="_blank">'+
|
|
'<i class="icon-info-circled svg-square tooltip" title="'+language.gettext('label_gethelp')+'"></i></a></div>';
|
|
}
|
|
if (source) {
|
|
if (data.link) {
|
|
html += '<div class="fixed alignmid"><a href="'+data.link+'" target="_blank">'+
|
|
'<i class="'+sources[source].icon+' svg-square tooltip" title="'+language.gettext("info_newtab")+'"></i></a></div>';
|
|
} else {
|
|
html += '<div class="fixed alignmid"><i class="'+sources[source].icon+' svg-square"></i></div>';
|
|
}
|
|
}
|
|
if (close) {
|
|
html += '<div class="fixed alignmid padright"><i class="icon-cancel-circled svg-square infoclick clickicon tadpole tooltip" title="'+language.gettext('label_closepanel')+'"></i></div>';
|
|
}
|
|
html += '</div>';
|
|
html += '<div class="foldup" id="'+title+'foldup"';
|
|
if (hidden) {
|
|
html += ' style="display:none"';
|
|
}
|
|
html += '>';
|
|
return html;
|
|
}
|
|
|
|
function toggleSection(element) {
|
|
var foldup = element.parent().parent().next();
|
|
var section = element.parent().parent().parent().attr("id");
|
|
$(foldup).slideToggle('slow', function() {
|
|
if ($(this).is(':visible')) {
|
|
browser.rePoint();
|
|
}
|
|
});
|
|
section = section.replace(/information/,'');
|
|
panelclosed[section] = !panelclosed[section];
|
|
}
|
|
|
|
function updateHistory() {
|
|
$('#historypanel').off('click').empty().html('<div class="configtitle textcentre"><b>'
|
|
+language.gettext("button_history")
|
|
+'</b><i class="icon-cancel-circled clickicon playlisticonr tright mobonly" onclick="showHistory()"></i></div>'
|
|
);
|
|
if (displaypointer == 1) {
|
|
$("#backbutton").off('click').addClass('button-disabled');
|
|
}
|
|
if (displaypointer > 1 && $("#backbutton").hasClass('button-disabled')) {
|
|
$("#backbutton").on('click', browser.back );
|
|
$("#backbutton").removeClass('button-disabled');
|
|
}
|
|
if (displaypointer == (history.length)-1) {
|
|
$("#forwardbutton").off('click').addClass('button-disabled');
|
|
}
|
|
if (displaypointer < (history.length)-1 && $("#forwardbutton").hasClass('button-disabled')) {
|
|
$("#forwardbutton").on('click', browser.forward );
|
|
$("#forwardbutton").removeClass('button-disabled');
|
|
}
|
|
|
|
var bits = ["artist","album","track"];
|
|
var t = $('<table>', {class: 'histable', width: '100%'}).appendTo('#historypanel');
|
|
|
|
for (var i = 1; i < history.length; i++) {
|
|
var clas = "top clickable clickicon";
|
|
if (i == displaypointer) {
|
|
clas = clas + " current";
|
|
}
|
|
var r = $('<tr>', {class: clas, name: i}).appendTo(t);
|
|
r.append('<td><i class="'+sources[history[i].source].icon+' medicon"></i></td>');
|
|
var td = $('<td>').appendTo(r);
|
|
var html = '';
|
|
bits.forEach(function(n) {
|
|
if (history[i][n].collection) {
|
|
html += history[i][n].collection.bannername()+'<br />';
|
|
} else {
|
|
html += language.gettext("label_"+n)+' : '+history[i][n].name+'<br>';
|
|
}
|
|
});
|
|
td.html(html);
|
|
}
|
|
$('#historypanel').on('click', browser.historyClicked);
|
|
}
|
|
|
|
function removeSection(section) {
|
|
extraPlugins[section].parent.close();
|
|
extraPlugins[section].div.fadeOut('fast', function() {
|
|
extraPlugins[section].div.empty();
|
|
extraPlugins[section].div.remove();
|
|
extraPlugins[section].div = null;
|
|
if ($('#pluginholder').length > 0 && openPlugins() == 0) {
|
|
layoutProcessor.sourceControl('specialplugins');
|
|
}
|
|
});
|
|
}
|
|
|
|
function openPlugins() {
|
|
var c = 0;
|
|
for (var i in extraPlugins) {
|
|
if (extraPlugins[i].div !== null) {
|
|
c++;
|
|
}
|
|
}
|
|
return c;
|
|
}
|
|
|
|
function checkHistoryLength() {
|
|
if (history.length > maxhistorylength) {
|
|
debug.shout("BROWSER", "Truncating History");
|
|
var np = history[1].mastercollection.nowplayingindex;
|
|
history.splice(1,1);
|
|
displaypointer--;
|
|
for (var i = 1; i < history.length; i++) {
|
|
// Scan our history to see if this nowplayingindex is being used anywhere else
|
|
if (history[i].mastercollection.nowplayingindex == np) {
|
|
return;
|
|
}
|
|
}
|
|
debug.log("BROWSER","Telling nowplaying to remove nowplayingindex",np);
|
|
nowplaying.remove(np);
|
|
}
|
|
}
|
|
|
|
return {
|
|
|
|
historyClicked: function(event) {
|
|
var clickedRow = $(event.target);
|
|
while (!clickedRow.hasClass('clickable') && !clickedRow.is('#historypanel')) {
|
|
clickedRow = clickedRow.parent();
|
|
}
|
|
if (clickedRow.hasAttr('name')) {
|
|
browser.doHistory(clickedRow.attr('name'));
|
|
}
|
|
},
|
|
|
|
areweatfront: function() {
|
|
debug.log("BROWSER","displaypointer:",displaypointer,"historylength",history.length);
|
|
return (displaypointer == history.length - 1);
|
|
},
|
|
|
|
createButtons: function() {
|
|
for (var i in sources) {
|
|
if (sources[i].icon !== null) {
|
|
debug.log("BROWSER", "Found plugin", i,sources[i].icon);
|
|
layoutProcessor.addInfoSource(i, sources[i]);
|
|
}
|
|
}
|
|
layoutProcessor.setupInfoButtons();
|
|
},
|
|
|
|
nextSource: function(direction) {
|
|
var s = new Array();
|
|
for (var i in sources) {
|
|
if (sources[i].icon !== null) {
|
|
s.push(i);
|
|
}
|
|
}
|
|
var cursourceidx = s.indexOf(prefs.infosource);
|
|
var newsourceidx = cursourceidx+direction;
|
|
if (newsourceidx >= s.length) newsourceidx = 0;
|
|
if (newsourceidx < 0) newsourceidx = s.length-1;
|
|
browser.switchsource(s[newsourceidx]);
|
|
},
|
|
|
|
dataIsComing: function(mastercollection, isartistswitch, nowplayingindex, source, trackartist, artist, albumartist, album, track) {
|
|
debug.log("BROWSER","Data is coming",isartistswitch, nowplayingindex, source, artist, albumartist, album, track)
|
|
if (prefs.hidebrowser) {
|
|
debug.log("BROWSER","Browser is hidden. Ignoring Data");
|
|
return;
|
|
}
|
|
var showalbum = (album != history[displaypointer].album.name || albumartist != history[displaypointer].album.artist || source != prefs.infosource);
|
|
var showartist = (isartistswitch || artist != history[displaypointer].artist.name || source != prefs.infosource ||
|
|
(showalbum && artist != history[displaypointer].artist.name));
|
|
var showtrack = (track != history[displaypointer].track.name || showalbum || source != prefs.infosource);
|
|
|
|
checkHistoryLength();
|
|
|
|
history.push( {
|
|
mastercollection: mastercollection,
|
|
source: source,
|
|
trackartist: trackartist,
|
|
artist: {
|
|
name: artist,
|
|
collection: null
|
|
},
|
|
album: {
|
|
name: album,
|
|
artist: albumartist,
|
|
collection: null
|
|
},
|
|
track: {
|
|
name: track,
|
|
collection: null
|
|
}
|
|
});
|
|
|
|
// Display the new data only if either:
|
|
// We are currently displaying the most recent track (ie continuous updates)
|
|
// This is an artist switch request
|
|
// This is a source switch request
|
|
// History has been truncated such that the currently displayed info needs to be removed
|
|
if (displaypointer == history.length - 2 || isartistswitch || source != prefs.infosource || displaypointer < 1) {
|
|
displaypointer = history.length - 1;
|
|
// Hack timeout to get around a problem where Masonry doesn't layout properly
|
|
// during page load.
|
|
if (doneone) {
|
|
displayTheData( displaypointer, showartist, showalbum, showtrack );
|
|
} else {
|
|
setTimeout(function() {
|
|
displayTheData( displaypointer, showartist, showalbum, showtrack );
|
|
doneone = true;
|
|
}, 1000);
|
|
}
|
|
}
|
|
updateHistory();
|
|
},
|
|
|
|
Update: function(collection, type, source, nowplayingindex, data, scrollto, force) {
|
|
if (prefs.hidebrowser) {
|
|
return false;
|
|
}
|
|
debug.mark("BROWSER", "Got",type,"info from",source,"for index",nowplayingindex,force,waitingon);
|
|
if (force === true || (source == waitingon.source && nowplayingindex == waitingon.index)) {
|
|
if (force === true || waitingon[type]) {
|
|
debug.trace("BROWSER", " .. and we are going to display it");
|
|
if (data.data !== null && (source == "file" || data.name !== "")) {
|
|
if ($("#"+type+"information").is(':hidden')) {
|
|
$("#"+type+"information").show();
|
|
}
|
|
$("#"+type+"information").html(banner(data, (collection === null) ? type : collection.bannertitle(), panelclosed[type], source)+data.data);
|
|
} else {
|
|
$("#"+type+"information").empty();
|
|
if ($("#"+type+"information").is(':visible')) {
|
|
$("#"+type+"information").hide();
|
|
}
|
|
}
|
|
waitingon[type] = false;
|
|
if (scrollto) {
|
|
layoutProcessor.goToBrowserPanel(type);
|
|
}
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
|
|
reDo: function(index, source) {
|
|
if (history[displaypointer].mastercollection && index == history[displaypointer].mastercollection.nowplayingindex && source == prefs.infosource) {
|
|
debug.log("BROWSER","Re-displaying data for",source,"index",index);
|
|
displayTheData(displaypointer, true, true, true);
|
|
}
|
|
},
|
|
|
|
switchsource: function(src) {
|
|
debug.log("BROWSER","Switching to",src);
|
|
if (displaypointer >= 1) {
|
|
displaypointer = history.length - 1;
|
|
history[displaypointer].mastercollection.populate(src, true);
|
|
updateHistory();
|
|
}
|
|
},
|
|
|
|
handleClick: function(source, element, event) {
|
|
debug.log("BROWSER","Was clicked on",source,element);
|
|
if (element.hasClass('frog')) {
|
|
toggleSection(element);
|
|
} else if (element.hasClass('tadpole')) {
|
|
removeSection(source);
|
|
} else if (element.hasClass('plugclickable')) {
|
|
extraPlugins[source].parent.handleClick(element, event);
|
|
} else if (element.hasClass('clickartistchoose')) {
|
|
nowplaying.switchArtist(history[displaypointer].source, element.next().val());
|
|
} else {
|
|
history[displaypointer].mastercollection.handleClick(history[displaypointer].source, source, element, event);
|
|
}
|
|
},
|
|
|
|
// This function is for links which are followed internally by one of the panels
|
|
// eg wikipedia
|
|
speciaUpdate: function(source, panel, data) {
|
|
debug.mark("BROWSER","Special Update from",source,"for",panel);
|
|
var n = new specialUpdateCollection(source, panel, data);
|
|
|
|
history.splice(displaypointer+1,0, {
|
|
mastercollection: history[displaypointer].mastercollection,
|
|
source: source,
|
|
trackartist: history[displaypointer].trackartist,
|
|
artist: {
|
|
name: history[displaypointer].artist.name,
|
|
collection: (panel == "artist") ? n : history[displaypointer].artist.collection
|
|
},
|
|
album: {
|
|
name: history[displaypointer].album.name,
|
|
albumartist: history[displaypointer].albumartist,
|
|
collection: (panel == "album") ? n : history[displaypointer].album.collection
|
|
},
|
|
track: {
|
|
name: history[displaypointer].track.name,
|
|
collection: (panel == "track") ? n : history[displaypointer].track.collection
|
|
}
|
|
});
|
|
|
|
waitingon[panel] = true;
|
|
waitingon.source = source;
|
|
waitingon.index = history[displaypointer].mastercollection.nowplayingindex;
|
|
displaypointer++;
|
|
updateHistory();
|
|
browser.Update(n, panel, source, waitingon.index, data, true);
|
|
},
|
|
|
|
doHistory: function(index) {
|
|
debug.log("BROWSER", "Doing history, index is",index);
|
|
|
|
var showartist = (history[index].artist.collection === null &&
|
|
(history[index].artist.name != history[displaypointer].artist.name ||
|
|
history[index].source != history[displaypointer].source ||
|
|
history[displaypointer].artist.collection !== null));
|
|
|
|
var showalbum = (history[index].album.collection === null &&
|
|
(history[index].album.name != history[displaypointer].album.name ||
|
|
history[index].album.artist != history[displaypointer].album.artist ||
|
|
history[index].source != history[displaypointer].source ||
|
|
history[displaypointer].album.collection !== null));
|
|
|
|
var showtrack = (history[index].track.collection === null &&
|
|
(history[index].track.name != history[displaypointer].track.name ||
|
|
history[index].album.name != history[displaypointer].album.name ||
|
|
history[index].album.artist != history[displaypointer].album.artist ||
|
|
history[index].source != history[displaypointer].source ||
|
|
history[displaypointer].track.collection !== null));
|
|
|
|
displaypointer = index;
|
|
debug.log("BROWSER","History flags are",showartist,showalbum,showtrack);
|
|
// Calling displayTheData is important even if all the showxxx flags are false
|
|
// since it makes sure the correct trackDataCollection gets its displaying flag set.
|
|
displayTheData(displaypointer, showartist, showalbum, showtrack);
|
|
updateHistory();
|
|
|
|
var bits = ["artist","album","track"];
|
|
bits.forEach(function(n) {
|
|
debug.log("BROWSER","Updating",n);
|
|
if (history[index][n].collection) {
|
|
waitingon[n] = true;
|
|
waitingon.source = history[index].source;
|
|
waitingon.index = history[index].mastercollection.nowplayingindex;
|
|
browser.Update(history[index][n].collection, n, waitingon.source, waitingon.index, history[index][n].collection.getData());
|
|
}
|
|
});
|
|
layoutProcessor.afterHistory();
|
|
},
|
|
|
|
forward: function() {
|
|
browser.doHistory(displaypointer+1);
|
|
return false;
|
|
},
|
|
|
|
back: function() {
|
|
browser.doHistory(displaypointer-1);
|
|
return false;
|
|
},
|
|
|
|
registerExtraPlugin: function(id, name, parent, help) {
|
|
var displayer;
|
|
if (prefs.hidebrowser) {
|
|
$("#hidebrowser").prop("checked", !$("#hidebrowser").is(':checked'));
|
|
prefs.save({hidebrowser: $("#hidebrowser").is(':checked')}, hideBrowser);
|
|
}
|
|
if ($('#pluginholder').length > 0 && !($('#pluginholder').is(':visible'))) {
|
|
displayer = $('<div>', {id: id+"information", class: "infotext invisible"}).appendTo('#pluginholder');
|
|
} else {
|
|
displayer = $('<div>', {id: id+"information", class: "infotext invisible"}).insertBefore('#artistchooser');
|
|
}
|
|
var opts = {name: name};
|
|
if (help) {
|
|
opts.help = help;
|
|
}
|
|
displayer.html(banner(opts, id, false, false, true));
|
|
panelclosed[id] = false;
|
|
displayer.off('click');
|
|
extraPlugins[id] = { div: displayer, parent: parent };
|
|
displayer.on('click', '.infoclick', onBrowserClicked);
|
|
return displayer;
|
|
},
|
|
|
|
goToPlugin: function(id) {
|
|
layoutProcessor.goToBrowserPlugin(id);
|
|
},
|
|
|
|
rePoint: function(panel, params) {
|
|
if (prefs.hidebrowser || $('#infopane').width() == 0) { return }
|
|
|
|
debug.debug("BROWSER","Repointing");
|
|
layoutProcessor.updateInfopaneScrollbars();
|
|
|
|
$('#infopane .masonified:visible').each(function() {
|
|
var h = $(this);
|
|
var width = calcPercentWidth(h, '.tagholder', 500, h.width());
|
|
h.find(".tagholder").css('width', width.toString()+'%');
|
|
// Check if it is being handled by Masonry, prevents early init with no paramerts
|
|
if (typeof(params) == 'undefined' && h.css('position') == 'relative') {
|
|
h.masonry();
|
|
}
|
|
});
|
|
|
|
$('#infopane .masonified5.filled:visible').each(function() {
|
|
var h = $(this);
|
|
var width = calcPercentWidth(h, '.tagholder5', 260, h.width());
|
|
h.find(".tagholder5").css('width', width.toString()+'%');
|
|
h.find(".sizer").css('width', width.toString()+'%');
|
|
if (typeof(params) == 'undefined' && h.css('position') == 'relative') {
|
|
h.masonry();
|
|
}
|
|
});
|
|
|
|
$('#infopane .masonified2:visible').each(function() {
|
|
var h = $(this);
|
|
var width = calcPercentWidth(h, '.tagholder2', 260, h.width());
|
|
h.find(".tagholder2").css('width', width.toString()+'%');
|
|
h.find(".sizer").css('width', width.toString()+'%');
|
|
h.find(".tagholder_wide").css("width", "100%");
|
|
h.find(".brick_wide").css("width", "100%");
|
|
if (typeof(params) == 'undefined' && h.css('position') == 'relative') {
|
|
h.masonry();
|
|
}
|
|
});
|
|
|
|
$('#infopane .masonified7:visible').each(function() {
|
|
var h = $(this);
|
|
if (h.width() > 800) {
|
|
var width = 48;
|
|
} else {
|
|
var width = 99;
|
|
}
|
|
h.find(".tagholder2").css('width', width.toString()+'%');
|
|
h.find(".tagholder_wode").css("width", "100%");
|
|
if (typeof(params) == 'undefined' && h.css('position') == 'relative') {
|
|
h.masonry();
|
|
}
|
|
});
|
|
|
|
$('#infopane .masonified4:visible').each(function() {
|
|
var h = $(this);
|
|
var width = calcPercentWidth(h, '.tagholder4', 140, h.width());
|
|
h.find(".tagholder4").css('width', width.toString()+'%');
|
|
if (typeof(params) == 'undefined' && h.css('position') == 'relative') {
|
|
h.masonry();
|
|
}
|
|
});
|
|
|
|
$('#infopane .mixcontainer:visible').each(function() {
|
|
var h = $(this);
|
|
var w = h.width();
|
|
var m = h.children('.mixbox');
|
|
if (m.length == 1 || w < 700) {
|
|
m.css('width', '100%');
|
|
} else {
|
|
m.css('width', '50%');
|
|
}
|
|
});
|
|
|
|
if (typeof(params) != 'undefined') {
|
|
params.gutter = masonry_gutter;
|
|
panel.masonry(params);
|
|
}
|
|
}
|
|
}
|
|
}();
|
|
|
|
function specialUpdateCollection(source, panel, data) {
|
|
|
|
this.bannertitle = function() {
|
|
return source;
|
|
}
|
|
|
|
this.bannername = function() {
|
|
return data.name;
|
|
}
|
|
|
|
this.getData = function() {
|
|
return data;
|
|
}
|
|
|
|
}
|