media app: show current song, add margin, enable tooltip
This commit is contained in:
parent
b178310a82
commit
e30220e287
|
@ -9,8 +9,9 @@ div.jp-progress { position:absolute; overflow:hidden; top:.5em; left:8em; width:
|
||||||
div.jp-seek-bar { background:#eee; width:0; height:100%; cursor:pointer; }
|
div.jp-seek-bar { background:#eee; width:0; height:100%; cursor:pointer; }
|
||||||
div.jp-play-bar { background:#ccc; width:0; height:100%; }
|
div.jp-play-bar { background:#ccc; width:0; height:100%; }
|
||||||
div.jp-seeking-bg { background:url("../img/pbar-ani.gif"); }
|
div.jp-seeking-bg { background:url("../img/pbar-ani.gif"); }
|
||||||
div.jp-current-time,div.jp-duration { position:absolute; font-size:.64em; font-style:oblique; top:1em; left:13.5em; }
|
div.jp-current-time,div.jp-duration { position:absolute; font-size:.64em; font-style:oblique; top:0.9em; left:13.5em; }
|
||||||
div.jp-duration { left:33em; }
|
div.jp-duration { display: none }
|
||||||
|
div.jp-current-song { left: 33em; position: absolute; top: 0.9em; }
|
||||||
div.jp-duration { text-align:right; }
|
div.jp-duration { text-align:right; }
|
||||||
|
|
||||||
a.jp-mute,a.jp-unmute { left:24em; }
|
a.jp-mute,a.jp-unmute { left:24em; }
|
||||||
|
@ -21,9 +22,11 @@ div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
|
||||||
#collection li.album,#collection li.song { margin-left:3em; }
|
#collection li.album,#collection li.song { margin-left:3em; }
|
||||||
#leftcontent img.remove { display:none; float:right; cursor:pointer; }
|
#leftcontent img.remove { display:none; float:right; cursor:pointer; }
|
||||||
#leftcontent li:hover img.remove { display:inline; }
|
#leftcontent li:hover img.remove { display:inline; }
|
||||||
|
#leftcontent li {white-space: normal; }
|
||||||
#collection li button { float:right; }
|
#collection li button { float:right; }
|
||||||
#collection li,#playlist li { list-style-type:none; }
|
#collection li,#playlist li { list-style-type:none; }
|
||||||
.template { display:none; }
|
.template { display:none; }
|
||||||
|
.collection_playing { background:#eee; }
|
||||||
|
|
||||||
#collection li { padding-right:10px; }
|
#collection li { padding-right:10px; }
|
||||||
#searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }
|
#searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }
|
||||||
|
@ -34,6 +37,7 @@ tr td { border-top:1px solid #eee; height:2.2em; }
|
||||||
tr .artist img { vertical-align:middle; }
|
tr .artist img { vertical-align:middle; }
|
||||||
tr.album td.artist { padding-left:1em; }
|
tr.album td.artist { padding-left:1em; }
|
||||||
tr.song td.artist { padding-left:2em; }
|
tr.song td.artist { padding-left:2em; }
|
||||||
|
.add {margin: 0 0.5em 0 0; }
|
||||||
|
|
||||||
#scan { position:absolute; right:13em; top:0em; }
|
#scan { position:absolute; right:13em; top:0em; }
|
||||||
#scan .start { position:relative; display:inline; float:right; }
|
#scan .start { position:relative; display:inline; float:right; }
|
||||||
|
|
|
@ -15,7 +15,7 @@ $(document).ready(function(){
|
||||||
PlayList.play(oldSize);
|
PlayList.play(oldSize);
|
||||||
PlayList.render();
|
PlayList.render();
|
||||||
});
|
});
|
||||||
var button=$('<input type="button" title="'+t('media','Add to playlist')+'" class="add"></input>');
|
var button=$('<input type="button" title="'+t('media','Add album to playlist')+'" class="add"></input>');
|
||||||
button.css('background-image','url('+OC.imagePath('core','actions/play-add')+')')
|
button.css('background-image','url('+OC.imagePath('core','actions/play-add')+')')
|
||||||
button.click(function(event){
|
button.click(function(event){
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
@ -24,6 +24,7 @@ $(document).ready(function(){
|
||||||
});
|
});
|
||||||
row.find('div.name').append(button);
|
row.find('div.name').append(button);
|
||||||
}
|
}
|
||||||
|
$('.add').tipsy({gravity:'n', fade:true, delayIn: 400, live:true});
|
||||||
Collection.display();
|
Collection.display();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -39,6 +39,7 @@ var PlayList={
|
||||||
PlayList.init(items[index].type,null); // init calls load that calls play
|
PlayList.init(items[index].type,null); // init calls load that calls play
|
||||||
}else{
|
}else{
|
||||||
PlayList.player.jPlayer("setMedia", items[PlayList.current]);
|
PlayList.player.jPlayer("setMedia", items[PlayList.current]);
|
||||||
|
$(".jp-current-song").text(items[PlayList.current].name);
|
||||||
items[index].playcount++;
|
items[index].playcount++;
|
||||||
PlayList.player.jPlayer("play",time);
|
PlayList.player.jPlayer("play",time);
|
||||||
if(index>0){
|
if(index>0){
|
||||||
|
@ -67,6 +68,8 @@ var PlayList={
|
||||||
PlayList.init(items[index].type,null); // init calls load that calls play
|
PlayList.init(items[index].type,null); // init calls load that calls play
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
$(".song").removeClass("collection_playing");
|
||||||
|
$(".jp-playlist-" + index).addClass("collection_playing");
|
||||||
},
|
},
|
||||||
init:function(type,ready){
|
init:function(type,ready){
|
||||||
if(!PlayList.player){
|
if(!PlayList.player){
|
||||||
|
|
|
@ -5,6 +5,7 @@ PlayList.render=function(){
|
||||||
var item=PlayList.items[i];
|
var item=PlayList.items[i];
|
||||||
var li=$('<li/>');
|
var li=$('<li/>');
|
||||||
li.append(item.name);
|
li.append(item.name);
|
||||||
|
li.attr('class', 'jp-playlist-' + i);
|
||||||
var img=$('<img class="remove svg action" src="'+OC.imagePath('core','actions/delete')+'"/>');
|
var img=$('<img class="remove svg action" src="'+OC.imagePath('core','actions/delete')+'"/>');
|
||||||
img.click(function(event){
|
img.click(function(event){
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
@ -18,6 +19,7 @@ PlayList.render=function(){
|
||||||
li.addClass('song');
|
li.addClass('song');
|
||||||
PlayList.parent.append(li);
|
PlayList.parent.append(li);
|
||||||
}
|
}
|
||||||
|
$(".jp-playlist-" + PlayList.current).addClass("collection_playing");
|
||||||
}
|
}
|
||||||
PlayList.getSelected=function(){
|
PlayList.getSelected=function(){
|
||||||
return $('tbody td.name input:checkbox:checked').parent().parent();
|
return $('tbody td.name input:checkbox:checked').parent().parent();
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
<div class="jp-volume-bar">
|
<div class="jp-volume-bar">
|
||||||
<div class="jp-volume-bar-value"></div>
|
<div class="jp-volume-bar-value"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="jp-current-song"></div>
|
||||||
|
|
||||||
<div class="player" id="jp-player"></div>
|
<div class="player" id="jp-player"></div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue