adjust when loading spinners appear

src/lib/components/FramePreview.svelte

@@ -12,8 +12,9 @@
 	import { frames, mode } from '../store';
 
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
-	import { info } from '$lib/logging';
-	import { loadImage } from '$lib/io';
+	import { debug, info } from '$lib/logging';
+	import { loadGif, loadImage } from '$lib/io';
+	import { keepFocused } from '$lib/state';
 	export let index: number;
 
 	let src: string | null;
@@ -37,7 +38,6 @@
 	const openImage = async () => {
 		if (mode === 'web') {
 			fileInput?.click();
-			loading = true;
 		}
 		// loading[index] = true;
 		// const path = (await invoke('open_image')) as {
@@ -67,12 +67,19 @@
 
 	const finishLoad = async () => {
 		info("Loading image in web mode");
+		loading = true;
 		const file = files.item(0);
 		info("Got file:", file);
 		if (file) {
 			switch(file.type) {
 				case "image/gif":
-					info("TODO");
+					const gif = await loadGif(file);
+					$frames[index] = gif ? {
+						kind: "GIF",
+						value: gif,
+						data: new Uint8Array(await file.arrayBuffer())
+					} :
+					null;
 					break;
 				default:
 					const img = await loadImage(file);
@@ -95,7 +102,7 @@
 {#if mode === 'web'}
 	<input
 		type="file"
-		accept="image/*"
+		accept="image/png, image/jpeg, image/gif, image/tiff"
 		bind:this={fileInput}
 		class="hidden w-0 h-0"
 		bind:files

src/lib/io.ts

@@ -1,5 +1,6 @@
 import { Image } from 'image-js';
 import { mode } from '$lib/store';
+import gifler, { Gif } from './gifler';
 
 export const loadImage = async (data: File | Blob): Promise<Image | null> => {
 	if (mode === 'web') {
@@ -22,5 +23,26 @@ export const loadImage = async (data: File | Blob): Promise<Image | null> => {
 		});
 	}
 
+
+
 	return null;
 };
+
+export const loadGif = async (data: File | Blob): Promise<Gif | null> => {
+	if (mode === 'web') {
+		return new Promise(async (resolve) => {
+			const reader = new FileReader();
+			reader.onload = async () => {
+				const raw = reader.result as string | null;
+				if (!raw) return resolve(null);
+				let img = gifler(raw);
+				resolve(
+					img
+				);
+			};
+			reader.readAsDataURL(data);
+		});
+	}
+
+	return null;
+}

src/lib/state.ts

@@ -8,17 +8,24 @@ export const active = derived(
 	([$level, $threshold]) => $level > $threshold
 );
 export const blink = writable(false);
-export const transparent = writable(false);
+
+export const keepFocused = writable(false);
+export const wantsTransparent = writable(false);
+
+export const transparent = derived(
+	[keepFocused, wantsTransparent],
+	([$keepFocused, $wantsTransparent]) => !$keepFocused && $wantsTransparent
+);
 
 export const initState = async () => {
 	if (mode == 'tauri') {
 		const { appWindow, PhysicalSize } = await import('@tauri-apps/api/window');
 
 		await appWindow.center();
-    	await appWindow.setMinSize(new PhysicalSize(720, 600));
-    	await appWindow.onFocusChanged(({ payload: focused }) => {
-      		transparent.set(!focused);
-   	 	});
+		await appWindow.setMinSize(new PhysicalSize(720, 600));
+		await appWindow.onFocusChanged(({ payload: focused }) => {
+			wantsTransparent.set(!focused);
+		});
 
 		await appWindow.listen('mouth-open', () => {
 			activationLevel.set(100);
@@ -47,9 +54,13 @@ export const initState = async () => {
 			});
 		});
 
-        window?.addEventListener('blink', () => {
-            blink.set(true);
+		window?.addEventListener('blink', () => {
+			blink.set(true);
 			setTimeout(() => blink.set(false), 100);
-        })
+		});
+
+		window?.addEventListener('blur', () => wantsTransparent.set(true));
+
+		window?.addEventListener('focus', () => wantsTransparent.set(false));
 	}
 };