Added PDF Preview

Closes #30

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"

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>