Reduced memory footprint for long upload sessions

public_html/js/Presenters/PostUploadPresenter.js

@@ -78,7 +78,7 @@ App.Presenters.PostUploadPresenter = function(
 			fileName: null,
 			content: null,
 			url: null,
-			thumbnail: null,
+			getThumbnail: function() { return promise.makeSilent(function(resolve, reject) { resolve(null); }); },
 			$tableRow: null,
 		};
 	}
@@ -111,7 +111,7 @@ App.Presenters.PostUploadPresenter = function(
 			}
 		}
 		$input.val('');
-		var post = addPostFromUrl(url);
+		var post = addPostFromURL(url);
 		selectPostTableRow(post);
 	}
 
@@ -137,20 +137,13 @@ App.Presenters.PostUploadPresenter = function(
 		allPosts.push(post);
 		setAllPosts(allPosts);
 		createPostTableRow(post);
+		updatePostThumbnailInTable(post);
 	}
 
 	function postChanged(post) {
 		updatePostTableRow(post);
 	}
 
-	function postThumbnailLoaded(post) {
-		var selectedPosts = getSelectedPosts();
-		if (selectedPosts.length === 1 && selectedPosts[0] === post && post.thumbnail !== null) {
-			updatePostThumbnailInForm(post);
-		}
-		updatePostThumbnailInTable(post);
-	}
-
 	function postTableRowClicked(e) {
 		e.preventDefault();
 		if (!interactionEnabled) {
@@ -211,16 +204,17 @@ App.Presenters.PostUploadPresenter = function(
 
 	function postTableRowImageHovered(e) {
 		var $img = jQuery(this);
-		if ($img.parents('tr').data('post').thumbnail) {
+		var post = $img.parents('tr').data('post');
+		post.getThumbnail(null, null).then(function(thumbnailDataURL) {
 			var $lightbox = jQuery('#lightbox');
-			$lightbox.find('img').attr('src', $img.attr('src'));
+			$lightbox.find('img').attr('src', thumbnailDataURL);
 			$lightbox
 				.show()
 				.css({
 					left: ($img.position().left + $img.outerWidth()) + 'px',
 					top: ($img.position().top + ($img.outerHeight() - $lightbox.outerHeight()) / 2) + 'px',
 				});
-		}
+		});
 	}
 
 	function postTableRowImageUnhovered(e) {
@@ -255,34 +249,81 @@ App.Presenters.PostUploadPresenter = function(
 		stopUpload();
 	}
 
-	function addPostFromFile(file) {
+	function makeThumbnailFromDataURL(dataURL, thumbnailWidth, thumbnailHeight) {
-		var post = _.extend({}, getDefaultPost(), {fileName: file.name, file: file});
+		return promise.makeSilent(function(resolve, reject) {
+			var img = new Image();
+			img.src = dataURL;
+			img.onload = function() {
+				var canvas = document.createElement('canvas');
+				var context = canvas.getContext('2d');
+				canvas.width = thumbnailWidth;
+				canvas.height = thumbnailHeight;
+				context.drawImage(
+					img,
+					0,
+					0,
+					canvas.width,
+					canvas.height);
+				resolve(canvas.toDataURL());
+				canvas = null;
+			};
+		});
+	}
 
-		fileDropper.readAsDataURL(file, function(content) {
+	function addPostFromFile(file) {
-			if (file.type.match('image.*')) {
+		var post = _.extend({}, getDefaultPost(), {
-				post.thumbnail = content;
+			fileName: file.name,
-				postThumbnailLoaded(post);
+			file: file,
-			}
+			getThumbnail: function(thumbnailWidth, thumbnailHeight) {
+				if (file.type.match('image.*')) {
+					return promise.makeSilent(function(resolve, reject) {
+						fileDropper.readAsDataURL(file, function(contentDataURL) {
+							if (thumbnailWidth === null || thumbnailHeight === null) {
+								resolve(contentDataURL);
+								return;
+							}
+							makeThumbnailFromDataURL(contentDataURL, thumbnailWidth, thumbnailHeight)
+								.then(function(thumbnailDataURL) {
+									resolve(thumbnailDataURL);
+								});
+							});
+						});
+				} else {
+					return promise.makeSilent(function(resolve, reject) {
+						resolve(null);
+					});
+				}
+			},
 		});
 
 		postAdded(post);
 		return post;
 	}
 
-	function addPostFromUrl(url) {
+	function addPostFromURL(url) {
-		var post = _.extend({}, getDefaultPost(), {url: url, fileName: url});
+		var post = _.extend({}, getDefaultPost(), {
-		postAdded(post);
+			url: url,
-		setPostsSource([post], url);
+			fileName: url,
+		});
 
 		var matches = url.match(/watch.*?=([a-zA-Z0-9_-]+)/);
 		if (matches) {
-			var youtubeThumbnailUrl = 'http://img.youtube.com/vi/' + matches[1] + '/mqdefault.jpg';
+			var youtubeThumbnailURL = 'http://img.youtube.com/vi/' + matches[1] + '/mqdefault.jpg';
-			post.thumbnail = youtubeThumbnailUrl;
+			post.getThumbnail = function(thumbnailWidth, thumbnailHeight) {
-			postThumbnailLoaded(post);
+				return promise.makeSilent(function(resolve, reject) {
+					resolve(youtubeThumbnailURL);
+				});
+			};
 		} else if (url.match(/image|img|jpg|png|gif/i)) {
-			post.thumbnail = url;
+			post.getThumbnail = function(thumbnailWidth, thumbnailHeight) {
-			postThumbnailLoaded(post);
+				return promise.makeSilent(function(resolve, reject) {
+					resolve(url);
+				});
+			};
 		}
+
+		postAdded(post);
+		setPostsSource([post], url);
 		return post;
 	}
 
@@ -314,21 +355,24 @@ App.Presenters.PostUploadPresenter = function(
 	}
 
 	function updatePostThumbnailInForm(post) {
-		if (post.thumbnail === null) {
+		post.getThumbnail(null, null).then(function(thumbnailDataURL) {
-			$el.find('.form-slider .thumbnail img').hide();
+			if (thumbnailDataURL === null) {
-		} else {
+				$el.find('.form-slider .thumbnail img').hide();
-			$el.find('.form-slider .thumbnail img').show()[0].setAttribute('src', post.thumbnail);
+			} else {
-		}
+				$el.find('.form-slider .thumbnail img').show()[0].setAttribute('src', thumbnailDataURL);
+			}
+		});
 	}
 
 	function updatePostThumbnailInTable(post) {
-		var $row = post.$tableRow;
+		post.getThumbnail(30, 30).then(function(thumbnailDataURL) {
-		if (post.thumbnail === null) {
+			var $row = post.$tableRow;
-			$row.find('img')[0].setAttribute('src', util.transparentPixel());
+			if (thumbnailDataURL === null) {
-		//huge speedup thanks to this condition
+				$row.find('img')[0].setAttribute('src', util.transparentPixel());
-		} else if ($row.find('img').attr('src') !== post.thumbnail) {
+			} else if ($row.find('img').attr('src') !== thumbnailDataURL) {
-			$row.find('img')[0].setAttribute('src', post.thumbnail);
+				$row.find('img')[0].setAttribute('src', thumbnailDataURL);
-		}
+			}
+		});
 	}
 
 	function getAllPosts() {
@@ -360,6 +404,9 @@ App.Presenters.PostUploadPresenter = function(
 			showPostEditForm(selectedPosts);
 		}
 		$el.find('.post-table-op').prop('disabled', selectedPosts.length === 0);
+		if (selectedPosts.length === 1) {
+			updatePostThumbnailInForm(selectedPosts[0]);
+		}
 	}
 
 	function hidePostEditForm() {

public_html/js/Promise.js

@@ -11,12 +11,14 @@ App.Promise = function(_, jQuery, progress) {
 	var active = [];
 	var promiseId = 0;
 
-	function make(callback) {
+	function make(callback, useProgress) {
 		var deferred = jQuery.Deferred();
 		var promise = deferred.promise();
 		promise.promiseId = ++ promiseId;
 
-		progress.start();
+		if (useProgress === true) {
+			progress.start();
+		}
 		callback(function() {
 			try {
 				deferred.resolve.apply(deferred, arguments);
@@ -72,7 +74,8 @@ App.Promise = function(_, jQuery, progress) {
 	}
 
 	return {
-		make: make,
+		make: function(callback) { return make(callback, true); },
+		makeSilent: function(callback) { return make(callback, false); },
 		wait: wait,
 		getActive: getActive,
 		abortAll: abortAll,