initial work on the media player interface rework
it looks bad atm bu should work enough to be stylable
This commit is contained in:
Robin Appelman
parent
2f95b82934
commit
8c34ea496a
|
|
@ -27,34 +27,4 @@ OC_Util::addScript('media','loader');
|
|||
OC_App::register( array( 'order' => 3, 'id' => 'media', 'name' => 'Media' ));
|
||||
|
||||
OC_App::addNavigationEntry( array( 'id' => 'media_index', 'order' => 2, 'href' => OC_Helper::linkTo( 'media', 'index.php' ), 'icon' => OC_Helper::imagePath( 'media', 'media.png' ), 'name' => 'Music' ));
|
||||
|
||||
// add subnavigations
|
||||
$entry = array(
|
||||
'id' => "media_playlist",
|
||||
'order'=>1,
|
||||
'href' => '#playlist',
|
||||
'name' => 'Playlist'
|
||||
);
|
||||
OC_App::addNavigationSubEntry( "media_index", $entry);
|
||||
$entry = array(
|
||||
'id' => "media_collection",
|
||||
'order'=>1,
|
||||
'href' => '#collection',
|
||||
'name' => 'Collection'
|
||||
);
|
||||
OC_App::addNavigationSubEntry( "media_index", $entry);
|
||||
// $entry = array(
|
||||
// 'id' => "media_recent",
|
||||
// 'order'=>1,
|
||||
// 'href' => '#recent',
|
||||
// 'name' => 'Most Recent'
|
||||
// );
|
||||
// OC_App::addNavigationSubEntry( "media_index", $entry);
|
||||
// $entry = array(
|
||||
// 'id' => "media_mostplayer",
|
||||
// 'order'=>1,
|
||||
// 'href' => '#mostplayed',
|
||||
// 'name' => 'Most Played'
|
||||
// );
|
||||
// OC_App::addNavigationSubEntry( "media_index", $entry);
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
li button.right.prettybutton{font-size:1em;}
|
||||
#collection{padding-top:1em;position:relative;width:70ex;float:left;}
|
||||
#collection li.album,#collection li.song{margin-left:3ex;}
|
||||
#playlist{width:100%;border-spacing:0;}
|
||||
#playlist{border-spacing:0;}
|
||||
#playlist th{background-color:#ccc; text-align:left; font-size:1.2em; padding:0.2em}
|
||||
#playlist tr.selected{background-color:#eee;}
|
||||
#playlist tr.current{background-color:#ccc;}
|
||||
|
|
@ -12,7 +12,8 @@ li button.right.prettybutton{font-size:1em;}
|
|||
#collection li,#playlist li{list-style-type:none;}
|
||||
.template{display:none}
|
||||
|
||||
#collection{display:none}/*hide the collection initially*/
|
||||
#collection li{padding-right:10px;}
|
||||
img.remove{float:right;}
|
||||
#searchresults input.play, #searchresults input.add{float:right; height:16px; width:16px;}
|
||||
#collection tr.collapsed td.album, #collection tr.collapsed td.title{color:#ddd}
|
||||
a.expander{float:right;display:block}
|
||||
|
|
@ -49,68 +49,106 @@ Collection={
|
|||
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.data('type','artist');
|
||||
li.children('span').text(artist.artist_name);
|
||||
Collection.addButtons(li);
|
||||
Collection.parent.append(li);
|
||||
}
|
||||
Collection.parent.find('tr:not(.template)').remove();
|
||||
var template=Collection.parent.find('tr.template');
|
||||
var lastArtist='';
|
||||
var lastAlbum='';
|
||||
$.each(Collection.artists,function(index,artist){
|
||||
$.each(artist.albums,function(index,album){
|
||||
$.each(album.songs,function(index,song){
|
||||
var tr=template.clone().removeClass('template');
|
||||
tr.find('td.title a').text(song.song_name);
|
||||
tr.find('td.title a').click(function(event){
|
||||
event.preventDefault();
|
||||
PlayList.add(song);
|
||||
PlayList.render();
|
||||
});
|
||||
if(artist.artist_name!=lastArtist){
|
||||
tr.find('td.artist a').click(function(event){
|
||||
event.preventDefault();
|
||||
PlayList.add(artist);
|
||||
PlayList.render();
|
||||
});
|
||||
tr.find('td.artist a').text(artist.artist_name);
|
||||
if(artist.albums.length>1){
|
||||
var expander=$('<a class="expander">></a>');
|
||||
expander.data('expanded',true);
|
||||
expander.click(function(event){
|
||||
var tr=$(this).parent().parent();
|
||||
if(expander.data('expanded')){
|
||||
Collection.hideArtist(tr.data('artist'));
|
||||
}else{
|
||||
Collection.showArtist(tr.data('artist'));
|
||||
}
|
||||
});
|
||||
tr.children('td.artist').append(expander);
|
||||
}
|
||||
}
|
||||
if(album.album_name!=lastAlbum){
|
||||
tr.find('td.album a').click(function(event){
|
||||
event.preventDefault();
|
||||
PlayList.add(album);
|
||||
PlayList.render();
|
||||
});
|
||||
tr.find('td.album a').text(album.album_name);
|
||||
if(album.songs.length>1){
|
||||
var expander=$('<a class="expander">></a>');
|
||||
expander.data('expanded',true);
|
||||
expander.click(function(event){
|
||||
var tr=$(this).parent().parent();
|
||||
if(expander.data('expanded')){
|
||||
Collection.hideAlbum(tr.data('album'));
|
||||
}else{
|
||||
Collection.showAlbum(tr.data('album'));
|
||||
}
|
||||
});
|
||||
tr.children('td.album').append(expander);
|
||||
}
|
||||
}
|
||||
tr.attr('data-artist',artist.artist_name);
|
||||
tr.attr('data-album',album.album_name);
|
||||
lastArtist=artist.artist_name;
|
||||
lastAlbum=album.album_name;
|
||||
|
||||
Collection.parent.find('tbody').append(tr);
|
||||
});
|
||||
Collection.hideAlbum(artist.artist_name,album.album_name);
|
||||
});
|
||||
Collection.hideArtist(artist.artist_name);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
showArtist:function(artist){
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"]').show();
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"]').first().removeClass('collapsed');
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').data('expanded',true);
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').addClass('expanded');
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').text('v');
|
||||
},
|
||||
hideArtist:function(artist){
|
||||
if(Collection.parent.find('tr[data-artist="'+artist+'"]').length>1){
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"]').hide();
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"]').first().show();
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"]').first().addClass('collapsed');
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').data('expanded',false);
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').removeClass('expanded');
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"] a.expander').text('>');
|
||||
}
|
||||
},
|
||||
showAlbum:function(artist,album){
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]').show();
|
||||
},
|
||||
hideAlbum:function(artist,album){
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]').hide();
|
||||
Collection.parent.find('tr[data-artist="'+artist+'"][data-album="'+album+'"]').last().show();
|
||||
},
|
||||
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.data('type','album');
|
||||
li.children('span').text(album.album_name);
|
||||
Collection.addButtons(li);
|
||||
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');
|
||||
li.data('song',song);
|
||||
li.data('type','song');
|
||||
li.children('span').text(song.song_name);
|
||||
Collection.addButtons(li);
|
||||
ul.append(li);
|
||||
}
|
||||
albumLi.append(ul);
|
||||
},
|
||||
registerPlay:function(){
|
||||
var item=PlayList.items[PlayList.current];
|
||||
var song=Collection.findSong(item.artist,item.album,item.name);
|
||||
|
|
@ -198,14 +236,6 @@ Collection={
|
|||
$(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());
|
||||
});
|
||||
Collection.parent.hide();
|
||||
$('#scan input.start').click(function(){
|
||||
$('#scan input.start').hide();
|
||||
|
|
|
|||
|
|
@ -1,23 +1,4 @@
|
|||
$(document).ready(function(){
|
||||
//load the collection
|
||||
$('#navigation a[href="#collection"]').click(function(){
|
||||
$('#navigation li.subentry a.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
PlayList.hide();
|
||||
Collection.display();
|
||||
});
|
||||
$('#navigation a[href="#playlist"]').click(function(){
|
||||
$('#navigation li.subentry a.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
PlayList.render();
|
||||
Collection.hide();
|
||||
});
|
||||
var tab=window.location.href.slice(window.location.href.indexOf('#') + 1);
|
||||
PlayList.init('mp3',function(){
|
||||
if(tab=='collection'){
|
||||
$('#navigation a[href="#collection"]').trigger('click');
|
||||
}
|
||||
});
|
||||
OC.search.customResults.Music=function(row,item){
|
||||
var parts=item.link.substr(item.link.indexOf('#')+1).split('&');
|
||||
var data={};
|
||||
|
|
@ -43,6 +24,7 @@ $(document).ready(function(){
|
|||
});
|
||||
row.find('div.name').append(button);
|
||||
}
|
||||
Collection.display();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,19 +10,9 @@ PlayList.render=function(){
|
|||
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'));
|
||||
|
|
|
|||
|
|
@ -4,14 +4,17 @@
|
|||
<input type='button' class='start' value='Recan Collection'></input>
|
||||
<input type='button' class='stop' style='display:none' value='Pause'></input>
|
||||
</div>
|
||||
<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 class='add'>Add</button>
|
||||
<button class='play'>Play</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table id='collection'>
|
||||
<thead>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Title</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class='template'>
|
||||
<td class='artist'><a/></td>
|
||||
<td class='album'><a/></td>
|
||||
<td class='title'><a/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<?php echo $_['player'];?>
|
||||
<?php echo $_['collection'];?>
|
||||
<?php echo $_['playlist'];?>
|
||||
<?php echo $_['collection'];?>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<ul class="jp-controls">
|
||||
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
|
||||
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
|
||||
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
|
||||
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
|
||||
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
|
||||
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
<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>
|
||||
|
|
@ -22,9 +19,6 @@
|
|||
<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