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

feat(DeviceDetailOverlay, StatusPage): update device URL handling to include base URL and cache options

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-08 13:15:23 -04:00
parent df121bd9c3
commit df02223d42
2 changed files with 74 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/components/DeviceDetailOverlay.tsx
View File

@ -37,7 +37,7 @@ export default function DeviceDetailOverlay({
}: DeviceDetailOverlayProps) {
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const [showMediaBrowser, setShowMediaBrowser] = useState(false);
const [browsingField, setBrowsingField] = useState<'url' | 'base_url' | 'cache' | null>(null);
const [showCommandMenu, setShowCommandMenu] = useState(false);
const minSwipeDistance = 50;
@ -318,32 +318,76 @@ export default function DeviceDetailOverlay({
</button>
</div>
{deviceData.url !== undefined && (
{deviceData.base_url !== undefined && (
<div>
<label className="text-sm text-neutral-500 block mb-2">URL</label>
<label className="text-sm text-neutral-500 block mb-2">Base URL</label>
<div className="flex gap-2">
<input
type="text"
value={deviceData.url}
value={deviceData.base_url ?? ''}
onChange={(e) => {
const path = getDevicePath();
updateDeviceSetting([...path, 'url'], e.target.value);
updateDeviceSetting([...path, 'base_url'], e.target.value);
}}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
/>
<button
onClick={() => setShowMediaBrowser(true)}
onClick={() => setBrowsingField('base_url')}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
>
<FolderOpen className="w-5 h-5" />
</button>
</div>
</div>
)}
<div>
<label className="text-sm text-neutral-500 block mb-2">URL</label>
<div className="flex gap-2">
<input
type="text"
value={deviceData.url}
onChange={(e) => {
const path = getDevicePath();
updateDeviceSetting([...path, 'url'], e.target.value);
}}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
/>
<button
onClick={() => setBrowsingField('url')}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
>
<FolderOpen className="w-5 h-5" />
</button>
</div>
{mediaSetFiles && (
<div className="mt-3">
<MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
</div>
)}
{mediaSetFiles && (
<div className="mt-3">
<MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
</div>
)}
</div>
{deviceData.cache !== undefined && (
<div>
<label className="text-sm text-neutral-500 block mb-2">Cache</label>
<div className="flex gap-2">
<input
type="text"
value={deviceData.cache ?? ''}
onChange={(e) => {
const path = getDevicePath();
updateDeviceSetting([...path, 'cache'], e.target.value);
}}
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
/>
<button
onClick={() => setBrowsingField('cache')}
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
>
<FolderOpen className="w-5 h-5" />
</button>
</div>
</div>
)}
@ -395,11 +439,23 @@ export default function DeviceDetailOverlay({
</div>
</div>
{showMediaBrowser && (
{browsingField && (
<MediaBrowser
currentPath={deviceData.url || '/'}
onSelect={(path) => { void handleFileSelect(path); setShowMediaBrowser(false); }}
onClose={() => setShowMediaBrowser(false)}
currentPath={
browsingField === 'cache' ? (deviceData.cache || '/') :
browsingField === 'base_url' ? (deviceData.base_url || '/') :
(deviceData.url || '/')
}
onSelect={(selectedPath: string) => {
if (browsingField === 'url') {
void handleFileSelect(selectedPath);
} else {
const devPath = getDevicePath();
updateDeviceSetting([...devPath, browsingField], selectedPath);
}
setBrowsingField(null);
}}
onClose={() => setBrowsingField(null)}
/>
)}
</motion.div>

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

@ -146,7 +146,9 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
</div>
<div>
<div className="font-medium">Device #{activeDevice.number}</div>
<div className="text-sm text-neutral-500">{activeDevice.url}</div>
<div className="text-sm text-neutral-500">
{[activeDevice.base_url, activeDevice.url].filter(Boolean).join('') || '—'}
</div>
</div>
</button>
<div className="w-2 h-2 rounded-full bg-green-500" />