Merge branch 'main' of https://github.com/john-david3/cs3305-team11

frontend/src/components/Video/ChatPanel.tsx

@@ -13,9 +13,10 @@ interface ChatMessage {
 
 interface ChatPanelProps {
   streamId: number;
+  onViewerCountChange?: (count: number) => void;
 }
 
-const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
+const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange }) => {
   const { socket, isConnected } = useSocket();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [inputMessage, setInputMessage] = useState("");
@@ -47,7 +48,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ 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<ChatPanelProps> = ({ 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

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);
       });
 

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<VideoPageProps> = ({ streamId }) => {
   const { isLoggedIn } = useAuth();
   const { streamerName } = useParams<{ streamerName: string }>();
   const [streamData, setStreamData] = useState<StreamDataProps>();
+  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<VideoPageProps> = ({ 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<VideoPageProps> = ({ streamId }) => {
             {isChatOpen ? "Hide Chat" : "Show Chat"}
           </ToggleButton>
 
-          <ChatPanel streamId={streamId} />
+          <ChatPanel streamId={streamId} onViewerCountChange={(count: number) => setViewerCount(count)} />
 
           <div
             id="stream-info"
@@ -127,7 +126,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
               </div>
               <div className="flex items-center gap-2">
                 <span className="font-semibold">Viewer Count:</span>
-                <span>{streamData ? streamData.viewerCount : "0"}</span>
+                <span>{viewerCount}</span>
               </div>
               <div className="flex items-center gap-2">
                 <span className="font-semibold">Started At:</span>