finalize thumbnails and add shared supported_file_types json

control/frontend/src/ts/stores/thumbnails.ts

@@ -1,12 +1,14 @@
 import { get, writable, type Writable } from "svelte/store";
 import { get_thumbnail_blob } from "../api_handler";
-import { supported_file_types, type FolderElement } from "../types";
+import { type FolderElement } from "../types";
 import { db } from "../indexdb/file_thumbnails.db";
+import { get_file_type } from "../utils";
 
 export const active_thumbnail_urls: Writable<string[]> = writable<string[]>([]);
 
 export async function generate_thumbnail(display_ip: string, path: string, folder_element: FolderElement): Promise<void> {
-    if (!Object.values(supported_file_types).some(e => e.mime_type === folder_element.type) || !folder_element.hash) return;
+    const supported_file_type = get_file_type(folder_element);
+    if (!supported_file_type || !folder_element.hash) return;
     const hash: string = folder_element.hash;
     if (await db.thumbnail_blobs.get(hash)) return;
 

control/frontend/src/ts/types.ts

@@ -1,48 +1,18 @@
-import { FileBox, FileImage, FileVideoCamera, ImagePlay, type X } from "lucide-svelte";
+import { FileBox, FileImage, FileText, FileVideoCamera, ImagePlay, type X } from "lucide-svelte";
 import type { Snippet } from "svelte";
 
 export type SupportedFileType = {
-    display_name:
-    string; mime_type:
-    string; icon: typeof X;
+    display_name: string;
+    mime_type: string;
 };
-
-export const supported_file_types: Record<string, SupportedFileType> = {
-    '.mp4': {
-        display_name: 'MP4',
-        mime_type: 'video/mp4',
-        icon: FileVideoCamera,
-    },
-    '.jpg': {
-        display_name: 'JPG',
-        mime_type: 'image/jpg',
-        icon: FileImage,
-    },
-    '.jpeg': {
-        display_name: 'JPG',
-        mime_type: 'image/jpeg',
-        icon: FileImage,
-    },
-    '.png': {
-        display_name: 'PNG',
-        mime_type: 'image/png',
-        icon: FileImage,
-    },
-    '.gif': {
-        display_name: 'GIF',
-        mime_type: 'image/gif',
-        icon: ImagePlay,
-    },
-    '.pptx': {
-        display_name: 'PPTX',
-        mime_type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        icon: FileBox,
-    },
-    '.odp': {
-        display_name: 'ODP',
-        mime_type: 'application/vnd.oasis.opendocument.presentation',
-        icon: FileBox,
-    }
+export const supported_file_type_icon: Record<string, typeof X> = {
+    'MP4': FileVideoCamera,
+    'JPG': FileImage,
+    'PNG': FileImage,
+    'GIF': ImagePlay,
+    'PPTX': FileBox,
+    'ODP': FileBox,
+    'PDF': FileText
 }
 
 export type FolderElement = {

control/frontend/src/ts/utils.ts

@@ -1,19 +1,40 @@
-export function get_uuid(): string {
-    return crypto.randomUUID();
+import type { FolderElement, SupportedFileType } from "./types";
+import supported_file_types_json from './../../../../shared/supported_file_types.json';
+
+const supported_file_types: Record<string, SupportedFileType> = supported_file_types_json as Record<string, SupportedFileType>;
+
+export function get_file_type(file: FolderElement): SupportedFileType | null {
+  for (const key of Object.keys(supported_file_types)) {
+    if (file.type === supported_file_types[key].mime_type) {
+      return supported_file_types[key];
+    }
+  }
+  // Fallback:
+  const extension = file.name.split('.').pop();
+  if (extension) {
+    if (Object.keys(supported_file_types).includes('.' + extension)) {
+      return supported_file_types['.' + extension];
+    }
+  }
+  return null;
 }
 
-export function get_file_size_display_string(size: number, toFixed: number|null = null): string {
-    if (size === 0) return "0 B";
+export function get_uuid(): string {
+  return crypto.randomUUID();
+}
 
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB", "TB"];
+export function get_file_size_display_string(size: number, toFixed: number | null = null): string {
+  if (size === 0) return "0 B";
 
-    const i = Math.floor(Math.log(size) / Math.log(k));
-    const value = size / Math.pow(k, i);
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
 
-    const size_string = `${value.toFixed(toFixed !== null ? toFixed : Math.max(0, 2 - Math.floor(Math.log10(value))))} ${sizes[i]}`;
+  const i = Math.floor(Math.log(size) / Math.log(k));
+  const value = size / Math.pow(k, i);
 
-    return size_string.replace('.', ',');
+  const size_string = `${value.toFixed(toFixed !== null ? toFixed : Math.max(0, 2 - Math.floor(Math.log10(value))))} ${sizes[i]}`;
+
+  return size_string.replace('.', ',');
 }
 
 
@@ -40,3 +61,9 @@ export async function image_content_hash(blob: Blob, size = 32): Promise<number>
   return hash >>> 0; // unsigned int
 }
 
+
+
+export function is_valid_name(input: string): boolean {
+  return /^[\p{L}\p{N}\p{M}\-_.+,()[\]{}@!§$%&=~^ ]+$/u.test(input);
+}
+