Robin Appelman
15 years ago
parent
bafd684eb6
commit
94e25ecb0c
@ -0,0 +1,126 @@ |
||||
Collection={ |
||||
artists:[], |
||||
loaded:false, |
||||
loading:false, |
||||
loadedListeners:[], |
||||
load:function(ready){ |
||||
if(ready){ |
||||
Collection.loadedListeners.push(ready); |
||||
} |
||||
if(!Collection.loading){ |
||||
Collection.loading=true; |
||||
$.ajax({ |
||||
url: OC.linkTo('media','ajax/api.php')+'?action=get_collection', |
||||
dataType: 'json', |
||||
success: function(collection){ |
||||
Collection.artists=collection; |
||||
|
||||
//set the album and artist fieds for the songs
|
||||
for(var i=0;i<collection.length;i++){ |
||||
var artist=collection[i]; |
||||
for(var j=0;j<artist.albums.length;j++){ |
||||
var album=artist.albums[j] |
||||
for(var w=0;w<album.songs.length;w++){ |
||||
album.songs[w].album_name=album.album_name; |
||||
album.songs[w].artist_name=artist.artist_name; |
||||
album.songs[w].artist_name=artist.artist_name; |
||||
} |
||||
} |
||||
} |
||||
|
||||
Collection.loaded=true; |
||||
Collection.loading=false; |
||||
for(var i=0;i<Collection.loadedListeners.length;i++){ |
||||
Collection.loadedListeners[i](); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
display:function(){ |
||||
if(Collection.parent){ |
||||
Collection.parent.show(); |
||||
} |
||||
if(!Collection.loaded){ |
||||
Collection.load(Collection.display) |
||||
}else{ |
||||
if(Collection.parent){ |
||||
Collection.parent.children('li.artist').remove(); |
||||
var template=Collection.parent.children('li.template'); |
||||
for(var i=0;i<Collection.artists.length;i++){ |
||||
var artist=Collection.artists[i]; |
||||
var li=template.clone(); |
||||
li.data('artist',artist); |
||||
li.removeClass('template'); |
||||
li.addClass('artist'); |
||||
li.children('span').text(artist.artist_name); |
||||
li.children('button').click(function(){ |
||||
PlayList.add($(this).parent().data('artist')); |
||||
}) |
||||
Collection.parent.append(li); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
parent:null, |
||||
hide:function(){ |
||||
if(Collection.parent){ |
||||
Collection.parent.hide(); |
||||
} |
||||
}, |
||||
showAlbums:function(artistLi){ |
||||
$('ul.albums').parent().removeClass('active'); |
||||
$('ul.albums').remove(); |
||||
var artist=artistLi.data('artist'); |
||||
if(artist){ |
||||
var template=Collection.parent.children('li.template'); |
||||
var ul=$('<ul class="albums"></ul>'); |
||||
for(var i=0;i<artist.albums.length;i++){ |
||||
var li=template.clone(); |
||||
var album=artist.albums[i]; |
||||
li.removeClass('template'); |
||||
li.addClass('album'); |
||||
li.data('album',album); |
||||
li.children('span').text(album.album_name); |
||||
li.children('button').click(function(){ |
||||
PlayList.add($(this).parent().data('album')); |
||||
}) |
||||
ul.append(li); |
||||
} |
||||
artistLi.append(ul); |
||||
} |
||||
}, |
||||
showSongs:function(albumLi){ |
||||
$('ul.songs').parent().removeClass('active'); |
||||
$('ul.songs').remove(); |
||||
var album=albumLi.data('album'); |
||||
var template=Collection.parent.children('li.template'); |
||||
var ul=$('<ul class="songs"></ul>'); |
||||
for(var i=0;i<album.songs.length;i++){ |
||||
var li=template.clone(); |
||||
var song=album.songs[i]; |
||||
li.removeClass('template'); |
||||
li.addClass('song',song); |
||||
li.children('span').text(song.song_name); |
||||
li.children('button').click(function(){ |
||||
PlayList.add($(this).parent().data('span')); |
||||
}) |
||||
ul.append(li); |
||||
} |
||||
albumLi.append(ul); |
||||
} |
||||
} |
||||
|
||||
$(document).ready(function(){ |
||||
Collection.parent=$('#collection'); |
||||
Collection.load(); |
||||
$('#collection li.artist>span').live('click',function(){ |
||||
$(this).parent().toggleClass('active'); |
||||
Collection.showAlbums($(this).parent()); |
||||
}); |
||||
$('#collection li.album>span').live('click',function(){ |
||||
$(this).parent().toggleClass('active'); |
||||
Collection.showSongs($(this).parent()); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,142 @@ |
||||
PlayList.render=function(){ |
||||
$('#playlist').show(); |
||||
PlayList.parent.empty(); |
||||
for(var i=0;i<PlayList.items.length;i++){ |
||||
var tr=PlayList.template.clone(); |
||||
var item=PlayList.items[i]; |
||||
if(i==PlayList.current){ |
||||
tr.addClass('current'); |
||||
} |
||||
tr.removeClass('template'); |
||||
tr.data('name',item.name); |
||||
tr.data('artist',item.artist); |
||||
tr.data('album',item.album); |
||||
tr.data('time',item.length); |
||||
tr.data('plays',item.playcount); |
||||
tr.children('td.name').children('span').text(item.name); |
||||
tr.children('td.artist').text(item.artist); |
||||
tr.children('td.album').text(item.album); |
||||
var secconds=(item.length%60); |
||||
if(secconds<10){ |
||||
secconds='0'+secconds; |
||||
} |
||||
var length=Math.floor(item.length/60)+':'+secconds; |
||||
tr.children('td.time').text(length); |
||||
tr.children('td.plays').text(item.playcount); |
||||
tr.data('index',i); |
||||
tr.click(function(){ |
||||
PlayList.play($(this).data('index')); |
||||
PlayList.parent.children('tr').removeClass('current'); |
||||
$(this).addClass('current'); |
||||
}); |
||||
tr.hover(function(){ |
||||
var button=$('<img class="remove" title="Remove"/>'); |
||||
button.attr('src',OC.imagePath('core','actions/delete')); |
||||
$(this).children().last().append(button); |
||||
button.click(function(event){ |
||||
event.stopPropagation(); |
||||
event.preventDefault(); |
||||
var index=$(this).parent().parent().data('index'); |
||||
PlayList.remove(index); |
||||
}); |
||||
},function(){ |
||||
$(this).children().last().children('img.remove').remove(); |
||||
}); |
||||
tr.children('td.name').children('input').click(function(event){ |
||||
event.stopPropagation(); |
||||
if($(this).attr('checked')){ |
||||
$(this).parent().parent().addClass('selected'); |
||||
if($('td.name input:checkbox').length==$('td.name input:checkbox:checked').length){ |
||||
$('#selectAll').attr('checked',true); |
||||
} |
||||
}else{ |
||||
$(this).parent().parent().removeClass('selected'); |
||||
$('#selectAll').attr('checked',false); |
||||
} |
||||
procesSelection(); |
||||
}); |
||||
PlayList.parent.append(tr); |
||||
} |
||||
} |
||||
PlayList.getSelected=function(){ |
||||
return $('td.name input:checkbox:checked').parent().parent(); |
||||
} |
||||
PlayList.hide=function(){ |
||||
$('#playlist').hide(); |
||||
} |
||||
|
||||
$(document).ready(function(){ |
||||
PlayList.parent=$('#playlist tbody'); |
||||
PlayList.template=$('#playlist tr.template'); |
||||
$('#selectAll').click(function(){ |
||||
if($(this).attr('checked')){ |
||||
// Check all
|
||||
$('td.name input:checkbox').attr('checked', true); |
||||
$('td.name input:checkbox').parent().parent().addClass('selected'); |
||||
}else{ |
||||
// Uncheck all
|
||||
$('td.name input:checkbox').attr('checked', false); |
||||
$('td.name input:checkbox').parent().parent().removeClass('selected'); |
||||
} |
||||
procesSelection(); |
||||
}); |
||||
}); |
||||
|
||||
function procesSelection(){ |
||||
var selected=PlayList.getSelected(); |
||||
if(selected.length==0){ |
||||
$('th.name span').text('Name'); |
||||
$('th.artist').text('Artist'); |
||||
$('th.album').text('Album'); |
||||
$('th.time').text('Time'); |
||||
$('th.plays').empty(); |
||||
$('th.plays').text('Plays'); |
||||
}else{ |
||||
var name=selected.length+' selected'; |
||||
var artist=$(selected[0]).data('artist'); |
||||
var album=$(selected[0]).data('album'); |
||||
var time=$(selected[0]).data('time'); |
||||
var plays=$(selected[0]).data('plays'); |
||||
for(var i=1;i<selected.length;i++){ |
||||
var item=$(selected[i]); |
||||
if(artist!='mixed' && item.data('artist')!==artist){ |
||||
artist='mixed' |
||||
} |
||||
if(album!='mixed' && item.data('album')!==album){ |
||||
album='mixed' |
||||
} |
||||
if(time!='mixed' && item.data('time')!==time){ |
||||
time='mixed' |
||||
} |
||||
if(plays!='mixed' && item.data('plays')!==plays){ |
||||
plays='mixed' |
||||
} |
||||
} |
||||
$('th.name span').text(name); |
||||
$('th.artist').text(artist); |
||||
$('th.album').text(album); |
||||
if(time!='mixed'){ |
||||
var secconds=(time%60); |
||||
if(secconds<10){ |
||||
secconds='0'+secconds; |
||||
} |
||||
var time=Math.floor(time/60)+':'+secconds; |
||||
} |
||||
$('th.time').text(time); |
||||
$('th.plays').text(plays); |
||||
var button=$('<img class="remove" title="Remove"/>'); |
||||
button.attr('src',OC.imagePath('core','actions/delete')); |
||||
$('th.plays').append(button); |
||||
button.click(function(event){ |
||||
event.stopPropagation(); |
||||
event.preventDefault(); |
||||
PlayList.getSelected().each(function(index,element){ |
||||
var index=$(element).data('index'); |
||||
PlayList.items[index]=null; |
||||
}); |
||||
PlayList.items=PlayList.items.filter(function(item){return item!==null}); |
||||
PlayList.render(); |
||||
procesSelection(); |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
<ul id='collection'> |
||||
<li class='artist'> |
||||
<img src="<?php echo image_path('files','loading.gif') ?>" alt='loading'/>Loading Collection...
|
||||
</li> |
||||
<li class='template'> |
||||
<span></span> |
||||
<button>Add</button> |
||||
</li> |
||||
</ul> |
||||
@ -1,3 +1,3 @@ |
||||
<?php echo $_['player'];?> |
||||
<div id='collection'><ul/></div> |
||||
<ul id="playlist"/> |
||||
<?php echo $_['collection'];?> |
||||
<?php echo $_['playlist'];?> |
||||
|
||||
@ -0,0 +1,30 @@ |
||||
<table id='playlist'> |
||||
<thead> |
||||
<tr> |
||||
<th class='name'><input id='selectAll' type='checkbox'>Name</th> |
||||
<th class='artist'>Artist</th> |
||||
<th class='album'>Album</th> |
||||
<th class='time'>Time</th> |
||||
<th class='plays'>Plays</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td> |
||||
The playlist is empty |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
<tfoot> |
||||
<tr class='template'> |
||||
<td class='name'> |
||||
<input type='checkbox'> |
||||
<span></span> |
||||
</td> |
||||
<td class='artist'></td> |
||||
<td class='album'></td> |
||||
<td class='time'></td> |
||||
<td class='plays'></td> |
||||
</tr> |
||||
</tfoot> |
||||
</table> |
||||
Loading…
Reference in new issue