feat: viewer 6.0.0

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

Author: skjnldsv

src/api_package/custom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+declare module '*.svg?raw' {
+	const content: string
+	export default content
+}
+
+declare module '*.vue' {
+	import Vue from 'vue'
+	export default Vue
+}

src/api_package/global.d.ts

@@ -4,13 +4,18 @@
  */
 
 import type { IHandler } from './index.ts'
+import type { Viewer } from './viewer.ts'
 
 declare global {
 	interface Window {
 		/**
 		 * Registered viewer handlers.
 		 */
-		// eslint-disable-next-line camelcase
-		_oca_viewer_handlers: Map<string, IHandler>
+		_nc_viewer_handlers: Map<string, IHandler>
+
+		/**
+		 * The viewer global instance.
+		 */
+		_nc_viewer_service: Viewer
 	}
 }

src/api_package/index.ts

@@ -2,46 +2,105 @@
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type { File, Node } from '@nextcloud/files'
 
-import type { AsyncComponent, Component } from 'vue'
+import { DefaultType, FileAction, FileType, getFileActions, registerFileAction } from '@nextcloud/files'
+import FileSvg from '@mdi/svg/svg/file.svg?raw'
+import OpenInAppSvg from '@mdi/svg/svg/open-in-app.svg?raw'
 
+import { getViewer } from './viewer.ts'
+import { t } from '@nextcloud/l10n'
+import { logger } from '../services/logger.ts'
+
+const ACTION_VIEWER = 'viewer-open'
 export interface IHandler {
 	/**
 	 * Unique identifier for the handler
 	 */
 	id: string
 
 	/**
-	 * Indicate support for comparing two files
+	 * The handler translated name
 	 */
-	canCompare?: boolean
+	displayName: string
 
 	/**
-	 * Vue 2 component to render the file.
+	 * Optional icon for the handler
 	 */
-	component: Component | AsyncComponent
+	iconSvgInline?: string
 
 	/**
-	 * Group identifier to combine for navigating to the next/previous files
+	 * The custom element tag name to use for this handler.
+	 */
+	tagname: string
+
+	/**
+	 * Identifier to group handlers by.
+	 * When opening a folder we'll check
+	 * against all handlers that are enabled
+	 * for the given group AND matches the
+	 * group property.
 	 */
 	group?: string
 
 	/**
-	 * List of mime types that are supported for opening
+	 * Is this enabled for the given mimes ?
 	 */
-	mimes?: string[]
+	enabled: (nodes: File[]) => boolean
 
 	/**
-	 * Aliases for mime types, used to map different mime types to the same handler.
+	 * Optional function to preload data for the given node.
+	 * This will be called for the previous and next nodes on
+	 * opening a file to allow the handler to be faster when navigating.
+	 *
+	 * @param node - The node to preload data for
+	 * @returns A promise that resolves when the data is preloaded
 	 */
-	mimesAliases?: Record<string, string>
+	preload?: (node: File) => Promise<void>
 
 	/**
 	 * Viewer modal theme (one of 'dark', 'light', 'default')
 	 */
 	theme?: 'dark' | 'light' | 'default'
 }
 
+const topLevelViewerAction = new FileAction({
+	id: ACTION_VIEWER,
+	displayName: () => t('viewer', 'Open with …'),
+	iconSvgInline: () => OpenInAppSvg,
+	order: -1000,
+
+	enabled: (files: Node[]) => {
+		if (files.length === 0) {
+			return false
+		}
+
+		// We do not support folders
+		if (files.some(file => file.type !== FileType.File)) {
+			return false
+		}
+
+		// Check if we have more than one handler that can handle this mime
+		// If yes, we return true to show the "Open with ..." menu
+		let supportedHandlerCount = 0
+		for (const handler of getHandlers().values()) {
+			if (handler.enabled(files)) {
+				supportedHandlerCount++
+			}
+			// TODO: Change to 1
+			if (supportedHandlerCount > 0) {
+				return true
+			}
+		}
+
+		logger.debug('No hander found for the given nodes', { files })
+		return false
+	},
+	exec() {
+		return Promise.resolve(null)
+	}
+})
+
 /**
  * Register a new handler for the viewer.
  * This needs to be called before the viewer is initialized to ensure the handler is available.
@@ -53,35 +112,112 @@ export interface IHandler {
 export function registerHandler(handler: IHandler): void {
 	validateHandler(handler)
 
-	window._oca_viewer_handlers ??= new Map<string, IHandler>()
-	if (window._oca_viewer_handlers.has(handler.id)) {
+	window._nc_viewer_handlers ??= new Map<string, IHandler>()
+	if (window._nc_viewer_handlers.has(handler.id)) {
 		console.warn(`Handler with id ${handler.id} is already registered.`)
 		return
 	}
 
-	window._oca_viewer_handlers.set(handler.id, handler)
+	window._nc_viewer_handlers.set(handler.id, handler)
+
+	registerFileAction(new FileAction({
+		id: `${ACTION_VIEWER}-${handler.id}`,
+		// TRANSLATORS: handler is the translated name of the handler.
+		displayName: () => t('viewer', 'Open with {handler}', { handler: handler.displayName }),
+
+		iconSvgInline: () => handler.iconSvgInline ?? FileSvg,
+		parent: ACTION_VIEWER,
+		order: -999,
+		default: DefaultType.HIDDEN,
+
+		enabled: (files: Node[]) => {
+			if (files.length === 0) {
+				return false
+			}
+
+			// We do not support folders
+			if (files.some(file => file.type !== FileType.File)) {
+				return false
+			}
+
+			return handler.enabled(files)
+		},
+		async exec(node: Node) {
+			if (node.type !== FileType.File) {
+				return null
+			}
+
+			getViewer().open([node as File], node as File)
+			return null
+		}
+	}))
+
+	// Only register the main "Open with ..." action if not already registered
+	// This action will be shown if more than one handler is available for the given mime
+	const actions = getFileActions()
+	if (!actions.find(action => action.id === ACTION_VIEWER)) {
+		registerFileAction(topLevelViewerAction)
+
+		logger.info('Registered top level viewer file action', { id: ACTION_VIEWER })
+	}
+}
+
+export function getHandlers() : Map<string, IHandler> {
+	return window._nc_viewer_handlers ??= new Map<string, IHandler>()
 }
 
 /**
  * Validate the handler object.
  *
  * @param handler - The handler to validate
  */
-function validateHandler(handler: IHandler) {
-	const { id, mimes, mimesAliases, component } = handler
+function validateHandler(handler: IHandler): void {
+	const { id, displayName, group, enabled } = handler
+	if (typeof id !== 'string' || id.trim() === '') {
+		throw new Error('Handler id must be a non-empty string')
+	}
+
+	if (typeof displayName !== 'string' || displayName.trim() === '') {
+		throw new Error('Handler displayName must be a non-empty string')
+	}
+
+	if (typeof handler.tagname !== 'string' || handler.tagname.trim() === '') {
+		throw new Error('Handler tagname must be a non-empty string')
+	}
+
+	if (group && (typeof group !== 'string' || group.trim() === '')) {
+		throw new Error('Handler group must be a non-empty string if provided')
+	}
+
+	if (typeof enabled !== 'function') {
+		throw new Error('Handler enabled must be a function')
+	}
 
-	// checking valid handler id
-	if (!id || id.trim() === '' || typeof id !== 'string') {
-		throw new Error('The handler does not have a valid id')
+	if (handler.preload && typeof handler.preload !== 'function') {
+		throw new Error('Handler preload must be a function if provided')
 	}
 
-	// Nothing available to process! Failure
-	if ((!mimes || !Array.isArray(mimes)) && !mimesAliases) {
-		throw new Error('Handler needs a valid mime array or mimesAliases')
+	if (handler.theme && !['dark', 'light', 'default'].includes(handler.theme)) {
+		throw new Error("Handler theme must be one of 'dark', 'light', 'default' if provided")
 	}
 
-	// checking valid handler component data
-	if ((!component || (typeof component !== 'object' && typeof component !== 'function'))) {
-		throw new Error('The handler does not have a valid component')
+	validateCustomElementName(handler.tagname)
+}
+
+function validateCustomElementName(tagname: string): void {
+	if (!tagname.includes('-')) {
+		throw new Error('Handler tagname must contain a hyphen (-)')
+	}
+	if (/^[A-Z]/.test(tagname)) {
+		throw new Error('Handler tagname must not start with an uppercase letter')
+	}
+	if (/--/.test(tagname)) {
+		throw new Error('Handler tagname must not contain consecutive hyphens (--)')
+	}
+	if (tagname.startsWith('-') || tagname.endsWith('-')) {
+		throw new Error('Handler tagname must not start or end with a hyphen (-)')
+	}
+	if (!/^[a-z][a-z0-9-]*$/.test(tagname)) {
+		throw new Error('Handler tagname must only contain lowercase letters, numbers, and hyphens (-)')
 	}
 }

src/api_package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"include": ["index.ts", "global.d.ts"],
+	"include": ["*.ts"],
 	"compilerOptions": {
 		"lib": [
 			"DOM",

src/api_package/viewer.ts

@@ -0,0 +1,66 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { File, Folder } from '@nextcloud/files'
+import ViewerVue from '../views/Viewer.vue'
+
+export type ViewerOptions = {
+	loadMore: () => Promise<File[]>
+	onPrev: () => void
+	onNext: () => void
+	onClose: () => void
+	canLoop: boolean
+}
+
+export interface ViewerAPI {
+	open(nodes: File[], file?: File, options?: ViewerOptions, handlerId?: string): Promise<any>
+	openFolder(folder: Folder, file?: File, options?: ViewerOptions, handlerId?: string): Promise<any>
+	compare(node1: File, node2: File, handlerId?: string): Promise<any>
+}
+
+export class Viewer extends EventTarget implements ViewerAPI {
+	private viewer: InstanceType<typeof ViewerVue> | null = null
+
+	/**
+	 * Set the viewer instance (called from init.ts)
+	 * Private, do not use directly.
+	 */
+  	_setViewer(viewer: InstanceType<typeof ViewerVue>) {
+		this.viewer = viewer
+	}
+
+	async open(nodes: File[], file?: File, options?: ViewerOptions, handlerId?: string): Promise<any> {
+		if (!this.viewer) {
+			throw new Error('Viewer is not initialized')
+		}
+		this.viewer.open(nodes, file, options, handlerId)
+	}
+
+	async openFolder(folder: Folder, file?: File, options?: ViewerOptions, handlerId?: string): Promise<any> {
+		if (!this.viewer) {
+			throw new Error('Viewer is not initialized')
+		}
+		this.viewer.openFolder(folder, file, options, handlerId)
+	}
+
+	async compare(node1: File, node2: File, handlerId?: string): Promise<any> {
+		if (!this.viewer) {
+			throw new Error('Viewer is not initialized')
+		}
+		this.viewer.compare(node1, node2, handlerId)
+	}
+}
+
+// Init and get the viewer in Modal
+export function getViewer(): Viewer {
+	return window._nc_viewer_service ??= new Viewer()
+}
+
+// Create a new Viewer instance in the given element
+export function createViewer(el: HTMLElement, file: File): Viewer {
+	const instance = new Viewer()
+	el.appendChild(instance)
+	return instance
+}

src/components/ImageEditor.vue

@@ -8,15 +8,16 @@
 	</div>
 </template>
 <script>
-import { showError, showSuccess, DialogBuilder } from '@nextcloud/dialogs'
+import { basename, dirname, extname, join } from 'path'
 import { emit } from '@nextcloud/event-bus'
-import { Node } from '@nextcloud/files'
 import { linkTo } from '@nextcloud/router'
+import { Node } from '@nextcloud/files'
+import { showError, showSuccess, DialogBuilder } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
-import { basename, dirname, extname, join } from 'path'
-import translations from '../models/editorTranslations.js'
+
+import { logger } from '../services/logger.ts'
 import { rawStat } from '../services/FileInfo.ts'
-import logger from '../services/logger.js'
+import translations from '../models/editorTranslations.js'
 
 let TABS, TOOLS