85 lines
4 KiB
JavaScript
85 lines
4 KiB
JavaScript
// screens-library.jsx
|
|
// visuals.jsx - reusable visual elements
|
|
|
|
const _thumbCache = new Map();
|
|
|
|
function AssetThumb({ asset, size = 'md' }) {
|
|
const aspect = size === 'tall' ? '9 / 16' : '16 / 9';
|
|
const [thumbUrl, setThumbUrl] = React.useState(_thumbCache.get(asset.id) || null);
|
|
|
|
React.useEffect(() => {
|
|
if (!asset.id || thumbUrl || !asset.thumbnail_s3_key) return;
|
|
let cancelled = false;
|
|
fetch((window.ZAMPP_API_PREFIX || '/api/v1') + '/assets/' + asset.id + '/thumbnail', { credentials: 'include' })
|
|
.then(r => r.ok ? r.json() : null)
|
|
.then(d => { if (!cancelled && d && d.url) { _thumbCache.set(asset.id, d.url); setThumbUrl(d.url); } })
|
|
.catch(() => {});
|
|
return () => { cancelled = true; };
|
|
}, [asset.id, asset.thumbnail_s3_key]);
|
|
|
|
if (asset.type === 'audio' || asset.media_type === 'audio') {
|
|
return (
|
|
<div className="asset-thumb audio" style={{ aspectRatio: aspect }}>
|
|
<Waveform seed={asset.id ? asset.id.charCodeAt(0) % 60 : 1} />
|
|
<div className="thumb-overlay"><Icon name="audio" size={20} style={{ opacity: 0.9 }} /></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (asset.status === 'live' && asset.id) {
|
|
if (asset.thumbnail_s3_key || thumbUrl) {
|
|
const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Live recording thumbnail';
|
|
return (
|
|
<div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: '#000', overflow: 'hidden' }}>
|
|
{thumbUrl
|
|
? <img src={thumbUrl} alt={altText} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
|
: <FauxFrame />}
|
|
<div style={{ position: 'absolute', inset: 0, border: '2px solid var(--live)', pointerEvents: 'none', borderRadius: 'inherit' }} />
|
|
</div>
|
|
);
|
|
}
|
|
return <LiveThumb assetId={asset.id} aspect={aspect} />;
|
|
}
|
|
|
|
// pending_migration: placeholder with upload icon, no video
|
|
if (asset.status === 'pending_migration') {
|
|
return (
|
|
<div className="asset-thumb" style={{ aspectRatio: aspect, position: 'relative', background: 'var(--bg-2)', overflow: 'hidden' }}>
|
|
<div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
|
|
alignItems: 'center', justifyContent: 'center', gap: 6,
|
|
color: 'var(--text-3)', fontSize: 11 }}>
|
|
<Icon name="upload" size={20} style={{ opacity: 0.5 }} />
|
|
<span>Awaiting migration</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const altText = asset.name ? `Thumbnail for ${asset.name}` : 'Asset thumbnail';
|
|
return (
|
|
<div className="asset-thumb" style={{ background: 'var(--bg-2)', aspectRatio: aspect, overflow: 'hidden', position: 'relative' }}>
|
|
{thumbUrl
|
|
? <img src={thumbUrl} alt={altText} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
|
: <FauxFrame />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Both files written. Summary of changes:
|
|
|
|
**screens-library.jsx**
|
|
- `AssetCard` gains `onMigrate` prop; all `AssetCard` usages in grid pass `onMigrate={refreshAssets}`
|
|
- `AssetCard` thumb-status block adds `pending_migration` badge (`<span className="badge warning">Pending Migration</span>`)
|
|
- `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
|
|
|
|
**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 }`
|
|
|
|
Files at:
|
|
- `/home/node/workspace/dragonflight/services/web-ui/public/screens-library.jsx`
|
|
- `/home/node/workspace/dragonflight/services/web-ui/public/visuals.jsx`
|