fix: Make loading the viewer an init script

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

lib/Listener/LoadViewerScript.php

@@ -54,7 +54,9 @@ public function handle(Event $event): void {
 			return;
 		}
 
+		Util::addStyle(Application::APP_ID, 'viewer-init');
 		Util::addStyle(Application::APP_ID, 'viewer-main');
+		Util::addInitScript(Application::APP_ID, 'viewer-init');
 		Util::addScript(Application::APP_ID, 'viewer-main', 'files');
 		$this->initialStateService->provideInitialState('enabled_preview_providers', array_keys($this->previewManager->getProviders()));
 	}

src/init.ts

@@ -0,0 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { registerViewerAction } from './files_actions/viewerAction'
+import ViewerService from './services/Viewer.js'
+
+// Register the files action
+registerViewerAction()
+
+// Init Viewer Service
+window.OCA = window.OCA ?? {}
+window.OCA.Viewer = new ViewerService()
+window.OCA.Viewer.version = appVersion

src/main.js

@@ -21,7 +21,6 @@
  */
 import Vue from 'vue'
 import ViewerComponent from './views/Viewer.vue'
-import ViewerService from './services/Viewer.js'
 import { translate as t } from '@nextcloud/l10n'
 
 Vue.mixin({
@@ -37,12 +36,6 @@ INJECT_CYPRESS_FONT
 Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 
-// Init Viewer Service
-if (window.OCA) {
-	Object.assign(window.OCA, { Viewer: new ViewerService() })
-	window.OCA.Viewer.version = appVersion
-}
-
 // Create document root
 const ViewerRoot = document.createElement('div')
 ViewerRoot.id = 'viewer'

src/services/Viewer.js

@@ -23,6 +23,7 @@
 import Images from '../models/images.js'
 import Videos from '../models/videos.js'
 import Audios from '../models/audios.js'
+import logger from './logger.js'
 
 /**
  * Handler type definition
@@ -78,7 +79,7 @@ export default class Viewer {
 		this.registerHandler(Videos)
 		this.registerHandler(Audios)
 
-		console.debug('OCA.Viewer initialized')
+		logger.debug('OCA.Viewer initialized')
 	}
 
 	/**
@@ -99,9 +100,9 @@ export default class Viewer {
 	 * @param {Handler} handler a new unregistered handler
 	 */
 	registerHandler(handler) {
-		const err = this.validateHandler(handler)
-		if (err) {
-			console.error(err, handler)
+		const error = this.validateHandler(handler)
+		if (error) {
+			logger.error('Could not register handler', { error, handler })
 			return
 		}
 

src/views/Viewer.vue

@@ -287,8 +287,7 @@ export default {
 			isSidebarShown: false,
 			isFullscreenMode: false,
 			canSwipe: true,
-			// TODO: remove OCA?.Files?.fileActions when public Files is Vue
-			isStandalone: OCP?.Files === undefined && OCA?.Files?.fileActions === undefined,
+			isStandalone: false,
 			theme: null,
 			root: getRootPath(),
 			handlerId: '',
@@ -524,6 +523,11 @@ export default {
 	},
 
 	beforeMount() {
+		this.isStandalone = window.OCP?.Files === undefined
+		if (this.isStandalone) {
+			logger.info('No OCP.Files app found, viewer is now in standalone mode')
+		}
+
 		// register on load
 		document.addEventListener('DOMContentLoaded', () => {
 			// register all primary components mimes
@@ -543,16 +547,10 @@ export default {
 				this.Sidebar = OCA.Files.Sidebar.state
 			}
 
-			this.registerFileActions()
-
 			logger.info(`${this.handlers.length} viewer handlers registered`, { handlers: this.handlers })
 		})
 
 		window.addEventListener('resize', this.onResize)
-
-		if (this.isStandalone) {
-			logger.info('No OCP.Files app found, viewer is now in standalone mode')
-		}
 	},
 
 	mounted() {
@@ -933,31 +931,6 @@ export default {
 			}
 		},
 
-		registerFileActions() {
-			if (!this.isStandalone) {
-				registerFileAction(new FileAction({
-					id: 'view',
-					displayName() {
-						return t('viewer', 'View')
-					},
-					iconSvgInline: () => EyeSvg,
-					default: DefaultType.DEFAULT,
-					enabled: (nodes) => {
-						// Disable if not located in user root
-						if (nodes.some(node => !(node.isDavRessource && node.root?.startsWith('/files')))) {
-							return false
-						}
-						// Faster to check if at least one node doesn't match the requirements
-						return !nodes.some(node => (
-							(node.permissions & Permission.READ) === 0
-							|| !this.Viewer.mimetypes.includes(node.mime)
-						))
-					},
-					exec: filesActionHandler,
-				}))
-			}
-		},
-
 		/**
 		 * Close the viewer
 		 */

vite.config.js

@@ -7,6 +7,7 @@ const plyrIcons = readFileSync(join(__dirname, 'node_modules', 'plyr', 'dist', '
 
 export default createAppConfig({
 	main: 'src/main.js',
+	init: 'src/init.ts',
 }, {
 	replace: {
 		PLYR_ICONS: JSON.stringify(plyrIcons),