From 8c34ea496ae8961c4aea29da67b2b1776034a2c4 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 8 Aug 2011 17:53:03 +0200 Subject: [PATCH] initial work on the media player interface rework it looks bad atm bu should work enough to be stylable --- apps/media/appinfo/app.php | 30 ------ apps/media/css/music.css | 5 +- apps/media/js/collection.js | 152 +++++++++++++++++----------- apps/media/js/music.js | 20 +--- apps/media/js/playlist.js | 10 -- apps/media/templates/collection.php | 25 +++-- apps/media/templates/music.php | 2 +- apps/media/templates/player.php | 1 - apps/media/templates/playlist.php | 6 -- 9 files changed, 110 insertions(+), 141 deletions(-) diff --git a/apps/media/appinfo/app.php b/apps/media/appinfo/app.php index 4cdb36d450..bc80536a96 100644 --- 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 3637234ab1..b8c695f74d 100644 --- 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 520ce7d112..df7b79e332 100644 --- 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;i1){ + var expander=$('>'); + 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=$('>'); + 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=$(''); - for(var i=0;i'); - for(var i=0;ispan').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 4e11b2951b..7034824cad 100644 --- 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 a15c34f93f..636ae29c55 100644 --- 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 f47cba2486..8fd437f769 100644 --- a/apps/media/templates/collection.php +++ b/apps/media/templates/collection.php @@ -4,14 +4,17 @@ -
    -
  • - loadingLoading Collection... -
    • -
  • - - - -
    • -
- + + + + + + + + + + + + + +
ArtistAlbumTitle
diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php index 7a61d59c9b..dd393535bb 100644 --- a/apps/media/templates/music.php +++ b/apps/media/templates/music.php @@ -1,3 +1,3 @@ - + diff --git a/apps/media/templates/player.php b/apps/media/templates/player.php index 31b06e097b..9d6ead458f 100644 --- a/apps/media/templates/player.php +++ b/apps/media/templates/player.php @@ -2,7 +2,6 @@