diff --git a/package.json b/package.json index c2133e8..9ef688c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sociowire-frontend", "private": true, - "version": "0.0.92", + "version": "0.0.93", "type": "module", "scripts": { "dev": "vite --host 0.0.0.0", diff --git a/src/components/Live/LiveKitBroadcast.jsx b/src/components/Live/LiveKitBroadcast.jsx index 34bbb9d..a3fed95 100644 --- a/src/components/Live/LiveKitBroadcast.jsx +++ b/src/components/Live/LiveKitBroadcast.jsx @@ -2,7 +2,7 @@ import { useState, useRef, useEffect, useCallback } from "react"; import { useLiveKit } from "./useLiveKit"; import { useDualCamera } from "./useDualCamera"; import { useAuth } from "../../auth/AuthContext"; -import { fetchPostComments, createPostComment } from "../../api/client"; +import { fetchPostComments, createPostComment, fetchProfile } from "../../api/client"; import { CREATE_CATEGORY_MAP, FILTER_MAIN_CATEGORIES } from "../Map/mapConfig"; const API_BASE = (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, ""); @@ -32,6 +32,7 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated, ini const [comments, setComments] = useState([]); const [commentInput, setCommentInput] = useState(""); const [showComments, setShowComments] = useState(true); + const [commenterAvatars, setCommenterAvatars] = useState({}); const commentsEndRef = useRef(null); const [liveCoords] = useState(() => { @@ -144,6 +145,21 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated, ini commentsEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [comments]); + // Fetch commenter avatars + useEffect(() => { + if (!comments.length) return; + const usernames = [...new Set(comments.map(c => c.username).filter(Boolean))]; + const toFetch = usernames.filter(u => !commenterAvatars[u]); + if (!toFetch.length) return; + toFetch.forEach(uname => { + fetchProfile(uname).then(res => { + if (res?.avatar_url) { + setCommenterAvatars(prev => ({ ...prev, [uname]: res.avatar_url })); + } + }); + }); + }, [comments]); + const formatTime = (seconds) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; @@ -306,12 +322,15 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated, ini comments: [], }), }); + // Always delete the live post marker first + window.dispatchEvent(new CustomEvent("live-post-deleted", { detail: { post_id: livePostId } })); + if (res.ok && save) { + // If saved, add the video post back const post = await res.json(); - window.dispatchEvent(new CustomEvent("live-post-updated", { detail: post })); - } - if (res.ok && !save) { - window.dispatchEvent(new CustomEvent("live-post-deleted", { detail: { post_id: livePostId } })); + if (post?.id) { + window.dispatchEvent(new CustomEvent("live-post-created", { detail: post })); + } } } catch (err) { console.error("[LiveKit] Failed to finalize live post:", err); @@ -484,8 +503,12 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated, ini key={c.id || idx} className={`flex items-start gap-2 px-3 py-2 rounded-xl bg-black/50 backdrop-blur-sm ${c._pending ? 'opacity-60' : ''}`} > -
- {(c.username || "?")[0]?.toUpperCase()} +
+ {commenterAvatars[c.username] ? ( + + ) : ( + (c.username || "?")[0]?.toUpperCase() + )}
{c.username || "User"}