- {thumbUrl
- ?
- :
}
+
+ {confirmModal}
+
+
+
Projects
+
+
+ All projects
+ {ALL_ASSETS.length}
+
+ {PROJECTS.slice(0, 8).map(function(p) {
+ return (
+
+ {p.name}
+ {p.assets}
+
+ );
+ })}
+
+
+
+
Bins
+
+
+
+
+ {creatingBin && (
+
+
+ )}
+ {!creatingBin && BINS.length === 0 ? (
+
+ {openProject ? 'No bins yet: click + to create one.' : 'Open a project to manage bins.'}
+
+ ) : BINS.map(function(b) {
+ const isActive = selectedBinId === b.id;
+ const isDragTarget = draggingAssetId !== null && dragOverBinId === b.id;
+ return (
+
+ {b.name}
+ {b.count}
+
+ );
+ })}
+
+
+
Smart filters
+
+ {errorCount > 0 &&
Errors {errorCount}
}
+
Last 24h {recentCount}
+
Ready {ALL_ASSETS.filter(function(a) { return a.status === 'ready'; }).length}
+
+
+
+
+
+
{displayTitle}
+
· {assets.length} assets
+
+ {selectionMode && selectedAssets.size > 0 && (
+
+
{selectedAssets.size} selected
+
+
+ {BINS.length > 0 && (
+
+ Move to bin…
+ {BINS.filter(function(b) { return !openProject || b.project_id === openProject.id; }).map(function(b) {
+ return {b.name} ;
+ })}
+
+ )}
+
+
+ )}
+
+
+
+
+
+ {['all', 'ready', 'processing', 'live', 'error'].map(function(f) {
+ return (
+
+ {f === 'all' ? 'All' : f[0].toUpperCase() + f.slice(1)}
+
+ );
+ })}
+
+
+
+
+
+
+ {assets.length === 0 ? (
+
No assets match this filter.
+ ) : view === 'grid' ? (
+
+ {assets.map(function(a) {
+ return
;
+ })}
+
+ ) : (
+
+
+ {selectionMode &&
}
+
Name
Duration
Resolution
Codec
Size
Updated
+
+ {assets.map(function(a) {
+ return (
+
+ {selectionMode && (
+
+
+ )}
+
+
+
{a.name}
+
+ {a.status}
+
+
+
{a.duration}
+
{a.res}
+
{a.codec || '·'}
+
{a.size}
+
{a.updated}
+
+
+ );
+ })}
+
+ )}
+
+ {ctxMenu && (
+
+ )}
+ {pendingDownload && (
+
+ )}
+ {renamingAsset && (
+
+ )}
+ {projectCtx && (
+
+ )}
+ {renamingProject && window.RenameProjectModal && (
+ React.createElement(window.RenameProjectModal, {
+ project: renamingProject,
+ onClose: function() { setRenamingProject(null); },
+ onSaved: function() {
+ setRenamingProject(null);
+ // Re-fetch projects and update ZAMPP_DATA so the rail refreshes
+ window.ZAMPP_API.fetch('/projects').then(function(list) {
+ if (Array.isArray(list)) {
+ window.ZAMPP_DATA.PROJECTS = list.map(function(p, i) {
+ return {
+ ...p,
+ color: (window.ZAMPP_DATA.PROJECTS.find(function(x) { return x.id === p.id; }) || {}).color
+ || window.PROJECT_COLORS?.[i % (window.PROJECT_COLORS?.length || 1)]
+ || 'var(--accent)',
+ assets: (window.ZAMPP_DATA?.ASSETS || []).filter(function(a) { return a.project_id === p.id; }).length,
+ updated: window.ZAMPP_API.fmtRelative(p.updated_at),
+ };
+ });
+ setProjVersion(function(v) { return v + 1; });
+ }
+ }).catch(function() {});
+ }
+ })
+ )}
);
}
-Both files written. Summary of changes:
+// Hi-res download trigger shared by the card and the context menu. Resolves
+// a presigned S3 URL via /assets/:id/hires (returns { url, filename, ext })
+// and clicks a hidden anchor so the browser does the download. The download
+// itself is direct S3 - never proxied through mam-api - so big files don't
+// touch the API container.
+function runDownload(asset) {
+ if (!asset || !asset.id) return;
+ return window.ZAMPP_API.fetch('/assets/' + asset.id + '/hires')
+ .then(function(r) {
+ if (!r || !r.url) { alert('No hi-res source available for this asset.'); return; }
+ const a = document.createElement('a');
+ a.href = r.url;
+ a.download = r.filename || ((asset.display_name || asset.name || asset.id) + '.' + (r.ext || 'mov'));
+ a.target = '_blank';
+ a.rel = 'noopener';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ })
+ .catch(function(e) { alert('Download failed: ' + (e.message || 'unknown error')); });
+}
-**screens-library.jsx**
-- `AssetCard` gains `onMigrate` prop; all `AssetCard` usages in grid pass `onMigrate={refreshAssets}`
-- `AssetCard` thumb-status block adds `pending_migration` badge (`
Pending Migration `)
-- `AssetCard` adds `.thumb-migrate-btn` button (position absolute, bottom 8px, left/right 8px) calling `POST /assets/:id/migrate-to-library`
-- List view actions column gains inline migrate button for `pending_migration` rows
-- Filter tab-group gains "Pending" tab (`pending_migration`)
-- Smart filters rail gains "Pending migration" entry (visible only when count > 0)
-- `hasLive` memo includes `pending_migration` so 4s poll activates when any such asset exists
+function AssetContextMenu({ asset, x, y, bins, onClose, onChanged, onOpen, onRename, onDownload, onDelete }) {
+ const ref = React.useRef(null);
+ // Pin the menu inside the viewport even if the user right-clicked near
+ // the bottom-right edge of the grid.
+ const [pos, setPos] = React.useState({ left: x, top: y });
+ React.useLayoutEffect(() => {
+ if (!ref.current) return;
+ const r = ref.current.getBoundingClientRect();
+ const margin = 8;
+ let nx = x, ny = y;
+ if (x + r.width + margin > window.innerWidth) nx = window.innerWidth - r.width - margin;
+ if (y + r.height + margin > window.innerHeight) ny = window.innerHeight - r.height - margin;
+ setPos({ left: Math.max(margin, nx), top: Math.max(margin, ny) });
+ }, [x, y]);
-**visuals.jsx**
-- `AssetThumb` handles `pending_migration` before the generic fallback: renders static placeholder with upload icon + "Awaiting migration" label, no video/HLS
-- `StatusDot` map gains `pending_migration: { color: 'var(--warning)', pulse: false }`
+ const rename = function() { if (onRename) onRename(asset); else onClose(); };
-Files at:
-- `/home/node/workspace/dragonflight/services/web-ui/public/screens-library.jsx`
-- `/home/node/workspace/dragonflight/services/web-ui/public/visuals.jsx`
+ const moveToBin = function(binId) {
+ onClose();
+ window.ZAMPP_API.fetch('/assets/' + asset.id, { method: 'PATCH', body: JSON.stringify({ bin_id: binId }) })
+ .then(function() { onChanged(); window.dispatchEvent(new Event('df:bins-changed')); })
+ .catch(function(e) { alert('Move failed: ' + e.message); });
+ };
+
+ const copyId = function() {
+ onClose();
+ if (navigator.clipboard) navigator.clipboard.writeText(asset.id).catch(function() {});
+ };
+
+ const remove = function() {
+ if (onDelete) { onDelete(asset); return; }
+ onClose();
+ };
+
+ return (
+
+
{asset.display_name || asset.name}
+
+
+ {asset.original_s3_key && onDownload && (
+
+ )}
+
+ {(bins && bins.length > 0) ? (
+ <>
+
Move to bin
+ {bins
+ .filter(function(b) { return !asset.project_id || b.project_id === asset.project_id; })
+ .slice(0, 10)
+ .map(function(b) {
+ const isCurrent = asset.bin_id === b.id;
+ return (
+
+ current }
+
+ );
+ })}
+ {asset.bin_id && (
+
+
+ )}
+
+ ) : (
+
No bins: create one inside a project
+ )}
+
+
+
+
+ );
+}
+
+function AssetCard({ asset, onOpen, onContextMenu, onDownload, onDragStart, draggable, selectionMode, isSelected, onToggleSelect }) {
+ const [hoverStream, setHoverStream] = React.useState(null);
+ const [hovered, setHovered] = React.useState(false);
+ const timerRef = React.useRef(null);
+ const hlsRef = React.useRef(null);
+ const videoRef = React.useRef(null);
+
+ const handleMouseEnter = function() {
+ timerRef.current = setTimeout(function() {
+ setHovered(true);
+ if (!hoverStream) {
+ window.ZAMPP_API.fetch('/assets/' + asset.id + '/stream')
+ .then(function(r) { if (r && r.url) setHoverStream(r); })
+ .catch(function() {});
+ }
+ }, 350);
+ };
+
+ const handleMouseLeave = function() {
+ clearTimeout(timerRef.current);
+ setHovered(false);
+ };
+
+ // HLS wiring
+ React.useEffect(function() {
+ if (!hovered || !hoverStream || hoverStream.type !== 'hls' || !videoRef.current) return;
+ if (!window.Hls) return;
+ hlsRef.current = new window.Hls({ maxBufferLength: 10 });
+ hlsRef.current.loadSource(hoverStream.url);
+ hlsRef.current.attachMedia(videoRef.current);
+ return function() {
+ if (hlsRef.current) { hlsRef.current.destroy(); hlsRef.current = null; }
+ };
+ }, [hovered, hoverStream]);
+
+ const showVideo = hovered && hoverStream;
+
+ return (
+
+
+ {selectionMode && (
+
+
+ )}
+
+ {showVideo && (
+
+ )}
+ {/* Status badges and duration: inside the relative wrapper so
+ position:absolute is anchored to the thumbnail, not the card (#52) */}
+
+ {asset.status === 'live' && LIVE }
+ {asset.status === 'processing' && Processing }
+ {asset.status === 'error' && Error }
+
+ {/* Hi-res download trigger: only shown when the asset has an
+ original_s3_key (everything queued through ingest / conform).
+ Hidden until card hover, lives in top-right of the thumb. */}
+ {asset.original_s3_key && onDownload && (
+
+
+ )}
+ {(asset.type === 'video' || !asset.type) && asset.duration !== '·' &&
{asset.duration}
}
+
+
+
{asset.name}
+
+ {asset.res}
+ ·
+ {asset.size}
+
+
+
+ );
+}
+
+function ProjectContextMenu({ project, x, y, onClose, onRename }) {
+ var ref = React.useRef(null);
+ var [pos, setPos] = React.useState({ left: x, top: y });
+ React.useLayoutEffect(function() {
+ if (!ref.current) return;
+ var r = ref.current.getBoundingClientRect();
+ var margin = 8;
+ var nx = x, ny = y;
+ if (x + r.width + margin > window.innerWidth) nx = window.innerWidth - r.width - margin;
+ if (y + r.height + margin > window.innerHeight) ny = window.innerHeight - r.height - margin;
+ setPos({ left: Math.max(margin, nx), top: Math.max(margin, ny) });
+ }, [x, y]);
+
+ return (
+
+
{project.name}
+
+
+
+ );
+}
+
+function binIcon(name) {
+ return { grid: 'library', live: 'record', film: 'film', proxy: 'proxy', audio: 'audio', package: 'package' }[name] || 'folder';
+}
+
+function RenameAssetModal({ asset, onClose, onSaved }) {
+ const [name, setName] = React.useState(asset.display_name || asset.name || '');
+ const [saving, setSaving] = React.useState(false);
+ const [err, setErr] = React.useState(null);
+ const original = asset.display_name || asset.name || '';
+ const submit = function() {
+ const trimmed = name.trim();
+ if (!trimmed || trimmed === original) { onClose(); return; }
+ setSaving(true); setErr(null);
+ window.ZAMPP_API.fetch('/assets/' + asset.id, { method: 'PATCH', body: JSON.stringify({ display_name: trimmed }) })
+ .then(onSaved)
+ .catch(function(e) { setSaving(false); setErr(e.message); });
+ };
+ return (
+
+
+
+
+
+ Display name
+
+ {err &&
{err}
}
+
+
+ Cancel
+ {saving ? 'Saving…' : 'Rename'}
+
+
+
+ );
+}
+
+// First-run-style warning before a hi-res download. Tells the operator the
+// file is full-length, may be multi-GB, and that speed depends on their
+// connection. "Don't show again on this device" persists the dismissal so
+// subsequent downloads (and every Download click after dismissal) skip
+// straight to the file. Settings → Account exposes a control to re-enable.
+function DownloadWarningModal({ asset, onClose, onConfirm }) {
+ const [dismiss, setDismiss] = React.useState(false);
+ const name = asset.display_name || asset.name || asset.id;
+ return (
+
+
+
+
Download original ingest
+
+
+
+
+ You're about to download the full-length original ingest for
+ {name} .
+
+
+ Originals are often multi-gigabyte. Download speed depends on
+ your network connection; don't start this on a metered link
+ or a busy uplink.
+
+
+ Don't show this again on this device
+
+
+
+ Cancel
+ Download
+
+
+
+ );
+}
+
+window.Library = Library;
+window.AssetCard = AssetCard;
diff --git a/services/web-ui/public/visuals.jsx b/services/web-ui/public/visuals.jsx
index 9e8170d..5382aa6 100644
--- a/services/web-ui/public/visuals.jsx
+++ b/services/web-ui/public/visuals.jsx
@@ -25,6 +25,10 @@ function AssetThumb({ asset, size = 'md' }) {
);
}
+ // Live/recording assets: once the capture sidecar has published a poster
+ // thumbnail (first frame of the recording), show that static frame instead
+ // of the HLS "connecting…" player. Until the poster exists (the brief window
+ // before the first segment is grabbed), fall back to the live HLS preview.
if (asset.status === 'live' && asset.id) {
if (asset.thumbnail_s3_key || thumbUrl) {
const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Live recording thumbnail';
@@ -33,6 +37,7 @@ function AssetThumb({ asset, size = 'md' }) {
{thumbUrl
?
:
}
+ {/* Keep the pulsing LIVE border so it still reads as recording */}
@@ -63,6 +55,10 @@ function AssetThumb({ asset, size = 'md' }) {
);
}
+// Muted inline HLS preview for a live/recording asset tile. Attaches hls.js
+// (or native HLS on Safari) to show the live feed inside the library card.
+// Shows a "connecting…" spinner while the manifest loads, falls back to a
+// placeholder with a record icon if hls.js is unavailable or playback fails.
function LiveThumb({ assetId, aspect }) {
const videoRef = React.useRef(null);
const [ready, setReady] = React.useState(false);
@@ -133,6 +129,7 @@ function LiveThumb({ assetId, aspect }) {
autoPlay
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
/>
+ {/* Pulsing red border while connecting or playing, matches LIVE badge colour */}
{!ready && !failed && (
;
@@ -254,6 +250,19 @@ function Elapsed({ seconds, live = false }) {
return
{String(h).padStart(2,'0')}:{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')} ;
}
+// ─────────────────────────────────────────────────────────────────────────
+// ConfirmModal + useConfirm — in-page replacement for window.confirm().
+//
+// Usage in a component:
+// const [confirm, confirmModal] = useConfirm();
+// ...
+// if (!(await confirm({ title: 'Delete user?', message: '…' }))) return;
+// ...
+// return (<>{confirmModal} ...rest of UI... );
+//
+// confirm(opts) returns a Promise
. Options:
+// title, message, confirmLabel (default 'Delete'), cancelLabel ('Cancel'),
+// danger (default true → red confirm button).
function ConfirmModal({ title, message, confirmLabel = 'Delete', cancelLabel = 'Cancel', danger = true, onConfirm, onCancel }) {
React.useEffect(() => {
const onKey = (e) => {
@@ -274,7 +283,7 @@ function ConfirmModal({ title, message, confirmLabel = 'Delete', cancelLabel = '
{typeof message === 'string'
? message.split('\n').map((line, i) => (
-
{line || ' '}
+
{line || ' '}
))
:
{message}
}