diff --git a/frontend/src/components/Video/ChatPanel.tsx b/frontend/src/components/Video/ChatPanel.tsx index d070a04..5dad33a 100644 --- a/frontend/src/components/Video/ChatPanel.tsx +++ b/frontend/src/components/Video/ChatPanel.tsx @@ -13,9 +13,10 @@ interface ChatMessage { interface ChatPanelProps { streamId: number; + onViewerCountChange?: (count: number) => void; } -const ChatPanel: React.FC = ({ streamId }) => { +const ChatPanel: React.FC = ({ streamId, onViewerCountChange }) => { const { socket, isConnected } = useSocket(); const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); @@ -47,7 +48,6 @@ const ChatPanel: React.FC = ({ streamId }) => { }) .then((data) => { if (data.chat_history) { - console.log("Chat history:", data.chat_history); setMessages(data.chat_history); } }) @@ -62,8 +62,11 @@ const ChatPanel: React.FC = ({ streamId }) => { }); // Handle live viewership - socket.on("status", (data: ChatMessage) => { + socket.on("status", (data: any) => { console.log("Live viewership: ", data) // returns dictionary {message: message, num_viewers: num_viewers} + if (onViewerCountChange && data.num_viewers) { + onViewerCountChange(data.num_viewers); + } }) // Cleanup function diff --git a/frontend/src/context/StreamsContext.tsx b/frontend/src/context/StreamsContext.tsx index a39b5d5..f9ebabe 100644 --- a/frontend/src/context/StreamsContext.tsx +++ b/frontend/src/context/StreamsContext.tsx @@ -56,7 +56,6 @@ export function StreamsProvider({ children }: { children: React.ReactNode }) { category: stream.category_name, })); - console.log(extractedData); setFeaturedStreams(extractedData); }); diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx index aa8683e..3d86ed9 100644 --- a/frontend/src/pages/VideoPage.tsx +++ b/frontend/src/pages/VideoPage.tsx @@ -17,7 +17,6 @@ interface StreamDataProps { streamerName: string; streamerId: number; startTime: string; - viewerCount: number; categoryName: string; } @@ -25,6 +24,7 @@ const VideoPage: React.FC = ({ streamId }) => { const { isLoggedIn } = useAuth(); const { streamerName } = useParams<{ streamerName: string }>(); const [streamData, setStreamData] = useState(); + const [viewerCount, setViewerCount] = useState(1000000); const [isChatOpen, setIsChatOpen] = useState(true); // const [showCheckout, setShowCheckout] = useState(false); // const showReturn = window.location.search.includes("session_id"); @@ -62,7 +62,6 @@ const VideoPage: React.FC = ({ streamId }) => { streamerId: data.user_id, streamTitle: data.title, startTime: data.start_time, - viewerCount: data.num_viewers, categoryName: data.category_name, }; setStreamData(transformedData); @@ -100,7 +99,7 @@ const VideoPage: React.FC = ({ streamId }) => { {isChatOpen ? "Hide Chat" : "Show Chat"} - + setViewerCount(count)} />
= ({ streamId }) => {
Viewer Count: - {streamData ? streamData.viewerCount : "0"} + {viewerCount}
Started At: