Load public preview via JS

Backport of https://github.com/owncloud/core/pull/11368 to stable6 - since stable6 has no detection for SVG support this will just use the PNG icon instead of SVG ones.

I believe this is a better solution than backporting the whole SVG support stuff and potentially breaking a lot.

4 files changed, 50 insertions, 15 deletions

diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index d3aea1a3a15..f51b7842ae9 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -71,11 +71,6 @@ p.info a {
 	max-width:100%;
 }
 
-/* some margin for the file type icon */
-#imgframe .publicpreview {
-	margin-top: 10%;
-}
-
 thead {
 	padding-left: 0 !important; /* fixes multiselect bar offset on shared page */
 }
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index 0696f8f8b5a..377be5ab866 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -11,6 +11,29 @@ $(document).ready(function() {
 
 	if (typeof FileActions !== 'undefined') {
 		var mimetype = $('#mimetype').val();
+		var mimetypeIcon = $('#mimetypeIcon').val();
+		var previewSupported = $('#previewSupported').val();
+
+		// dynamically load image previews
+		var params = {
+			x: $(document).width() * window.devicePixelRatio,
+			y: $(document).height() * window.devicePixelRatio,
+			a: 'true',
+			file: encodeURIComponent(this.initialDir + $('#filename').val()),
+			t: $('#sharingToken').val(),
+			scalingup: 0
+		};
+
+		var img = $('<img class="publicpreview">');
+		if (previewSupported === 'true' || mimetype.substr(0, mimetype.indexOf('/')) === 'image') {
+			img.attr('src', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params));
+			img.appendTo('#imgframe');
+		} else if (mimetype.substr(0, mimetype.indexOf('/')) !== 'video') {
+			img.attr('src', mimetypeIcon);
+			img.attr('width', 32);
+			img.appendTo('#imgframe');
+		}
+
 		// Show file preview if previewer is available, images are already handled by the template
 		if (mimetype.substr(0, mimetype.indexOf('/')) != 'image' && $('.publicpreview').length === 0) {
 			// Trigger default action if not download TODO
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 23c63cfa217..96c06882a36 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -1,4 +1,8 @@
 <?php /** @var $l OC_L10N */ ?>
+<?php
+$thumbSize=1024;
+$previewSupported = OC\Preview::isMimeSupported($_['mimetype']) ? 'true' : 'false';
+?>
 <div id="notification-container">
 	<div id="notification" style="display: none;"></div>
 </div>
@@ -10,6 +14,9 @@
 <input type="hidden" name="sharingToken" value="<?php p($_['sharingToken']) ?>" id="sharingToken">
 <input type="hidden" name="filename" value="<?php p($_['filename']) ?>" id="filename">
 <input type="hidden" name="mimetype" value="<?php p($_['mimetype']) ?>" id="mimetype">
+<input type="hidden" name="previewSupported" value="<?php p($previewSupported); ?>" id="previewSupported">
+<input type="hidden" name="mimetypeIcon" value="<?php p(OC_Helper::mimetypeIcon($_['mimetype'])); ?>" id="mimetypeIcon">
+
 <header><div id="header" class="icon icon-noise <?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
 		<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud"><img class="svg"
 		                                                                                          src="<?php print_unescaped(image_path('', 'logo-wide.svg')); ?>" alt="<?php p($theme->getName()); ?>" /></a>
@@ -28,11 +35,7 @@
 		<?php if (isset($_['folder'])): ?>
 			<?php print_unescaped($_['folder']); ?>
 		<?php else: ?>
-			<?php if (substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'image'): ?>
-				<div id="imgframe">
-					<img src="<?php p($_['downloadURL']); ?>" alt="" />
-				</div>
-			<?php elseif (substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'video'): ?>
+			<?php if (substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'video'): ?>
 				<div id="imgframe">
 					<video tabindex="0" controls="" preload="none">
 						<source src="<?php p($_['downloadURL']); ?>" type="<?php p($_['mimetype']); ?>" />
@@ -40,11 +43,8 @@
 				</div>
 			<?php else: ?>
 				<div id="imgframe">
-					<?php $size = \OC\Preview::isMimeSupported($_['mimetype']) ? 500 : 128 ?>
-					<img
-						src="<?php p(OCP\Util::linkToRoute( 'core_ajax_public_preview', array('x' => $size, 'y' => $size, 'file' => urlencode($_['directory_path']), 't' => $_['dirToken']))); ?>"
-						class="publicpreview"
-						alt="" />
+					<!-- Preview frame is filled via JS to support SVG images for modern browsers -->
+					<img class="publicpreview">
 				</div>
 			<?php endif; ?>
 			<div class="directDownload">
diff --git a/core/js/js.js b/core/js/js.js
index eba73bc24ea..a0606ce3349 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -279,6 +279,23 @@ var OC={
 		return link;
 	},
 	/**
+	 * Builds a URL query from a JS map.
+	 * @param params parameter map
+	 * @return {string} String containing a URL query (without question) mark
+	 */
+	buildQueryString: function(params) {
+		if (!params) {
+			return '';
+		}
+		return $.map(params, function(value, key) {
+			var s = encodeURIComponent(key);
+			if (value !== null && typeof(value) !== 'undefined') {
+				s += '=' + encodeURIComponent(value);
+			}
+			return s;
+		}).join('&');
+	},
+	/**
 	 * get the absolute path to an image file
 	 * @param app the app id to which the image belongs
 	 * @param file the name of the image file