Merge pull request #811 from nextcloud/use-viewer-also-in-public-page…

…s-for-a-single-share

Use Viewer also in public pages for a single share

src/public.js

@@ -59,17 +59,26 @@ window.addEventListener('DOMContentLoaded', function() {
 			page,
 		})
 
-		// Create viewer frame
-		const viewerNode = document.createElement('iframe')
-		viewerNode.style.height = '100%'
-		viewerNode.style.width = '100%'
-		viewerNode.style.position = 'absolute'
-
 		// Inject viewer
 		if (contentElmt) {
 			contentElmt.innerHTML = ''
-			contentElmt.appendChild(viewerNode)
-			viewerNode.src = viewerUrl
+
+			if (OCA.Viewer) {
+				OCA.Viewer.setRootElement('#files-public-content')
+				OCA.Viewer.open({ path: '/' })
+			} else {
+				logger.error('Viewer not available, PDF viewer directly injected')
+
+				// Create viewer frame
+				const viewerNode = document.createElement('iframe')
+				viewerNode.style.height = '100%'
+				viewerNode.style.width = '100%'
+				viewerNode.style.position = 'absolute'
+
+				contentElmt.appendChild(viewerNode)
+				viewerNode.src = viewerUrl
+			}
+
 			footerElmt.style.display = 'none'
 			mainContent.style.minHeight = 'calc(100% - var(--header-height))' // Make the viewer take the whole height as the footer is now hidden.
 			// overwrite style in order to fix the viewer on public pages

src/views/PDFView.vue

@@ -21,12 +21,15 @@
   -
   -->
 <template>
-	<iframe :src="iframeSrc" />
+	<iframe ref="iframe"
+		:src="iframeSrc" />
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
 import canDownload from '../utils/canDownload.js'
+import isPdf from '../utils/isPdf.js'
+import isPublicPage from '../utils/isPublicPage.js'
 
 export default {
 	name: 'PDFView',
@@ -41,6 +44,14 @@ export default {
 	},
 
 	async mounted() {
+		if (isPublicPage() && isPdf()) {
+			// Force style for public shares of a single PDF file, as there are
+			// no CSS selectors that could be used only for that case.
+			this.$refs.iframe.style.height = '100%'
+			this.$refs.iframe.style.position = 'absolute'
+			this.$refs.iframe.style.marginTop = 'unset'
+		}
+
 		this.doneLoading()
 		this.$nextTick(function() {
 			this.$el.focus()