@@ -72,6 +72,6 @@ export default function ReactionOverlay({ events, currentTime, minTime }) {
ReactionOverlay.propTypes = {
events: PropTypes.array.isRequired,
- currentTime: PropTypes.number.isRequired,
+ currentMs: PropTypes.number.isRequired,
minTime: PropTypes.number.isRequired,
};
From b8387d3add500463a2c41849164e68b59e0dc082 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 26 Mar 2026 12:07:11 +0000
Subject: [PATCH 05/10] remove chat window: transparent overlay with reactions
+ messages, fix reactions bug, add export WebM
Co-authored-by: hugh-codes <166336705+hugh-codes@users.noreply.github.com>
Agent-Logs-Url: https://github.com/hugh-codes/chat-visual/sessions/db8b5d4f-a12a-40bd-8370-61f4fcff0c9e
---
README.md | 8 +-
src/App.css | 29 ++++
src/App.jsx | 79 +++++++++--
src/components/ChatOverlay.css | 76 ++++++++++
src/components/ChatOverlay.jsx | 101 ++++++++++++++
src/components/OverlayExporter.jsx | 217 +++++++++++++++++++++++++++++
6 files changed, 494 insertions(+), 16 deletions(-)
create mode 100644 src/components/ChatOverlay.css
create mode 100644 src/components/ChatOverlay.jsx
create mode 100644 src/components/OverlayExporter.jsx
diff --git a/README.md b/README.md
index c3ec61a..4744717 100644
--- a/README.md
+++ b/README.md
@@ -4,10 +4,12 @@ A browser-based chat and reaction replay tool for live-stream JSONL exports.
## What it does
-Upload a `.jsonl` file exported from a Twitter Spaces (or compatible) live stream and replay the chat events in a Twitch-style interface:
+Upload a `.jsonl` file exported from a Twitter Spaces (or compatible) live stream, optionally add a video file, and replay the chat events as a transparent video overlay:
-- **Floating emoji reactions** rise up over the video area in real time
-- **Scrolling chat panel** shows join events and reactions in chronological order
+- **Floating emoji reactions** rise up over the video area in real time, timed to the stream
+- **Transparent chat overlay** shows join events and emoji reactions as bottom-left text — no background panel, just text-shadow for readability, so it looks natural on any video
+- **Video player** — drag-and-drop or click to load any video file (MP4, MOV, MKV, etc.); large files up to 8 GB are streamed from disk via `URL.createObjectURL` without loading into RAM
+- **Export Overlay** — records the reactions + chat to a transparent 1920×1080 WebM (VP9 alpha where supported) that you can drop onto your original video track in Premiere, DaVinci Resolve, CapCut, or any NLE
- **Playback controls** — play/pause, scrubber, and speed selector (0.5×–4×)
- **Drag-and-drop** file upload, or click to browse; includes a bundled example file
diff --git a/src/App.css b/src/App.css
index 6b47c5d..b61d309 100644
--- a/src/App.css
+++ b/src/App.css
@@ -175,3 +175,32 @@
color: #efeff1;
}
+/* Export overlay button */
+.app__export-btn {
+ background: transparent;
+ border: 1px solid #3d3d40;
+ color: #adadb8;
+ border-radius: 6px;
+ padding: 6px 14px;
+ font-size: 12px;
+ cursor: pointer;
+ transition: border-color 0.15s, color 0.15s;
+ flex-shrink: 0;
+}
+
+.app__export-btn:hover {
+ border-color: #9147ff;
+ color: #efeff1;
+}
+
+.app__export-btn--active {
+ border-color: #ff4040;
+ color: #ff4040;
+ animation: export-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes export-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.55; }
+}
+
diff --git a/src/App.jsx b/src/App.jsx
index f436172..f7adace 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,7 @@
import { useState, useEffect, useRef, useCallback } from 'react';
import FileUpload from './components/FileUpload';
-import ChatPanel from './components/ChatPanel';
-import ReactionOverlay from './components/ReactionOverlay';
+import ChatOverlay from './components/ChatOverlay';
+import OverlayExporter from './components/OverlayExporter';
import Timeline from './components/Timeline';
import { parseJsonl, getTimeRange } from './utils/parseJsonl';
import './App.css';
@@ -17,6 +17,7 @@ export default function App() {
const [speed, setSpeed] = useState(1);
const [filename, setFilename] = useState('');
const [videoSrc, setVideoSrc] = useState(null); // object URL for the loaded video
+ const [exporting, setExporting] = useState(false); // true while recording overlay WebM
const intervalRef = useRef(null);
const videoRef = useRef(null);
const videoInputRef = useRef(null);
@@ -51,6 +52,34 @@ export default function App() {
};
}, [videoSrc]);
+ // Download the overlay blob when recording stops
+ const handleExportDone = useCallback((blob) => {
+ setExporting(false);
+ setPlaying(false);
+ const ext = blob.type.includes('mp4') ? 'mp4' : 'webm';
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `chatvisual-overlay.${ext}`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }, []);
+
+ const handleExportToggle = () => {
+ if (exporting) {
+ setExporting(false);
+ setPlaying(false);
+ } else {
+ // Rewind to start, then record + play
+ setCurrentTime(0);
+ if (videoRef.current) videoRef.current.currentTime = 0;
+ setExporting(true);
+ setPlaying(true);
+ }
+ };
+
// Playback ticker — only used when no video is loaded (video drives its own
// timeupdate events instead).
useEffect(() => {
@@ -62,6 +91,7 @@ export default function App() {
const next = prev + (TICK_MS / 1000) * speed;
if (next >= duration) {
setPlaying(false);
+ setExporting(false);
return duration;
}
return next;
@@ -89,6 +119,12 @@ export default function App() {
}
}, [speed]);
+ // Stable callback for natural playback end (video ended or ticker reached duration)
+ const handlePlaybackEnd = useCallback(() => {
+ setPlaying(false);
+ setExporting(false);
+ }, []);
+
const handleSeek = (val) => {
setCurrentTime(val);
if (videoRef.current) {
@@ -156,11 +192,24 @@ export default function App() {
style={{ display: 'none' }}
onChange={(e) => handleVideoFile(e.target.files?.[0])}
/>
+ {/* Export overlay button */}
+