feat: Open previews using the viewer

Add full file path to previews so the viewer can load it

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

lib/Controller/APIv2Controller.php

@@ -316,8 +316,11 @@ protected function getPreview(string $owner, int $fileId, string $filePath): arr
 		} else {
 			$fileInfo = $info['node'] ?? null;
 			if (!($fileInfo instanceof FileInfo)) {
-				$preview = $this->getPreviewFromPath($fileId, $filePath, $info);
-			} elseif ($this->preview->isAvailable($fileInfo)) {
+				return $this->getPreviewFromPath($fileId, $filePath, $info);
+			}
+
+			$preview['filePath'] = $fileInfo->getPath();
+			if ($this->preview->isAvailable($fileInfo)) {
 				$params = [
 					'forceIcon' => 0,
 					'a' => 0,

lib/Controller/ActivitiesController.php

@@ -25,6 +25,7 @@
 
 use OCA\Activity\Data;
 use OCA\Activity\Event\LoadAdditionalScriptsEvent;
+use OCA\Viewer\Event\LoadViewer;
 use OCP\Activity\IFilter;
 use OCP\Activity\IManager;
 use OCP\AppFramework\Controller;
@@ -78,6 +79,11 @@ public function showList(string $filter = 'all'): TemplateResponse {
 		$this->eventDispatcher->dispatchTyped($event);
 		$this->eventDispatcher->dispatch(LoadAdditionalScriptsEvent::EVENT_ENTITY, $event);
 
+		// Load the viewer
+		if (class_exists(LoadViewer::class)) {
+			$this->eventDispatcher->dispatchTyped(new LoadViewer());
+		}
+
 		$this->initialState->provideInitialState('settings', [
 			'enableAvatars' => $this->config->getSystemValue('enable_avatars', true),
 			'personalSettingsLink' => $this->getPersonalSettingsLink(),

psalm.xml

@@ -49,5 +49,6 @@
 	<stubs>
 		<file name="tests/stubs/oc_hooks_emitter.php" />
 		<file name="tests/stubs/oca_files_event.php" preloadClasses="true"/>
+		<file name="tests/stubs/oca_viewer_event.php" preloadClasses="true"/>
 	</stubs>
 </psalm>

src/components/Activity.vue

@@ -2,6 +2,7 @@
   - @copyright 2021 Louis Chemineau <louis@chmn.me>
   -
   - @author Louis Chemineau <louis@chmn.me>
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
   -
   - @license AGPL-3.0-or-later
   -
@@ -38,7 +39,8 @@
 				v-for="preview, index in activity.previews"
 				:key="preview.fileId ?? `preview-${index}`"
 				class="activity-entry__preview"
-				:href="preview.link">
+				:href="preview.link"
+				@click="handlePreviewClick($event, preview)">
 				<img class="activity-entry__preview-image"
 					:class="{
 						'activity-entry__preview-mimetype': preview.isMimeTypeIcon,
@@ -50,20 +52,36 @@
 	</li>
 </template>
 
-<script>
+<script lang="ts">
+import type { IPreview } from '../models/types'
+
+import { translate as t } from '@nextcloud/l10n'
 import {
 	NcAvatar,
 	NcUserBubble,
 	NcRichText,
 } from '@nextcloud/vue'
+import { defineComponent } from 'vue'
 
-import ActivityModel from '../models/ActivityModel.ts'
+import ActivityModel from '../models/ActivityModel'
 
 import FileRichArgument from './richArgumentsTypes/FileRichArgument.vue'
 import EmailRichArgument from './richArgumentsTypes/EmailRichArgument.vue'
 import SystemTagRichArgument from './richArgumentsTypes/SystemTagRichArgument.vue'
 import CalendarEventRichArgument from './richArgumentsTypes/CalendarEventRichArgument.vue'
 import OpenGraphRichArgument from './richArgumentsTypes/OpenGraphRichArgument.vue'
+import logger from '../logger'
+
+declare global {
+	interface Window {
+		OCA?: {
+			Viewer?: {
+				open(options: { path?: string, fileInfo?: unknown }): void
+				get mimetypes(): string[]
+			}
+		}
+	}
+}
 
 /**
  * @typedef RichObject
@@ -72,7 +90,7 @@ import OpenGraphRichArgument from './richArgumentsTypes/OpenGraphRichArgument.vu
  * @property {string} type - The type of the file object.
  */
 
-export default {
+export default defineComponent({
 	name: 'Activity',
 	components: {
 		NcAvatar,
@@ -136,21 +154,41 @@ export default {
 	},
 	created() {
 		this.updateDateFromNow()
-		this.dateInterval = setInterval(this.updateDateFromNow, 60 * 1000)
+		this.dateInterval = window.setInterval(this.updateDateFromNow, 60 * 1000)
 	},
 	destroyed() {
 		clearInterval(this.dateInterval)
 	},
 	methods: {
+		t,
+
+		/**
+		 * Handle clicking a preview
+		 * Check if viewer is available and can open the file, if not navigate to it
+		 * @param event The click event
+		 * @param preview The preview to open
+		 */
+		handlePreviewClick(event: MouseEvent, preview: IPreview) {
+			if (preview.filePath && window?.OCA?.Viewer?.open !== undefined && window.OCA.Viewer.mimetypes.includes(preview.mimeType)) {
+				try {
+					window.OCA.Viewer.open({ path: preview.filePath.replace(/^\/[^/]+\/files/, '') })
+					event.preventDefault()
+					event.stopPropagation()
+				} catch (error) {
+					logger.debug(error as Error)
+				}
+			}
+		},
+
 		updateDateFromNow() {
 			this.dateFromNow = this.activity.dateFromNow
 		},
 
 		/**
 		 * Map an collection of rich text objects to rich arguments for the RichText component
 		 *
-		 * @param {Array.<Object<string, RichObject>>} richObjects - The rich text object
-		 * @return {Object<string, object>}
+		 * @param {Record<string, RichObject>[]} richObjects - The rich text object
+		 * @return {Record<string, object>}
 		 */
 		mapRichObjectsToRichArguments(richObjects) {
 			const args = {}
@@ -165,7 +203,7 @@ export default {
 		/**
 		 * Map rich text object to rich argument for the RichText component
 		 *
-		 * @param {Object<string, RichObject>} richObject - The rich text object
+		 * @param {Record<string, object>} richObject - The rich text object
 		 * @return {object}}
 		 */
 		mapRichObjectToRichArgument(richObject) {
@@ -214,8 +252,9 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
+
 <style lang="scss" scoped>
 .activity-entry {
 	display: flex;

src/models/types.ts

@@ -64,6 +64,7 @@ export interface IPreview {
 	 * The file ID
 	 */
 	fileId: number
+	filePath?: string,
 	view: string
 	filename: string
 }

src/views/ActivityAppFeed.vue

@@ -1,3 +1,23 @@
+<!--
+  - @copyright 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
 <template>
 	<NcAppContent class="activity-app">
 		<h1 class="activity-app__heading">

tests/Controller/APIv2ControllerTest.php

@@ -688,6 +688,9 @@ public function testGetPreview(string $author, int $fileId, string $path, string
 				->with($node)
 				->willReturn($isMimeSup);
 
+			$node->expects($this->atLeastOnce())
+				->method('getPath')
+				->willReturn($path);
 			if (!$isMimeSup) {
 				$node->expects($this->atLeastOnce())
 					->method('getMimetype')
@@ -730,15 +733,16 @@ public function testGetPreview(string $author, int $fileId, string $path, string
 				'node' => $node,
 			]);
 
-		$this->assertSame([
+		$this->assertSame(array_merge([
 			'link' => 'files.viewcontroller.showFile#' . $fileId,
 			'source' => $source,
 			'mimeType' => $mimeType,
 			'isMimeTypeIcon' => $isMimeTypeIcon,
 			'fileId' => $fileId,
 			'view' => 'files',
 			'filename' => basename($path),
-		], self::invokePrivate($controller, 'getPreview', [$author, $fileId, $path]));
+		], $validFileInfo && !$isDir ? ['filePath' => $path ] : []),
+			self::invokePrivate($controller, 'getPreview', [$author, $fileId, $path]));
 	}
 
 	public function dataGetPreviewFromPath(): array {

tests/stubs/oca_viewer_event.php

@@ -0,0 +1,6 @@
+<?php
+
+namespace OCA\Viewer\Event {
+	class LoadViewer extends \OCP\EventDispatcher\Event {
+	}
+}