Merge pull request #33347 from nextcloud/feature/use-viewer-for-singe-file-shares

feature: use the viewer to render single file shares

Author: PVince81

apps/files_sharing/css/mobile.css

@@ -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 {

apps/files_sharing/css/mobile.css.map

@@ -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;

apps/files_sharing/css/mobile.scss

@@ -129,7 +129,6 @@ OCA.Sharing.PublicApp = {
 			}
 		}
 
-
 		// dynamically load image previews
 		var bottomMargin = 350;
 		var previewWidth = $(window).width();
@@ -153,13 +152,10 @@ OCA.Sharing.PublicApp = {
 			'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');
+		if (OCA.Viewer && OCA.Viewer.mimetypes.includes(mimetype)
+			&& (mimetype.startsWith('image/') || mimetype.startsWith('video/'))) {
+			OCA.Viewer.setRootElement('#imgframe')
+			OCA.Viewer.open({ path: '/' })
 		} else if (mimetype.substr(0, mimetype.indexOf('/')) === 'text' && window.btoa) {
 			if (OC.appswebroots['files_texteditor'] !== undefined ||
 				OC.appswebroots['text'] !== undefined) {
@@ -189,8 +185,7 @@ OCA.Sharing.PublicApp = {
 			// the icon should appear before, so the container should be
 			// prepended to the frame.
 			imgcontainer.prependTo('#imgframe');
-		}
-		else if (previewSupported === 'true') {
+		} else if (previewSupported === 'true') {
 			$('#imgframe > video').attr('poster', OC.generateUrl('/apps/files_sharing/publicpreview/' + token + '?' + OC.buildQueryString(params)));
 		}
 

apps/files_sharing/css/public.css

@@ -523,13 +523,12 @@ public function showShare($path = ''): TemplateResponse {
 			\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() : '')]);

apps/files_sharing/css/public.css.map

@@ -60,31 +60,21 @@
 			<?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>