diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index dd9b8ea70d9485fc8fa69927fdd2779bef7e78d2..c78ab200719ebbf92d84a06e10639540ba6f35bb 100644
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -3,17 +3,13 @@
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{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;}
-#playlist td.time, #playlist th.time{text-align:right; padding-right:1em;}
+#leftcontent img.remove { display:none; float:right; cursor:pointer; }
+#leftcontent li:hover img.remove { display:inline; }
#collection li button{float:right;}
#collection li,#playlist li{list-style-type:none;}
.template{display:none}
#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}
diff --git a/apps/media/js/player.js b/apps/media/js/player.js
index 4e1cc3cd75450395a146be417b778660f54cb4c5..8298db56e610b2387dfdc26cdc3ea602c25d1afe 100644
--- a/apps/media/js/player.js
+++ b/apps/media/js/player.js
@@ -30,7 +30,7 @@ var PlayList={
if(PlayList.player){
if(PlayList.player.data('jPlayer').options.supplied!=PlayList.items[index].type){//the the audio type changes we need to reinitialize jplayer
PlayList.player.jPlayer("destroy");
- PlayList.init(PlayList.items[index].type,function(){PlayList.play(null,time,eady)});
+ PlayList.init(PlayList.items[index].type,function(){PlayList.play(null,time,ready)});
}else{
PlayList.player.jPlayer("setMedia", PlayList.items[PlayList.current]);
PlayList.items[index].playcount++;
@@ -73,7 +73,7 @@ var PlayList={
PlayList.render();
return false;
});
- PlayList.player=$('#jp-interface div.player');
+ PlayList.player=$('#controls div.player');
}
$(PlayList.player).jPlayer({
ended:PlayList.next,
@@ -91,7 +91,7 @@ var PlayList={
}
},
volume:PlayList.volume,
- cssSelectorAncestor:'#jp-interface',
+ cssSelectorAncestor:'#controls',
swfPath:OC.linkTo('media','js'),
});
},
diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js
index ad6c63a0333de86ff2d8ab8daef88a820c8f7ec8..778939db01c96fbdfcc96b78b786078d997750c7 100644
--- a/apps/media/js/playlist.js
+++ b/apps/media/js/playlist.js
@@ -2,49 +2,21 @@ 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.children('td.name').children('span').text(item.name);
- tr.children('td.artist').text(item.artist);
- tr.children('td.album').text(item.album);
- tr.data('index',i);
- tr.click(function(){
- PlayList.play($(this).data('index'));
- PlayList.render();
- });
- tr.hover(function(){
- var button=$('<img class="remove" title="'+t('media','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){
+ var li=$('<li/>');
+ li.append(item.name);
+ var img=$('<img class="remove" src="'+OC.imagePath('core','actions/delete')+'"/>');
+ img.click(function(event){
event.stopPropagation();
- if($(this).attr('checked')){
- $(this).parent().parent().addClass('selected');
- if($('tbody td.name input:checkbox').length==$('tbody td.name input:checkbox:checked').length){
- $('#selectAll').attr('checked',true);
- }
- }else{
- $(this).parent().parent().removeClass('selected');
- $('#selectAll').attr('checked',false);
- }
- procesSelection();
+ PlayList.remove($(this).parent().data('index'));
+ });
+ li.click(function(event){
+ PlayList.play($(this).data('index'));
});
- PlayList.parent.append(tr);
+ li.append(img)
+ li.data('index',i);
+ li.addClass('song');
+ PlayList.parent.append(li);
}
}
PlayList.getSelected=function(){
@@ -55,78 +27,16 @@ PlayList.hide=function(){
}
$(document).ready(function(){
- PlayList.parent=$('#playlist tbody');
- PlayList.template=$('#playlist tr.template');
+ PlayList.parent=$('#leftcontent');
$('#selectAll').click(function(){
if($(this).attr('checked')){
// Check all
- $('tbody td.name input:checkbox').attr('checked', true);
- $('tbody td.name input:checkbox').parent().parent().addClass('selected');
+ $('#leftcontent li.song input:checkbox').attr('checked', true);
+ $('#leftcontent li.song input:checkbox').parent().addClass('selected');
}else{
// Uncheck all
- $('tbody td.name input:checkbox').attr('checked', false);
- $('tbody td.name input:checkbox').parent().parent().removeClass('selected');
+ $('#leftcontent li.song input:checkbox').attr('checked', false);
+ $('#leftcontent li.song input:checkbox').parent().removeClass('selected');
}
- procesSelection();
});
});
-
-function procesSelection(){
- var selected=PlayList.getSelected();
- if(selected.length==0){
- $('th.name span').text(t('media','Name'));
- $('th.artist').text(t('media','Artist'));
- $('th.album').text(t('media','Album'));
- $('th.time').text(t('media','Time'));
- $('th.plays').empty();
- $('th.plays').text(t('media','Plays'));
- }else{
- var name=selected.length+' '+t('media','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();
- PlayList.save();
- procesSelection();
- });
- }
-}
\ No newline at end of file
diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php
index d103e10b7502bfb27cf1f8487b8656723bdde202..a89c5421b4a5f2cf15130c2ea34564d79aee9ad1 100644
--- a/apps/media/templates/music.php
+++ b/apps/media/templates/music.php
@@ -20,32 +20,7 @@
<div class="player" id="jp-player"></div>
</div>
-<div id="leftcontent">
-<table id="playlist">
- <thead>
- <tr>
- <th class="name"><input id="selectAll" type="checkbox"><?php echo $l->t('Name')?></th>
- <th class="artist"><?php echo $l->t('Artist')?></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <?php echo $l->t('The playlist is empty')?>
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr class="template">
- <td class="name">
- <input type="checkbox">
- <span></span>
- </td>
- <td class="artist"></td>
- </tr>
- </tfoot>
-</table>
-</div>
+<ul id="leftcontent"></ul>
<div id="rightcontent">
<div id="scan">