media app: show current song, add margin, enable tooltip

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index ddfe342983008737c5fe55878166173716c527fc..c4db4e05855c6c9e6687222308f6d8ad79f58ee8 100644 (file)
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -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-play-bar { background:#ccc; width:0; height:100%; }
 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-duration { left:33em; }
+div.jp-current-time,div.jp-duration { position:absolute; font-size:.64em; font-style:oblique; top:0.9em; left:13.5em; }
+div.jp-duration { display: none }
+div.jp-current-song { left: 33em; position: absolute; top: 0.9em; }
 div.jp-duration { text-align:right; }
 
 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; }
 #leftcontent img.remove { display:none; float:right; cursor:pointer; }
 #leftcontent li:hover img.remove { display:inline; }
+#leftcontent li {white-space: normal; }
 #collection li button { float:right; }
 #collection li,#playlist li { list-style-type:none; }
 .template { display:none; }
+.collection_playing { background:#eee; }
 
 #collection li { padding-right:10px; }
 #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.album td.artist { padding-left:1em; }
 tr.song td.artist { padding-left:2em; }
+.add {margin: 0 0.5em 0 0; }
 
 #scan { position:absolute; right:13em; top:0em; }
 #scan .start { position:relative; display:inline; float:right; }

diff --git a/apps/media/js/music.js b/apps/media/js/music.js
index c04c579d1ca04805d164a3f16b1d8f9c4b1cce98..cac16ac6ff7be9e943c528bf819a0f2d9d82c2e2 100644 (file)
--- a/apps/media/js/music.js
+++ b/apps/media/js/music.js
@@ -15,7 +15,7 @@ $(document).ready(function(){
                        PlayList.play(oldSize);
                        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.click(function(event){
                        event.stopPropagation();
@@ -24,6 +24,7 @@ $(document).ready(function(){
                });
                row.find('div.name').append(button);
        }
+        $('.add').tipsy({gravity:'n', fade:true, delayIn: 400, live:true});
        Collection.display();
 });
 

diff --git a/apps/media/js/player.js b/apps/media/js/player.js
index f696b87bbde5ec2bb2b0909440bd2021b2de84bb..693bf2d70bf6c41caa2e33a559509e82ee74da15 100644 (file)
--- a/apps/media/js/player.js
+++ b/apps/media/js/player.js
@@ -39,6 +39,7 @@ var PlayList={
                                        PlayList.init(items[index].type,null); // init calls load that calls play
                                }else{
                                        PlayList.player.jPlayer("setMedia", items[PlayList.current]);
+                                        $(".jp-current-song").text(items[PlayList.current].name);
                                        items[index].playcount++;
                                        PlayList.player.jPlayer("play",time);
                                        if(index>0){
@@ -67,6 +68,8 @@ var PlayList={
                                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){
                if(!PlayList.player){

diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js
index cb7f24522a4751bda0d891cd04f47d1794399c7f..c6dc3db2dd40c3b75b9d7eb5e1ff0b0d3dd84aa9 100644 (file)
--- a/apps/media/js/playlist.js
+++ b/apps/media/js/playlist.js
@@ -5,6 +5,7 @@ PlayList.render=function(){
                var item=PlayList.items[i];
                var li=$('<li/>');
                li.append(item.name);
+                li.attr('class', 'jp-playlist-' + i);
                var img=$('<img class="remove svg action" src="'+OC.imagePath('core','actions/delete')+'"/>');
                img.click(function(event){
                        event.stopPropagation();
@@ -18,6 +19,7 @@ PlayList.render=function(){
                li.addClass('song');
                PlayList.parent.append(li);
        }
+        $(".jp-playlist-" + PlayList.current).addClass("collection_playing");
 }
 PlayList.getSelected=function(){
        return $('tbody td.name input:checkbox:checked').parent().parent();

diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php
index 6c8d740cc13f146d2ca8fd0e451b4fa4387ece82..2af18fb03c9f1ea27302b85237426ca789d44ae9 100644 (file)
--- a/apps/media/templates/music.php
+++ b/apps/media/templates/music.php
@@ -17,6 +17,7 @@
        <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
        </div>
+        <div class="jp-current-song"></div>
 
        <div class="player" id="jp-player"></div>