added: icon for web interface addon page.

added: picture browser for web interface. - Thanks Ebbo!
fixed: removed console.log which would break in browsers that did'nt have this built in debug method
changed: reduced code verbosity in various places

git-svn-id: https://xbmc.svn.sourceforge.net/svnroot/xbmc/trunk@34543 568bbfeb-2a22-0410-94d2-cc84cf5bfa90

1 files changed, 113 insertions, 29 deletions

diff --git a/addons/webinterface.default/js/MediaLibrary.js b/addons/webinterface.default/js/MediaLibrary.js
index 4ae77d3dc7..e21bc724f6 100644
--- a/addons/webinterface.default/js/MediaLibrary.js
+++ b/addons/webinterface.default/js/MediaLibrary.js
@@ -32,6 +32,7 @@ MediaLibrary.prototype = {
 			$('#musicLibrary').click(jQuery.proxy(this.musicLibraryOpen, this));

 			$('#movieLibrary').click(jQuery.proxy(this.movieLibraryOpen, this));

 			$('#tvshowLibrary').click(jQuery.proxy(this.tvshowLibraryOpen, this));

+			$('#pictureLibrary').click(jQuery.proxy(this.pictureLibraryOpen, this));

 			$('#overlay').click(jQuery.proxy(this.hideOverlay, this));

 			$(window).resize(jQuery.proxy(this.updatePlayButtonLocation, this));

 		},

@@ -39,6 +40,7 @@ MediaLibrary.prototype = {
 			$('#musicLibrary').removeClass('selected');

 			$('#movieLibrary').removeClass('selected');

 			$('#tvshowLibrary').removeClass('selected');

+			$('#pictureLibrary').removeClass('selected');

 			this.hideOverlay();

 		},

 		musicLibraryOpen: function(event) {

@@ -83,8 +85,8 @@ MediaLibrary.prototype = {
 		generateThumb: function(type, thumbnail, album_title, album_artist) {

 			var floatableAlbum = $('<div>');

 			var path = this.getThumbnailPath(thumbnail);

-			var title = album_title;

-			var artist = album_artist;

+			var title = album_title||'';

+			var artist = album_artist||'';

 			if (title.length > 18 && !(title.length <= 21)) {

 				title = album_title.substring(0, 18) + '...';

 			}

@@ -105,6 +107,11 @@ MediaLibrary.prototype = {
 				case 'tvshow':

 					className = 'floatableTVShowCover';

 					break;

+				case 'image':

+				case 'directory':

+					className = 'floatableAlbum';

+					code = '<p class="album" title="' + album_title + '">' + title + '</p>';

+					break;

 			}

 			floatableAlbum.addClass(className).html('<div class="imgWrapper"><div class="inner"><img src="' + path + '" alt="" /></div></div>' + code);

 			return floatableAlbum;

@@ -251,47 +258,32 @@ MediaLibrary.prototype = {
 			}, this), 'json');

 		},

 		displayMovieDetails: function(event) {

-			var movieDetails = $('<div>');

-			movieDetails.attr('id', 'movie-' + event.data.movie.movieid);

-			movieDetails.addClass('moviePopoverContainer');

-			var closeButton = $('<img>');

-			closeButton.attr('src', '/images/close-button.png');

-			closeButton.addClass('closeButton').bind('click', jQuery.proxy(this.hideOverlay, this));

+			var movieDetails = $('<div>').attr('id', 'movie-' + event.data.movie.movieid).addClass('moviePopoverContainer');

+			var closeButton = $('<img>').attr('src', '/images/close-button.png').addClass('closeButton').bind('click', jQuery.proxy(this.hideOverlay, this));

 			movieDetails.append(closeButton);

-			var movieCover = $('<img>');

-			movieCover.attr('src', this.getThumbnailPath(event.data.movie.thumbnail)).addClass('movieCover');

+			var movieCover = $('<img>').attr('src', this.getThumbnailPath(event.data.movie.thumbnail)).addClass('movieCover');

 			movieDetails.append(movieCover);

-			var playIcon = $('<div>');

-			playIcon.addClass('playIcon');

-			playIcon.bind('click', {movie: event.data.movie}, jQuery.proxy(this.playMovie, this));

+			var playIcon = $('<div>').addClass('playIcon').bind('click', {movie: event.data.movie}, jQuery.proxy(this.playMovie, this));

 			movieDetails.append(playIcon);

-			var movieTitle = $('<p>');

-			movieTitle.addClass('movieTitle');

+			var movieTitle = $('<p>').addClass('movieTitle');

 			var yearText = event.data.movie.year ? ' <span class="year">(' + event.data.movie.year + ')</span>' : '';

 			movieTitle.html(event.data.movie.title + yearText);

 			movieDetails.append(movieTitle);

 			if (event.data.movie.runtime) {

-				var runtime = $('<p>');

-				runtime.addClass('runtime').html('<strong>Runtime:</strong> ' + event.data.movie.runtime + ' minutes');

+				var runtime = $('<p>').addClass('runtime').html('<strong>Runtime:</strong> ' + event.data.movie.runtime + ' minutes');

 				movieDetails.append(runtime);

 			}

 			if (event.data.movie.plot) {

-				var plot = $('<p>');

-				plot.addClass('plot').html(event.data.movie.plot);

-				movieDetails.append(plot);

+				movieDetails.append($('<p>').addClass('plot').html(event.data.movie.plot));

 			}

 			if (event.data.movie.genre) {

-				var genre = $('<p>');

-				genre.addClass('genre').html('<strong>Genre:</strong> ' + event.data.movie.genre);

-				movieDetails.append(genre);

+				movieDetails.append($('<p>').addClass('genre').html('<strong>Genre:</strong> ' + event.data.movie.genre));

 			}

 			if (event.data.movie.rating) {

 				//Todo

 			}

 			if (event.data.movie.director) {

-				var director = $('<p>');

-				director.addClass('director').html('<strong>Directed By:</strong> ' + event.data.movie.director);

-				movieDetails.append(director);

+				movieDetails.append($('<p>').addClass('director').html('<strong>Directed By:</strong> ' + event.data.movie.director));

 			}

 			this.activeCover = movieDetails;

 			$('body').append(movieDetails);

@@ -332,8 +324,7 @@ MediaLibrary.prototype = {
 						floatableMovieCover.bind('click', { movie: item }, jQuery.proxy(this.displayMovieDetails, this));

 						libraryContainer.append(floatableMovieCover);

 					}, this));

-					var footerPadding = $('<div>').addClass('footerPadding');

-					libraryContainer.append(footerPadding);

+					libraryContainer.append($('<div>').addClass('footerPadding'));

 					$('#spinner').hide();

 					libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));

 					libraryContainer.trigger('scroll');

@@ -387,7 +378,6 @@ MediaLibrary.prototype = {
 		albumArtistSorter: function(a, b) {

 			var result = this.sortAlpha(a.album_artist, b.album_artist);

 			if (result == 0) {

-				console.log('matches ', a.album_artist, b.album_artist);

 				return this.sortAlpha(a.album_title, b.album_title);

 			}

 			return result;

@@ -405,5 +395,99 @@ MediaLibrary.prototype = {
 		},

 		movieTitleSorter: function(a, b) {

 			return this.sortAlpha(a.title, b.title);

+		},

+		startSlideshow: function(event) {

+			var directory = event.data.directory.file;

+			jQuery.post(JSON_RPC + '?StartSlideshow', '{"jsonrpc": "2.0", "method": "XBMC.StartSlideshow", "params": { "recursive" : "true", "random":"true", "directory" : "' + directory + '" }, "id": 1}', null, 'json');

+		},

+		showDirectory: function(event) {

+			var directory = event.data.directory.file;

+			this.resetPage();

+			$('#pictureLibrary').addClass('selected');

+			$('.contentContainer').hide();

+			var libraryContainer = $('#pictureLibraryDirContainer' + directory);

+			if (!libraryContainer || libraryContainer.length == 0) {

+				$('#spinner').show();                           

+				jQuery.post(JSON_RPC + '?GetDirectory', '{"jsonrpc": "2.0", "method": "Files.GetDirectory", "params": { "media" : "pictures", "directory":"' + directory + '" }, "id": 1}', jQuery.proxy(function(data) {

+					if (data && data.result && ( data.result.directories || data.result.files )) {

+						libraryContainer = $('<div>');

+						libraryContainer.attr('id', 'pictureLibraryDirContainer' + directory)

+										.addClass('contentContainer');

+						$('#content').append(libraryContainer);

+						var breadcrumb = $('<div>');

+						var seperator = '/';

+						var item = '';

+						var directoryArray = directory.split(seperator);

+						jQuery.each(directoryArray, function(i,v) {

+							if( v != '' ) {

+								item += v + seperator;

+								//tmp.bind('click', { directory: item }, jQuery.proxy(this.showDirectory, this));               

+								breadcrumb.append($('<div>').text(' > ' + v).css('float','left').addClass('breadcrumb'));                                                 

+							}

+						});

+						libraryContainer.append(breadcrumb);

+						libraryContainer.append($('<div>').css('clear','both'));

+						if (data.result.directories) {

+							$.each($(data.result.directories), jQuery.proxy(function(i, item) {

+								var floatableShare = this.generateThumb('directory', item.thumbnail, item.label);

+								floatableShare.bind('click', { directory: item }, jQuery.proxy(this.showDirectory, this));              

+								//var slideshow = $('<div">');

+								//slideshow.html('<div>Slideshow</div>');

+								//slideshow.bind('click', { directory: item }, jQuery.proxy(this.startSlideshow, this));        

+								//floatableShare.append(slideshow);

+								libraryContainer.append(floatableShare);

+							}, this));

+						}

+						if (data.result.files) {

+							$.each($(data.result.files), jQuery.proxy(function(i, item) {

+								var floatableImage = this.generateThumb('image', item.file, item.label);

+								libraryContainer.append(floatableImage);

+							}, this));

+						}

+						libraryContainer.append($('<div>').addClass('footerPadding'));

+					} else {

+						libraryContainer.html('');

+					}

+					$('#spinner').hide();

+					libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));

+					libraryContainer.trigger('scroll');

+					myScroll = new iScroll('#pictureLibraryDirContainer' + directory);

+				}, this), 'json');

+			} else {

+				libraryContainer.show();

+				libraryContainer.trigger('scroll');

+			}

+		},

+		pictureLibraryOpen: function() {

+			this.resetPage();

+			$('#pictureLibrary').addClass('selected');

+			$('.contentContainer').hide();

+			var libraryContainer = $('#pictureLibraryContainer');

+			if (!libraryContainer || libraryContainer.length == 0) {

+				$('#spinner').show();

+				jQuery.post(JSON_RPC + '?GetSources', '{"jsonrpc": "2.0", "method": "Files.GetSources", "params": { "media" : "pictures" }, "id": 1}',                                  jQuery.proxy(function(data) {

+					if (data && data.result && data.result.shares) {

+						libraryContainer = $('<div>');

+						libraryContainer.attr('id', 'pictureLibraryContainer')

+										.addClass('contentContainer');

+						$('#content').append(libraryContainer);

+					} else {

+						libraryContainer.html('');

+					}

+					$.each($(data.result.shares), jQuery.proxy(function(i, item) {

+						var floatableShare = this.generateThumb('directory', item.thumbnail, item.label);

+						floatableShare.bind('click', { directory: item }, jQuery.proxy(this.showDirectory, this));                                      

+						libraryContainer.append(floatableShare);

+					}, this));

+					libraryContainer.append($('<div>').addClass('footerPadding'));

+					$('#spinner').hide();

+					libraryContainer.bind('scroll', { activeLibrary: libraryContainer }, jQuery.proxy(this.updateScrollEffects, this));

+					libraryContainer.trigger('scroll');

+					myScroll = new iScroll('#pictureLibraryContainer');

+				}, this), 'json');

+			} else {

+				libraryContainer.show();

+				libraryContainer.trigger('scroll');

+			}

 		}

 	}
\ No newline at end of file