Use SVG previews for public sharing

Fixes https://github.com/owncloud/core/pull/11367#issuecomment-57306037 and https://github.com/owncloud/core/issues/9218

diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index 1a2394f300ed309aa3bdfbdf379a91c43dc82f7d..b30362544012de423609a66e0b4143220646f899 100644 (file)
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -56,6 +56,11 @@ OCA.Sharing.PublicApp = {
                }
 
                var mimetype = $('#mimetype').val();
+               var mimetypeIcon = $('#mimetypeIcon').val();
+               mimetypeIcon = mimetypeIcon.substring(0, mimetypeIcon.length - 3);
+               mimetypeIcon = mimetypeIcon + 'svg';
+
+               var previewSupported = $('#previewSupported').val();
 
                if (typeof FileActions !== 'undefined') {
                        // Show file preview if previewer is available, images are already handled by the template
@@ -68,21 +73,25 @@ OCA.Sharing.PublicApp = {
                        }
                }
 
+
                // dynamically load image previews
-               if (mimetype.substr(0, mimetype.indexOf('/')) === 'image') {
-
-                       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 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">');
+               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', OC.Util.replaceSVGIcon(mimetypeIcon));
+                       img.attr('width', 128);
+                       img.appendTo('#imgframe');
                }
 
                if (this.fileList) {

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index a4b3289d4c62dd26317bde3faddb8002131094ee..46bf90b1b4128e587f0378528ff2248c86334f4c 100644 (file)
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -1,5 +1,8 @@
 <?php /** @var $l OC_L10N */ ?>
-<?php $thumbSize=1024; ?>
+<?php
+$thumbSize=1024;
+$previewSupported = OC\Preview::isMimeSupported($_['mimetype']) ? 'true' : 'false';
+?>
 <?php if ( \OC\Preview::isMimeSupported($_['mimetype'])): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?>
        <link rel="image_src" href="<?php p(OCP\Util::linkToRoute( 'core_ajax_public_preview', array('x' => $thumbSize, 'y' => $thumbSize, 'file' => $_['directory_path'], 't' => $_['dirToken']))); ?>" />
 <?php endif; ?>
@@ -15,6 +18,10 @@
 <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="<?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
                <a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
                        title="" id="owncloud">
@@ -47,23 +54,15 @@
                <?php if (isset($_['folder'])): ?>
                        <?php print_unescaped($_['folder']); ?>
                <?php else: ?>
-                       <?php if (substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'image'): ?>
-                               <div id="imgframe">
-                               </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']); ?>" />
                                        </video>
                                </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' => $_['directory_path'], 't' => $_['dirToken']))); ?>"
-                                               class="publicpreview"
-                                               alt="" />
-                               </div>
+                               <!-- Preview frame is filled via JS to support SVG images for modern browsers -->
+                               <div id="imgframe"></div>
                        <?php endif; ?>
                        <div class="directDownload">
                                <a href="<?php p($_['downloadURL']); ?>" id="download" class="button">