Compare commits
No commits in common. "bbd38746df56e0021d864cf73c75605255bca23c" and "afd7156a3603e29948c592a7dfae9e6eb6cd5c74" have entirely different histories.
bbd38746df
...
afd7156a36
|
|
@ -62,7 +62,6 @@
|
|||
"cmdk": "1.1.1",
|
||||
"date-fns": "3.6.0",
|
||||
"embla-carousel-react": "8.6.0",
|
||||
"fflate": "^0.8.3",
|
||||
"input-otp": "1.4.2",
|
||||
"lucide-react": "0.487.0",
|
||||
"motion": "12.23.24",
|
||||
|
|
|
|||
|
|
@ -394,14 +394,6 @@ export default function DeviceDetailOverlay({
|
|||
{/* ── Header ── */}
|
||||
<div className="flex-shrink-0 border-b border-neutral-200/70 relative">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors flex-shrink-0"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className={`flex flex-col items-center gap-0.5 flex-shrink-0 ${
|
||||
activeDevice.physical ? 'text-green-600' : activeDevice.enabled ? 'text-blue-600' : 'text-neutral-400'
|
||||
}`}>
|
||||
|
|
@ -421,11 +413,19 @@ export default function DeviceDetailOverlay({
|
|||
<p className="text-xs text-neutral-400 capitalize">{activeDevice.type}</p>
|
||||
</div>
|
||||
|
||||
{devices.length > 1 && (
|
||||
<span className="text-xs text-neutral-400 tabular-nums px-1 flex-shrink-0">
|
||||
{activeIndex + 1} / {devices.length}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{devices.length > 1 && (
|
||||
<span className="text-xs text-neutral-400 tabular-nums px-1">
|
||||
{activeIndex + 1} / {devices.length}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { flushSync } from 'react-dom';
|
||||
import { Search, Loader2, RefreshCw, FolderSearch, SlidersHorizontal, HardDrive, FolderOpen, X, DatabaseZap, AlertCircle } from 'lucide-react';
|
||||
import { Search, Loader2, RefreshCw, FolderSearch, SlidersHorizontal, HardDrive, FolderOpen, X, DatabaseZap } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { humanFileSize, splitPath, stat, fileExists } from '../webdav';
|
||||
import { humanFileSize, splitPath } from '../webdav';
|
||||
import type { EntryInfo } from '../webdav';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
|
||||
import { MediaEntry } from './MediaEntry';
|
||||
|
|
@ -13,10 +13,8 @@ import {
|
|||
isLocateDbLoaded,
|
||||
resetLocateDb,
|
||||
buildLocateDb,
|
||||
subscribeLoadProgress,
|
||||
type LocateEntry,
|
||||
type ScanPhase,
|
||||
type ScanCounts,
|
||||
} from '../locate-db';
|
||||
|
||||
interface SearchLocalProps {
|
||||
|
|
@ -118,19 +116,9 @@ function TypeBadge({ type, isDir }: { type: string; isDir: boolean }) {
|
|||
return <span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 text-neutral-600 font-mono">{type}</span>;
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
if (h > 0) return `${h}h ${m}m ${s}s`;
|
||||
if (m > 0) return `${m}m ${s}s`;
|
||||
return `${s}s`;
|
||||
}
|
||||
|
||||
function scanPhaseLabel(phase: ScanPhase, value: number): string {
|
||||
if (phase === 'scanning') return `Scanning… ${humanFileSize(value)}`;
|
||||
if (phase === 'building') return `Building… ${value.toLocaleString()} entries`;
|
||||
if (phase === 'compressing') return value ? `Compressed to ${humanFileSize(value)}` : 'Compressing…';
|
||||
if (phase === 'scanning') return `Scanning… ${humanFileSize(value)}`;
|
||||
if (phase === 'building') return `Building… ${value.toLocaleString()} entries`;
|
||||
return `Saving… ${humanFileSize(value)}`;
|
||||
}
|
||||
|
||||
|
|
@ -177,28 +165,22 @@ function FilterChips({
|
|||
}
|
||||
|
||||
export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }: SearchLocalProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const scanAbortRef = useRef<AbortController | null>(null);
|
||||
const scanStartRef = useRef<number>(0);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [query, setQuery] = useState(() => _store.query);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [isScanning, setIsScanning] = useState(false);
|
||||
const [scanPhase, setScanPhase] = useState<ScanPhase | null>(null);
|
||||
const [scanValue, setScanValue] = useState(0);
|
||||
const [scanPath, setScanPath] = useState<string | null>(null);
|
||||
const [scanCounts, setScanCounts] = useState<ScanCounts | null>(null);
|
||||
const [scanElapsed, setScanElapsed] = useState(0);
|
||||
const [results, setResults] = useState<SearchResult[]>(() => _store.results);
|
||||
const [hasSearched, setHasSearched] = useState(() => _store.hasSearched);
|
||||
const [mountEntry, setMountEntry] = useState<SearchResult | null>(null);
|
||||
const [actionEntry, setActionEntry] = useState<SearchResult | null>(null);
|
||||
const [showScanConfirm, setShowScanConfirm] = useState(false);
|
||||
const [searchError, setSearchError] = useState<string | null>(null);
|
||||
const [dbPhase, setDbPhase] = useState<'idle' | 'ready'>('ready');
|
||||
const [checking, setChecking] = useState(() => !isLocateDbLoaded());
|
||||
const [sdMissing, setSdMissing] = useState(false);
|
||||
const [locateMissing, setLocateMissing] = useState(false);
|
||||
const [loadState, setLoadState] = useState<{ kind: 'idle' | 'engine' | 'database' | 'ready'; received: number; total: number | null }>({ kind: 'idle', received: 0, total: null });
|
||||
// The locate-database load progress is rendered by the SearchPane (above
|
||||
// this panel). The pane pre-fetches the database on mount, so by the time
|
||||
// the user clicks Search the database is almost always ready.
|
||||
const [dbPhase, setDbPhase] = useState<'idle' | 'ready'>('ready');
|
||||
const [showFilter, setShowFilter] = useState(() => _store.showFilter);
|
||||
const [filterText, setFilterText] = useState(() => _store.filterText);
|
||||
const [filterSystem, setFilterSystem] = useState<string | null>(() => _store.filterSystem);
|
||||
|
|
@ -208,34 +190,9 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
const [sortDir, setSortDir] = useState<SortDir>(() => _store.sortDir);
|
||||
|
||||
useEffect(() => {
|
||||
return subscribeLoadProgress(s => {
|
||||
if (s.phase === 'ready' || s.phase === 'error') {
|
||||
setLoadState({ kind: 'ready', received: 0, total: null });
|
||||
setDbPhase('ready');
|
||||
} else if (s.phase === 'idle') {
|
||||
setLoadState({ kind: 'idle', received: 0, total: null });
|
||||
} else {
|
||||
setLoadState({ kind: s.phase, received: s.received, total: s.total });
|
||||
}
|
||||
});
|
||||
if (isLocateDbLoaded()) setDbPhase('ready');
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!checking) return;
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
const sdEntry = await stat('/sd').catch(() => null);
|
||||
if (cancelled) return;
|
||||
if (!sdEntry) { setSdMissing(true); setChecking(false); return; }
|
||||
const hasLocate = await fileExists('/sd/.locate').catch(() => false);
|
||||
if (cancelled) return;
|
||||
setLocateMissing(!hasLocate);
|
||||
setChecking(false);
|
||||
if (hasLocate) openLocateDb().catch(() => {});
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
useEffect(() => {
|
||||
_store.query = query;
|
||||
_store.results = results;
|
||||
|
|
@ -255,10 +212,6 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => { scanAbortRef.current?.abort(); };
|
||||
}, []);
|
||||
|
||||
const mountedPaths = useMemo(() => {
|
||||
const paths = new Set<string>();
|
||||
for (const d of Object.values(config?.devices?.iec ?? {})) {
|
||||
|
|
@ -312,44 +265,23 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
};
|
||||
|
||||
const handleScan = async () => {
|
||||
const controller = new AbortController();
|
||||
scanAbortRef.current = controller;
|
||||
scanStartRef.current = Date.now();
|
||||
setIsScanning(true);
|
||||
setScanPhase('scanning');
|
||||
setScanValue(0);
|
||||
setScanCounts(null);
|
||||
setScanElapsed(0);
|
||||
try {
|
||||
const { count, bytes } = await buildLocateDb(
|
||||
(phase, value, path, counts) =>
|
||||
flushSync(() => {
|
||||
setScanPhase(phase);
|
||||
setScanValue(value);
|
||||
if (path !== undefined) setScanPath(path);
|
||||
if (counts !== undefined) setScanCounts(counts);
|
||||
setScanElapsed(Math.floor((Date.now() - scanStartRef.current) / 1000));
|
||||
}),
|
||||
controller.signal,
|
||||
const { count, bytes } = await buildLocateDb((phase, value) =>
|
||||
flushSync(() => { setScanPhase(phase); setScanValue(value); })
|
||||
);
|
||||
toast.success(`Indexed ${count.toLocaleString()} items · ${humanFileSize(bytes)}`);
|
||||
setDbPhase('ready');
|
||||
setLocateMissing(false);
|
||||
} catch (e: any) {
|
||||
if (e?.name === 'AbortError') toast.info('Scan stopped.');
|
||||
else toast.error(`Scan failed: ${e?.message ?? e}`);
|
||||
toast.error(`Scan failed: ${e?.message ?? e}`);
|
||||
} finally {
|
||||
scanAbortRef.current = null;
|
||||
setIsScanning(false);
|
||||
setScanPhase(null);
|
||||
setScanPath(null);
|
||||
setScanCounts(null);
|
||||
setScanElapsed(0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStopScan = () => scanAbortRef.current?.abort();
|
||||
|
||||
const handleRefreshDb = () => {
|
||||
resetLocateDb();
|
||||
setDbPhase('idle');
|
||||
|
|
@ -418,47 +350,7 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search input slot — swaps content based on device/db state */}
|
||||
{sdMissing ? (
|
||||
<div className="flex-shrink-0 px-4 py-4 border-b border-neutral-100">
|
||||
<div className="flex items-center gap-3 px-3 py-3 rounded-xl bg-red-50 border border-red-200">
|
||||
<AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-red-700">No SD card detected</p>
|
||||
<p className="text-xs text-red-500 mt-0.5">Insert an SD card and reload.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : checking ? (
|
||||
<div className="flex-shrink-0 px-4 py-3 border-b border-neutral-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="w-4 h-4 text-neutral-400 animate-spin flex-shrink-0" />
|
||||
<span className="text-sm text-neutral-400">Checking device…</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (loadState.kind === 'engine' || loadState.kind === 'database') ? (
|
||||
<div className="flex-shrink-0 px-4 py-3 border-b border-neutral-100" aria-live="polite">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Loader2 className="w-4 h-4 text-blue-500 animate-spin flex-shrink-0" />
|
||||
<span className="text-sm font-medium text-neutral-600">
|
||||
{loadState.kind === 'engine' ? 'Loading engine' : 'Loading database'}…
|
||||
</span>
|
||||
{loadState.received > 0 && (
|
||||
<span className="text-xs text-neutral-400 ml-auto tabular-nums">
|
||||
{loadState.total
|
||||
? `${humanFileSize(loadState.received)} / ${humanFileSize(loadState.total)}`
|
||||
: humanFileSize(loadState.received)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-1.5 bg-neutral-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full bg-blue-500 rounded-full transition-all duration-150 ease-out ${loadState.total ? '' : 'animate-pulse w-1/3'}`}
|
||||
style={loadState.total ? { width: `${Math.min(100, Math.round(loadState.received / loadState.total * 100))}%` } : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
{/* Search input */}
|
||||
<div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-100">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="relative flex-1">
|
||||
|
|
@ -492,12 +384,7 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
<RefreshCw className="w-4 h-4" />
|
||||
</button>
|
||||
)} */}
|
||||
<button
|
||||
onClick={() => setShowScanConfirm(true)}
|
||||
disabled={busy}
|
||||
className={`p-1.5 rounded-lg transition-colors flex-shrink-0 disabled:opacity-40 ${locateMissing ? 'text-blue-600 bg-blue-50 ring-1 ring-blue-300 hover:bg-blue-100' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`}
|
||||
title="Scan /sd and rebuild database"
|
||||
>
|
||||
<button onClick={() => setShowScanConfirm(true)} disabled={busy} className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600 disabled:opacity-40 transition-colors flex-shrink-0" title="Scan /sd and rebuild database">
|
||||
<DatabaseZap className="w-4 h-4" />
|
||||
</button>
|
||||
{hasSearched && (
|
||||
|
|
@ -512,7 +399,6 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filter + sort bar — same style as MediaManager */}
|
||||
<div className={`overflow-hidden flex-shrink-0 transition-all duration-200 ease-in-out ${showFilter ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'}`}>
|
||||
|
|
@ -556,32 +442,10 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
onScroll={e => { _store.scrollTop = (e.currentTarget as HTMLDivElement).scrollTop; }}
|
||||
>
|
||||
{isScanning && scanPhase && (
|
||||
<div className="flex flex-col items-center justify-center py-16 gap-3 px-6">
|
||||
<div className="flex flex-col items-center justify-center py-16 gap-3">
|
||||
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
|
||||
<p className="text-sm font-medium text-neutral-700">{scanPhaseLabel(scanPhase, scanValue)}</p>
|
||||
{scanCounts && (
|
||||
<p className="text-xs text-neutral-500 tabular-nums">
|
||||
{scanCounts.dirs.toLocaleString()} folders · {scanCounts.files.toLocaleString()} files
|
||||
{scanElapsed > 0 && <span className="text-neutral-400"> · {formatDuration(scanElapsed)}</span>}
|
||||
</p>
|
||||
)}
|
||||
{scanPath ? (
|
||||
<p
|
||||
className="text-xs text-neutral-400 w-full text-center truncate"
|
||||
style={{ direction: 'rtl', unicodeBidi: 'plaintext' }}
|
||||
title={scanPath}
|
||||
>
|
||||
{scanPath}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-neutral-400">Scanning /sd recursively…</p>
|
||||
)}
|
||||
<button
|
||||
onClick={handleStopScan}
|
||||
className="mt-2 px-4 py-1.5 text-xs font-medium rounded-lg border border-neutral-300 text-neutral-600 hover:bg-neutral-100 transition-colors"
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
<p className="text-xs text-neutral-400">Scanning /sd recursively…</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -650,14 +514,12 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!isSearching && !isScanning && !hasSearched && (
|
||||
{!isSearching && !hasSearched && (
|
||||
<div className="py-16 text-center px-6">
|
||||
<Search className="w-10 h-10 mx-auto mb-3 text-neutral-300" />
|
||||
<p className="text-sm font-medium text-neutral-600 mb-1">Search your device</p>
|
||||
<p className="text-xs text-neutral-400">
|
||||
{locateMissing
|
||||
? 'No search index found. Tap the highlighted scan button to build one.'
|
||||
: dbPhase === 'idle'
|
||||
{dbPhase === 'idle'
|
||||
? 'The locate database will be downloaded on first search, or tap the scan icon to rebuild it.'
|
||||
: 'Type a filename or path to search the index.'}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Loader2, Database } from 'lucide-react';
|
||||
import { motion } from 'motion/react';
|
||||
import SearchLocal from './SearchLocal';
|
||||
import SearchAssembly64 from './SearchAssembly64';
|
||||
import SearchCommoServe from './SearchCommoServe';
|
||||
import SearchCSDbNG from './SearchCSDbNG';
|
||||
import { humanFileSize } from '../webdav';
|
||||
import {
|
||||
openLocateDb,
|
||||
isLocateDbLoaded,
|
||||
subscribeLoadProgress,
|
||||
} from '../locate-db';
|
||||
|
||||
interface SearchPaneProps {
|
||||
config: any;
|
||||
|
|
@ -28,6 +35,22 @@ export default function SearchPane({ config, setConfig, initialTab, onClose, onO
|
|||
// ~17 MB /sd/.locate download happening on the panel itself, not buried
|
||||
// inside the search action. Multiple subscribers (this header bar + the
|
||||
// SearchLocal panel) can observe the same in-flight load.
|
||||
const [loadState, setLoadState] = useState<{ kind: 'idle' | 'engine' | 'database' | 'ready' | 'error'; received: number; total: number | null; message?: string }>({ kind: 'idle', received: 0, total: null });
|
||||
|
||||
useEffect(() => {
|
||||
// Kick off the load immediately on mount (if not already loaded).
|
||||
// openLocateDb is a no-op once the database is loaded, so this is safe
|
||||
// to call every time the pane opens.
|
||||
if (!isLocateDbLoaded()) {
|
||||
openLocateDb().catch(() => { /* errors are surfaced via loadState */ });
|
||||
}
|
||||
return subscribeLoadProgress(s => {
|
||||
if (s.phase === 'idle') setLoadState({ kind: 'idle', received: 0, total: null });
|
||||
else if (s.phase === 'ready') setLoadState({ kind: 'ready', received: 0, total: null });
|
||||
else if (s.phase === 'error') setLoadState({ kind: 'error', received: 0, total: null });
|
||||
else setLoadState({ kind: s.phase, received: s.received, total: s.total });
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Jump to starting tab without animation on first render
|
||||
useEffect(() => {
|
||||
|
|
@ -50,6 +73,15 @@ export default function SearchPane({ config, setConfig, initialTab, onClose, onO
|
|||
localStorage.setItem('search.tab', String(idx));
|
||||
};
|
||||
|
||||
// Active-transfer UI for the slim bar that lives just under the tab bar.
|
||||
// We only show the bar while a transfer is in flight; once it's ready
|
||||
// (or never started) the bar collapses to zero height.
|
||||
const showLoadBar = loadState.kind === 'engine' || loadState.kind === 'database';
|
||||
const activeLabel = loadState.kind === 'engine' ? 'Loading engine' : 'Loading database';
|
||||
const loadPct = loadState.total && loadState.total > 0
|
||||
? Math.min(100, Math.round((loadState.received / loadState.total) * 100))
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<motion.div
|
||||
|
|
@ -66,6 +98,44 @@ export default function SearchPane({ config, setConfig, initialTab, onClose, onO
|
|||
paddingBottom: 'env(safe-area-inset-bottom)',
|
||||
}}
|
||||
>
|
||||
{/* Locate-database load bar. Visible only while a transfer is in
|
||||
flight; collapses to zero height otherwise so it doesn't take
|
||||
up space when there's nothing to show. */}
|
||||
<div
|
||||
className="flex-shrink-0 overflow-hidden border-b border-neutral-200/70 transition-[max-height,opacity] duration-200 ease-in-out"
|
||||
style={{ maxHeight: showLoadBar ? '64px' : '0px', opacity: showLoadBar ? 1 : 0 }}
|
||||
aria-live="polite"
|
||||
>
|
||||
<div className="px-4 py-2 flex items-center gap-3">
|
||||
<Loader2 className="w-3.5 h-3.5 text-blue-500 animate-spin flex-shrink-0" />
|
||||
<Database className="w-3.5 h-3.5 text-neutral-400 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<span className="text-xs text-neutral-600 font-medium truncate">
|
||||
{activeLabel}…
|
||||
{loadState.received > 0 && (
|
||||
<span className="text-neutral-400 font-normal">
|
||||
{' '}
|
||||
{loadState.total === null
|
||||
? humanFileSize(loadState.received)
|
||||
: `${humanFileSize(loadState.received)} / ${humanFileSize(loadState.total)}`}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{loadPct !== null && (
|
||||
<span className="text-xs text-neutral-500 tabular-nums">{loadPct}%</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-1 bg-neutral-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full bg-blue-500 transition-all duration-150 ease-out ${loadPct === null ? 'animate-pulse w-1/3' : ''}`}
|
||||
style={loadPct !== null ? { width: `${loadPct}%` } : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Swipeable panels */}
|
||||
<div
|
||||
ref={panelRef}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,8 @@
|
|||
import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
|
||||
import wasmUrl from '@sqlite.org/sqlite-wasm/sqlite3.wasm?url';
|
||||
import { gzip } from 'fflate';
|
||||
import { getWebDAVBaseUrl, basename, listDirectory, putFileContents, deletePath } from './webdav';
|
||||
|
||||
const LOCATE_PATH = '/sd/.locate';
|
||||
const LOCATE_GZ_PATH = '/sd/.locate.gz';
|
||||
const SCAN_PROGRESS_INTERVAL = 50;
|
||||
|
||||
function dirPath(path: string): string {
|
||||
const i = path.lastIndexOf('/');
|
||||
return i > 0 ? path.slice(0, i) : '/';
|
||||
}
|
||||
const LOCATE_PATH = '/sd/.locate';
|
||||
// Vite rewrites this `?url` import to the hashed asset path
|
||||
// (e.g. /assets/sqlite3-BVKGSWc-.wasm) and respects the configured base path.
|
||||
const WASM_URL: string = wasmUrl;
|
||||
|
|
@ -167,7 +159,7 @@ export async function openLocateDb(
|
|||
_setLoadState({ phase: 'ready' });
|
||||
}
|
||||
|
||||
export type ScanPhase = 'scanning' | 'building' | 'saving' | 'compressing';
|
||||
export type ScanPhase = 'scanning' | 'building' | 'saving';
|
||||
|
||||
/**
|
||||
* Recursively scan /sd, build a fresh SQLite locate database in memory,
|
||||
|
|
@ -178,158 +170,47 @@ export type ScanPhase = 'scanning' | 'building' | 'saving' | 'compressing';
|
|||
* building → number of entries inserted so far
|
||||
* saving → bytes of the serialized DB written to the server
|
||||
*/
|
||||
export type ScanCounts = { dirs: number; files: number };
|
||||
|
||||
export async function buildLocateDb(
|
||||
onProgress?: (phase: ScanPhase, value: number, path?: string, counts?: ScanCounts) => void,
|
||||
signal?: AbortSignal,
|
||||
onProgress?: (phase: ScanPhase, value: number) => void,
|
||||
): Promise<{ count: number; bytes: number }> {
|
||||
signal?.throwIfAborted();
|
||||
const sqlite3 = await getSqlite3();
|
||||
|
||||
// ── 1. BFS directory walk with Depth:1 per directory ────────────────────
|
||||
// Depth:infinity is not supported by the device's WebDAV server, so we
|
||||
// walk the tree manually, one directory at a time.
|
||||
const entries: Awaited<ReturnType<typeof listDirectory>> = [];
|
||||
const queue: string[] = ['/sd'];
|
||||
let totalBytes = 0;
|
||||
let dirCount = 0;
|
||||
let fileCount = 0;
|
||||
let lastFolder = '/sd';
|
||||
|
||||
while (queue.length > 0) {
|
||||
signal?.throwIfAborted();
|
||||
const dir = queue.shift()!;
|
||||
lastFolder = dir;
|
||||
let prevBytes = 0;
|
||||
const batch = await listDirectory(dir, false, bytes => {
|
||||
totalBytes += bytes - prevBytes;
|
||||
prevBytes = bytes;
|
||||
onProgress?.('scanning', totalBytes, dir, { dirs: dirCount, files: fileCount });
|
||||
}, signal);
|
||||
|
||||
// If this directory has a .config with a URL-scheme base_url it points to
|
||||
// a remote source — skip indexing its contents entirely.
|
||||
const configEntry = batch.find(e => e.type === 'file' && basename(e.path) === '.config');
|
||||
if (configEntry) {
|
||||
try {
|
||||
const res = await fetch(getWebDAVBaseUrl() + configEntry.path, { signal });
|
||||
if (res.ok) {
|
||||
const text = await res.text();
|
||||
const m = text.match(/^base_url\s*:\s*(.+)$/m);
|
||||
if (m) {
|
||||
const val = m[1].trim().replace(/^['"]|['"]$/g, '');
|
||||
if (/^[a-z][a-z0-9+.-]*:\/\//i.test(val)) continue;
|
||||
}
|
||||
}
|
||||
} catch { /* non-fatal — proceed normally */ }
|
||||
}
|
||||
|
||||
for (const e of batch) {
|
||||
entries.push(e);
|
||||
if (e.type === 'folder') { dirCount++; queue.push(e.path); }
|
||||
else fileCount++;
|
||||
}
|
||||
}
|
||||
signal?.throwIfAborted();
|
||||
// ── 1. Recursive PROPFIND on /sd ────────────────────────────────────────
|
||||
const entries = await listDirectory(
|
||||
'/sd', true,
|
||||
bytes => onProgress?.('scanning', bytes),
|
||||
);
|
||||
|
||||
// ── 2. Build in-memory DB ───────────────────────────────────────────────
|
||||
const scanStart = Date.now();
|
||||
const db = new sqlite3.oo1.DB(':memory:', 'ct');
|
||||
db.exec(
|
||||
'CREATE TABLE dirs (' +
|
||||
' id INTEGER PRIMARY KEY,' +
|
||||
' path TEXT NOT NULL UNIQUE,' +
|
||||
' scanned INTEGER NOT NULL DEFAULT 0' +
|
||||
');' +
|
||||
'CREATE TABLE files (' +
|
||||
' id INTEGER PRIMARY KEY,' +
|
||||
' dir_id INTEGER NOT NULL,' +
|
||||
' name TEXT NOT NULL,' +
|
||||
' size INTEGER NOT NULL DEFAULT 0,' +
|
||||
' mtime INTEGER NOT NULL DEFAULT 0,' +
|
||||
' is_dir INTEGER NOT NULL DEFAULT 0,' +
|
||||
' UNIQUE(dir_id, name)' +
|
||||
' path TEXT PRIMARY KEY,' +
|
||||
' size INTEGER NOT NULL DEFAULT 0,' +
|
||||
' mtime INTEGER NOT NULL DEFAULT 0,' +
|
||||
' is_dir INTEGER NOT NULL DEFAULT 0' +
|
||||
');' +
|
||||
'CREATE INDEX files_dir_idx ON files(dir_id);' +
|
||||
'CREATE VIRTUAL TABLE files_fts USING fts5(' +
|
||||
" path, content='', tokenize=\"unicode61\"" +
|
||||
');' +
|
||||
'CREATE TABLE status (' +
|
||||
' id INTEGER PRIMARY KEY DEFAULT 1,' +
|
||||
' total_dirs INTEGER NOT NULL DEFAULT 0,' +
|
||||
' total_files INTEGER NOT NULL DEFAULT 0,' +
|
||||
' last_scan INTEGER NOT NULL DEFAULT 0,' +
|
||||
' duration INTEGER NOT NULL DEFAULT 0,' +
|
||||
" last_folder TEXT NOT NULL DEFAULT ''" +
|
||||
');',
|
||||
'CREATE INDEX IF NOT EXISTS idx_path ON files(path);',
|
||||
);
|
||||
|
||||
// ── 3. Insert all unique directory paths ────────────────────────────────
|
||||
const allDirPaths = new Set<string>(['/sd']);
|
||||
for (const e of entries) {
|
||||
allDirPaths.add(dirPath(e.path));
|
||||
if (e.type === 'folder') allDirPaths.add(e.path);
|
||||
}
|
||||
db.exec('BEGIN');
|
||||
const stmtDir = db.prepare('INSERT OR IGNORE INTO dirs(path, scanned) VALUES (?, 1)');
|
||||
try {
|
||||
for (const p of allDirPaths) stmtDir.bind([p]).stepReset();
|
||||
} finally { stmtDir.finalize(); }
|
||||
db.exec('COMMIT');
|
||||
|
||||
const dirIdMap = new Map<string, number>();
|
||||
db.exec({
|
||||
sql: 'SELECT id, path FROM dirs',
|
||||
rowMode: 'array',
|
||||
callback: (row: any[]) => dirIdMap.set(row[1] as string, row[0] as number),
|
||||
});
|
||||
|
||||
// ── 4. Insert files + FTS ────────────────────────────────────────────────
|
||||
db.exec('BEGIN');
|
||||
const stmtFile = db.prepare(
|
||||
'INSERT INTO files(dir_id, name, size, mtime, is_dir) VALUES (?,?,?,?,?)',
|
||||
);
|
||||
const stmtFts = db.prepare('INSERT INTO files_fts(rowid, path) VALUES (?,?)');
|
||||
const stmt = db.prepare('INSERT OR REPLACE INTO files VALUES (?,?,?,?)');
|
||||
try {
|
||||
for (let i = 0; i < entries.length; i++) {
|
||||
const e = entries[i];
|
||||
const dirId = dirIdMap.get(dirPath(e.path));
|
||||
if (dirId === undefined) continue;
|
||||
stmtFile.bind([
|
||||
dirId,
|
||||
basename(e.path) || e.path,
|
||||
stmt.bind([
|
||||
e.path,
|
||||
e.size,
|
||||
e.lastModified ? Math.floor(e.lastModified.getTime() / 1000) : 0,
|
||||
e.type === 'folder' ? 1 : 0,
|
||||
]).stepReset();
|
||||
const rowid = sqlite3.capi.sqlite3_last_insert_rowid(db.pointer);
|
||||
stmtFts.bind([rowid, e.path]).stepReset();
|
||||
if (i % SCAN_PROGRESS_INTERVAL === 0) {
|
||||
signal?.throwIfAborted();
|
||||
onProgress?.('building', i, e.path, { dirs: dirCount, files: fileCount });
|
||||
await new Promise<void>(resolve => setTimeout(resolve, 0));
|
||||
}
|
||||
if (i % 250 === 0) onProgress?.('building', i);
|
||||
}
|
||||
} finally {
|
||||
stmtFile.finalize();
|
||||
stmtFts.finalize();
|
||||
stmt.finalize();
|
||||
}
|
||||
db.exec('COMMIT');
|
||||
signal?.throwIfAborted();
|
||||
onProgress?.('building', entries.length, undefined, { dirs: dirCount, files: fileCount });
|
||||
|
||||
// ── 5. Write status ──────────────────────────────────────────────────────
|
||||
db.exec({
|
||||
sql: 'INSERT OR REPLACE INTO status(id,total_dirs,total_files,last_scan,duration,last_folder) VALUES (1,?,?,?,?,?)',
|
||||
bind: [
|
||||
dirCount,
|
||||
fileCount,
|
||||
Math.floor(Date.now() / 1000),
|
||||
Math.floor((Date.now() - scanStart) / 1000),
|
||||
lastFolder,
|
||||
],
|
||||
});
|
||||
onProgress?.('building', entries.length);
|
||||
|
||||
// ── 3. Serialize to bytes ────────────────────────────────────────────────
|
||||
const pSaved = sqlite3.wasm.pstack.pointer;
|
||||
|
|
@ -353,15 +234,6 @@ export async function buildLocateDb(
|
|||
await putFileContents(LOCATE_PATH, dbBytes);
|
||||
onProgress?.('saving', dbBytes.length);
|
||||
|
||||
// ── 5. Gzip at level 9 and upload ───────────────────────────────────────
|
||||
onProgress?.('compressing', 0);
|
||||
const gzBytes = await new Promise<Uint8Array>((resolve, reject) =>
|
||||
gzip(dbBytes, { level: 9 }, (err, data) => err ? reject(err) : resolve(data)),
|
||||
);
|
||||
await deletePath(LOCATE_GZ_PATH).catch(() => {});
|
||||
await putFileContents(LOCATE_GZ_PATH, gzBytes);
|
||||
onProgress?.('compressing', gzBytes.length);
|
||||
|
||||
// Invalidate cached DB so the next search reloads the fresh file.
|
||||
resetLocateDb();
|
||||
|
||||
|
|
@ -400,9 +272,7 @@ export function searchLocate(query: string, limit = 500): LocateEntry[] {
|
|||
const needle = toSqlLike(query);
|
||||
const rows: LocateEntry[] = [];
|
||||
_db.exec({
|
||||
sql: "SELECT d.path || '/' || f.name, f.size, f.mtime, f.is_dir " +
|
||||
"FROM files f JOIN dirs d ON f.dir_id = d.id " +
|
||||
"WHERE (d.path || '/' || f.name) LIKE ? ESCAPE '\\' LIMIT ?",
|
||||
sql: "SELECT path, size, mtime, is_dir FROM files WHERE path LIKE ? ESCAPE '\\' LIMIT ?",
|
||||
bind: [needle, limit],
|
||||
rowMode: 'array',
|
||||
callback: (row: any[]) => {
|
||||
|
|
|
|||
|
|
@ -175,7 +175,6 @@ export async function listDirectory(
|
|||
path: string,
|
||||
recursive = false,
|
||||
onProgress?: (bytes: number) => void,
|
||||
signal?: AbortSignal,
|
||||
): Promise<EntryInfo[]> {
|
||||
const manager = getWebDAVClient();
|
||||
const base = manager.client.baseUrl;
|
||||
|
|
@ -191,7 +190,6 @@ export async function listDirectory(
|
|||
method: 'PROPFIND',
|
||||
headers: { 'Depth': String(depth), 'Content-Type': 'text/xml; charset=utf-8' },
|
||||
body: PROPFIND_LIST_BODY,
|
||||
signal,
|
||||
});
|
||||
if (!response.body) throw new Error('No response body');
|
||||
const reader = response.body.getReader();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user