initial work on the media player interface rework

it looks bad atm bu should work enough to be stylable

diff --git a/apps/media/appinfo/app.php b/apps/media/appinfo/app.php
index 4cdb36d4504299fc984c3c4a45bf9014fca9dc59..bc80536a9696fc8bd525aad235c9ae8032bba0e1 100644 (file)
--- a/apps/media/appinfo/app.php
+++ b/apps/media/appinfo/app.php
@@ -27,34 +27,4 @@ OC_Util::addScript('media','loader');
 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' ));
-
-// 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);
 ?>

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index 3637234ab13ad1db0029c7714e8a8165c3267772..b8c695f74d5fc706ea70b4b2b44c9dbfb9a2049c 100644 (file)
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -3,7 +3,7 @@
 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{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 tr.selected{background-color:#eee;}
 #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;}
 .template{display:none}
 
-#collection{display:none}/*hide the collection initially*/
 #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}
\ No newline at end of file

diff --git a/apps/media/js/collection.js b/apps/media/js/collection.js
index 520ce7d1129d9c4bcdef65320a5918ecd64808b5..df7b79e332dcb0616c53de899473271c61af0a65 100644 (file)
--- a/apps/media/js/collection.js
+++ b/apps/media/js/collection.js
@@ -49,68 +49,106 @@ Collection={
                        Collection.load(Collection.display)
                }else{
                        if(Collection.parent){
-                               Collection.parent.children('li.artist').remove();
-                               var template=Collection.parent.children('li.template');
-                               for(var i=0;i<Collection.artists.length;i++){
-                                       var artist=Collection.artists[i];
-                                       var li=template.clone();
-                                       li.data('artist',artist);
-                                       li.removeClass('template');
-                                       li.addClass('artist');
-                                       li.data('type','artist');
-                                       li.children('span').text(artist.artist_name);
-                                       Collection.addButtons(li);
-                                       Collection.parent.append(li);
-                               }
+                               Collection.parent.find('tr:not(.template)').remove();
+                               var template=Collection.parent.find('tr.template');
+                               var lastArtist='';
+                               var lastAlbum='';
+                               $.each(Collection.artists,function(index,artist){
+                                       $.each(artist.albums,function(index,album){
+                                               $.each(album.songs,function(index,song){
+                                                       var tr=template.clone().removeClass('template');
+                                                       tr.find('td.title a').text(song.song_name);
+                                                       tr.find('td.title a').click(function(event){
+                                                               event.preventDefault();
+                                                               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">&gt;</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">&gt;</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,
        hide:function(){
                if(Collection.parent){
                        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(){
                var item=PlayList.items[PlayList.current];
                var song=Collection.findSong(item.artist,item.album,item.name);
@@ -198,14 +236,6 @@ Collection={
 $(document).ready(function(){
        Collection.parent=$('#collection');
        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();
        $('#scan input.start').click(function(){
                $('#scan input.start').hide();

diff --git a/apps/media/js/music.js b/apps/media/js/music.js
index 4e11b2951be1708a066bc2e48e8d8547c4590abc..7034824cad8960456543717adc5f36aed213e596 100644 (file)
--- a/apps/media/js/music.js
+++ b/apps/media/js/music.js
@@ -1,23 +1,4 @@
 $(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){
                var parts=item.link.substr(item.link.indexOf('#')+1).split('&');
                var data={};
@@ -43,6 +24,7 @@ $(document).ready(function(){
                });
                row.find('div.name').append(button);
        }
+       Collection.display();
 });
 
 

diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js
index a15c34f93f9b518f7b757600a3bbbffc6f1cb45d..636ae29c5558025df9d72b086eebf0d090c7bec3 100644 (file)
--- a/apps/media/js/playlist.js
+++ b/apps/media/js/playlist.js
@@ -10,19 +10,9 @@ PlayList.render=function(){
                tr.removeClass('template');
                tr.data('name',item.name);
                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.artist').text(item.artist);
                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.click(function(){
                        PlayList.play($(this).data('index'));

diff --git a/apps/media/templates/collection.php b/apps/media/templates/collection.php
index f47cba24868d4a00394ffd3da217b793948b803c..8fd437f769bc8d0b0645af6be6385130678cb436 100644 (file)
--- a/apps/media/templates/collection.php
+++ b/apps/media/templates/collection.php
@@ -4,14 +4,17 @@
        <input type='button' class='start' value='Recan Collection'></input>
        <input type='button' class='stop' style='display:none' value='Pause'></input>
 </div>
-<ul id='collection'>
-       <li class='artist'>
-               <img src="<?php echo image_path('files','loading.gif') ?>" alt='loading'/>Loading Collection...
-       </li>
-       <li class='template'>
-               <span></span>
-               <button class='add'>Add</button>
-               <button class='play'>Play</button>
-       </li>
-</ul>
-
+<table id='collection'>
+       <thead>
+               <th>Artist</th>
+               <th>Album</th>
+               <th>Title</th>
+       </thead>
+       <tbody>
+               <tr class='template'>
+                       <td class='artist'><a/></td>
+                       <td class='album'><a/></td>
+                       <td class='title'><a/></td>
+               </tr>
+       </tbody>
+</table>

diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php
index 7a61d59c9ba8421d7565eda6a11f670949c2b753..dd393535bb92da514188743d7a102681fbc742aa 100644 (file)
--- a/apps/media/templates/music.php
+++ b/apps/media/templates/music.php
@@ -1,3 +1,3 @@
 <?php echo $_['player'];?>
-<?php echo $_['collection'];?>
 <?php echo $_['playlist'];?>
+<?php echo $_['collection'];?>

diff --git a/apps/media/templates/player.php b/apps/media/templates/player.php
index 31b06e097bc0cd02509f45f49e9bd35c947ac0e2..9d6ead458f9a12c483dfc8ea685f6eaee3414ef7 100644 (file)
--- a/apps/media/templates/player.php
+++ b/apps/media/templates/player.php
@@ -2,7 +2,6 @@
        <ul class="jp-controls">
                <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-stop" tabindex="1">stop</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-previous" tabindex="1">previous</a></li>

diff --git a/apps/media/templates/playlist.php b/apps/media/templates/playlist.php
index bdc6ef59bb08177922a83953c4c5aa8d41e29138..f99e8a0608d413e8064a7c84ed87e0fa660c20a1 100644 (file)
--- a/apps/media/templates/playlist.php
+++ b/apps/media/templates/playlist.php
@@ -3,9 +3,6 @@
                <tr>
                        <th class='name'><input id='selectAll' type='checkbox'>Name</th>
                        <th class='artist'>Artist</th>
-                       <th class='album'>Album</th>
-                       <th class='time'>Time</th>
-                       <th class='plays'>Plays</th>
                </tr>
        </thead>
        <tbody>
@@ -22,9 +19,6 @@
                                <span></span>
                        </td>
                        <td class='artist'></td>
-                       <td class='album'></td>
-                       <td class='time'></td>
-                       <td class='plays'></td>
                </tr>
        </tfoot>
 </table>
\ No newline at end of file