From 99aa938452a089e66fe993c98a4292fcfa9caa15 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Mon, 25 Jul 2022 20:17:15 +0200
Subject: feature: first take on using the viewer to render single file shares
Signed-off-by: Max <max@nextcloud.com>
---
apps/files_sharing/css/mobile.css | 1 -
apps/files_sharing/css/mobile.css.map | 2 +-
apps/files_sharing/css/mobile.scss | 1 -
apps/files_sharing/css/public.css | 14 +++++
apps/files_sharing/css/public.css.map | 2 +-
apps/files_sharing/css/public.scss | 13 +++++
apps/files_sharing/css/publicView.css | 15 +++++-
apps/files_sharing/css/publicView.css.map | 2 +-
apps/files_sharing/js/public.js | 63 +---------------------
.../lib/Controller/ShareController.php | 9 ++--
apps/files_sharing/templates/public.php | 38 +++++--------
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>
--
cgit v1.2.3