load image via javascript and use $(document).width() to determine the proper side of the image to be returned

2 files changed, 62 insertions, 48 deletions

diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index ae2412f6a3b..0b4dec81764 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -12,10 +12,11 @@
 
 $(document).ready(function() {
 
+	var mimetype = $('#mimetype').val();
+
 	if (typeof FileActions !== 'undefined') {
-		var mimetype = $('#mimetype').val();
 		// Show file preview if previewer is available, images are already handled by the template
-		if (mimetype.substr(0, mimetype.indexOf('/')) != 'image' && $('.publicpreview').length === 0) {
+		if (mimetype.substr(0, mimetype.indexOf('/')) !== 'image' && $('.publicpreview').length === 0) {
 			// Trigger default action if not download TODO
 			var action = FileActions.getDefault(mimetype, 'file', OC.PERMISSION_READ);
 			if (typeof action !== 'undefined') {
@@ -24,57 +25,74 @@ $(document).ready(function() {
 		}
 	}
 
-	// override since the format is different
-	Files.getDownloadUrl = function(filename, dir) {
-		if ($.isArray(filename)) {
-			filename = JSON.stringify(filename);
-		}
-		var path = dir || FileList.getCurrentDirectory();
+	// dynamically load image previews
+	if (mimetype.substr(0, mimetype.indexOf('/')) === 'image' ) {
+
 		var params = {
-			service: 'files',
-			t: $('#sharingToken').val(),
-			path: path,
-			files: filename,
-			download: null
+			x: $(document).width() * window.devicePixelRatio,
+			a: 'true',
+			file: encodeURIComponent($('#dir').val() + $('#filename').val()),
+			t: $('#sharingToken').val()
 		};
-		return OC.filePath('', '', 'public.php') + '?' + OC.buildQueryString(params);
-	};
 
-	Files.getAjaxUrl = function(action, params) {
-		params = params || {};
-		params.t = $('#sharingToken').val();
-		return OC.filePath('files_sharing', 'ajax', action + '.php') + '?' + OC.buildQueryString(params);
-	};
+		var img = $('<img class="publicpreview">');
+		img.attr('src', OC.filePath('files_sharing', 'ajax', 'publicpreview.php') + '?' + OC.buildQueryString(params));
+		img.appendTo('#imgframe');
+	}
 
-	FileList.linkTo = function(dir) {
-		var params = {
-			service: 'files',
-			t: $('#sharingToken').val(),
-			dir: dir
+	// override since the format is different
+	if (typeof Files !== 'undefined') {
+		Files.getDownloadUrl = function(filename, dir) {
+			if ($.isArray(filename)) {
+				filename = JSON.stringify(filename);
+			}
+			var path = dir || FileList.getCurrentDirectory();
+			var params = {
+				service: 'files',
+				t: $('#sharingToken').val(),
+				path: path,
+				files: filename,
+				download: null
+			};
+			return OC.filePath('', '', 'public.php') + '?' + OC.buildQueryString(params);
 		};
-		return OC.filePath('', '', 'public.php') + '?' + OC.buildQueryString(params);
-	};
 
-	Files.generatePreviewUrl = function(urlSpec) {
-		urlSpec.t = $('#dirToken').val();
-		return OC.generateUrl('/apps/files_sharing/ajax/publicpreview.php?') + $.param(urlSpec);
-	};
+		Files.getAjaxUrl = function(action, params) {
+			params = params || {};
+			params.t = $('#sharingToken').val();
+			return OC.filePath('files_sharing', 'ajax', action + '.php') + '?' + OC.buildQueryString(params);
+		};
 
-	var file_upload_start = $('#file_upload_start');
-	file_upload_start.on('fileuploadadd', function(e, data) {
-		var fileDirectory = '';
-		if(typeof data.files[0].relativePath !== 'undefined') {
-			fileDirectory = data.files[0].relativePath;
-		}
+		FileList.linkTo = function(dir) {
+			var params = {
+				service: 'files',
+				t: $('#sharingToken').val(),
+				dir: dir
+			};
+			return OC.filePath('', '', 'public.php') + '?' + OC.buildQueryString(params);
+		};
 
-		// Add custom data to the upload handler
-		data.formData = {
-			requesttoken: $('#publicUploadRequestToken').val(),
-			dirToken: $('#dirToken').val(),
-			subdir: $('input#dir').val(),
-			file_directory: fileDirectory
+		Files.generatePreviewUrl = function(urlSpec) {
+			urlSpec.t = $('#dirToken').val();
+			return OC.generateUrl('/apps/files_sharing/ajax/publicpreview.php?') + $.param(urlSpec);
 		};
-	});
+
+		var file_upload_start = $('#file_upload_start');
+		file_upload_start.on('fileuploadadd', function(e, data) {
+			var fileDirectory = '';
+			if(typeof data.files[0].relativePath !== 'undefined') {
+				fileDirectory = data.files[0].relativePath;
+			}
+
+			// Add custom data to the upload handler
+			data.formData = {
+				requesttoken: $('#publicUploadRequestToken').val(),
+				dirToken: $('#dirToken').val(),
+				subdir: $('input#dir').val(),
+				file_directory: fileDirectory
+			};
+		});
+	}
 
 	$(document).on('click', '#directLink', function() {
 		$(this).focus();
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 7614e122e86..9471752b6b5 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -30,10 +30,6 @@
 		<?php else: ?>
 			<?php if (substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'image'): ?>
 				<div id="imgframe">
-					<img
-						src="<?php p(OCP\Util::linkToRoute( 'core_ajax_public_preview', array('x' => 1000, 'y' => 1000, 'a' => 'true', 'file' => $_['directory_path'], 't' => $_['dirToken']))); ?>"
-						class="publicpreview"
-						alt=""/>
 				</div>
 			<?php elseif (substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'video'): ?>
 				<div id="imgframe">