From c9a11d0aab4d10f6dfe79d080a8851ee6d86e219 Mon Sep 17 00:00:00 2001
From: Robin Appelman <icewind1991@gmail.com>
Date: Sun, 21 Aug 2011 15:28:20 +0200
Subject: [PATCH] some work on media player interface, artists can be collapsed
in the collection view again and single albums/songs can be played
---
apps/media/ajax/api.php | 20 +---
apps/media/css/music.css | 21 +++-
apps/media/css/player.css | 15 ---
apps/media/js/collection.js | 211 +++++++++++++++++++++---------------
apps/media/js/player.js | 8 +-
5 files changed, 148 insertions(+), 127 deletions(-)
diff --git a/apps/media/ajax/api.php b/apps/media/ajax/api.php
index a9bd4f745af..3b4932728da 100644
--- a/apps/media/ajax/api.php
+++ b/apps/media/ajax/api.php
@@ -56,7 +56,6 @@ OC_MEDIA_COLLECTION::$uid=OC_User::getUser();
if($arguments['action']){
switch($arguments['action']){
case 'delete':
- unset($_SESSION['collection']);
$path=$arguments['path'];
OC_MEDIA_COLLECTION::deleteSongByPath($path);
$paths=explode(PATH_SEPARATOR,OC_Preferences::getValue(OC_User::getUser(),'media','paths',''));
@@ -65,21 +64,13 @@ if($arguments['action']){
OC_Preferences::setValue(OC_User::getUser(),'media','paths',implode(PATH_SEPARATOR,$paths));
}
case 'get_collection':
- if(!isset($_SESSION['collection'])){
- $artists=OC_MEDIA_COLLECTION::getArtists();
- foreach($artists as &$artist){
- $artist['albums']=OC_MEDIA_COLLECTION::getAlbums($artist['artist_id']);
- foreach($artist['albums'] as &$album){
- $album['songs']=OC_MEDIA_COLLECTION::getSongs($artist['artist_id'],$album['album_id']);
- }
- }
-
- $_SESSION['collection']=json_encode($artists);
- }
- echo $_SESSION['collection'];
+ $data=array();
+ $data['artists']=OC_MEDIA_COLLECTION::getArtists();
+ $data['albums']=OC_MEDIA_COLLECTION::getAlbums();
+ $data['songs']=OC_MEDIA_COLLECTION::getSongs();
+ echo json_encode($data);
break;
case 'scan':
- unset($_SESSION['collection']);
OC_DB::beginTransaction();
set_time_limit(0); //recursive scan can take a while
$path=$arguments['path'];
@@ -88,7 +79,6 @@ if($arguments['action']){
flush();
break;
case 'scanFile':
- unset($_SESSION['collection']);
echo (OC_MEDIA_SCANNER::scanFile($arguments['path']))?'true':'false';
break;
case 'get_artists':
diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index f8e41064fd8..cf5cb646438 100644
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -1,6 +1,21 @@
-#folderlist li { margin-bottom:1em; }
-#folderlist button.prettybutton { font-size:1em; width:10em; }
-li button.right.prettybutton { font-size:1em; }
+#controls ul.jp-controls { padding:0; }
+#controls ul.jp-controls li { display:inline; }
+#controls ul.jp-controls li a { position:absolute; padding:.8em 1em; }
+a.jp-play, a.jp-pause { left:2.5em; }
+a.jp-pause { display:none; }
+a.jp-next { left:5em; }
+
+div.jp-progress { position:absolute; overflow:hidden; top:.5em; left:8em; width:15em; height:1.2em; padding:0; }
+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; width:22em; }
+div.jp-duration { text-align:right; }
+
+a.jp-mute,a.jp-unmute { left:24em; }
+div.jp-volume-bar { position:absolute; overflow:hidden; background:#eee; width:4em; height:0.4em; cursor:pointer; top:1.3em; left:27em; }
+div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
+
#collection { padding-top:1em; position:relative; width:70em; float:left; }
#collection li.album,#collection li.song { margin-left:3em; }
#leftcontent img.remove { display:none; float:right; cursor:pointer; }
diff --git a/apps/media/css/player.css b/apps/media/css/player.css
index 98a76e82f0d..8b137891791 100644
--- a/apps/media/css/player.css
+++ b/apps/media/css/player.css
@@ -1,16 +1 @@
-#controls ul.jp-controls { padding:0; }
-#controls ul.jp-controls li { display:inline; }
-#controls ul.jp-controls li a { position:absolute; padding:.8em 1em; }
-a.jp-play, a.jp-pause { left:2.5em; }
-a.jp-next { left:5em; }
-div.jp-progress { position:absolute; overflow:hidden; top:.5em; left:8em; width:15em; height:1.2em; padding:0; }
-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; width:22em; }
-div.jp-duration { text-align:right; }
-
-a.jp-mute,a.jp-unmute { left:24em; }
-div.jp-volume-bar { position:absolute; overflow:hidden; background:#eee; width:4em; height:0.4em; cursor:pointer; top:1.3em; left:27em; }
-div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
diff --git a/apps/media/js/collection.js b/apps/media/js/collection.js
index 98d21b236e0..af26737b942 100644
--- a/apps/media/js/collection.js
+++ b/apps/media/js/collection.js
@@ -1,5 +1,9 @@
Collection={
artists:[],
+ albums:[],
+ songs:[],
+ artistsById:{},
+ albumsById:{},
loaded:false,
loading:false,
loadedListeners:[],
@@ -12,18 +16,37 @@ Collection={
$.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<collection.length;i++){
- var artist=collection[i];
- for(var j=0;j<artist.albums.length;j++){
- var album=artist.albums[j]
- for(var w=0;w<album.songs.length;w++){
- album.songs[w].album_name=album.album_name;
- album.songs[w].artist_name=artist.artist_name;
- }
+ success: function(data){
+ //normalize the data
+ for(var i=0;i<data.artists.length;i++){
+ var artist=data.artists[i];
+ var artistData={name:artist.artist_name,songs:[],albums:[]};
+ Collection.artistsById[artist.artist_id]=artistData;
+ Collection.artists.push(artistData);
+ }
+ for(var i=0;i<data.albums.length;i++){
+ var album=data.albums[i];
+ var artistName=Collection.artistsById[album.album_artist].name;
+ var albumData={name:album.album_name,artist:artistName,songs:[]};
+ Collection.albumsById[album.album_id]=albumData;
+ Collection.albums.push(albumData);
+ Collection.artistsById[album.album_artist].albums.push(albumData);
+ }
+ for(var i=0;i<data.songs.length;i++){
+ var song=data.songs[i];
+ if(Collection.artistsById[song.song_artist] && Collection.albumsById[song.song_album]){
+ var songData={
+ name:song.song_name,
+ artist:Collection.artistsById[song.song_artist].name,
+ album:Collection.albumsById[song.song_album].name,
+ lastPlayed:song.song_lastplayed,
+ length:song.song_length,
+ path:song.song_path,
+ playCount:song.song_playcount,
+ };
+ Collection.songs.push(songData);
+ Collection.artistsById[song.song_artist].songs.push(songData);
+ Collection.albumsById[song.song_album].songs.push(songData);
}
}
@@ -53,93 +76,101 @@ Collection={
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,true);
- PlayList.play(0);
- Collection.parent.find('tr').removeClass('active');
- tr.addClass('active');
- });
- if(artist.artist_name!=lastArtist){
- tr.find('td.artist a').click(function(event){
- event.preventDefault();
- PlayList.add(artist,true);
- PlayList.play(0);
- Collection.parent.find('tr').removeClass('active');
- $('tr[data-artist="'+artist.artist_name+'"]').addClass('active');
- });
- tr.find('td.artist a').text(artist.artist_name);
- if(artist.albums.length>1){
- var expander=$('<a class="expander">></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,true);
- PlayList.play(0);
- Collection.parent.find('tr').removeClass('active');
- $('tr[data-album="'+album.album_name+'"]').addClass('active');
- });
- tr.find('td.album a').text(album.album_name);
- if(album.songs.length>1){
- var expander=$('<a class="expander">></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);
- }
+ $.each(Collection.artists,function(i,artist){
+ if(artist.name && artist.songs.length>0){
+ var tr=template.clone().removeClass('template');
+ tr.find('td.title a').text(artist.songs.length+' '+t('media','songs'));
+ tr.find('td.album a').text(artist.albums.length+' '+t('media','albums'));
+ tr.find('td.artist a').text(artist.name);
+ tr.data('artistData',artist);
+ tr.find('td.artist a').click(function(event){
+ event.preventDefault();
+ PlayList.add(artist,true);
+ PlayList.play(0);
+ Collection.parent.find('tr').removeClass('active');
+ $('tr[data-artist="'+artist.name+'"]').addClass('active');
+ });
+ var expander=$('<a class="expander">></a>');
+ expander.data('expanded',false);
+ 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.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);
+ tr.children('td.artist').append(expander);
+ tr.attr('data-artist',artist.name);
+ Collection.parent.find('tbody').append(tr);
+ }
});
}
}
},
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');
+ var tr=Collection.parent.find('tr[data-artist="'+artist+'"]');
+ var nextRow=tr.next();
+ var artist=tr.data('artistData');
+ var first=true;
+ $.each(artist.albums,function(foo,album){
+ $.each(album.songs,function(i,song){
+ if(first){
+ newRow=tr;
+ }else{
+ var newRow=tr.clone();
+ }
+ if(i==0){
+ newRow.find('td.album a').text(album.name);
+ newRow.find('td.album a').click(function(event){
+ event.preventDefault();
+ PlayList.add(album,true);
+ PlayList.play(0);
+ Collection.parent.find('tr').removeClass('active');
+ $('tr[data-album="'+album.name+'"]').addClass('active');
+ });
+ }else{
+ newRow.find('.expander').remove();
+ newRow.find('td.album a').text('');
+ }
+ newRow.find('td.title a').text(song.name);
+ newRow.find('td.title a').click(function(event){
+ event.preventDefault();
+ PlayList.add(song,true);
+ PlayList.play(0);
+ Collection.parent.find('tr').removeClass('active');
+ $('tr[data-title="'+song.name+'"]').addClass('active');
+ });
+ newRow.attr('data-album',album.name);
+ newRow.attr('data-title',song.name);
+ newRow.attr('data-artist',artist.name);
+ if(!first){
+ nextRow.before(newRow);
+ }
+ first=false;
+ });
+ });
+ tr.removeClass('collapsed');
+ tr.find('a.expander').data('expanded',true);
+ tr.find('a.expander').addClass('expanded');
+ tr.find('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('>');
+ var tr=Collection.parent.find('tr[data-artist="'+artist+'"]');
+ if(tr.length>1){
+ var artist=tr.first().data('artistData');
+ tr.first().find('td.album a').text(artist.albums.length+' '+t('media','albums'));
+ tr.first().find('td.title a').text(artist.songs.length+' '+t('media','songs'));
+ tr.first().find('td.album a').unbind('click');
+ tr.first().find('td.title a').unbind('click');
+ tr.each(function(i,row){
+ if(i>0){
+ $(row).remove();
+ }
+ });
+ tr.find('a.expander').data('expanded',false);
+ tr.find('a.expander').removeClass('expanded');
+ tr.find('a.expander').text('>');
}
},
showAlbum:function(artist,album){
diff --git a/apps/media/js/player.js b/apps/media/js/player.js
index 0b0502c7780..b3beed8c3b9 100644
--- a/apps/media/js/player.js
+++ b/apps/media/js/player.js
@@ -122,10 +122,10 @@ var PlayList={
PlayList.add(song,temp,true);
});
}
- 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,length:song.song_length,playcount:song.song_playcount};
- item[type]=PlayList.urlBase+encodeURIComponent(song.song_path);
+ if(song.path){
+ var type=musicTypeFromFile(song.path);
+ var item={name:song.name,type:type,artist:song.artist,album:song.album,length:song.length,playcount:song.playCount};
+ item[type]=PlayList.urlBase+encodeURIComponent(song.path);
if(PlayList.isTemp){
PlayList.tempPlaylist.push(item);
}else{
--
GitLab