idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(StatusPage): add active image display logic and enhance media file handling

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-11 13:27:37 -04:00
parent d6b50164e4
commit 0a9cb90acc
1 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/components/StatusPage.tsx
View File

@ -1,12 +1,12 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { HardDrive, Activity, Wifi, Radio, Clock, RefreshCw, Loader2, Printer, Power, Computer, Download, Trash2, Eye, FolderOpen } from 'lucide-react'; import { HardDrive, Activity, Wifi, Radio, Clock, RefreshCw, Loader2, Printer, Power, Computer, Download, Trash2, Eye, FolderOpen } from 'lucide-react';
import { listDirectory, deletePath, getFileContents, getWebDAVBaseUrl, humanFileSize, splitPath, type EntryInfo } from '../webdav'; import { listDirectory, deletePath, fileExists, getFileContents, getWebDAVBaseUrl, humanFileSize, splitPath, type EntryInfo } from '../webdav';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { MediaEntry } from './MediaEntry'; import { MediaEntry } from './MediaEntry';
import DirectorySlideshow from './DirectorySlideshow'; import DirectorySlideshow from './DirectorySlideshow';
import { useWs } from '../ws'; import { useWs } from '../ws';
import DeviceDetailOverlay from './DeviceDetailOverlay'; import DeviceDetailOverlay from './DeviceDetailOverlay';
import MediaSet, { type MediaSetEntry } from './MediaSet'; import MediaSet, { mediaSetEntryUrl, type MediaSetEntry } from './MediaSet';
import { ImageWithFallback } from './figma/ImageWithFallback'; import { ImageWithFallback } from './figma/ImageWithFallback';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
import { ConfirmDialog, type ConfirmOptions } from './ui/confirm-dialog'; import { ConfirmDialog, type ConfirmOptions } from './ui/confirm-dialog';
@ -63,6 +63,32 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
} }
}; };
const [activeImage, setActiveImage] = useState<string | null>(null);
useEffect(() => {
const url = activeDevice?.url;
if (!url) { setActiveImage(null); return; }
const activeEntry = mediaSetFiles?.find(e => mediaSetEntryUrl(e) === url);
const entryName = activeEntry && typeof activeEntry === 'object' ? activeEntry.name : undefined;
const urlBase = url.replace(/\.[^/.]+$/, '');
const bases = entryName ? [`${splitPath(url).parent}/${entryName}`, urlBase] : [urlBase];
const exts = ['png', 'jpg', 'jpeg', 'gif', 'webp'];
let cancelled = false;
(async () => {
for (const base of bases) {
for (const ext of exts) {
const path = `${base}.${ext}`;
if (await fileExists(path)) {
if (!cancelled) setActiveImage(path);
return;
}
}
}
if (!cancelled) setActiveImage(null);
})();
return () => { cancelled = true; };
}, [activeDevice?.url, mediaSetFiles]);
// Mock activity log - in a real app this would come from device monitoring // Mock activity log - in a real app this would come from device monitoring
const activityLog = [ const activityLog = [
{ time: '14:32:15', event: 'File opened: game.d64', type: 'info' }, { time: '14:32:15', event: 'File opened: game.d64', type: 'info' },
@ -175,7 +201,10 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
</div> </div>
</div> </div>
{activeDir && <DirectorySlideshow path={activeDir} />} {activeImage
? <img src={getWebDAVBaseUrl() + activeImage} alt="" className="w-full h-48 object-contain rounded-lg mb-3" />
: activeDir && <DirectorySlideshow path={activeDir} />
}
{mediaSetFiles && ( {mediaSetFiles && (
<div className="mt-2"> <div className="mt-2">