dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Changed Chatpanel to show crown to indicate subscribed user without the need to refresh

Browse Source
This commit is contained in:
JustIceO7
2025-03-04 02:43:54 +00:00
parent 8aae8a0430
commit 5b5bc161f1
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/Stream/ChatPanel.tsx
View File

@@ -29,6 +29,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
const [inputMessage, setInputMessage] = useState(""); const [inputMessage, setInputMessage] = useState("");
const chatContainerRef = useRef<HTMLDivElement>(null); const chatContainerRef = useRef<HTMLDivElement>(null);
const [justToggled, setJustToggled] = useState(false); const [justToggled, setJustToggled] = useState(false);
const subscribedUsersRef = useRef<Record<string, boolean>>({});
// Join chat room when component mounts // Join chat room when component mounts
useEffect(() => { useEffect(() => {
@@ -60,6 +61,12 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
}) })
.then((data) => { .then((data) => {
if (data.chat_history) { if (data.chat_history) {
// Store subscription status for each user
data.chat_history.forEach((msg: ChatMessage) => {
if (msg.is_subscribed) {
subscribedUsersRef.current[msg.chatter_username] = true;
}
});
setMessages(data.chat_history); setMessages(data.chat_history);
} }
}) })
@@ -69,6 +76,14 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
// Handle incoming messages // Handle incoming messages
socket.on("new_message", (data: ChatMessage) => { socket.on("new_message", (data: ChatMessage) => {
// If subscription info is missing, use our stored knowledge
if (data.is_subscribed === undefined) {
data.is_subscribed = !!subscribedUsersRef.current[data.chatter_username];
} else if (data.is_subscribed) {
// Update our subscription tracking
subscribedUsersRef.current[data.chatter_username] = true;
}
setMessages((prev) => [...prev, data]); setMessages((prev) => [...prev, data]);
}); });