fixup! fixup! fixup! feat: viewer 6.0.0

skjnldsv · skjnldsv · commit 64169fb55fad · 2025-10-09T18:52:13.000+02:00
Signed-off-by: John Molakvoæ (skjnldsv) &lt;skjnldsv@protonmail.com&gt;
diff --git a/src/api_package/custom.d.ts b/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
+}
diff --git a/src/api_package/index.ts b/src/api_package/index.ts
@@ -2,9 +2,17 @@
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type { File, Node } from '@nextcloud/files'
 
-import { File } from '@nextcloud/files'
+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
@@ -16,6 +24,11 @@ export interface IHandler {
 	 */
 	displayName: string
 
+	/**
+	 * Optional icon for the handler
+	 */
+	iconSvgInline?: string
+
 	/**
 	 * The custom element tag name to use for this handler.
 	 */
@@ -51,6 +64,43 @@ export interface IHandler {
 	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.
@@ -69,6 +119,47 @@ export function registerHandler(handler: IHandler): void {
 	}
 
 	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> {
diff --git a/src/api_package/tsconfig.json b/src/api_package/tsconfig.json
@@ -1,5 +1,5 @@
 {
-	"include": ["index.ts", "global.d.ts"],
+	"include": ["*.ts"],
 	"compilerOptions": {
 		"lib": [
 			"DOM",
diff --git a/src/components/ImageEditor.vue b/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
 
diff --git a/src/components/Images.vue b/src/components/Images.vue
@@ -73,22 +73,18 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import AsyncComputed from 'vue-async-computed'
-import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
-
-import axios from '@nextcloud/axios'
 import { basename } from '@nextcloud/paths'
+import { Node } from '@nextcloud/files'
 import { translate } from '@nextcloud/l10n'
-import { NcLoadingIcon } from '@nextcloud/vue'
+import axios from '@nextcloud/axios'
 
+import { NcLoadingIcon } from '@nextcloud/vue'
+import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
 import ImageEditor from './ImageEditor.vue'
+
 import { findLivePhotoPeerFromFileId } from '../utils/livePhotoUtils'
 import { getDavPath } from '../utils/fileUtils'
 import { preloadMedia } from '../services/mediaPreloader'
-
-Vue.use(AsyncComputed)
-
 export default {
 	name: 'Images',
 
@@ -103,6 +99,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		node: {
+			type: Node,
+			required: true,
+		}
 	},
 	data() {
 		return {
@@ -121,7 +121,7 @@ export default {
 
 	computed: {
 		src() {
-			return this.source ?? this.davPath
+			return this.node.source ?? this.davPath
 		},
 		zoomHeight() {
 			return Math.round(this.height * this.zoomRatio)
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
@@ -37,14 +37,12 @@
 </template>
 
 <script lang='ts'>
-// eslint-disable-next-line n/no-missing-import
-import Vue from 'vue'
-import AsyncComputed from 'vue-async-computed'
 import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
+import type { File } from '@nextcloud/files'
 
 import { imagePath } from '@nextcloud/router'
 
-import logger from '../services/logger.js'
+import { logger } from '../services/logger.ts'
 import { findLivePhotoPeerFromName } from '../utils/livePhotoUtils'
 import { getPreviewIfAny } from '../utils/previewUtils'
 import { preloadMedia } from '../services/mediaPreloader.js'
@@ -53,14 +51,39 @@ const VuePlyr = () => import(/* webpackChunkName: 'plyr' */'@skjnldsv/vue-plyr')
 
 const blankVideo = imagePath('viewer', 'blank.mp4')
 
-Vue.use(AsyncComputed)
-
 export default {
 	name: 'Videos',
 
 	components: {
 		VuePlyr,
 	},
+
+	props: {
+		node: {
+			type: Node,
+			required: true,
+		},
+		nodes: {
+			type: Array as () => File[],
+			required: true,
+		},
+		isFullScreen: {
+			type: Boolean,
+			default: false,
+		},
+		isSidebarShown: {
+			type: Boolean,
+			default: false,
+		},
+		height: {
+			type: Number,
+			required: true,
+		},
+		width: {
+			type: Number,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			isFullscreenButtonVisible: false,
@@ -70,7 +93,7 @@ export default {
 
 	computed: {
 		livePhotoPath() {
-			const peerFile = findLivePhotoPeerFromName(this, this.fileList)
+			const peerFile = findLivePhotoPeerFromName(this, this.nodes)
 
 			if (peerFile === undefined) {
 				return undefined
@@ -83,7 +106,7 @@ export default {
 		},
 		options() {
 			return {
-				autoplay: this.active === true,
+				autoplay: true,
 				// Used to reset the video streams https://github.com/sampotts/plyr#javascript-1
 				blankVideo,
 				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'],
diff --git a/src/init.ts b/src/init.ts
@@ -8,9 +8,10 @@ import { getViewer } from './api_package/viewer.ts'
 import { logger } from './services/logger.ts'
 import Viewer from './views/Viewer.vue'
 
+import { registerVideoCustomElement, registerVideoHandler } from './models/videos.ts'
+
 const ViewerService = getViewer()
 const ViewerApp = createApp(Viewer)
-ViewerApp.config.devtools = { appId: 'Viewer' }
 
 // Create top wrapper element
 const ViewerRoot = document.createElement('div')
@@ -20,4 +21,8 @@ document.body.appendChild(ViewerRoot)
 // Mount and set the viewer instance
 const ViewerInstance = ViewerApp.mount(ViewerRoot)
 ViewerService._setViewer(ViewerInstance as InstanceType<typeof Viewer>)
-logger.debug('Viewer initialized', { ViewerInstance })
+logger.debug('Viewer initialized', { ViewerInstance })
+
+// register the custom elements for all handlers
+registerVideoCustomElement()
+registerVideoHandler()
diff --git a/src/models/images.ts b/src/models/images.ts
@@ -3,11 +3,14 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { defineCustomElement } from 'vue'
 import { loadState } from '@nextcloud/initial-state'
-import logger from '../services/logger.js'
+import { logger}  from '../services/logger.ts'
 import Images from '../components/Images.vue'
+import { registerHandler } from '../api_package/index.ts'
+import { t } from '@nextcloud/l10n'
 
-const enabledPreviewProviders = loadState(appName, 'enabled_preview_providers', [])
+const enabledPreviewProviders = loadState<string[]>('viewer', 'enabled_preview_providers', [])
 
 /**
  * Those mimes needs a proper preview to be displayed
@@ -55,12 +58,40 @@ if (ignoredMimes.length > 0) {
 	logger.warn('Some mimes were ignored because they are not enabled in the server previews config', { ignoredMimes })
 }
 
-export default {
-	id: 'images',
-	group: 'media',
-	mimes: [
-		...browserSupportedMimes,
-		...enabledMimes,
-	],
-	component: Images,
+export const tagname = 'oca-viewer-image'
+export function registerImageCustomElement() {
+	const ImageElement = defineCustomElement(Images, {
+		shadowRoot: false,
+	})
+
+	// Register the custom element.
+	customElements.define(tagname, ImageElement)
 }
+
+export function registerImageHandler() {
+	registerHandler({
+		id: 'images',
+		displayName: t('viewer', 'Images'),
+		tagname,
+
+		enabled: (nodes) => {
+			if (nodes.length === 0) {
+				return false
+			}
+
+			return nodes.every(node => {
+				// Always allow browser supported mimes
+				if (browserSupportedMimes.includes(node.mime)) {
+					return true
+				}
+
+				// Only allow preview supported mimes if they are enabled in the server config
+				if (enabledMimes.includes(node.mime)) {
+					return true
+				}
+				return false
+			})
+		},
+	})
+	logger.info('Image handler registered', { tagname, enabledMimes, browserSupportedMimes })
+}
diff --git a/src/models/videos.js b/src/models/videos.js
diff --git a/src/models/videos.ts b/src/models/videos.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "include": ["index.ts", "global.d.ts"],`
	`2`	`+ "include": ["*.ts"],`
`3`	`3`	`"compilerOptions": {`
`4`	`4`	`"lib": [`
`5`	`5`	`"DOM",`