Replaced base64 loading of images with blob, small fixes

frontend/src/api/fs.ts

@@ -73,12 +73,6 @@ export const download_preview = (
 ): Promise<Responses.DownloadBase64 | Responses.Error> =>
 	get_token(`/api/fs/download_preview/${node}`, token);
 
-export const download_base64 = (
-	token: string,
-	node: number
-): Promise<Responses.DownloadBase64 | Responses.Error> =>
-	get_token(`/api/fs/download_base64/${node}`, token);
-
 export const get_type = (
 	token: string,
 	node: number

frontend/src/components/FileViewer/BlobDownload.tsx

@@ -1,22 +1,24 @@
 import { ref } from 'vue';
 import { NProgress } from 'naive-ui';
 import filesize from 'filesize';
-import { Music, Video } from '@vicons/carbon';
+import { Music, Video, Image } from '@vicons/carbon';
 import type { DialogApiInjection } from 'naive-ui/es/dialog/src/DialogProvider';
 
-export default function createAudioVideoDialog(
+export default function createBlobDialog(
 	dialog: DialogApiInjection,
+	audio: boolean,
 	video: boolean
 ) {
 	const progress = ref(0);
 	const total = ref(1);
 	const percentage = ref(0);
 	const dia = dialog.create({
-		title: video ? 'Loading video...' : 'Loading audio...',
+		title:
+			'Loading ' + (video ? 'video' : audio ? 'audio' : 'image') + '...',
 		closable: false,
 		closeOnEsc: false,
 		maskClosable: false,
-		icon: () => (video ? <Video /> : <Music />),
+		icon: () => (video ? <Video /> : audio ? <Music /> : <Image />),
 		content: () => (
 			<NProgress
 				type="line"

frontend/src/components/FileViewer/FileViewer.vue

@@ -4,7 +4,7 @@ import { inject, ref, watch } from 'vue';
 import { Download, Play } from '@vicons/carbon';
 import { useDialog, NGrid, NGi, NButton, NImage, NSpin, NIcon } from 'naive-ui';
 import { check_token, FS, isErrorResponse } from '@/api';
-import createAudioVideoDialog from '@/components/FileViewer/AudioVideoDownload';
+import createBlobDialog from '@/components/FileViewer/BlobDownload';
 import axios from 'axios';
 
 const props = defineProps<{
@@ -31,11 +31,12 @@ async function download() {
 	FS.download_file(token, props.node.id);
 }
 
-async function loadAudioOrVideo() {
+async function loadContent() {
 	const token = await check_token(jwt);
 	if (!token) return;
-	const { progress, total, percentage, dia } = createAudioVideoDialog(
+	const { progress, total, percentage, dia } = createBlobDialog(
 		dialog,
+		fileType.value === fileTypes.AUDIO,
 		fileType.value === fileTypes.VIDEO
 	);
 	total.value = props.node.size ?? 1;
@@ -63,10 +64,8 @@ async function getType(node: Responses.GetNode) {
 	const resp = await FS.get_type(token, node.id);
 	if (isErrorResponse(resp)) return;
 	if (resp.type.startsWith('image')) {
-		const dataResp = await FS.download_base64(token, node.id);
-		if (isErrorResponse(dataResp)) return;
-		src.value = dataResp.data;
 		fileType.value = fileTypes.IMAGE;
+		await loadContent();
 	}
 	if (resp.type.startsWith('audio')) fileType.value = fileTypes.AUDIO;
 	if (resp.type.startsWith('video')) fileType.value = fileTypes.VIDEO;
@@ -95,27 +94,25 @@ watch(
 		</n-gi>
 		<n-gi style="text-align: center">
 			<n-spin v-if="fileType === fileTypes.LOADING" size="large" />
-			<n-image
-				v-else-if="fileType === fileTypes.IMAGE"
-				:src="src"
-				:alt="node.name"
-			/>
-			<template
-				v-else-if="
-					fileType === fileTypes.VIDEO || fileType === fileTypes.AUDIO
-				"
-			>
+			<template v-else-if="fileType !== fileTypes.UNKNOWN">
 				<video
 					v-if="fileType === fileTypes.VIDEO && src !== ''"
 					:src="src"
 					controls
+					autoplay
 				/>
 				<audio
 					v-else-if="fileType === fileTypes.AUDIO && src !== ''"
 					:src="src"
 					controls
+					autoplay
 				/>
-				<n-button v-else @click="loadAudioOrVideo">
+				<n-image
+					v-else-if="fileType === fileTypes.IMAGE && src !== ''"
+					:src="src"
+					:alt="node.name"
+				/>
+				<n-button v-else-if="fileType !== fileTypes.IMAGE" @click="loadContent">
 					<template #icon>
 						<n-icon><Play /></n-icon>
 					</template>