feature: first take on using the viewer to render single file shares

Signed-off-by: Max <max@nextcloud.com>

11 files changed, 64 insertions, 96 deletions

diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css
index 114949d8c48..96b9736b6ac 100644
--- a/apps/files_sharing/css/mobile.css
+++ b/apps/files_sharing/css/mobile.css
@@ -43,7 +43,6 @@ table td.date {
   #imgframe {
     width: 100%;
     padding: 0;
-    margin-bottom: 35px;
   }
 
   /* some margin for the file type icon */
diff --git a/apps/files_sharing/css/mobile.css.map b/apps/files_sharing/css/mobile.css.map
index 36f4289e94a..ab822b947db 100644
--- a/apps/files_sharing/css/mobile.css.map
+++ b/apps/files_sharing/css/mobile.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"mobile.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"mobile.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss
index d058ad2a30e..5800bf6755f 100644
--- a/apps/files_sharing/css/mobile.scss
+++ b/apps/files_sharing/css/mobile.scss
@@ -24,7 +24,6 @@ table td.filename .nametext {
 #imgframe {
 	width: 100%;
 	padding: 0;
-	margin-bottom: 35px;
 }
 /* some margin for the file type icon */
 #imgframe .publicpreview {
diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index a07b00b7b3d..ad80b871454 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -41,6 +41,11 @@
   margin: 0 auto;
 }
 
+#imgframe #viewer {
+  height: 100%;
+  width: 100%;
+}
+
 #imgframe img {
   max-height: 100% !important;
   max-width: 100% !important;
@@ -67,6 +72,15 @@
   font-size: 1.2em;
 }
 
+#imgframe .viewer__file {
+  height: 100%;
+  width: 100%;
+}
+
+#imgframe .plyr {
+  max-height: 100%;
+}
+
 /* fix multiselect bar offset on shared page */
 thead {
   left: 0 !important;
diff --git a/apps/files_sharing/css/public.css.map b/apps/files_sharing/css/public.css.map
index c100a63b6d8..685bc56dd9e 100644
--- a/apps/files_sharing/css/public.css.map
+++ b/apps/files_sharing/css/public.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC","file":"public.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC","file":"public.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 4b3ea818be8..588a11d30a7 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -21,6 +21,10 @@
 	margin:0 auto;
 }
 
+#imgframe #viewer {
+	height: 100%;
+	width: 100%;
+}
 
 #imgframe img {
 	max-height: 100% !important;
@@ -48,6 +52,15 @@
 	font-size: 1.2em;
 }
 
+#imgframe .viewer__file {
+	height: 100%;
+	width: 100%;
+}
+
+#imgframe .plyr {
+	max-height: 100%;
+}
+
 /* fix multiselect bar offset on shared page */
 thead {
 	left: 0 !important;
diff --git a/apps/files_sharing/css/publicView.css b/apps/files_sharing/css/publicView.css
index 91429ffbdab..d37218f76aa 100644
--- a/apps/files_sharing/css/publicView.css
+++ b/apps/files_sharing/css/publicView.css
@@ -41,6 +41,11 @@
   margin: 0 auto;
 }
 
+#imgframe #viewer {
+  height: 100%;
+  width: 100%;
+}
+
 #imgframe img {
   max-height: 100% !important;
   max-width: 100% !important;
@@ -67,6 +72,15 @@
   font-size: 1.2em;
 }
 
+#imgframe .viewer__file {
+  height: 100%;
+  width: 100%;
+}
+
+#imgframe .plyr {
+  max-height: 100%;
+}
+
 /* fix multiselect bar offset on shared page */
 thead {
   left: 0 !important;
@@ -277,7 +291,6 @@ table td.date {
   #imgframe {
     width: 100%;
     padding: 0;
-    margin-bottom: 35px;
   }
 
   /* some margin for the file type icon */
diff --git a/apps/files_sharing/css/publicView.css.map b/apps/files_sharing/css/publicView.css.map
index e49de3e17ba..5ece94c690a 100644
--- a/apps/files_sharing/css/publicView.css.map
+++ b/apps/files_sharing/css/publicView.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAID;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC;;;ADjOJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AEEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"publicView.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","public.scss","mobile.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AACA;EACC;;;AAED;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;AAAA;AAGC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;;;AAKD;EAII;IACC;;;AAQL;EAGG;IACC;;;AD9OJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AEEA;AAEA;EACA;IACC;;;AAGD;EACA;AAAA;AAAA;AAAA;IAIC;;;AAGD;EACA;IACC;;;AAGD;EACA;IACC;IACA;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;;;AAED;EACA;IACC;;;AAGD;EACA;IACC;IACA;IACA;IACA;;;EAGD;IACI;IACA;;;EAEJ;IACC;;;EAGD;IACC","file":"publicView.css"}
\ No newline at end of file
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index 64bd98ab8d8..cbb218ca3a2 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -129,70 +129,11 @@ OCA.Sharing.PublicApp = {
 			}
 		}
 
-
-		// dynamically load image previews
 		var bottomMargin = 350;
 		var previewWidth = $(window).width();
 		var previewHeight = $(window).height() - bottomMargin;
-		previewHeight = Math.max(200, previewHeight);
-		var params = {
-			x: Math.ceil(previewWidth * window.devicePixelRatio),
-			y: Math.ceil(previewHeight * window.devicePixelRatio),
-			a: 'true',
-			file: encodeURIComponent(this.initialDir + $('#filename').val()),
-			scalingup: 0
-		};
-
-		var imgcontainer = $('<img class="publicpreview" alt="">');
-		if (hideDownload === 'false') {
-			imgcontainer = $('<a href="' + $('#previewURL').val() + '" target="_blank"></a>').append(imgcontainer);
-		}
-		var img = imgcontainer.hasClass('publicpreview')? imgcontainer: imgcontainer.find('.publicpreview');
-		img.css({
-			'max-width': previewWidth,
-			'max-height': previewHeight
-		});
-
-		var fileSize = parseInt($('#filesize').val(), 10);
-		var maxGifSize = parseInt($('#maxSizeAnimateGif').val(), 10);
-
-		if (mimetype === 'image/gif' &&
-			(maxGifSize === -1 || fileSize <= (maxGifSize * 1024 * 1024))) {
-			img.attr('src', $('#downloadURL').val());
-			imgcontainer.appendTo('#imgframe');
-		} else if (mimetype.substr(0, mimetype.indexOf('/')) === 'text' && window.btoa) {
-			if (OC.appswebroots['files_texteditor'] !== undefined ||
-				OC.appswebroots['text'] !== undefined) {
-				// the text editor handles the previewing
-				return;
-			}
-			// Undocumented Url to public WebDAV endpoint
-			var url = parent.location.protocol + '//' + location.host + OC.linkTo('', 'public.php/webdav');
-			$.ajax({
-				url: url,
-				headers: {
-					Authorization: 'Basic ' + btoa(token + ':'),
-					Range: 'bytes=0-10000'
-				}
-			}).then(function (data) {
-				self._showTextPreview(data, previewHeight);
-			});
-		} else if ((previewSupported === 'true' && mimetype.substr(0, mimetype.indexOf('/')) !== 'video') ||
-			mimetype.substr(0, mimetype.indexOf('/')) === 'image' &&
-			mimetype !== 'image/svg+xml') {
-			img.attr('src', OC.generateUrl('/apps/files_sharing/publicpreview/' + token + '?' + OC.buildQueryString(params)));
-			imgcontainer.appendTo('#imgframe');
-		} else if (mimetype.substr(0, mimetype.indexOf('/')) !== 'video') {
-			img.attr('src', mimetypeIcon);
-			img.attr('width', 128);
-			// "#imgframe" is either empty or it contains an audio preview that
-			// the icon should appear before, so the container should be
-			// prepended to the frame.
-			imgcontainer.prependTo('#imgframe');
-		}
-		else if (previewSupported === 'true') {
-			$('#imgframe > video').attr('poster', OC.generateUrl('/apps/files_sharing/publicpreview/' + token + '?' + OC.buildQueryString(params)));
-		}
+		OCA.Viewer.setRootElement('#imgframe')
+		OCA.Viewer.open({ path: '/' })
 
 		if (this.fileList) {
 			// TODO: move this to a separate PublicFileList class that extends OCA.Files.FileList (+ unit tests)
diff --git a/apps/files_sharing/lib/Controller/ShareController.php b/apps/files_sharing/lib/Controller/ShareController.php
index a12878e6de2..87f143facd0 100644
--- a/apps/files_sharing/lib/Controller/ShareController.php
+++ b/apps/files_sharing/lib/Controller/ShareController.php
@@ -523,13 +523,12 @@ class ShareController extends AuthPublicShareController {
 			\OCP\Util::addScript('files', 'filelist');
 			\OCP\Util::addScript('files', 'keyboardshortcuts');
 			\OCP\Util::addScript('files', 'operationprogressbar');
-
-			// Load Viewer scripts
-			if (class_exists(LoadViewer::class)) {
-				$this->eventDispatcher->dispatchTyped(new LoadViewer());
-			}
 		}
 
+		// Load Viewer scripts
+		if (class_exists(LoadViewer::class)) {
+			$this->eventDispatcher->dispatchTyped(new LoadViewer());
+		}
 		// OpenGraph Support: http://ogp.me/
 		\OCP\Util::addHeader('meta', ['property' => "og:title", 'content' => $shareTmpl['filename']]);
 		\OCP\Util::addHeader('meta', ['property' => "og:description", 'content' => $this->defaults->getName() . ($this->defaults->getSlogan() !== '' ? ' - ' . $this->defaults->getSlogan() : '')]);
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 7e6289784ae..13e4366c1c1 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -60,31 +60,21 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 			<?php if (isset($_['folder'])): ?>
 				<?php print_unescaped($_['folder']); ?>
 			<?php else: ?>
-				<?php if ($_['previewEnabled'] && substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'audio'): ?>
-					<div id="imgframe">
-						<audio tabindex="0" controls="" preload="none" style="width: 100%; max-width: <?php p($_['previewMaxX']); ?>px; max-height: <?php p($_['previewMaxY']); ?>px"
-							   <?php // See https://github.com/nextcloud/server/pull/27674?>
-							   <?php if ($_['hideDownload']) { ?>controlsList="nodownload" <?php } ?>>
-							<source src="<?php p($_['downloadURL']); ?>" type="<?php p($_['mimetype']); ?>" />
-						</audio>
-					</div>
-				<?php else: ?>
-					<!-- Preview frame is filled via JS to support SVG images for modern browsers -->
-					<div id="imgframe"></div>
-						<?php if (isset($_['mimetype']) && strpos($_['mimetype'], 'image') === 0) { ?>
-							<div class="directDownload">
-								<div>
-									<?php p($_['filename'])?> (<?php p($_['fileSize']) ?>)
-								</div>
-								<?php if (!$_['hideDownload']) { ?>
-									<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
-										<span class="icon icon-download"></span>
-										<?php p($l->t('Download'))?>
-									</a>
-								<?php } ?>
-							</div>
+				<!-- preview frame to open file in with viewer -->
+				<div id="imgframe"></div>
+				<?php if (isset($_['mimetype']) && strpos($_['mimetype'], 'image') === 0) { ?>
+					<div class="directDownload">
+						<div>
+							<?php p($_['filename'])?> (<?php p($_['fileSize']) ?>)
+						</div>
+						<?php if (!$_['hideDownload']) { ?>
+							<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
+								<span class="icon icon-download"></span>
+								<?php p($l->t('Download'))?>
+							</a>
 						<?php } ?>
-				<?php endif; ?>
+					</div>
+				<?php } ?>
 				<?php if ($_['previewURL'] === $_['downloadURL'] && !$_['hideDownload']): ?>
 					<div class="directDownload">
 						<div>