Merge pull request #450 from nextcloud/feature/245/thumbnail-loading

Move from EventSource loading to individual requests
nextcloud · Jul 31, 2018 · c3e09d8 · c3e09d8
2 parents 74d54cf + 28c469f
commit c3e09d8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 55 deletions.
diff --git a/js/galleryutility.js b/js/galleryutility.js
@@ -162,10 +162,8 @@ window.Gallery = window.Gallery || {};
 
 			/* jshint camelcase: false */
 			var params = {
-				c: etag,
 				width: longEdge,
 				height: longEdge,
-				requesttoken: oc_requesttoken
 			};
 			return this.buildGalleryUrl('preview', '/' + fileId, params);
 		},

diff --git a/js/thumbnail.js b/js/thumbnail.js
@@ -108,60 +108,29 @@ function Thumbnail (fileId, square) {
 			var batch = {};
 			var i, idsLength = ids.length;
 			if (idsLength) {
-				for (i = 0; i < idsLength; i++) {
-					var thumb = new Thumbnail(ids[i], square);
+				_.each(ids, function(id) {
+					var thumb = new Thumbnail(id, square);
 					thumb.image = new Image();
-					map[ids[i]] = batch[ids[i]] = thumb;
+					map[id] = batch[id] = thumb;
 
-				}
-				var params = {
-					ids: ids.join(';'),
-					scale: window.devicePixelRatio,
-					square: (square) ? 1 : 0
-				};
-				var url = Gallery.utility.buildGalleryUrl('thumbnails', '', params);
-
-				var eventSource = new Gallery.EventSource(url);
-				eventSource.listen('preview',
-					function (/**{path, status, mimetype, preview}*/ preview) {
-						var id = preview.fileid;
-						var thumb = batch[id];
-						thumb.status = preview.status;
-						if (thumb.status === 404) {
-							thumb.valid = false;
-							thumb.loadingDeferred.resolve(null);
-						} else {
-							thumb.image.onload = function () {
-								// Fix for SVG files which can come in all sizes
-								if (square) {
-									thumb.image.width = 200;
-									thumb.image.height = 200;
-								}
-								thumb.ratio = thumb.image.width / thumb.image.height;
-								thumb.image.originalWidth = 200 * thumb.ratio;
-								thumb.loadingDeferred.resolve(thumb.image);
-							};
-							thumb.image.onerror = function () {
-								thumb.valid = false;
-								var icon = OC.MimeType.getIconUrl(preview.mimetype);
-								setTimeout(function () {
-									thumb.image.src = icon;
-								}, 0);
-							};
-
-							if (thumb.status === 200) {
-								var imageData = preview.preview;
-								if (preview.mimetype === 'image/svg+xml') {
-									imageData = Thumbnails._purifySvg(imageData);
-								}
-								thumb.image.src =
-									'data:' + preview.mimetype + ';base64,' + imageData;
-							} else {
-								thumb.valid = false;
-								thumb.image.src = OC.MimeType.getIconUrl(preview.mimetype);
-							}
+					thumb.image.onload = function () {
+						if (square) {
+							thumb.image.width = 200;
+							thumb.image.height = 200;
 						}
-					});
+						thumb.ratio = thumb.image.width / thumb.image.height;
+						thumb.image.originalWidth = 200 * thumb.ratio;
+						thumb.valid = true;
+						thumb.status = 200;
+						thumb.loadingDeferred.resolve(thumb.image);
+						console.log(thumb);
+					};
+					thumb.image.onerror = function (data) {
+						thumb.loadingDeferred.resolve(null);
+					};
+					var width = square ? 200 : 400;
+					thumb.image.src = Gallery.utility.buildGalleryUrl('preview', '/' + id, {width: width, height: 200});
+				});
 			}
 
 			return batch;

diff --git a/lib/Controller/PreviewController.php b/lib/Controller/PreviewController.php
@@ -12,6 +12,7 @@
 
 namespace OCA\Gallery\Controller;
 
+use OCP\AppFramework\Http\DataResponse;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\ILogger;
@@ -114,17 +115,22 @@ public function getThumbnails($ids, $square, $scale) {
 
 	/**
 	 * @NoAdminRequired
+	 * @NoCSRFRequired
 	 *
 	 * Sends either a large preview of the requested file or the original file itself
 	 *
 	 * @param int $fileId the ID of the file of which we need a large preview of
 	 * @param int $width
 	 * @param int $height
 	 *
-	 * @return ImageResponse|Http\JSONResponse
+	 * @return DataResponse|ImageResponse|JSONResponse
 	 */
 	public function getPreview($fileId, $width, $height) {
 		/** @type File $file */
+		list($file, $status) = $this->getFile($fileId);
+		if ($this->request->getHeader('If-None-Match') === $file->getEtag()) {
+			return new DataResponse([], Http::STATUS_NOT_MODIFIED);
+		}
 		list($file, $preview, $status) = $this->getData($fileId, $width, $height);
 
 		if (!$preview) {
@@ -137,7 +143,13 @@ public function getPreview($fileId, $width, $height) {
 		}
 		$preview['name'] = $file->getName();
 
-		return new ImageResponse($preview, $status);
+		$response = new ImageResponse($preview, $status);
+		$response->setETag($file->getEtag());
+		$lastModified = new \DateTime();
+		$lastModified->setTimestamp($file->getMTime());
+		$response->setLastModified($lastModified);
+		$response->cacheFor(3600*24);
+		return $response;
 	}
 
 }
diff --git a/lib/Controller/PreviewPublicController.php b/lib/Controller/PreviewPublicController.php
@@ -44,6 +44,7 @@ public function getThumbnails($ids, $square, $scale) {
 	/**
 	 * @PublicPage
 	 * @UseSession
+	 * @NoCSRFRequired
 	 *
 	 * Shows a large preview of a file
 	 *