From 0d5ca44316c059e0be5d5da247299869a87cb40a Mon Sep 17 00:00:00 2001
From: Matthias <root@mattv.de>
Date: Tue, 6 Sep 2022 15:59:16 +0200
Subject: [PATCH] Added PDF Preview

Closes #30
---
 backend/src/controllers/fs/fs_routes.cpp      | 14 +++++++----
 .../components/FileViewer/BlobDownload.tsx    | 18 +++++++++++---
 .../src/components/FileViewer/FileViewer.vue  | 24 +++++++++++++++----
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/backend/src/controllers/fs/fs_routes.cpp b/backend/src/controllers/fs/fs_routes.cpp
index 6aea185..d7e09e7 100644
--- a/backend/src/controllers/fs/fs_routes.cpp
+++ b/backend/src/controllers/fs/fs_routes.cpp
@@ -42,6 +42,8 @@ const std::unordered_map<std::string, std::string> mime_type_map = {
         { ".mkv"  , "video/x-matroska" },
         { ".mk3d" , "video/x-matroska" },
         { ".mks"  , "video/x-matroska" },
+
+        { ".pdf"  , "application/pdf" }
 };
 
 template<typename InputIt>
@@ -170,7 +172,9 @@ namespace api {
         try {
             if (file.fileLength() > 100 * 1024 * 1024) throw std::exception();
             std::filesystem::path filename(inode->getValueOfName());
-            const std::string& mime = mime_type_map.at(filename.extension().string());
+            std::string ext = filename.extension().string();
+            std::transform(ext.begin(), ext.end(), ext.begin(), tolower);
+            const std::string& mime = mime_type_map.at(ext);
             if (!mime.starts_with("image")) throw std::exception();
 
             cv::_InputArray image_arr(file.fileData(), (int) file.fileLength());
@@ -332,12 +336,12 @@ namespace api {
         if (!inode.has_value())
             return cbk(dto::Responses::get_badreq_res("Unknown node"));
 
-
-        std::filesystem::path p("./files"), name(inode->getValueOfName());
-        p /= std::to_string(inode->getValueOfId());
+        std::filesystem::path name(inode->getValueOfName());
+        std::string ext = name.extension().string();
+        std::transform(ext.begin(), ext.end(), ext.begin(), tolower);
 
         try {
-            cbk(dto::Responses::get_type_res(mime_type_map.at(name.extension().string())));
+            cbk(dto::Responses::get_type_res(mime_type_map.at(ext)));
         } catch (const std::exception&) {
             cbk(dto::Responses::get_badreq_res("Invalid file type"));
         }
diff --git a/frontend/src/components/FileViewer/BlobDownload.tsx b/frontend/src/components/FileViewer/BlobDownload.tsx
index 9088599..a246b85 100644
--- a/frontend/src/components/FileViewer/BlobDownload.tsx
+++ b/frontend/src/components/FileViewer/BlobDownload.tsx
@@ -1,11 +1,12 @@
 import { ref } from 'vue';
 import { NProgress } from 'naive-ui';
 import filesize from 'filesize';
-import { Music, Video, Image } from '@vicons/carbon';
+import { Music, Video, Image, Document } from '@vicons/carbon';
 import type { DialogApiInjection } from 'naive-ui/es/dialog/src/DialogProvider';
 
 export default function createBlobDialog(
 	dialog: DialogApiInjection,
+	image: boolean,
 	audio: boolean,
 	video: boolean
 ) {
@@ -14,11 +15,22 @@ export default function createBlobDialog(
 	const percentage = ref(0);
 	const dia = dialog.create({
 		title:
-			'Loading ' + (video ? 'video' : audio ? 'audio' : 'image') + '...',
+			'Loading ' +
+			(video ? 'video' : audio ? 'audio' : image ? 'image' : 'content') +
+			'...',
 		closable: false,
 		closeOnEsc: false,
 		maskClosable: false,
-		icon: () => (video ? <Video /> : audio ? <Music /> : <Image />),
+		icon: () =>
+			video ? (
+				<Video />
+			) : audio ? (
+				<Music />
+			) : image ? (
+				<Image />
+			) : (
+				<Document />
+			),
 		content: () => (
 			<NProgress
 				type="line"
diff --git a/frontend/src/components/FileViewer/FileViewer.vue b/frontend/src/components/FileViewer/FileViewer.vue
index f115c4b..b4645a8 100644
--- a/frontend/src/components/FileViewer/FileViewer.vue
+++ b/frontend/src/components/FileViewer/FileViewer.vue
@@ -19,7 +19,8 @@ enum fileTypes {
 	LOADING,
 	IMAGE,
 	AUDIO,
-	VIDEO
+	VIDEO,
+	IFRAME
 }
 
 const fileType = ref<fileTypes>(fileTypes.UNKNOWN);
@@ -36,6 +37,7 @@ async function loadContent() {
 	if (!token) return;
 	const { progress, total, percentage, dia } = createBlobDialog(
 		dialog,
+		fileType.value === fileTypes.IMAGE,
 		fileType.value === fileTypes.AUDIO,
 		fileType.value === fileTypes.VIDEO
 	);
@@ -66,9 +68,11 @@ async function getType(node: Responses.GetNode) {
 	if (resp.type.startsWith('image')) {
 		fileType.value = fileTypes.IMAGE;
 		await loadContent();
-	}
-	if (resp.type.startsWith('audio')) fileType.value = fileTypes.AUDIO;
-	if (resp.type.startsWith('video')) fileType.value = fileTypes.VIDEO;
+	} else if (resp.type.startsWith('application/pdf')) {
+		fileType.value = fileTypes.IFRAME;
+		await loadContent();
+	} else if (resp.type.startsWith('audio')) fileType.value = fileTypes.AUDIO;
+	else if (resp.type.startsWith('video')) fileType.value = fileTypes.VIDEO;
 }
 
 watch(
@@ -112,7 +116,17 @@ watch(
 					:src="src"
 					:alt="node.name"
 				/>
-				<n-button v-else-if="fileType !== fileTypes.IMAGE" @click="loadContent">
+				<iframe
+					v-else-if="fileType === fileTypes.IFRAME && src !== ''"
+					:src="src"
+					width="800"
+					height="1000"
+				>
+				</iframe>
+				<n-button
+					v-else-if="fileType !== fileTypes.IMAGE"
+					@click="loadContent"
+				>
 					<template #icon>
 						<n-icon><Play /></n-icon>
 					</template>