From f89e57a8be2af52344ec93357c24a34f5a800852 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 13:31:53 -0400
Subject: [PATCH] feat(StatusPage): improve active image selection logic and
 enhance error handling for media files

---
 src/app/components/StatusPage.tsx | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index dd2a172..49a828c 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { HardDrive, Activity, Wifi, Radio, Clock, RefreshCw, Loader2, Printer, Power, Computer, Download, Trash2, Eye, FolderOpen } from 'lucide-react';
-import { listDirectory, deletePath, fileExists, getFileContents, getWebDAVBaseUrl, humanFileSize, splitPath, type EntryInfo } from '../webdav';
+import { listDirectory, deletePath, getFileContents, getWebDAVBaseUrl, humanFileSize, splitPath, type EntryInfo } from '../webdav';
 import { toast } from 'sonner';
 import { MediaEntry } from './MediaEntry';
 import DirectorySlideshow from './DirectorySlideshow';
@@ -70,22 +70,23 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
     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'];
+    const urlBase     = url.replace(/\.[^/.]+$/, '').split('/').pop() ?? '';
+    const dir         = splitPath(url).parent;
+    const normalize   = (s: string) => s.toLowerCase().replace(/[_-]+/g, ' ').trim();
+    const targets     = [entryName ? normalize(entryName) : null, normalize(urlBase)].filter(Boolean) as string[];
+    const imgExts     = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp']);
     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;
-          }
+    listDirectory(dir)
+      .then(entries => {
+        if (cancelled) return;
+        const images = entries.filter(e => e.type === 'file' && imgExts.has(e.name.split('.').pop()?.toLowerCase() ?? ''));
+        for (const target of targets) {
+          const match = images.find(e => normalize(e.name.replace(/\.[^/.]+$/, '')) === target);
+          if (match) { setActiveImage(match.path); return; }
         }
-      }
-      if (!cancelled) setActiveImage(null);
-    })();
+        setActiveImage(null);
+      })
+      .catch(() => { if (!cancelled) setActiveImage(null); });
     return () => { cancelled = true; };
   }, [activeDevice?.url, mediaSetFiles]);