Fixed a few things

Closes #39, #40

frontend/src/components/DirViewer/DirViewerTable.vue

@@ -33,6 +33,7 @@ import {
 	Delete,
 	Download
 } from '@vicons/carbon';
+import semaphore from 'semaphore';
 import NLink from '@/components/NLink.vue';
 import PreviewImage from '@/components/DirViewer/PreviewImage.vue';
 import createZipDialog from '@/components/DirViewer/CreateZipDialog';
@@ -59,6 +60,7 @@ const props = defineProps<{
 	showPreview: boolean;
 }>();
 
+const previewDownloadSem = semaphore(40);
 const checkedRows = ref<number[]>([]);
 const deleteNodes = ref<number[]>([]);
 const deleteDialog = ref();
@@ -222,7 +224,12 @@ const previewColumns: DataTableColumn<Responses.GetNodeEntry>[] = [
 			return node.isFile ? (
 				<Suspense>
 					{{
-						default: () => <PreviewImage node={node} />,
+						default: () => (
+							<PreviewImage
+								node={node}
+								sem={previewDownloadSem}
+							/>
+						),
 						fallback: () => <NSpin size="small" />
 					}}
 				</Suspense>

frontend/src/components/DirViewer/PreviewImage.vue

@@ -1,5 +1,6 @@
 <script setup async lang="ts">
 import type { TokenInjectType, Responses } from '@/api';
+import type { Semaphore } from 'semaphore';
 import { inject, ref } from 'vue';
 import { NImage, NIcon } from 'naive-ui';
 import { Image, Music, Video, Document } from '@vicons/carbon';
@@ -7,6 +8,7 @@ import { check_token, FS, isErrorResponse } from '@/api';
 
 const props = defineProps<{
 	node: Responses.GetNodeEntry;
+	sem: Semaphore;
 }>();
 
 enum fileTypes {
@@ -23,28 +25,35 @@ const success = ref(false);
 const data = ref('');
 const fileType = ref<fileTypes>(fileTypes.UNKNOWN);
 
-const token = await check_token(jwt);
-if (token) {
-	if (props.node.preview) {
-		const resp = await FS.download_preview(token, props.node.id);
-		if (!isErrorResponse(resp)) {
-			data.value = resp.data;
-			success.value = true;
+await new Promise<void>((resolve) => {
+	props.sem.take(async () => {
+		const token = await check_token(jwt);
+		if (token) {
+			if (props.node.preview) {
+				const resp = await FS.download_preview(token, props.node.id);
+				if (!isErrorResponse(resp)) {
+					data.value = resp.data;
+					success.value = true;
+				}
+			} else {
+				fileType.value = fileTypes.UNKNOWN;
+				const resp = await FS.get_type(token, props.node.id);
+				if (!isErrorResponse(resp)) {
+					if (resp.type.startsWith('image'))
+						fileType.value = fileTypes.IMAGE;
+					else if (resp.type.startsWith('application/pdf'))
+						fileType.value = fileTypes.PDF;
+					else if (resp.type.startsWith('audio'))
+						fileType.value = fileTypes.AUDIO;
+					else if (resp.type.startsWith('video'))
+						fileType.value = fileTypes.VIDEO;
+				}
+			}
 		}
-	} else {
-		fileType.value = fileTypes.UNKNOWN;
-		const resp = await FS.get_type(token, props.node.id);
-		if (!isErrorResponse(resp)) {
-			if (resp.type.startsWith('image')) fileType.value = fileTypes.IMAGE;
-			else if (resp.type.startsWith('application/pdf'))
-				fileType.value = fileTypes.PDF;
-			else if (resp.type.startsWith('audio'))
-				fileType.value = fileTypes.AUDIO;
-			else if (resp.type.startsWith('video'))
-				fileType.value = fileTypes.VIDEO;
-		}
-	}
-}
+		props.sem.leave();
+		resolve();
+	});
+});
 </script>
 
 <template>

frontend/src/components/UploadDialog/UploadFileDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TokenInjectType, UploadFile } from '@/api';
 import { ref, inject } from 'vue';
-import { check_token } from '@/api';
+import { update_token } from '@/api';
 import UploadEntry from '@/components/UploadDialog/UploadEntry.vue';
 import { NCard } from 'naive-ui';
 
@@ -10,7 +10,7 @@ const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
 const entries = ref<typeof UploadEntry[]>([]);
 
 async function startUpload() {
-	const token = await check_token(jwt);
+	const token = await update_token(jwt);
 	if (!token) return;
 	const ents: typeof UploadEntry[] = entries.value;
 	const allProms: Promise<void>[] = [];