From 94e25ecb0c2dcd895fb080b3b2cf296d58676e17 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Fri, 29 Jul 2011 23:53:22 +0200 Subject: [PATCH] Some much needed interface work on the media player --- apps/media/ajax/api.php | 1 - apps/media/appinfo/app.php | 34 ++++++- apps/media/css/music.css | 12 ++- apps/media/css/player.css | 2 +- apps/media/index.php | 22 +++-- apps/media/js/collection.js | 126 ++++++++++++++++++++++++ apps/media/js/music.js | 91 +++--------------- apps/media/js/player.js | 39 +++----- apps/media/js/playlist.js | 142 ++++++++++++++++++++++++++++ apps/media/lib_collection.php | 4 +- apps/media/templates/collection.php | 9 ++ apps/media/templates/music.php | 4 +- apps/media/templates/playlist.php | 30 ++++++ 13 files changed, 393 insertions(+), 123 deletions(-) create mode 100644 apps/media/js/collection.js create mode 100644 apps/media/js/playlist.js create mode 100644 apps/media/templates/collection.php create mode 100644 apps/media/templates/playlist.php diff --git a/apps/media/ajax/api.php b/apps/media/ajax/api.php index 225bce7b09..b86c69d0be 100644 --- a/apps/media/ajax/api.php +++ b/apps/media/ajax/api.php @@ -67,7 +67,6 @@ if($arguments['action']){ $artists=OC_MEDIA_COLLECTION::getArtists(); foreach($artists as &$artist){ $artist['albums']=OC_MEDIA_COLLECTION::getAlbums($artist['artist_id']); - $artistHasSongs=false; foreach($artist['albums'] as &$album){ $album['songs']=OC_MEDIA_COLLECTION::getSongs($artist['artist_id'],$album['album_id']); } diff --git a/apps/media/appinfo/app.php b/apps/media/appinfo/app.php index d75bac031e..fbfa441f93 100644 --- a/apps/media/appinfo/app.php +++ b/apps/media/appinfo/app.php @@ -28,6 +28,36 @@ if(OC_App::getCurrentApp()=='files'){ 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' => 'Media' )); -OC_App::addSettingsPage( array( 'id' => 'media_settings', 'order' => 5, 'href' => OC_Helper::linkTo( 'media', 'settings.php' ), 'name' => 'Media', 'icon' => OC_Helper::imagePath( 'media', 'media.png' ))); +OC_APP::addNavigationEntry( array( 'id' => 'media_index', 'order' => 2, 'href' => OC_HELPER::linkTo( 'media', 'index.php' ), 'icon' => OC_HELPER::imagePath( 'media', 'media.png' ), 'name' => 'Media' )); +OC_APP::addSettingsPage( array( 'id' => 'media_settings', 'order' => 5, 'href' => OC_HELPER::linkTo( 'media', 'settings.php' ), 'name' => 'Media', 'icon' => OC_HELPER::imagePath( 'media', 'media.png' ))); + +// 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 92a4ea5e14..067da79446 100644 --- a/apps/media/css/music.css +++ b/apps/media/css/music.css @@ -3,7 +3,15 @@ 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{margin-left:72ex;} -#playlist li.current{background-color:#ccc;} +#playlist{width:100%;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;} #collection li button{float:right;} #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;}; diff --git a/apps/media/css/player.css b/apps/media/css/player.css index 7acb9f34c1..94dd4d6360 100644 --- a/apps/media/css/player.css +++ b/apps/media/css/player.css @@ -1,4 +1,4 @@ -#jp-interface{position:fixed;z-index:100;width:25em;left:201px;top:-20px;height:80px;border-bottom:none;} +#jp-interface{position:fixed;z-index:100;width:25em;left:201px;top:-20px;height:60px;border-bottom:none;} #jp-interface div.player{height:0px} #jp-interface ul.jp-controls{list-style-type:none;padding:0;} #jp-interface ul.jp-controls li{display:inline;} diff --git a/apps/media/index.php b/apps/media/index.php index 152c458341..bd994e0634 100644 --- a/apps/media/index.php +++ b/apps/media/index.php @@ -33,18 +33,26 @@ if( !OC_User::isLoggedIn()){ require_once('lib_collection.php'); require_once('lib_scanner.php'); -OC_Util::addScript('media','player'); -OC_Util::addScript('media','music'); -OC_Util::addScript('media','jquery.jplayer.min'); -OC_Util::addStyle('media','player'); -OC_Util::addStyle('media','music'); +OC_UTIL::addScript('media','player'); +OC_UTIL::addScript('media','music'); +OC_UTIL::addScript('media','playlist'); +OC_UTIL::addScript('media','collection'); +OC_UTIL::addScript('media','jquery.jplayer.min'); +OC_UTIL::addStyle('media','player'); +OC_UTIL::addStyle('media','playlist'); +OC_UTIL::addStyle('media','music'); -OC_App::setActiveNavigationEntry( 'media_index' ); +OC_APP::setActiveNavigationEntry( 'media_playlist' ); $tmpl = new OC_Template( 'media', 'music', 'user' ); -$player = new OC_Template( 'media', 'player'); +$player = new OC_TEMPLATE( 'media', 'player'); +$playlist = new OC_TEMPLATE( 'media', 'playlist'); +$collection= new OC_TEMPLATE( 'media', 'collection'); + $tmpl->assign('player',$player->fetchPage()); +$tmpl->assign('playlist',$playlist->fetchPage()); +$tmpl->assign('collection',$collection->fetchPage()); $tmpl->printPage(); ?> diff --git a/apps/media/js/collection.js b/apps/media/js/collection.js new file mode 100644 index 0000000000..0a6e0e4eb3 --- /dev/null +++ b/apps/media/js/collection.js @@ -0,0 +1,126 @@ +Collection={ + artists:[], + loaded:false, + loading:false, + loadedListeners:[], + load:function(ready){ + if(ready){ + Collection.loadedListeners.push(ready); + } + if(!Collection.loading){ + Collection.loading=true; + $.ajax({ + url: OC.linkTo('media','ajax/api.php')+'?action=get_collection', + dataType: 'json', + success: function(collection){ + Collection.artists=collection; + + //set the album and artist fieds for the songs + for(var i=0;i'); + 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()); + }); +}); diff --git a/apps/media/js/music.js b/apps/media/js/music.js index ba34e66c3b..d43b260d1e 100644 --- a/apps/media/js/music.js +++ b/apps/media/js/music.js @@ -1,85 +1,20 @@ $(document).ready(function(){ //load the collection - $.ajax({ - url: OC.linkTo('media','ajax/api.php')+'?action=get_collection', - dataType: 'json', - success: function(collection){ - displayCollection(collection); - } + $('#plugins a[href="#collection"]').click(function(){ + $('#plugins li.subentry a.active').removeClass('active'); + $(this).addClass('active'); + PlayList.hide(); + Collection.display(); + }); + $('#plugins a[href="#playlist"]').click(function(){ + $('#plugins li.subentry a.active').removeClass('active'); + $(this).addClass('active'); + PlayList.render(); + Collection.hide(); }); }); -function displayCollection(collection){ - $('#collection').data('collection',collection); - $.each(collection,function(index,artist){ - var artistNode=$('
  • '+artist.artist_name+'
      '); - artistNode.data('name',artist.artist_name); - artistNode.data('stuff',artist); - $('#collection>ul').append(artistNode); - $.each(artist.albums,function(index,album){ - var albumNode=$('
    • '+album.album_name+'
        '); - albumNode.data('name',album.album_name); - albumNode.data('stuff',album); - artistNode.children('ul').append(albumNode); - $.each(album.songs,function(index,song){ - var songNode=$('
      • '+song.song_name+'
        • '); - song.artist_name=artist.artist_name; - song.album_name=album.album_name; - songNode.data('name',song.song_name); - songNode.data('stuff',song); - albumNode.children('ul').append(songNode); - }); - }); - }); - $('li.album').hide(); - $('li.song').hide(); - $('li.artist').click(function(){ - $(this).children().children().slideToggle(); - return false; - }); - $('li.album').click(function(){ - $(this).children().children().slideToggle(); - return false; - }); - $('li.song').click(function(){ - return false; - }); - $('li>button.add').click(function(){ - PlayList.add($(this).parent().data('stuff')); - PlayList.render($('#playlist')); - return false; - }); - if(window.location.href.indexOf('#')>-1){//autoplay passed arist/album/song - var vars=getUrlVars(); - var play; - if(vars['artist']){ - $.each(collection,function(index,artist){ - if(artist.artist_name==vars['artist']){ - play=artist; - if(vars['album']){ - $.each(artist.albums,function(index,album){ - if(album.album_name==vars['album']){ - play=album; - if(vars['song']){ - $.each(album.songs,function(index,song){ - if(song.song_name==vars['song']){ - play=song; - } - }); - } - } - }); - } - } - }); - } - PlayList.add(play); - PlayList.play(); - }else{ - PlayList.init(); - } - -} + function getUrlVars(){ var vars = [], hash; @@ -94,7 +29,7 @@ function getUrlVars(){ } function musicTypeFromFile(file){ - var extention=file.substr(file.indexOf('.')+1); + var extention=file.split('.').pop(); if(extention=='ogg'){ return 'oga' } diff --git a/apps/media/js/player.js b/apps/media/js/player.js index f76628110a..7beb01b601 100644 --- a/apps/media/js/player.js +++ b/apps/media/js/player.js @@ -3,13 +3,13 @@ var PlayList={ current:-1, items:[], player:null, - parent:null, next:function(){ var next=PlayList.current+1; if(next>=PlayList.items.length){ next=0; } PlayList.play(next); + PlayList.render(); }, previous:function(){ var next=PlayList.current-1; @@ -17,6 +17,7 @@ var PlayList={ next=PlayList.items.length-1; } PlayList.play(next); + PlayList.render(); }, play:function(index){ if(index==null){ @@ -66,6 +67,9 @@ var PlayList={ }); }, add:function(song){ + if(!song){ + return; + } if(song.substr){//we are passed a string, asume it's a url to a song PlayList.addFile(song); } @@ -81,7 +85,7 @@ var PlayList={ } if(song.song_name){ var type=musicTypeFromFile(song.song_path); - var item={name:song.song_name,type:type,artist:song.artist_name,album:song.album_name}; + var item={name:song.song_name,type:type,artist:song.artist_name,album:song.album_name,length:song.song_length,playcount:song.song_playcount}; item[type]=PlayList.urlBase+encodeURIComponent(song.song_path); PlayList.items.push(item); } @@ -92,30 +96,9 @@ var PlayList={ item[type]=PlayList.urlBase+encodeURIComponent(path); PlayList.items.push(item); }, - render:function(parent){//parent should be an ul element - if(parent){ - PlayList.parent=parent; - }else{ - parent=PlayList.parent; - } - if(parent){ - parent.empty(); - for(var i=0;i'+song.artist+' - '+song.album+' - '+song.name+''); - item.data('artist',song.artist); - item.data('album',song.album); - item.data('name',song.name); - item.data('index',i); - item.click(function(){ - PlayList.play($(this).data('index')); - PlayList.render(); - }); - if(i==PlayList.current){ - item.addClass('current'); - } - parent.append(item); - } - } - } + remove:function(index){ + PlayList.items.splice(index,1); + PlayList.render(); + }, + render:function(){} } diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js new file mode 100644 index 0000000000..570e725b57 --- /dev/null +++ b/apps/media/js/playlist.js @@ -0,0 +1,142 @@ +PlayList.render=function(){ + $('#playlist').show(); + PlayList.parent.empty(); + for(var i=0;i'); + 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){ + event.stopPropagation(); + if($(this).attr('checked')){ + $(this).parent().parent().addClass('selected'); + if($('td.name input:checkbox').length==$('td.name input:checkbox:checked').length){ + $('#selectAll').attr('checked',true); + } + }else{ + $(this).parent().parent().removeClass('selected'); + $('#selectAll').attr('checked',false); + } + procesSelection(); + }); + PlayList.parent.append(tr); + } +} +PlayList.getSelected=function(){ + return $('td.name input:checkbox:checked').parent().parent(); +} +PlayList.hide=function(){ + $('#playlist').hide(); +} + +$(document).ready(function(){ + PlayList.parent=$('#playlist tbody'); + PlayList.template=$('#playlist tr.template'); + $('#selectAll').click(function(){ + if($(this).attr('checked')){ + // Check all + $('td.name input:checkbox').attr('checked', true); + $('td.name input:checkbox').parent().parent().addClass('selected'); + }else{ + // Uncheck all + $('td.name input:checkbox').attr('checked', false); + $('td.name input:checkbox').parent().parent().removeClass('selected'); + } + procesSelection(); + }); +}); + +function procesSelection(){ + var selected=PlayList.getSelected(); + if(selected.length==0){ + $('th.name span').text('Name'); + $('th.artist').text('Artist'); + $('th.album').text('Album'); + $('th.time').text('Time'); + $('th.plays').empty(); + $('th.plays').text('Plays'); + }else{ + var name=selected.length+' 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'); + 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(); + procesSelection(); + }); + } +} \ No newline at end of file diff --git a/apps/media/lib_collection.php b/apps/media/lib_collection.php index d9f567aa68..5a16aaee84 100644 --- a/apps/media/lib_collection.php +++ b/apps/media/lib_collection.php @@ -128,7 +128,7 @@ class OC_MEDIA_COLLECTION{ $artists=$query->execute(array($search,OC_User::getUser()))->fetchAll(); $result=array(); foreach($artists as $artist){ - $result[$artist['id']]=array('artist_name'=>$artist['name'],'artist_id'=>$artist['id']); + $result[]=array('artist_name'=>$artist['name'],'artist_id'=>$artist['id']); } return $result; } @@ -179,7 +179,7 @@ class OC_MEDIA_COLLECTION{ $result=array(); foreach($albums as $album){ if(count(self::getSongs($album['album_artist'],$album['album_id']))){ - $result[$album['album_id']]=$album; + $result[]=$album; } } return $result; diff --git a/apps/media/templates/collection.php b/apps/media/templates/collection.php new file mode 100644 index 0000000000..e132eeae07 --- /dev/null +++ b/apps/media/templates/collection.php @@ -0,0 +1,9 @@ +
          +
        • + loadingLoading Collection... +
          • +
        • + + +
          • +
        \ No newline at end of file diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php index 47ad64fa7c..7a61d59c9b 100644 --- a/apps/media/templates/music.php +++ b/apps/media/templates/music.php @@ -1,3 +1,3 @@ -
          -
            \ No newline at end of file + + diff --git a/apps/media/templates/playlist.php b/apps/media/templates/playlist.php new file mode 100644 index 0000000000..bdc6ef59bb --- /dev/null +++ b/apps/media/templates/playlist.php @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + +
            NameArtistAlbumTimePlays
            + The playlist is empty +
            + + +
            \ No newline at end of file