initial work on the media player interface rework
it looks bad atm bu should work enough to be stylable
This commit is contained in:
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::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' ));
|
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;}
|
li button.right.prettybutton{font-size:1em;}
|
||||||
#collection{padding-top:1em;position:relative;width:70ex;float:left;}
|
#collection{padding-top:1em;position:relative;width:70ex;float:left;}
|
||||||
#collection li.album,#collection li.song{margin-left:3ex;}
|
#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 th{background-color:#ccc; text-align:left; font-size:1.2em; padding:0.2em}
|
||||||
#playlist tr.selected{background-color:#eee;}
|
#playlist tr.selected{background-color:#eee;}
|
||||||
#playlist tr.current{background-color:#ccc;}
|
#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;}
|
#collection li,#playlist li{list-style-type:none;}
|
||||||
.template{display:none}
|
.template{display:none}
|
||||||
|
|
||||||
#collection{display:none}/*hide the collection initially*/
|
|
||||||
#collection li{padding-right:10px;}
|
#collection li{padding-right:10px;}
|
||||||
img.remove{float:right;}
|
img.remove{float:right;}
|
||||||
#searchresults input.play, #searchresults input.add{float:right; height:16px; width:16px;}
|
#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,21 +49,99 @@ Collection={
|
||||||
Collection.load(Collection.display)
|
Collection.load(Collection.display)
|
||||||
}else{
|
}else{
|
||||||
if(Collection.parent){
|
if(Collection.parent){
|
||||||
Collection.parent.children('li.artist').remove();
|
Collection.parent.find('tr:not(.template)').remove();
|
||||||
var template=Collection.parent.children('li.template');
|
var template=Collection.parent.find('tr.template');
|
||||||
for(var i=0;i<Collection.artists.length;i++){
|
var lastArtist='';
|
||||||
var artist=Collection.artists[i];
|
var lastAlbum='';
|
||||||
var li=template.clone();
|
$.each(Collection.artists,function(index,artist){
|
||||||
li.data('artist',artist);
|
$.each(artist.albums,function(index,album){
|
||||||
li.removeClass('template');
|
$.each(album.songs,function(index,song){
|
||||||
li.addClass('artist');
|
var tr=template.clone().removeClass('template');
|
||||||
li.data('type','artist');
|
tr.find('td.title a').text(song.song_name);
|
||||||
li.children('span').text(artist.artist_name);
|
tr.find('td.title a').click(function(event){
|
||||||
Collection.addButtons(li);
|
event.preventDefault();
|
||||||
Collection.parent.append(li);
|
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,
|
parent:null,
|
||||||
hide:function(){
|
hide:function(){
|
||||||
|
@ -71,46 +149,6 @@ Collection={
|
||||||
Collection.parent.hide();
|
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(){
|
registerPlay:function(){
|
||||||
var item=PlayList.items[PlayList.current];
|
var item=PlayList.items[PlayList.current];
|
||||||
var song=Collection.findSong(item.artist,item.album,item.name);
|
var song=Collection.findSong(item.artist,item.album,item.name);
|
||||||
|
@ -198,14 +236,6 @@ Collection={
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
Collection.parent=$('#collection');
|
Collection.parent=$('#collection');
|
||||||
Collection.load();
|
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();
|
Collection.parent.hide();
|
||||||
$('#scan input.start').click(function(){
|
$('#scan input.start').click(function(){
|
||||||
$('#scan input.start').hide();
|
$('#scan input.start').hide();
|
||||||
|
|
|
@ -1,23 +1,4 @@
|
||||||
$(document).ready(function(){
|
$(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){
|
OC.search.customResults.Music=function(row,item){
|
||||||
var parts=item.link.substr(item.link.indexOf('#')+1).split('&');
|
var parts=item.link.substr(item.link.indexOf('#')+1).split('&');
|
||||||
var data={};
|
var data={};
|
||||||
|
@ -43,6 +24,7 @@ $(document).ready(function(){
|
||||||
});
|
});
|
||||||
row.find('div.name').append(button);
|
row.find('div.name').append(button);
|
||||||
}
|
}
|
||||||
|
Collection.display();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -10,19 +10,9 @@ PlayList.render=function(){
|
||||||
tr.removeClass('template');
|
tr.removeClass('template');
|
||||||
tr.data('name',item.name);
|
tr.data('name',item.name);
|
||||||
tr.data('artist',item.artist);
|
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.name').children('span').text(item.name);
|
||||||
tr.children('td.artist').text(item.artist);
|
tr.children('td.artist').text(item.artist);
|
||||||
tr.children('td.album').text(item.album);
|
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.data('index',i);
|
||||||
tr.click(function(){
|
tr.click(function(){
|
||||||
PlayList.play($(this).data('index'));
|
PlayList.play($(this).data('index'));
|
||||||
|
|
|
@ -4,14 +4,17 @@
|
||||||
<input type='button' class='start' value='Recan Collection'></input>
|
<input type='button' class='start' value='Recan Collection'></input>
|
||||||
<input type='button' class='stop' style='display:none' value='Pause'></input>
|
<input type='button' class='stop' style='display:none' value='Pause'></input>
|
||||||
</div>
|
</div>
|
||||||
<ul id='collection'>
|
<table id='collection'>
|
||||||
<li class='artist'>
|
<thead>
|
||||||
<img src="<?php echo image_path('files','loading.gif') ?>" alt='loading'/>Loading Collection...
|
<th>Artist</th>
|
||||||
</li>
|
<th>Album</th>
|
||||||
<li class='template'>
|
<th>Title</th>
|
||||||
<span></span>
|
</thead>
|
||||||
<button class='add'>Add</button>
|
<tbody>
|
||||||
<button class='play'>Play</button>
|
<tr class='template'>
|
||||||
</li>
|
<td class='artist'><a/></td>
|
||||||
</ul>
|
<td class='album'><a/></td>
|
||||||
|
<td class='title'><a/></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
<?php echo $_['player'];?>
|
<?php echo $_['player'];?>
|
||||||
<?php echo $_['collection'];?>
|
|
||||||
<?php echo $_['playlist'];?>
|
<?php echo $_['playlist'];?>
|
||||||
|
<?php echo $_['collection'];?>
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
<ul class="jp-controls">
|
<ul class="jp-controls">
|
||||||
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
|
<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-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-mute" tabindex="1">mute</a></li>
|
||||||
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
|
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
|
||||||
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
|
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
|
||||||
|
|
|
@ -3,9 +3,6 @@
|
||||||
<tr>
|
<tr>
|
||||||
<th class='name'><input id='selectAll' type='checkbox'>Name</th>
|
<th class='name'><input id='selectAll' type='checkbox'>Name</th>
|
||||||
<th class='artist'>Artist</th>
|
<th class='artist'>Artist</th>
|
||||||
<th class='album'>Album</th>
|
|
||||||
<th class='time'>Time</th>
|
|
||||||
<th class='plays'>Plays</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -22,9 +19,6 @@
|
||||||
<span></span>
|
<span></span>
|
||||||
</td>
|
</td>
|
||||||
<td class='artist'></td>
|
<td class='artist'></td>
|
||||||
<td class='album'></td>
|
|
||||||
<td class='time'></td>
|
|
||||||
<td class='plays'></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
Loading…
Reference in New Issue