Merge pull request #2778 from nextcloud/add-support-for-opening-files…

…-through-viewer

Add support for opening files through viewer

lib/Controller/PageController.php

@@ -32,6 +32,7 @@
 use OCA\Talk\Participant;
 use OCA\Talk\Room;
 use OCA\Talk\TalkSession;
+use OCA\Viewer\Event\LoadViewer;
 use OCP\App\IAppManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http;
@@ -40,6 +41,7 @@
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\Template\PublicTemplateResponse;
+use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Files\IRootFolder;
 use OCP\Files\NotPermittedException;
 use OCP\IInitialStateService;
@@ -53,6 +55,8 @@
 class PageController extends Controller {
 	/** @var string|null */
 	private $userId;
+	/** @var IEventDispatcher */
+	private $eventDispatcher;
 	/** @var RoomController */
 	private $api;
 	/** @var TalkSession */
@@ -78,6 +82,7 @@ class PageController extends Controller {
 
 	public function __construct(string $appName,
 								IRequest $request,
+								IEventDispatcher $eventDispatcher,
 								RoomController $api,
 								TalkSession $session,
 								IUserSession $userSession,
@@ -91,6 +96,7 @@ public function __construct(string $appName,
 								IRootFolder $rootFolder,
 								Config $config) {
 		parent::__construct($appName, $request);
+		$this->eventDispatcher = $eventDispatcher;
 		$this->api = $api;
 		$this->talkSession = $session;
 		$this->userSession = $userSession;
@@ -243,6 +249,10 @@ public function index(string $token = '', string $callUser = '', string $passwor
 			}
 		}
 
+		if (class_exists(LoadViewer::class)) {
+			$this->eventDispatcher->dispatchTyped(new LoadViewer());
+		}
+
 		$params = [
 			'token' => $token,
 			'signaling-settings' => $this->config->getSettings($this->userId),

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -22,8 +22,10 @@
 <template>
 	<a :href="link"
 		class="container"
+		:class="{ 'is-viewer-available': isViewerAvailable }"
 		target="_blank"
-		rel="noopener noreferrer">
+		rel="noopener noreferrer"
+		@click="showPreview">
 		<img v-if="!isLoading && !failed"
 			class="preview"
 			alt=""
@@ -56,6 +58,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		path: {
+			type: String,
+			required: true,
+		},
 		link: {
 			type: String,
 			default: '',
@@ -91,6 +97,27 @@ export default {
 				height: previewSize,
 			})
 		},
+		isViewerAvailable() {
+			if (!OCA.Viewer) {
+				return false
+			}
+
+			const availableHandlers = OCA.Viewer.availableHandlers
+			for (let i = 0; i < availableHandlers.length; i++) {
+				if (availableHandlers[i].mimes.includes(this.mimetype)) {
+					return true
+				}
+			}
+
+			return false
+		},
+		internalAbsolutePath() {
+			if (this.path.startsWith('/')) {
+				return this.path
+			}
+
+			return '/' + this.path
+		},
 	},
 	mounted() {
 		const img = new Image()
@@ -103,6 +130,22 @@ export default {
 		}
 		img.src = this.previewUrl
 	},
+	methods: {
+		showPreview(event) {
+			if (!this.isViewerAvailable) {
+				// Regular event handling by opening the link.
+				return
+			}
+
+			event.stopPropagation()
+			event.preventDefault()
+
+			OCA.Viewer.open({
+				// Viewer expects an internal absolute path starting with "/".
+				path: this.internalAbsolutePath,
+			})
+		},
+	},
 }
 </script>
 
@@ -114,6 +157,22 @@ export default {
 	image. */
 	display: inline-block;
 
+	/* Show a hover colour around the preview when navigating with the
+	 * keyboard through the file links (or hovering them with the mouse). */
+	&:hover,
+	&:focus,
+	&:active {
+		.preview {
+			background-color: var(--color-background-hover);
+
+			/* Trick to keep the same position while adding a padding to show
+			 * the background. */
+			box-sizing: content-box !important;
+			padding: 10px;
+			margin: -10px;
+		}
+	}
+
 	.preview {
 		display: block;
 		width: 128px;
@@ -125,6 +184,12 @@ export default {
 		force it to be on its own line below the preview. */
 		display: block;
 	}
+
+	&:not(.is-viewer-available) {
+		strong:after {
+			content: " ↗";
+		}
+	}
 }
 
 </style>