Merge pull request #19373 from owncloud/sidebar-preview-cover

Cover both width and height for the sidebar preview

4 files changed, 75 insertions, 15 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index faa26678562..485c20e6865 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -40,7 +40,7 @@
 	height: auto;
 }
 
-#app-sidebar .image.landscape .thumbnail::before {
+#app-sidebar .image .thumbnail .stretcher {
 	content: '';
 	display: block;
 	padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 82cca0d0fb3..39a00d0a5a5 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -10,7 +10,7 @@
 
 (function() {
 	var TEMPLATE =
-		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"></a></div>' +
+		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
 		'<div class="file-details-container">' +
 		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
 		'	<div class="file-details ellipsis">' +
@@ -140,13 +140,18 @@
 		},
 
 		loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
-			var maxImageHeight = ($container.parent().width() + 50) / (16/9); // 30px for negative margin
+			var maxImageWidth  = $container.parent().width() + 50;  // 50px for negative margins
+			var maxImageHeight = maxImageWidth / (16/9);
 			var smallPreviewSize = 75;
 
 			var isLandscape = function(img) {
 				return img.width > (img.height * 1.2);
 			};
 
+			var isSmall = function(img) {
+				return (img.width * 1.1) < (maxImageWidth * window.devicePixelRatio);
+			};
+
 			var getTargetHeight = function(img) {
 				if(isImage) {
 					var targetHeight = img.height / window.devicePixelRatio;
@@ -159,13 +164,23 @@
 				}
 			};
 
+			var getTargetRatio = function(img){
+				var ratio = img.width / img.height;
+				if (ratio > 16/9) {
+					return ratio;
+				} else {
+					return 16/9;
+				}
+			};
+
 			this._fileList.lazyLoadPreview({
 				path: path,
 				mime: mime,
 				etag: etag,
 				y: isImage ? maxImageHeight : smallPreviewSize,
-				x: isImage ? 99999 /* only limit on y */ : smallPreviewSize,
+				x: isImage ? maxImageWidth : smallPreviewSize,
 				a: isImage ? 1 : null,
+				mode: isImage ? 'cover' : null,
 				callback: function (previewUrl, img) {
 					$iconDiv.previewImg = previewUrl;
 
@@ -176,7 +191,7 @@
 					$iconDiv.removeClass('icon-loading icon-32');
 					var targetHeight = getTargetHeight(img);
 					if (this.model.isImage() && targetHeight > smallPreviewSize) {
-						$container.addClass(isLandscape(img)? 'landscape': 'portrait');
+						$container.addClass((isLandscape(img) && !isSmall(img))? 'landscape': 'portrait');
 						$container.addClass('image');
 					}
 
@@ -184,7 +199,13 @@
 					// when we dont have a preview we show the mime icon in the error handler
 					$iconDiv.css({
 						'background-image': 'url("' + previewUrl + '")',
-						height: (isLandscape(img) && targetHeight > smallPreviewSize)? 'auto': targetHeight
+						height: (targetHeight > smallPreviewSize)? 'auto': targetHeight,
+						'max-height': isSmall(img)? targetHeight: null
+					});
+
+					var targetRatio = getTargetRatio(img);
+					$iconDiv.find('.stretcher').css({
+						'padding-bottom': (100 / targetRatio) + '%'
 					});
 				}.bind(this),
 				error: function () {
diff --git a/lib/private/preview.php b/lib/private/preview.php
index de964b72df2..1127048b7fd 100644
--- a/lib/private/preview.php
+++ b/lib/private/preview.php
@@ -837,6 +837,11 @@ class Preview {
 		$askedWidth = $this->getMaxX();
 		$askedHeight = $this->getMaxY();
 
+		if ($this->mode === self::MODE_COVER) {
+			list($askedWidth, $askedHeight) =
+				$this->applyCover($askedWidth, $askedHeight, $previewWidth, $previewHeight);
+		}
+
 		/**
 		 * Phase 1: If required, adjust boundaries to keep aspect ratio
 		 */
@@ -845,20 +850,12 @@ class Preview {
 				$this->applyAspectRatio($askedWidth, $askedHeight, $previewWidth, $previewHeight);
 		}
 
-		if ($this->mode === self::MODE_COVER) {
-			list($scaleWidth, $scaleHeight) =
-				$this->applyCover($askedWidth, $askedHeight, $previewWidth, $previewHeight);
-		} else {
-			$scaleWidth = $askedWidth;
-			$scaleHeight = $askedHeight;
-		}
-
 		/**
 		 * Phase 2: Resizes preview to try and match requirements.
 		 * Takes the scaling ratio into consideration
 		 */
 		list($newPreviewWidth, $newPreviewHeight) = $this->scale(
-			$image, $scaleWidth, $scaleHeight, $previewWidth, $previewHeight
+			$image, $askedWidth, $askedHeight, $previewWidth, $previewHeight
 		);
 
 		// The preview has been resized and should now have the asked dimensions
@@ -890,6 +887,7 @@ class Preview {
 
 			return;
 		}
+
 		// The preview is smaller, but we can't touch it
 		$this->storePreview($fileId, $newPreviewWidth, $newPreviewHeight);
 	}
diff --git a/tests/lib/preview.php b/tests/lib/preview.php
index 9e118014bac..a135ed40d0a 100644
--- a/tests/lib/preview.php
+++ b/tests/lib/preview.php
@@ -874,4 +874,45 @@ class Preview extends TestCase {
 
 		return [(int)$askedWidth, (int)$askedHeight];
 	}
+
+	public function testKeepAspectRatio() {
+		$originalWidth = 1680;
+		$originalHeight = 1050;
+		$originalAspectRation = $originalWidth / $originalHeight;
+
+		$preview = new \OC\Preview(
+			self::TEST_PREVIEW_USER1, 'files/', 'testimage.jpg',
+			150,
+			150
+		);
+		$preview->setKeepAspect(true);
+		$image = $preview->getPreview();
+
+		$aspectRatio = $image->width() / $image->height();
+		$this->assertEquals(round($originalAspectRation, 2), round($aspectRatio, 2));
+
+		$this->assertLessThanOrEqual(150, $image->width());
+		$this->assertLessThanOrEqual(150, $image->height());
+	}
+
+	public function testKeepAspectRatioCover() {
+		$originalWidth = 1680;
+		$originalHeight = 1050;
+		$originalAspectRation = $originalWidth / $originalHeight;
+
+		$preview = new \OC\Preview(
+			self::TEST_PREVIEW_USER1, 'files/', 'testimage.jpg',
+			150,
+			150
+		);
+		$preview->setKeepAspect(true);
+		$preview->setMode(\OC\Preview::MODE_COVER);
+		$image = $preview->getPreview();
+
+		$aspectRatio = $image->width() / $image->height();
+		$this->assertEquals(round($originalAspectRation, 2), round($aspectRatio, 2));
+
+		$this->assertGreaterThanOrEqual(150, $image->width());
+		$this->assertGreaterThanOrEqual(150, $image->height());
+	}
 }