2025-06-05 11:12:39 +01:00
|
|
|
import { useState, useEffect } from "react";
|
2025-09-16 15:08:11 +01:00
|
|
|
import { StirlingFileStub } from "../types/fileContext";
|
2025-08-21 17:30:26 +01:00
|
|
|
import { useIndexedDB } from "../contexts/IndexedDBContext";
|
2025-08-08 15:15:09 +01:00
|
|
|
import { generateThumbnailForFile } from "../utils/thumbnailUtils";
|
2025-09-05 11:33:03 +01:00
|
|
|
import { FileId } from "../types/fileContext";
|
2025-08-08 15:15:09 +01:00
|
|
|
|
2025-06-05 11:12:39 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Hook for IndexedDB-aware thumbnail loading
|
|
|
|
* Handles thumbnail generation for files not in IndexedDB
|
|
|
|
*/
|
2025-09-16 15:08:11 +01:00
|
|
|
export function useIndexedDBThumbnail(file: StirlingFileStub | undefined | null): {
|
2025-08-11 09:16:16 +01:00
|
|
|
thumbnail: string | null;
|
|
|
|
isGenerating: boolean
|
2025-06-05 11:12:39 +01:00
|
|
|
} {
|
|
|
|
const [thumb, setThumb] = useState<string | null>(null);
|
|
|
|
const [generating, setGenerating] = useState(false);
|
2025-08-21 17:30:26 +01:00
|
|
|
const indexedDB = useIndexedDB();
|
2025-06-05 11:12:39 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
let cancelled = false;
|
2025-08-11 09:16:16 +01:00
|
|
|
|
2025-06-05 11:12:39 +01:00
|
|
|
async function loadThumbnail() {
|
|
|
|
if (!file) {
|
|
|
|
setThumb(null);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// First priority: use stored thumbnail
|
2025-09-16 15:08:11 +01:00
|
|
|
if (file.thumbnailUrl) {
|
|
|
|
setThumb(file.thumbnailUrl);
|
2025-06-05 11:12:39 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2025-08-21 17:30:26 +01:00
|
|
|
// Second priority: generate thumbnail for files under 100MB
|
2025-08-08 15:15:09 +01:00
|
|
|
if (file.size < 100 * 1024 * 1024 && !generating) {
|
2025-06-05 11:12:39 +01:00
|
|
|
setGenerating(true);
|
|
|
|
try {
|
2025-08-08 15:15:09 +01:00
|
|
|
let fileObject: File;
|
2025-08-11 09:16:16 +01:00
|
|
|
|
2025-08-21 17:30:26 +01:00
|
|
|
// Try to load file from IndexedDB using new context
|
|
|
|
if (file.id && indexedDB) {
|
2025-09-05 11:33:03 +01:00
|
|
|
const loadedFile = await indexedDB.loadFile(file.id as FileId);
|
2025-08-21 17:30:26 +01:00
|
|
|
if (!loadedFile) {
|
2025-08-08 15:15:09 +01:00
|
|
|
throw new Error('File not found in IndexedDB');
|
|
|
|
}
|
2025-08-21 17:30:26 +01:00
|
|
|
fileObject = loadedFile;
|
2025-08-08 15:15:09 +01:00
|
|
|
} else {
|
2025-08-21 17:30:26 +01:00
|
|
|
throw new Error('File ID not available or IndexedDB context not available');
|
2025-08-08 15:15:09 +01:00
|
|
|
}
|
2025-08-11 09:16:16 +01:00
|
|
|
|
2025-08-08 15:15:09 +01:00
|
|
|
// Use the universal thumbnail generator
|
|
|
|
const thumbnail = await generateThumbnailForFile(fileObject);
|
2025-08-21 17:30:26 +01:00
|
|
|
if (!cancelled) {
|
2025-08-08 15:15:09 +01:00
|
|
|
setThumb(thumbnail);
|
2025-09-05 12:16:17 +01:00
|
|
|
|
2025-08-21 17:30:26 +01:00
|
|
|
// Save thumbnail to IndexedDB for persistence
|
|
|
|
if (file.id && indexedDB && thumbnail) {
|
|
|
|
try {
|
2025-09-05 11:33:03 +01:00
|
|
|
await indexedDB.updateThumbnail(file.id as FileId, thumbnail);
|
2025-08-21 17:30:26 +01:00
|
|
|
} catch (error) {
|
|
|
|
console.warn('Failed to save thumbnail to IndexedDB:', error);
|
|
|
|
}
|
|
|
|
}
|
2025-06-05 11:12:39 +01:00
|
|
|
}
|
|
|
|
} catch (error) {
|
2025-08-08 15:15:09 +01:00
|
|
|
console.warn('Failed to generate thumbnail for file', file.name, error);
|
2025-06-05 11:12:39 +01:00
|
|
|
if (!cancelled) setThumb(null);
|
|
|
|
} finally {
|
|
|
|
if (!cancelled) setGenerating(false);
|
|
|
|
}
|
|
|
|
} else {
|
2025-08-21 17:30:26 +01:00
|
|
|
// Large files - no thumbnail
|
2025-06-05 11:12:39 +01:00
|
|
|
setThumb(null);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
loadThumbnail();
|
|
|
|
return () => { cancelled = true; };
|
2025-09-16 15:08:11 +01:00
|
|
|
}, [file, file?.thumbnailUrl, file?.id, indexedDB, generating]);
|
2025-06-05 11:12:39 +01:00
|
|
|
|
|
|
|
return { thumbnail: thumb, isGenerating: generating };
|
2025-08-11 09:16:16 +01:00
|
|
|
}
|