blob: dada22a56cb9d7243d8134f41960b72c7cda72ee (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<script lang="ts">
import { flashair } from '../flashair';
import { imageCache } from '../cache';
import { autoCacheService } from '../cache';
interface Props {
path: string;
alt: string;
fileDate?: number;
}
let { path, alt, fileDate }: Props = $props();
let blobUrl = $state<string | undefined>(undefined);
let rawBlobUrl: string | undefined;
let cacheProgress = $state<number | undefined>(undefined);
$effect(() => {
const currentPath = path;
blobUrl = undefined;
void loadThumbnail(currentPath);
return () => {
if (rawBlobUrl !== undefined) {
URL.revokeObjectURL(rawBlobUrl);
rawBlobUrl = undefined;
}
};
});
// Subscribe to auto-cache progress updates
$effect(() => {
const currentPath = path;
const unsubscribe = autoCacheService.subscribe(() => {
cacheProgress = autoCacheService.getProgress(currentPath);
});
// Set initial value
cacheProgress = autoCacheService.getProgress(currentPath);
return unsubscribe;
});
async function loadThumbnail(filePath: string) {
// Try cache first
const cached = await imageCache.get('thumbnail', filePath);
if (cached !== undefined) {
const url = URL.createObjectURL(cached.blob);
rawBlobUrl = url;
blobUrl = url;
return;
}
// Fetch from card
const thumbUrl = flashair.thumbnailUrl(filePath);
if (thumbUrl === undefined) return;
try {
const { blob, meta } = await flashair.fetchThumbnail(filePath);
// Store in cache (fire-and-forget)
void imageCache.put('thumbnail', filePath, blob, meta, fileDate);
const url = URL.createObjectURL(blob);
rawBlobUrl = url;
blobUrl = url;
} catch {
// Thumbnail fetch failed — show placeholder
}
}
let cachePercent = $derived(
cacheProgress !== undefined ? Math.round(cacheProgress * 100) : undefined
);
</script>
{#if blobUrl !== undefined}
<div class="relative w-full aspect-square">
<img
src={blobUrl}
{alt}
class="w-full aspect-square rounded object-cover"
draggable="false"
/>
{#if cachePercent !== undefined && cachePercent < 100}
<div class="absolute inset-0 flex items-center justify-center">
<div class="radial-progress text-primary bg-base-300/60 border-2 border-base-300/60" style:--value={cachePercent} style:--size="2.5rem" style:--thickness="3px" role="progressbar">
<span class="text-[0.6rem] font-bold text-primary-content drop-shadow">{cachePercent}%</span>
</div>
</div>
{/if}
</div>
{:else}
<div class="w-full aspect-square rounded bg-base-300 flex items-center justify-center">
<span class="loading loading-spinner loading-sm"></span>
</div>
{/if}
|
