WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 32 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: wire real video playback via GET /assets/:id/stream

Browse source 
- Fetch stream URL on asset open; show <video> element for mp4/hls
- Use hls.js for live HLS streams (loaded via CDN in index.html)
- Sync video play/pause/seek/timeupdate to React state
- Show loading state while fetching stream, status message when unavailable
- Add Retry processing button for error-status assets
- totalMs derived from video metadata when available, falls back to parseDuration
This commit is contained in:
Zac Gaetano 2026-05-22 13:37:55 -04:00
parent e3c3d60103
commit 6f2de45819
1 changed files with 209 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

242
services/web-ui/public/screens-asset.jsx
View file

@ -25,26 +25,90 @@ function AssetDetail({ asset, onClose }) {
const [comments, setComments] = React.useState(SEED_COMMENTS || []); const [comments, setComments] = React.useState(SEED_COMMENTS || []);
const [newComment, setNewComment] = React.useState(""); const [newComment, setNewComment] = React.useState("");
const totalMs = parseDuration(asset.duration); // Stream / video state
const [streamUrl, setStreamUrl] = React.useState(null);
const [streamType, setStreamType] = React.useState(null);
const [streamLoading, setStreamLoading] = React.useState(false);
const [videoDuration, setVideoDuration] = React.useState(0);
const [retrying, setRetrying] = React.useState(false);
const videoRef = React.useRef(null);
const assetId = asset && asset.id;
const totalMs = videoDuration > 0 ? videoDuration : parseDuration(asset.duration);
// Fetch stream URL when asset changes
React.useEffect(() => { React.useEffect(() => {
if (!playing || totalMs <= 0) return; if (!assetId) return;
const i = setInterval(() => { setStreamUrl(null);
setCurrentMs(t => { setStreamType(null);
setVideoDuration(0);
setCurrentMs(0);
setPlaying(false);
setStreamLoading(true);
window.ZAMPP_API.fetch('/assets/' + assetId + '/stream')
.then(function(r) {
if (r && r.url) {
setStreamUrl(r.url);
setStreamType(r.type || 'mp4');
}
})
.catch(function() {})
.finally(function() { setStreamLoading(false); });
}, [assetId]);
// Wire hls.js for live HLS streams
React.useEffect(() => {
if (!streamUrl || streamType !== 'hls' || !videoRef.current) return;
if (!window.Hls) return;
const hls = new window.Hls();
hls.loadSource(streamUrl);
hls.attachMedia(videoRef.current);
return function() { hls.destroy(); };
}, [streamUrl, streamType]);
// Fake playback timer — only used when no real video stream
React.useEffect(() => {
if (!playing || totalMs <= 0 || streamUrl) return;
const i = setInterval(function() {
setCurrentMs(function(t) {
const next = t + 100; const next = t + 100;
if (next >= totalMs) { setPlaying(false); return totalMs; } if (next >= totalMs) { setPlaying(false); return totalMs; }
return next; return next;
}); });
}, 100); }, 100);
return () => clearInterval(i); return function() { clearInterval(i); };
}, [playing, totalMs]); }, [playing, totalMs, streamUrl]);
const seek = (ms) => setCurrentMs(Math.max(0, Math.min(totalMs || 0, ms))); const togglePlay = function() {
const addComment = () => { if (videoRef.current) {
if (videoRef.current.paused) { videoRef.current.play(); }
else { videoRef.current.pause(); }
} else {
setPlaying(function(p) { return !p; });
}
};
const seek = function(ms) {
const clamped = Math.max(0, Math.min(totalMs || 0, ms));
setCurrentMs(clamped);
if (videoRef.current) videoRef.current.currentTime = clamped / 1000;
};
const retryProcessing = function() {
if (retrying) return;
setRetrying(true);
window.ZAMPP_API.fetch('/assets/' + assetId + '/retry', { method: 'POST' })
.then(function() { window.alert('Re-queued for processing. Refresh in a moment.'); })
.catch(function(e) { window.alert('Retry failed: ' + (e.message || 'unknown error')); })
.finally(function() { setRetrying(false); });
};
const addComment = function() {
if (!newComment.trim()) return; if (!newComment.trim()) return;
const t = msToTimecode(currentMs); const t = msToTimecode(currentMs);
setComments(c => [...c, { setComments(function(c) {
id: `n${Date.now()}`, return [...c, {
id: 'n' + Date.now(),
who: "Zach Gaetano", who: "Zach Gaetano",
avatar: "ZG", avatar: "ZG",
time: t, time: t,
@ -52,11 +116,18 @@ function AssetDetail({ asset, onClose }) {
text: newComment, text: newComment,
resolved: false, resolved: false,
frame: Math.floor(currentMs / 1000 * 30), frame: Math.floor(currentMs / 1000 * 30),
}]); }];
});
setNewComment(""); setNewComment("");
}; };
const visibleComments = comments.filter(c => showResolved || !c.resolved); const visibleComments = comments.filter(function(c) { return showResolved || !c.resolved; });
const statusMessage =
asset.status === 'processing' ? 'Processing…' :
asset.status === 'live' ? 'Live recording in progress' :
asset.status === 'error' ? 'Processing failed' :
'Preview not yet available';
return ( return (
<div className="asset-detail fade-in"> <div className="asset-detail fade-in">
@ -81,32 +152,63 @@ function AssetDetail({ asset, onClose }) {
<div className="player-col"> <div className="player-col">
<div className="player"> <div className="player">
<div className="player-canvas"> <div className="player-canvas">
{streamUrl ? (
<video
key={streamUrl}
ref={videoRef}
src={streamType !== 'hls' ? streamUrl : undefined}
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block', background: '#000' }}
onTimeUpdate={function() { if (videoRef.current) setCurrentMs(videoRef.current.currentTime * 1000); }}
onLoadedMetadata={function() { if (videoRef.current) setVideoDuration(videoRef.current.duration * 1000); }}
onPlay={function() { setPlaying(true); }}
onPause={function() { setPlaying(false); }}
onEnded={function() { setPlaying(false); }}
/>
) : (
<React.Fragment>
<FauxFrame seed={asset.seed || 1} /> <FauxFrame seed={asset.seed || 1} />
<div className="scanlines" /> <div className="scanlines" />
{!playing && totalMs > 0 && ( <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<button className="player-play-overlay" onClick={() => setPlaying(true)}> <div style={{ textAlign: 'center', color: 'var(--text-3)' }}>
{streamLoading ? (
<div style={{ fontSize: 13 }}>Loading…</div>
) : (
<React.Fragment>
<div style={{ fontSize: 13, marginBottom: 8 }}>{statusMessage}</div>
<StatusDot status={asset.status} />
{asset.status === 'error' && (
<button
className="btn ghost sm"
style={{ marginTop: 12, display: 'block', margin: '12px auto 0' }}
onClick={retryProcessing}
disabled={retrying}
>
{retrying ? 'Retrying…' : 'Retry processing'}
</button>
)}
</React.Fragment>
)}
</div>
</div>
{!streamLoading && !playing && totalMs > 0 && (
<button className="player-play-overlay" onClick={togglePlay}>
<Icon name="play" size={28} /> <Icon name="play" size={28} />
</button> </button>
)} )}
{totalMs <= 0 && ( </React.Fragment>
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<div style={{ textAlign: 'center', color: 'var(--text-3)' }}>
<div style={{ fontSize: 13, marginBottom: 8 }}>
{asset.status === 'processing' ? 'Processing…' : asset.status === 'live' ? 'Live recording in progress' : 'Preview not yet available'}
</div>
<StatusDot status={asset.status} />
</div>
</div>
)} )}
<div className="player-overlay-markers"> <div className="player-overlay-markers">
{visibleComments {visibleComments
.filter(c => Math.abs(parseDuration(c.time) - currentMs) < 200) .filter(function(c) { return Math.abs(parseDuration(c.time) - currentMs) < 200; })
.map(c => ( .map(function(c) {
return (
<div key={c.id} className="player-pin"> <div key={c.id} className="player-pin">
<div className="player-pin-avatar">{c.avatar}</div> <div className="player-pin-avatar">{c.avatar}</div>
<div className="player-pin-bubble">{c.text}</div> <div className="player-pin-bubble">{c.text}</div>
</div> </div>
))} );
})}
</div> </div>
{asset.status === "live" && ( {asset.status === "live" && (
<div style={{ position: "absolute", top: 12, left: 12 }}> <div style={{ position: "absolute", top: 12, left: 12 }}>
@ -123,7 +225,7 @@ function AssetDetail({ asset, onClose }) {
{totalMs > 0 && ( {totalMs > 0 && (
<div className="player-controls"> <div className="player-controls">
<button className="icon-btn" onClick={() => setPlaying(p => !p)}> <button className="icon-btn" onClick={togglePlay}>
<Icon name={playing ? "pause" : "play"} size={14} /> <Icon name={playing ? "pause" : "play"} size={14} />
</button> </button>
<span className="mono" style={{ fontSize: 11.5, color: "var(--text-2)", minWidth: 70 }}>{msToTimecode(currentMs)}</span> <span className="mono" style={{ fontSize: 11.5, color: "var(--text-2)", minWidth: 70 }}>{msToTimecode(currentMs)}</span>
@ -141,31 +243,35 @@ function AssetDetail({ asset, onClose }) {
</div> </div>
<div className="asset-detail-tabs"> <div className="asset-detail-tabs">
<button className={tab === "comments" ? "active" : ""} onClick={() => setTab("comments")}> <button className={tab === "comments" ? "active" : ""} onClick={function() { setTab("comments"); }}>
Comments <span className="count">{comments.length}</span> Comments <span className="count">{comments.length}</span>
</button> </button>
<button className={tab === "versions" ? "active" : ""} onClick={() => setTab("versions")}> <button className={tab === "versions" ? "active" : ""} onClick={function() { setTab("versions"); }}>
Versions Versions
</button> </button>
<button className={tab === "metadata" ? "active" : ""} onClick={() => setTab("metadata")}> <button className={tab === "metadata" ? "active" : ""} onClick={function() { setTab("metadata"); }}>
Metadata Metadata
</button> </button>
<button className={tab === "audio" ? "active" : ""} onClick={() => setTab("audio")}> <button className={tab === "audio" ? "active" : ""} onClick={function() { setTab("audio"); }}>
Audio Audio
</button> </button>
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
{tab === "comments" && ( {tab === "comments" && (
<label className="tiny-toggle"> <label className="tiny-toggle">
<input type="checkbox" checked={showResolved} onChange={e => setShowResolved(e.target.checked)} /> Show resolved <input type="checkbox" checked={showResolved} onChange={function(e) { setShowResolved(e.target.checked); }} /> Show resolved
</label> </label>
)} )}
</div> </div>
<div className="asset-detail-content"> <div className="asset-detail-content">
{tab === "comments" && ( {tab === "comments" && (
<CommentsList comments={visibleComments} onSeek={(c) => seek(parseDuration(c.time))} onResolve={(id) => { <CommentsList
setComments(cs => cs.map(c => c.id === id ? { ...c, resolved: !c.resolved } : c)); comments={visibleComments}
}} /> onSeek={function(c) { seek(parseDuration(c.time)); }}
onResolve={function(id) {
setComments(function(cs) { return cs.map(function(c) { return c.id === id ? Object.assign({}, c, { resolved: !c.resolved }) : c; }); });
}}
/>
)} )}
{tab === "versions" && <VersionsTab />} {tab === "versions" && <VersionsTab />}
{tab === "metadata" && <MetadataTab asset={asset} />} {tab === "metadata" && <MetadataTab asset={asset} />}
@ -189,7 +295,7 @@ function AssetDetail({ asset, onClose }) {
function PlaybackBar({ current, total, onSeek, comments }) { function PlaybackBar({ current, total, onSeek, comments }) {
const ref = React.useRef(null); const ref = React.useRef(null);
const handle = (e) => { const handle = function(e) {
const r = ref.current.getBoundingClientRect(); const r = ref.current.getBoundingClientRect();
const p = (e.clientX - r.left) / r.width; const p = (e.clientX - r.left) / r.width;
onSeek(Math.max(0, Math.min(1, p)) * total); onSeek(Math.max(0, Math.min(1, p)) * total);
@ -197,18 +303,18 @@ function PlaybackBar({ current, total, onSeek, comments }) {
const pct = total > 0 ? (current / total) * 100 : 0; const pct = total > 0 ? (current / total) * 100 : 0;
return ( return (
<div className="playback-bar" ref={ref} onClick={handle}> <div className="playback-bar" ref={ref} onClick={handle}>
<div className="playback-fill" style={{ width: `${pct}%` }} /> <div className="playback-fill" style={{ width: pct + '%' }} />
<div className="playback-handle" style={{ left: `${pct}%` }} /> <div className="playback-handle" style={{ left: pct + '%' }} />
{comments.map(c => { {comments.map(function(c) {
const ct = parseDuration(c.time); const ct = parseDuration(c.time);
if (!ct || total <= 0) return null; if (!ct || total <= 0) return null;
const x = (ct / total) * 100; const x = (ct / total) * 100;
return ( return (
<div <div
key={c.id} key={c.id}
className={`playback-marker ${c.resolved ? "resolved" : ""}`} className={'playback-marker ' + (c.resolved ? 'resolved' : '')}
style={{ left: `${x}%` }} style={{ left: x + '%' }}
onClick={(e) => { e.stopPropagation(); onSeek(ct); }} onClick={function(e) { e.stopPropagation(); onSeek(ct); }}
> >
<span className="marker-avatar">{c.avatar}</span> <span className="marker-avatar">{c.avatar}</span>
</div> </div>
@ -221,7 +327,7 @@ function PlaybackBar({ current, total, onSeek, comments }) {
function FilmStrip({ seed, current, total, onSeek, comments }) { function FilmStrip({ seed, current, total, onSeek, comments }) {
const ref = React.useRef(null); const ref = React.useRef(null);
const frames = 28; const frames = 28;
const handle = (e) => { const handle = function(e) {
if (!ref.current || total <= 0) return; if (!ref.current || total <= 0) return;
const r = ref.current.getBoundingClientRect(); const r = ref.current.getBoundingClientRect();
onSeek(((e.clientX - r.left) / r.width) * total); onSeek(((e.clientX - r.left) / r.width) * total);
@ -230,27 +336,29 @@ function FilmStrip({ seed, current, total, onSeek, comments }) {
return ( return (
<div className="filmstrip-wrap"> <div className="filmstrip-wrap">
<div className="filmstrip" ref={ref} onClick={handle}> <div className="filmstrip" ref={ref} onClick={handle}>
{Array.from({ length: frames }).map((_, i) => ( {Array.from({ length: frames }).map(function(_, i) {
return (
<div key={i} className="film-frame" style={{ background: _FRAME_GRADIENTS[(seed + i) % _FRAME_GRADIENTS.length] }}> <div key={i} className="film-frame" style={{ background: _FRAME_GRADIENTS[(seed + i) % _FRAME_GRADIENTS.length] }}>
<FauxFrame seed={(seed + i) % 6} /> <FauxFrame seed={(seed + i) % 6} />
</div> </div>
))} );
<div className="filmstrip-playhead" style={{ left: `${pct}%` }} /> })}
{comments.map(c => { <div className="filmstrip-playhead" style={{ left: pct + '%' }} />
{comments.map(function(c) {
const ct = parseDuration(c.time); const ct = parseDuration(c.time);
if (!ct || total <= 0) return null; if (!ct || total <= 0) return null;
const x = (ct / total) * 100; const x = (ct / total) * 100;
return ( return (
<div key={c.id} className={`filmstrip-pin ${c.resolved ? "resolved" : ""}`} style={{ left: `${x}%` }}> <div key={c.id} className={'filmstrip-pin ' + (c.resolved ? 'resolved' : '')} style={{ left: x + '%' }}>
<span className="filmstrip-pin-avatar">{c.avatar}</span> <span className="filmstrip-pin-avatar">{c.avatar}</span>
</div> </div>
); );
})} })}
</div> </div>
<div className="filmstrip-tc"> <div className="filmstrip-tc">
{[0, 0.25, 0.5, 0.75, 1].map(p => ( {[0, 0.25, 0.5, 0.75, 1].map(function(p) {
<span key={p} className="mono">{msToTimecode(p * total)}</span> return <span key={p} className="mono">{msToTimecode(p * total)}</span>;
))} })}
</div> </div>
</div> </div>
); );
@ -262,16 +370,17 @@ function CommentsList({ comments, onSeek, onResolve }) {
} }
return ( return (
<div className="comments-list"> <div className="comments-list">
{comments.map(c => ( {comments.map(function(c) {
<div key={c.id} className={`comment ${c.resolved ? "resolved" : ""}`}> return (
<div key={c.id} className={'comment ' + (c.resolved ? 'resolved' : '')}>
<div className="comment-avatar avatar" style={{ background: avatarColor(c.avatar) }}>{c.avatar}</div> <div className="comment-avatar avatar" style={{ background: avatarColor(c.avatar) }}>{c.avatar}</div>
<div className="comment-body"> <div className="comment-body">
<div className="comment-head"> <div className="comment-head">
<span className="comment-who">{c.who}</span> <span className="comment-who">{c.who}</span>
<button className="comment-time" onClick={() => onSeek(c)}><Icon name="clock" size={10} />{c.time}</button> <button className="comment-time" onClick={function() { onSeek(c); }}><Icon name="clock" size={10} />{c.time}</button>
<span className="comment-when">{c.real}</span> <span className="comment-when">{c.real}</span>
<div style={{ flex: 1 }} /> <div style={{ flex: 1 }} />
<button className="comment-action" onClick={() => onResolve(c.id)}> <button className="comment-action" onClick={function() { onResolve(c.id); }}>
<Icon name={c.resolved ? "refresh" : "check"} size={12} /> <Icon name={c.resolved ? "refresh" : "check"} size={12} />
</button> </button>
</div> </div>
@ -279,7 +388,8 @@ function CommentsList({ comments, onSeek, onResolve }) {
{c.resolved && <div className="comment-resolved">✓ Resolved</div>} {c.resolved && <div className="comment-resolved">✓ Resolved</div>}
</div> </div>
</div> </div>
))} );
})}
</div> </div>
); );
} }
@ -290,9 +400,9 @@ function CommentComposer({ asset, currentMs, value, onChange, onSubmit }) {
<div className="composer-head"> <div className="composer-head">
<span style={{ fontWeight: 600, fontSize: 12 }}>Reviewers</span> <span style={{ fontWeight: 600, fontSize: 12 }}>Reviewers</span>
<div className="avatar-stack"> <div className="avatar-stack">
{["ZG"].map((a, i) => ( {["ZG"].map(function(a, i) {
<div key={i} className="avatar" style={{ background: avatarColor(a), width: 22, height: 22, fontSize: 10 }}>{a}</div> return <div key={i} className="avatar" style={{ background: avatarColor(a), width: 22, height: 22, fontSize: 10 }}>{a}</div>;
))} })}
<button className="add-reviewer"><Icon name="plus" size={11} /></button> <button className="add-reviewer"><Icon name="plus" size={11} /></button>
</div> </div>
</div> </div>
@ -303,8 +413,8 @@ function CommentComposer({ asset, currentMs, value, onChange, onSubmit }) {
className="composer-input" className="composer-input"
placeholder="Leave a comment at this timecode…" placeholder="Leave a comment at this timecode…"
value={value} value={value}
onChange={e => onChange(e.target.value)} onChange={function(e) { onChange(e.target.value); }}
onKeyDown={e => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) onSubmit(); }} onKeyDown={function(e) { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) onSubmit(); }}
/> />
<div className="composer-bar"> <div className="composer-bar">
<span style={{ flex: 1 }} /> <span style={{ flex: 1 }} />
@ -336,12 +446,14 @@ function MetadataTab({ asset }) {
]; ];
return ( return (
<div className="meta-table"> <div className="meta-table">
{rows.map(r => ( {rows.map(function(r) {
return (
<div key={r.k} className="meta-row"> <div key={r.k} className="meta-row">
<div className="meta-k">{r.k}</div> <div className="meta-k">{r.k}</div>
<div className="meta-v">{r.v}</div> <div className="meta-v">{r.v}</div>
</div> </div>
))} );
})}
</div> </div>
); );
} }
@ -372,13 +484,13 @@ function msToTimecode(ms) {
const h = Math.floor(total / 3600); const h = Math.floor(total / 3600);
const m = Math.floor((total % 3600) / 60); const m = Math.floor((total % 3600) / 60);
const s = total % 60; const s = total % 60;
return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`; return String(h).padStart(2, "0") + ':' + String(m).padStart(2, "0") + ':' + String(s).padStart(2, "0");
} }
function avatarColor(initials) { function avatarColor(initials) {
let h = 0; let h = 0;
for (const c of (initials || '?')) h = (h * 31 + c.charCodeAt(0)) & 0xff; for (const c of (initials || '?')) h = (h * 31 + c.charCodeAt(0)) & 0xff;
return `linear-gradient(135deg, hsl(${h % 360} 60% 50%), hsl(${(h + 60) % 360} 60% 45%))`; return 'linear-gradient(135deg, hsl(' + (h % 360) + ' 60% 50%), hsl(' + ((h + 60) % 360) + ' 60% 45%))';
} }
Object.assign(window, { AssetDetail, msToTimecode, parseDuration, avatarColor }); Object.assign(window, { AssetDetail, msToTimecode, parseDuration, avatarColor });