Compare commits
No commits in common. "0c2fa2479c6478fbf7a223258b3921632c84b0c4" and "92a22fe253e4eae0e9e6e863479deb93f62d2662" have entirely different histories.
0c2fa2479c
...
92a22fe253
|
|
@ -5,7 +5,6 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"postbuild": "node scripts/gzip-dist.mjs",
|
||||
"dev": "vite"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import { createReadStream, createWriteStream } from 'node:fs';
|
||||
import { readdir, unlink } from 'node:fs/promises';
|
||||
import { extname, join } from 'node:path';
|
||||
import { pipeline } from 'node:stream/promises';
|
||||
import { createGzip } from 'node:zlib';
|
||||
|
||||
const EXTS = new Set(['.html', '.js', '.css', '.svg']);
|
||||
const DIST = 'dist';
|
||||
|
||||
async function* walk(dir) {
|
||||
for (const entry of await readdir(dir, { withFileTypes: true })) {
|
||||
const full = join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
yield* walk(full);
|
||||
} else if (EXTS.has(extname(entry.name))) {
|
||||
yield full;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
for await (const file of walk(DIST)) {
|
||||
await pipeline(
|
||||
createReadStream(file),
|
||||
createGzip({ level: 9 }),
|
||||
createWriteStream(`${file}.gz`),
|
||||
);
|
||||
await unlink(file);
|
||||
count++;
|
||||
console.log(` gzip ${file}`);
|
||||
}
|
||||
console.log(`\nGzipped ${count} file${count === 1 ? '' : 's'}.`);
|
||||
|
|
@ -125,40 +125,33 @@ export default function DeviceDetailOverlay({
|
|||
}
|
||||
};
|
||||
|
||||
// Prefer an explicit .lst-derived mediaSet stored in config; fall back to pattern detection.
|
||||
const [mediaSetFiles, setMediaSetFiles] = useState<MediaSetEntry[] | null>(null);
|
||||
const detectTokenRef = useRef(0);
|
||||
const prevDeviceNumberRef = useRef(device.number);
|
||||
|
||||
// Cancel any in-flight detection and reset when navigating to a different device.
|
||||
useEffect(() => {
|
||||
++detectTokenRef.current;
|
||||
setMediaSetFiles(null);
|
||||
}, [device.number]);
|
||||
const deviceChanged = prevDeviceNumberRef.current !== device.number;
|
||||
prevDeviceNumberRef.current = device.number;
|
||||
|
||||
// Sync config-backed media_set to display state whenever it is set explicitly
|
||||
// (e.g. after a playlist is mounted).
|
||||
useEffect(() => {
|
||||
if (Array.isArray(deviceData.media_set) && deviceData.media_set.length > 1) {
|
||||
setMediaSetFiles(deviceData.media_set as MediaSetEntry[]);
|
||||
return;
|
||||
}
|
||||
}, [deviceData.media_set]);
|
||||
|
||||
// Pattern-detect sibling numbered files for the given URL. Called only when
|
||||
// the user actively sets a URL — never on overlay load or device switch.
|
||||
const detectMediaSet = async (url: string) => {
|
||||
const token = ++detectTokenRef.current;
|
||||
setMediaSetFiles(null);
|
||||
const match = url.match(/^(.+?)(\d+)(\.[^.]+)$/);
|
||||
if (!match) return;
|
||||
// Don't run pattern detection when switching devices — only when the URL
|
||||
// is actively being changed within the same device.
|
||||
if (deviceChanged || !deviceData.url) { setMediaSetFiles(null); return; }
|
||||
const match = (deviceData.url as string).match(/^(.+?)(\d+)(\.[^.]+)$/);
|
||||
if (!match) { setMediaSetFiles(null); return; }
|
||||
const [, prefix, , ext] = match;
|
||||
const candidates: string[] = [];
|
||||
for (let i = 1; i <= 10; i++) candidates.push(`${prefix}${i}${ext}`);
|
||||
const flags = await Promise.all(
|
||||
candidates.map(f => stat(f).then(r => r !== null).catch(() => false))
|
||||
);
|
||||
if (detectTokenRef.current !== token) return;
|
||||
let cancelled = false;
|
||||
Promise.all(candidates.map(f => stat(f).then(r => r !== null).catch(() => false))).then(flags => {
|
||||
const found = candidates.filter((_, i) => flags[i]);
|
||||
setMediaSetFiles(found.length > 1 ? found : null);
|
||||
};
|
||||
if (!cancelled) setMediaSetFiles(found.length > 1 ? found : null);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [device.number, deviceData.url, deviceData.media_set]);
|
||||
|
||||
const switchMedia = (file: string) => {
|
||||
const path = getDevicePath();
|
||||
|
|
@ -225,7 +218,6 @@ export default function DeviceDetailOverlay({
|
|||
dev.url = selectedPath;
|
||||
delete dev.media_set;
|
||||
setConfig(newConfig);
|
||||
void detectMediaSet(selectedPath);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -401,9 +393,7 @@ export default function DeviceDetailOverlay({
|
|||
for (const k of devicePath) dev = dev[k];
|
||||
if (isOutsideBase(newUrl, dev.base_url || '')) clearBaseAndCache(dev);
|
||||
dev.url = newUrl;
|
||||
delete dev.media_set;
|
||||
setConfig(newConfig);
|
||||
if (newUrl) void detectMediaSet(newUrl);
|
||||
}}
|
||||
onClear={() => {
|
||||
const devicePath = getDevicePath();
|
||||
|
|
@ -413,8 +403,6 @@ export default function DeviceDetailOverlay({
|
|||
delete dev.url;
|
||||
delete dev.media_set;
|
||||
setConfig(newConfig);
|
||||
++detectTokenRef.current;
|
||||
setMediaSetFiles(null);
|
||||
}}
|
||||
containerClassName="flex-1"
|
||||
className="px-3 py-2 border border-neutral-300 rounded-lg"
|
||||
|
|
|
|||
|
|
@ -126,77 +126,6 @@ function ViewerModeIcon({ mode, className }: { mode: ViewMode; className?: strin
|
|||
|
||||
// EntryIcon is imported from MediaEntry.
|
||||
|
||||
// ─── MarqueeText ──────────────────────────────────────────────────────────────
|
||||
// Scrolls text left→right when it overflows its container, then back — ping-pong.
|
||||
// Injects a unique per-instance @keyframes rule with the exact pixel offset so
|
||||
// no CSS variables are needed (more reliable inside Radix portals).
|
||||
|
||||
let _mmSeq = 0;
|
||||
|
||||
function MarqueeText({ children, className }: { children?: string; className?: string }) {
|
||||
const wrapRef = useRef<HTMLSpanElement>(null);
|
||||
const idRef = useRef(`mm${++_mmSeq}`);
|
||||
const [animCSS, setAnimCSS] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const id = idRef.current;
|
||||
const wrap = wrapRef.current;
|
||||
if (!wrap) return;
|
||||
|
||||
const measure = () => {
|
||||
if (cancelled) return;
|
||||
const ov = wrap.scrollWidth - wrap.clientWidth;
|
||||
if (ov <= 0) { setAnimCSS(''); return; }
|
||||
|
||||
// Inject / update the keyframe with the exact measured pixel offset.
|
||||
let el = document.getElementById(`kf-${id}`) as HTMLStyleElement | null;
|
||||
if (!el) {
|
||||
el = document.createElement('style');
|
||||
el.id = `kf-${id}`;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.textContent = `@keyframes ${id}{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(-${ov}px)}}`;
|
||||
|
||||
const secs = (Math.max(2000, ov * 20) / 1000).toFixed(2);
|
||||
setAnimCSS(`${id} ${secs}s ease-in-out 0.8s infinite alternate`);
|
||||
};
|
||||
|
||||
// Two nested RAFs ensure the portal element has a stable layout before we
|
||||
// measure (one RAF fires before browser layout; two guarantees post-layout).
|
||||
const r1 = requestAnimationFrame(() => {
|
||||
const r2 = requestAnimationFrame(measure);
|
||||
return () => cancelAnimationFrame(r2);
|
||||
});
|
||||
|
||||
const ro = new ResizeObserver(measure);
|
||||
ro.observe(wrap);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
cancelAnimationFrame(r1);
|
||||
ro.disconnect();
|
||||
document.getElementById(`kf-${id}`)?.remove();
|
||||
setAnimCSS('');
|
||||
};
|
||||
}, [children]);
|
||||
|
||||
return (
|
||||
// overflow:hidden clips the scrolling text; minWidth:0 lets the element
|
||||
// shrink inside grid/flex parents without forcing them to expand to the
|
||||
// full text width (white-space:nowrap lives only on the inner span).
|
||||
<span
|
||||
ref={wrapRef}
|
||||
style={{ overflow: 'hidden', display: 'block', minWidth: 0 }}
|
||||
className={className}
|
||||
>
|
||||
<span style={{ display: 'inline-block', whiteSpace: 'nowrap', animation: animCSS || undefined }}>
|
||||
{children}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── ActionsModal ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface FolderManagementActions {
|
||||
|
|
@ -234,14 +163,10 @@ function ActionsModal({ entry, onClose, onOpen, onMount, onDownload, onDuplicate
|
|||
return (
|
||||
<Dialog open={entry !== null} onOpenChange={open => !open && onClose()}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader className="overflow-hidden min-w-0">
|
||||
{/* Keep DialogTitle for accessibility (aria-labelledby); styled text lives in the p below */}
|
||||
<DialogTitle className="sr-only">{entry?.name || '/'}</DialogTitle>
|
||||
<p className="text-lg font-semibold leading-none pr-6 overflow-hidden min-w-0">
|
||||
<MarqueeText>{entry?.name || '/'}</MarqueeText>
|
||||
</p>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="truncate">{entry?.name || '/'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
<MarqueeText>{isFolder ? 'Folder' : humanFileSize(entry?.size ?? 0)}</MarqueeText>
|
||||
{isFolder ? 'Folder' : humanFileSize(entry?.size ?? 0)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{entry && (
|
||||
|
|
@ -1341,14 +1266,11 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
|
|||
|
||||
{/* ── Mount dialog ── */}
|
||||
<Dialog open={mountEntry !== null} onOpenChange={open => !open && setMountEntry(null)}>
|
||||
<DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
|
||||
<DialogHeader className="flex-shrink-0">
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Mount on Virtual Drive</DialogTitle>
|
||||
<DialogDescription title={mountEntry?.name}>
|
||||
<MarqueeText>{mountEntry?.name}</MarqueeText>
|
||||
</DialogDescription>
|
||||
<DialogDescription className="truncate">{mountEntry?.name}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="overflow-y-auto flex-1 min-h-0">
|
||||
{(() => {
|
||||
const allDevices = Object.entries(config?.devices?.iec ?? {});
|
||||
const drives = allDevices
|
||||
|
|
@ -1366,25 +1288,16 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
|
|||
<button
|
||||
key={`${dev.type}-${dev.key}`}
|
||||
onClick={() => void mountOnDevice(dev.type, dev.key)}
|
||||
className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 flex items-center gap-3"
|
||||
className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
|
||||
>
|
||||
<HardDrive className={`w-5 h-5 flex-shrink-0 ${dev.enabled ? 'text-blue-500' : 'text-neutral-400'}`} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium text-sm">Device #{dev.key}</div>
|
||||
{(dev.base_url || dev.url) && (() => {
|
||||
const displayUrl = [dev.base_url, dev.url]
|
||||
.filter(Boolean).join('');
|
||||
return (
|
||||
<div
|
||||
className="text-xs text-neutral-500 overflow-hidden whitespace-nowrap"
|
||||
style={{ direction: 'rtl', textOverflow: 'ellipsis' }}
|
||||
title={displayUrl}
|
||||
>
|
||||
{/* LTR embed prevents BiDi from reordering the leading '/' to the visual right */}
|
||||
<span style={{ direction: 'ltr', unicodeBidi: 'embed' }}>{displayUrl}</span>
|
||||
{(dev.base_url || dev.url) && (
|
||||
<div className="text-xs text-neutral-500 truncate">
|
||||
{[dev.base_url, dev.url].filter(Boolean).join('')}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
)}
|
||||
</div>
|
||||
{!dev.enabled && <span className="text-xs text-neutral-400 flex-shrink-0">disabled</span>}
|
||||
</button>
|
||||
|
|
@ -1392,7 +1305,6 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
|
|||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user