Merge pull request #2414 from nextcloud/version_previews

Fix empty version previews

apps/files_versions/js/versioncollection.js

@@ -81,7 +81,8 @@
 					name: version.name,
 					fullPath: fullPath,
 					timestamp: revision,
-					size: version.size
+					size: version.size,
+					mimetype: version.mimetype
 				};
 			});
 			this._endReached = result.data.endReached;

apps/files_versions/js/versionstabview.js

@@ -15,7 +15,7 @@
 		'<li data-revision="{{timestamp}}">' +
 		'<div>' +
 		'<div class="preview-container">' +
-		'<img class="preview" src="{{previewUrl}}"/>' +
+		'<img class="preview" src="{{previewUrl}}" width="44" height="44"/>' +
 		'</div>' +
 		'<div class="version-container">' +
 		'<div>' +
@@ -162,6 +162,15 @@
 		_onAddModel: function(model) {
 			var $el = $(this.itemTemplate(this._formatItem(model)));
 			this.$versionsContainer.append($el);
+
+			var preview = $el.find('.preview')[0];
+			this._lazyLoadPreview({
+				url: model.getPreviewUrl(),
+				mime: model.get('mimetype'),
+				callback: function(url) {
+					preview.src = url;
+				}
+			});
 			$el.find('.has-tooltip').tooltip();
 		},
 
@@ -206,7 +215,6 @@
 				downloadUrl: version.getDownloadUrl(),
 				downloadIconUrl: OC.imagePath('core', 'actions/download'),
 				revertIconUrl: OC.imagePath('core', 'actions/history'),
-				previewUrl: version.getPreviewUrl(),
 				revertLabel: t('files_versions', 'Restore'),
 				canRevert: (this.collection.getFileInfo().get('permissions') & OC.PERMISSION_UPDATE) !== 0
 			}, version.attributes);
@@ -235,6 +243,38 @@
 				return false;
 			}
 			return !fileInfo.isDirectory();
+		},
+
+		/**
+		 * Lazy load a file's preview.
+		 *
+		 * @param path path of the file
+		 * @param mime mime type
+		 * @param callback callback function to call when the image was loaded
+		 * @param etag file etag (for caching)
+		 */
+		_lazyLoadPreview : function(options) {
+			var url = options.url;
+			var mime = options.mime;
+			var ready = options.callback;
+
+			// get mime icon url
+			var iconURL = OC.MimeType.getIconUrl(mime);
+			ready(iconURL); // set mimeicon URL
+
+			var img = new Image();
+			img.onload = function(){
+				// if loading the preview image failed (no preview for the mimetype) then img.width will < 5
+				if (img.width > 5) {
+					ready(url, img);
+				} else if (options.error) {
+					options.error();
+				}
+			};
+			if (options.error) {
+				img.onerror = options.error;
+			}
+			img.src = url;
 		}
 	});
 

apps/files_versions/lib/Storage.php

@@ -467,6 +467,7 @@ class Storage {
 						$versions[$key]['path'] = Filesystem::normalizePath($pathinfo['dirname'] . '/' . $filename);
 						$versions[$key]['name'] = $versionedFile;
 						$versions[$key]['size'] = $view->filesize($dir . '/' . $entryName);
+						$versions[$key]['mimetype'] = \OC::$server->getMimeTypeDetector()->detectPath($versionedFile);
 					}
 				}
 			}

apps/files_versions/tests/js/versionstabviewSpec.js

@@ -24,14 +24,16 @@ describe('OCA.Versions.VersionsTabView', function() {
 			timestamp: time1,
 			name: 'some file.txt',
 			size: 140,
-			fullPath: '/subdir/some file.txt'
+			fullPath: '/subdir/some file.txt',
+			mimetype: 'text/plain'
 		});
 		var version2 = new VersionModel({
 			id: time2,
 			timestamp: time2,
 			name: 'some file.txt',
 			size: 150,
-			fullPath: '/subdir/some file.txt'
+			fullPath: '/subdir/some file.txt',
+			mimetype: 'text/plain'
 		});
 
 		testVersions = [version1, version2];
@@ -80,14 +82,14 @@ describe('OCA.Versions.VersionsTabView', function() {
 			expect($item.find('.versiondate').text()).toEqual('seconds ago');
 			expect($item.find('.size').text()).toEqual('< 1 KB');
 			expect($item.find('.revertVersion').length).toEqual(1);
-			expect($item.find('.preview').attr('src')).toEqual(version1.getPreviewUrl());
+			expect($item.find('.preview').attr('src')).toEqual('http://localhost/core/img/filetypes/text.svg');
 
 			$item = $versions.eq(1);
 			expect($item.find('.downloadVersion').attr('href')).toEqual(version2.getDownloadUrl());
 			expect($item.find('.versiondate').text()).toEqual('2 days ago');
 			expect($item.find('.size').text()).toEqual('< 1 KB');
 			expect($item.find('.revertVersion').length).toEqual(1);
-			expect($item.find('.preview').attr('src')).toEqual(version2.getPreviewUrl());
+			expect($item.find('.preview').attr('src')).toEqual('http://localhost/core/img/filetypes/text.svg');
 		});
 
 		it('does not render revert button when no update permissions', function() {
@@ -104,13 +106,13 @@ describe('OCA.Versions.VersionsTabView', function() {
 			expect($item.find('.downloadVersion').attr('href')).toEqual(version1.getDownloadUrl());
 			expect($item.find('.versiondate').text()).toEqual('seconds ago');
 			expect($item.find('.revertVersion').length).toEqual(0);
-			expect($item.find('.preview').attr('src')).toEqual(version1.getPreviewUrl());
+			expect($item.find('.preview').attr('src')).toEqual('http://localhost/core/img/filetypes/text.svg');
 
 			$item = $versions.eq(1);
 			expect($item.find('.downloadVersion').attr('href')).toEqual(version2.getDownloadUrl());
 			expect($item.find('.versiondate').text()).toEqual('2 days ago');
 			expect($item.find('.revertVersion').length).toEqual(0);
-			expect($item.find('.preview').attr('src')).toEqual(version2.getPreviewUrl());
+			expect($item.find('.preview').attr('src')).toEqual('http://localhost/core/img/filetypes/text.svg');
 		});
 	});
 
@@ -156,7 +158,8 @@ describe('OCA.Versions.VersionsTabView', function() {
 				timestamp: time3,
 				name: 'some file.txt',
 				size: 54,
-				fullPath: '/subdir/some file.txt'
+				fullPath: '/subdir/some file.txt',
+				mimetype: 'text/plain'
 			});
 
 			tabView.collection.add(version3);
@@ -167,7 +170,7 @@ describe('OCA.Versions.VersionsTabView', function() {
 			expect($item.find('.downloadVersion').attr('href')).toEqual(version3.getDownloadUrl());
 			expect($item.find('.versiondate').text()).toEqual('7 days ago');
 			expect($item.find('.revertVersion').length).toEqual(1);
-			expect($item.find('.preview').attr('src')).toEqual(version3.getPreviewUrl());
+			expect($item.find('.preview').attr('src')).toEqual('http://localhost/core/img/filetypes/text.svg');
 		});
 	});