some work on media player
This commit is contained in:
Robin Appelman
parent
2e58752e12
commit
c9c1633882
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
});
|
||||
PlayList.parent.append(tr);
|
||||
li.click(function(event){
|
||||
PlayList.play($(this).data('index'));
|
||||
});
|
||||
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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue