Live/in-progress assets had no thumbnail_s3_key, so AssetThumb fell through to FauxFrame (black box) and then an absolute red border div was drawn on top, producing the 'black box with red outline' symptom. Fix: when asset.status === 'live', render a new LiveThumb component instead of FauxFrame + border overlay. LiveThumb attaches hls.js (or native HLS on Safari) to /live/<assetId>/index.m3u8, shows a muted live video feed, and displays a 'Connecting…' placeholder with a record icon + pulsing live-colour border while the manifest loads. Falls back to a 'Recording…' placeholder if hls.js is unavailable or playback fails after retries. The red border overlay is removed from the non-live path; the LIVE badge rendered by AssetCard's thumb-status div still appears on top of the live video. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| public | ||
| scripts | ||
| src/css | ||
| .dockerignore | ||
| .gitignore | ||
| Dockerfile | ||
| nginx.conf | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||