Add timer, comments, and fix camera switch for live
- Add elapsed time counter (MM:SS) in header and stats - Add comments section with real-time input - Fix camera switch to work during live (replaceVideoTrack) - Send comments to backend on finalize for saving - Show comment count in end stream dialog 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
SocioWire
parent
540f213014
commit
870921a482
|
|
@ -551,6 +551,20 @@ body[data-theme="light"] .sw-video-modal-subtitle {
|
|||
box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.sw-broadcast-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(56, 189, 248, 0.2);
|
||||
border: 1px solid rgba(56, 189, 248, 0.4);
|
||||
color: #93c5fd;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sw-broadcast-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
|
@ -1109,6 +1123,150 @@ body[data-theme="light"] .sw-video-modal-subtitle {
|
|||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.sw-broadcast-confirm-comments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: #93c5fd;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== COMMENTS SECTION ===== */
|
||||
.sw-broadcast-comments {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
margin-top: 0.75rem;
|
||||
border-top: 1px solid rgba(56, 189, 248, 0.15);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.sw-broadcast-comments-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sw-broadcast-comments-header i {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.sw-broadcast-comments-list {
|
||||
flex: 1;
|
||||
min-height: 80px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.sw-broadcast-comments-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.sw-broadcast-comments-list::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sw-broadcast-comments-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(56, 189, 248, 0.4);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sw-broadcast-no-comments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(56, 189, 248, 0.1);
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-author {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: #38bdf8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-author::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-text {
|
||||
font-size: 0.8rem;
|
||||
color: #e5e7eb;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-input-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.7rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
color: #f8fafc;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(56, 189, 248, 0.6);
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-input::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-send {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
|
||||
color: #fff;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-send:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.sw-broadcast-comment-send:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== VIEWER MODAL ===== */
|
||||
.sw-viewer-modal {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,16 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
const [livePostId, setLivePostId] = useState(null);
|
||||
const [facingMode, setFacingMode] = useState("user");
|
||||
const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
|
||||
|
||||
// Timer state
|
||||
const [liveStartTime, setLiveStartTime] = useState(null);
|
||||
const [elapsedTime, setElapsedTime] = useState(0);
|
||||
|
||||
// Comments state
|
||||
const [comments, setComments] = useState([]);
|
||||
const [commentInput, setCommentInput] = useState("");
|
||||
const commentsEndRef = useRef(null);
|
||||
|
||||
const [liveCoords] = useState(() => {
|
||||
if (coords && typeof coords === "object") {
|
||||
if (Array.isArray(coords) && coords.length >= 2) {
|
||||
|
|
@ -44,7 +54,7 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
viewerCount,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
toggleAudio,
|
||||
replaceVideoTrack,
|
||||
} = useLiveKit({
|
||||
roomName,
|
||||
userID,
|
||||
|
|
@ -84,6 +94,29 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
}
|
||||
}, [localStream]);
|
||||
|
||||
// Timer effect - update every second when live
|
||||
useEffect(() => {
|
||||
if (!isLive || !liveStartTime) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setElapsedTime(Math.floor((Date.now() - liveStartTime) / 1000));
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isLive, liveStartTime]);
|
||||
|
||||
// Auto-scroll comments
|
||||
useEffect(() => {
|
||||
commentsEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [comments]);
|
||||
|
||||
// Format elapsed time as MM:SS
|
||||
const formatTime = (seconds) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
// Switch between front and back camera
|
||||
const switchCamera = useCallback(async () => {
|
||||
if (isSwitchingCamera) return;
|
||||
|
|
@ -98,9 +131,15 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
audio: true,
|
||||
});
|
||||
|
||||
// Stop old tracks
|
||||
// Stop old video tracks only (keep audio reference for LiveKit)
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach((t) => t.stop());
|
||||
localStream.getVideoTracks().forEach((t) => t.stop());
|
||||
}
|
||||
|
||||
// If live, replace the video track in LiveKit
|
||||
if (isLive) {
|
||||
const newVideoTrack = newStream.getVideoTracks()[0];
|
||||
await replaceVideoTrack(newVideoTrack);
|
||||
}
|
||||
|
||||
// Update state
|
||||
|
|
@ -118,7 +157,22 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
} finally {
|
||||
setIsSwitchingCamera(false);
|
||||
}
|
||||
}, [facingMode, localStream, isSwitchingCamera]);
|
||||
}, [facingMode, localStream, isSwitchingCamera, isLive, replaceVideoTrack]);
|
||||
|
||||
// Add a comment
|
||||
const handleAddComment = useCallback(() => {
|
||||
if (!commentInput.trim()) return;
|
||||
|
||||
const newComment = {
|
||||
id: Date.now(),
|
||||
author: username || "Host",
|
||||
text: commentInput.trim(),
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
setComments((prev) => [...prev, newComment]);
|
||||
setCommentInput("");
|
||||
}, [commentInput, username]);
|
||||
|
||||
const handleGoLive = useCallback(async () => {
|
||||
if (!authToken) {
|
||||
|
|
@ -138,6 +192,10 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
const videoTrack = localStream.getVideoTracks()[0];
|
||||
await startBroadcast(videoTrack, true);
|
||||
|
||||
// Start timer
|
||||
setLiveStartTime(Date.now());
|
||||
setElapsedTime(0);
|
||||
|
||||
if (onStreamCreated) {
|
||||
onStreamCreated({
|
||||
roomName,
|
||||
|
|
@ -207,6 +265,7 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
|
||||
if (livePostId) {
|
||||
try {
|
||||
// Include comments in finalize request
|
||||
const res = await fetch(`${API_BASE}/api/live/finalize`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -217,6 +276,11 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
post_id: livePostId,
|
||||
save: !!save,
|
||||
video_key: videoKey,
|
||||
comments: save ? comments.map((c) => ({
|
||||
author: c.author,
|
||||
text: c.text,
|
||||
timestamp: c.timestamp,
|
||||
})) : [],
|
||||
}),
|
||||
});
|
||||
if (res.ok && save) {
|
||||
|
|
@ -237,7 +301,7 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
}
|
||||
}
|
||||
onClose?.();
|
||||
}, [stopBroadcast, localStream, onClose, livePostId, authToken, roomName]);
|
||||
}, [stopBroadcast, localStream, onClose, livePostId, authToken, roomName, comments]);
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget && !isLive) {
|
||||
|
|
@ -257,10 +321,16 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>{isLive ? "LIVE" : "Go Live"}</span>
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-badge">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>{viewerCount} watching</span>
|
||||
</div>
|
||||
<>
|
||||
<div className="sw-broadcast-live-badge">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>{viewerCount} watching</span>
|
||||
</div>
|
||||
<div className="sw-broadcast-timer">
|
||||
<i className="fa-solid fa-clock" />
|
||||
<span>{formatTime(elapsedTime)}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -304,7 +374,7 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
{isLive && (
|
||||
<div className="sw-broadcast-live-indicator">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>LIVE on LiveKit</span>
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -347,14 +417,61 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
)}
|
||||
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-info">
|
||||
<h3 className="sw-broadcast-title">{title}</h3>
|
||||
<div className="sw-broadcast-stats">
|
||||
<span>
|
||||
<i className="fa-solid fa-eye" /> {viewerCount} viewers
|
||||
</span>
|
||||
<>
|
||||
<div className="sw-broadcast-live-info">
|
||||
<h3 className="sw-broadcast-title">{title}</h3>
|
||||
<div className="sw-broadcast-stats">
|
||||
<span>
|
||||
<i className="fa-solid fa-eye" /> {viewerCount} viewers
|
||||
</span>
|
||||
<span>
|
||||
<i className="fa-solid fa-clock" /> {formatTime(elapsedTime)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments section */}
|
||||
<div className="sw-broadcast-comments">
|
||||
<div className="sw-broadcast-comments-header">
|
||||
<i className="fa-solid fa-comments" />
|
||||
<span>Comments ({comments.length})</span>
|
||||
</div>
|
||||
<div className="sw-broadcast-comments-list">
|
||||
{comments.length === 0 ? (
|
||||
<div className="sw-broadcast-no-comments">
|
||||
No comments yet
|
||||
</div>
|
||||
) : (
|
||||
comments.map((c) => (
|
||||
<div key={c.id} className="sw-broadcast-comment">
|
||||
<span className="sw-broadcast-comment-author">{c.author}</span>
|
||||
<span className="sw-broadcast-comment-text">{c.text}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div ref={commentsEndRef} />
|
||||
</div>
|
||||
<div className="sw-broadcast-comment-input-row">
|
||||
<input
|
||||
type="text"
|
||||
className="sw-broadcast-comment-input"
|
||||
placeholder="Add a comment..."
|
||||
value={commentInput}
|
||||
onChange={(e) => setCommentInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleAddComment()}
|
||||
maxLength={200}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-comment-send"
|
||||
onClick={handleAddComment}
|
||||
disabled={!commentInput.trim()}
|
||||
>
|
||||
<i className="fa-solid fa-paper-plane" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
|
|
@ -404,6 +521,11 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
<div className="sw-broadcast-confirm">
|
||||
<h3>End Stream?</h3>
|
||||
<p>Your live stream will end for all viewers.</p>
|
||||
{comments.length > 0 && (
|
||||
<p className="sw-broadcast-confirm-comments">
|
||||
<i className="fa-solid fa-comments" /> {comments.length} comments will be saved
|
||||
</p>
|
||||
)}
|
||||
<div className="sw-broadcast-confirm-actions">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -417,14 +539,14 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
className="sw-broadcast-btn danger"
|
||||
onClick={() => handleEndStream(false)}
|
||||
>
|
||||
End Stream
|
||||
Discard
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn primary"
|
||||
onClick={() => handleEndStream(true)}
|
||||
>
|
||||
End & Save
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -208,6 +208,32 @@ export function useLiveKit({ roomName, userID, username, token: authToken }) {
|
|||
}
|
||||
}, []);
|
||||
|
||||
// Replace video track (for camera switch)
|
||||
const replaceVideoTrack = useCallback(async (newTrack) => {
|
||||
if (!roomRef.current || !newTrack) return false;
|
||||
|
||||
try {
|
||||
// Unpublish old track
|
||||
if (localVideoTrackRef.current) {
|
||||
await roomRef.current.localParticipant.unpublishTrack(localVideoTrackRef.current);
|
||||
localVideoTrackRef.current.stop();
|
||||
}
|
||||
|
||||
// Publish new track
|
||||
await roomRef.current.localParticipant.publishTrack(newTrack, {
|
||||
name: "camera",
|
||||
simulcast: true,
|
||||
videoCodec: "vp8",
|
||||
});
|
||||
localVideoTrackRef.current = newTrack;
|
||||
console.log("[LiveKit] Video track replaced");
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error("[LiveKit] Failed to replace video track:", err);
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
|
@ -227,6 +253,7 @@ export function useLiveKit({ roomName, userID, username, token: authToken }) {
|
|||
stopBroadcast,
|
||||
toggleAudio,
|
||||
toggleVideo,
|
||||
replaceVideoTrack,
|
||||
room: roomRef.current,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue