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

Signed-off-by: Max <max@nextcloud.com>
nextcloud · Aug 1, 2022 · 98a3fef · 98a3fef
1 parent 5edab67
commit 98a3fef
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 96 deletions.
diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css
diff --git a/apps/files_sharing/css/mobile.css.map b/apps/files_sharing/css/mobile.css.map
diff --git 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
diff --git a/apps/files_sharing/css/public.css.map b/apps/files_sharing/css/public.css.map
diff --git 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
diff --git a/apps/files_sharing/css/publicView.css.map b/apps/files_sharing/css/publicView.css.map
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
@@ -128,70 +128,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
@@ -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() : '')]);

diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
@@ -61,31 +61,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>