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

frontend/src/components/Auth/LoginForm.tsx

@@ -148,7 +148,7 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
                   errors.password ? "border-red-500" : ""
                 }`}
               ></Input>
-              <div className="flex flex-row">
+              <div className="flex">
                 <label className="flex w-full items-center justify-start cursor-pointer w-10px">
                   <input
                     type="checkbox"

frontend/src/components/Layout/ListItem.tsx

@@ -28,7 +28,7 @@ const ListItem: React.FC<ListItemProps> = ({
         className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-pink-700 hover:scale-105 transition-all`}
         onClick={onItemClick}
       >
-        <div className="relative w-full pt-[56.25%] overflow-hidden rounded-t-lg">
+        <div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
           {thumbnail ? (
             <img
               src={thumbnail}

frontend/src/components/Layout/ListRow.tsx

@@ -73,7 +73,7 @@ const ListRow: React.FC<ListRowProps> = ({
           ref={slider}
           className={`flex ${
             wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
-          } items-center justify-between scroll-smooth scrollbar-hide gap-5 py-[10px] px=[30px] mx-[30px]`}
+          } max-w-[95%] items-center justify-between scroll-smooth scrollbar-hide gap-5 mx-auto`}
         >
 
           {items.map((item) => (
@@ -93,7 +93,7 @@ const ListRow: React.FC<ListRowProps> = ({
                   ? onClick?.(item.streamer)
                   : onClick?.(item.title)
               }
-              extraClasses={`${itemExtraClasses} min-w-[25vw]`}
+              extraClasses={`${itemExtraClasses} min-w-[20vw]`}
             />
           ))}
         </div>

frontend/src/components/Stream/VideoPlayer.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useRef } from "react";
+import { useParams } from "react-router-dom";
+import videojs from "video.js";
+import type Player from "video.js/dist/types/player";
+import "video.js/dist/video-js.css";
+interface VideoPlayerProps {
+  streamer?: string;
+  extraClasses?: string;
+  onStreamDetected?: (isStreamAvailable: boolean) => void;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  streamer,
+  extraClasses,
+  onStreamDetected,
+}) => {
+  const { streamerName: urlStreamerName } = useParams<{
+    streamerName: string;
+  }>();
+  const videoRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<Player | null>(null);
+
+  // Use URL param if available, otherwise fall back to prop
+  const streamerName = urlStreamerName || streamer;
+
+  useEffect(() => {
+    if (!videoRef.current || !streamerName) {
+      console.log("No video ref or streamer name");
+      return;
+    }
+
+    const setupPlayer = async () => {
+      const streamKey = await fetchStreamKey();
+      const streamUrl = `/stream/${streamKey}/index.m3u8`;
+      console.log("Player created with src:", streamUrl);
+
+      if (!playerRef.current) {
+        const videoElement = document.createElement("video");
+        videoElement.classList.add(
+          "video-js",
+          "vjs-big-play-centered",
+          "w-full",
+          "h-full"
+        );
+        videoElement.setAttribute("playsinline", "true");
+        if (videoRef.current) {
+          videoRef.current.appendChild(videoElement);
+        }
+
+        playerRef.current = videojs(videoElement, {
+          controls: false,
+          autoplay: true,
+          muted: false,
+          fluid: true,
+          responsive: true,
+          aspectRatio: "16:9",
+          liveui: false,
+          sources: [
+            {
+              src: streamUrl,
+              type: "application/x-mpegURL",
+            },
+          ],
+        });
+
+        playerRef.current.on("loadeddata", () => {
+          if (onStreamDetected) onStreamDetected(true);
+        });
+
+        playerRef.current.on("error", () => {
+          console.error(`Stream failed to load: ${streamUrl}`);
+          if (onStreamDetected) onStreamDetected(false);
+          setTimeout(() => {
+            console.log("Retrying stream...");
+            playerRef.current?.src({
+              src: streamUrl,
+              type: "application/x-mpegURL",
+            });
+            playerRef.current?.play();
+          }, 5000);
+        });
+      } else {
+        playerRef.current.src({
+          src: streamUrl,
+          type: "application/x-mpegURL",
+        });
+        playerRef.current.play();
+      }
+    };
+
+    const fetchStreamKey = async () => {
+      const response = await fetch(`/api/user/${streamerName}/stream_key`);
+      const keyData = await response.json();
+      return keyData.stream_key;
+    };
+
+    setupPlayer();
+
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [streamerName]);
+
+  return (
+    <div
+      id="video-player"
+      className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}
+    >
+      <div ref={videoRef} className="w-full max-w-[160vh] self-center" />
+    </div>
+  );
+};
+
+export default VideoPlayer;

frontend/src/components/Video/VideoPlayer.tsx

@@ -1,96 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useParams } from "react-router-dom";
-import videojs from "video.js";
-import "video.js/dist/video-js.css";
-interface VideoPlayerProps {
-  streamer?: string;
-  extraClasses?: string;
-  onStreamDetected?: (isStreamAvailable: boolean) => void;
-}
-
-const VideoPlayer: React.FC<VideoPlayerProps> = ({
-  streamer,
-  extraClasses,
-  onStreamDetected,
-}) => {
-  const { streamerName: urlStreamerName } = useParams<{
-    streamerName: string;
-  }>();
-  const videoRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<videojs.Player | null>(null);
-
-  // Use URL param if available, otherwise fall back to prop
-  const streamerName = urlStreamerName || streamer;
-
-  useEffect(() => {
-    if (!videoRef.current || !streamerName) return;
-
-    const streamUrl = `/stream/${streamerName}/index.m3u8`;
-
-    if (!playerRef.current) {
-      const videoElement = document.createElement("video");
-      videoElement.classList.add(
-        "video-js",
-        "vjs-big-play-centered",
-        "w-full",
-        "h-full"
-      );
-      videoElement.setAttribute("playsinline", "true");
-      videoRef.current.appendChild(videoElement);
-
-      playerRef.current = videojs(videoElement, {
-        controls: false,
-        autoplay: true,
-        muted: false,
-        fluid: true,
-        responsive: true,
-        aspectRatio: "16:9",
-        liveui: false,
-        sources: [
-          {
-            src: streamUrl,
-            type: "application/x-mpegURL",
-          },
-        ],
-      });
-
-      playerRef.current.on('loadeddata', () => {
-        if (onStreamDetected) onStreamDetected(true);
-      });
-
-      playerRef.current.on("error", () => {
-        console.error(`Stream failed to load: ${streamUrl}`);
-        if (onStreamDetected) onStreamDetected(false);
-        setTimeout(() => {
-          console.log("Retrying stream...");
-          playerRef.current?.src({
-            src: streamUrl,
-            type: "application/x-mpegURL",
-          });
-          playerRef.current?.play();
-        }, 5000);
-      });
-    } else {
-      playerRef.current.src({ src: streamUrl, type: "application/x-mpegURL" });
-      playerRef.current.play();
-    }
-
-    return () => {
-      if (playerRef.current) {
-        playerRef.current.dispose();
-        playerRef.current = null;
-      }
-    };
-  }, [streamerName]);
-
-  return (
-    <div
-      id="video-player"
-      className={`${extraClasses} w-full h-full mx-auto flex justify-center items-center bg-gray-900 rounded-lg`}
-    >
-      <div ref={videoRef} className="w-full max-w-[160vh] self-center" />
-    </div>
-  );
-};
-
-export default VideoPlayer;

frontend/src/pages/HomePage.tsx

@@ -44,10 +44,9 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         wrap={false}
         onClick={handleStreamClick}
         extraClasses="bg-[var(--liveNow)]"
-
       >
         {/* <Button extraClasses="absolute right-10" onClick={() => navigate("/")}>
-          Show More . . .
+          Show More
         </Button> */}
       </ListRow>
 
@@ -73,7 +72,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
           extraClasses="absolute right-10"
           onClick={() => navigate("/categories")}
         >
-          Show More . . .
+          Show More
         </Button>
       </ListRow>
     </DynamicPageContent>

frontend/src/pages/StreamDashboardPage.tsx

@@ -6,7 +6,7 @@ import ListItem from "../components/Layout/ListItem";
 import { X as XIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
 import { debounce } from "lodash";
-import VideoPlayer from "../components/Video/VideoPlayer";
+import VideoPlayer from "../components/Stream/VideoPlayer";
 
 interface StreamData {
   title: string;
@@ -66,71 +66,70 @@ const StreamDashboardPage: React.FC = () => {
   }, [categories, thumbnailPreview.isCustom]);
 
   useEffect(() => {
-    const checkStreamStatus = async () => {
-      try {
-        const response = await fetch(`/api/user/${username}/status`);
-        const data = await response.json();
-        setIsStreaming(data.is_live);
-
-        if (data.is_live) {
-          const streamResponse = await fetch(
-            `/api/streams/${data.user_id}/data`,
-            { credentials: "include" }
-          );
-          const streamData = await streamResponse.json();
-          setStreamData({
-            title: streamData.title,
-            category_name: streamData.category_name,
-            viewer_count: streamData.num_viewers,
-            start_time: streamData.start_time,
-            stream_key: streamData.stream_key,
-          });
-
-          console.log("Stream data:", streamData);
-
-          const time = Math.floor(
-            (Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes
-          );
-
-          if (time < 60) setTimeStarted(`${time}m ago`);
-          else if (time < 1440)
-            setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`);
-          else
-            setTimeStarted(
-              `${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${
-                time % 60
-              }m ago`
-            );
-        } else {
-          const response = await fetch(`/api/user/${username}/stream_key`);
-          const keyData = await response.json();
-          setStreamData((prev) => ({
-            ...prev,
-            stream_key: keyData.stream_key,
-          }));
-
-          console.log("Stream key:", keyData.stream_key);
-        }
-      } catch (error) {
-        console.error("Error checking stream status:", error);
-      }
-    };
-
-    const fetchCategories = async () => {
-      try {
-        const response = await fetch("/api/categories/popular/100");
-        const data = await response.json();
-        setCategories(data);
-        setFilteredCategories(data);
-      } catch (error) {
-        console.error("Error fetching categories:", error);
-      }
-    };
-
     checkStreamStatus();
     fetchCategories();
   }, [username]);
 
+  const checkStreamStatus = async () => {
+    try {
+      const response = await fetch(`/api/user/${username}/status`);
+      const data = await response.json();
+      setIsStreaming(data.is_live);
+
+      if (data.is_live) {
+        const streamResponse = await fetch(
+          `/api/streams/${data.user_id}/data`,
+          { credentials: "include" }
+        );
+        const streamData = await streamResponse.json();
+        setStreamData({
+          title: streamData.title,
+          category_name: streamData.category_name,
+          viewer_count: streamData.num_viewers,
+          start_time: streamData.start_time,
+          stream_key: streamData.stream_key,
+        });
+
+        console.log("Stream data:", streamData);
+
+        const time = Math.floor(
+          (Date.now() - new Date(streamData.start_time).getTime()) / 60000 // Convert to minutes
+        );
+
+        if (time < 60) setTimeStarted(`${time}m ago`);
+        else if (time < 1440)
+          setTimeStarted(`${Math.floor(time / 60)}h ${time % 60}m ago`);
+        else
+          setTimeStarted(
+            `${Math.floor(time / 1440)}d ${Math.floor((time % 1440) / 60)}h ${
+              time % 60
+            }m ago`
+          );
+      } else {
+        // Just need the stream key if not streaming
+        const response = await fetch(`/api/user/${username}/stream_key`);
+        const keyData = await response.json();
+        setStreamData((prev) => ({
+          ...prev,
+          stream_key: keyData.stream_key,
+        }));
+      }
+    } catch (error) {
+      console.error("Error checking stream status:", error);
+    }
+  };
+
+  const fetchCategories = async () => {
+    try {
+      const response = await fetch("/api/categories/popular/100");
+      const data = await response.json();
+      setCategories(data);
+      setFilteredCategories(data);
+    } catch (error) {
+      console.error("Error fetching categories:", error);
+    }
+  };
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setStreamData((prev) => ({ ...prev, [name]: value }));
@@ -201,11 +200,11 @@ const StreamDashboardPage: React.FC = () => {
     );
   };
 
-  const handleStartStream = async () => {
+  const handlePublishStream = async () => {
     console.log("Starting stream with data:", streamData);
 
     const formData = new FormData();
-    formData.append("key", streamData.stream_key);
+    formData.append("data", JSON.stringify(streamData));
 
     try {
       const response = await fetch("/api/publish_stream", {
@@ -228,6 +227,30 @@ const StreamDashboardPage: React.FC = () => {
 
   const handleUpdateStream = async () => {
     console.log("Updating stream with data:", streamData);
+
+    const formData = new FormData();
+    formData.append("key", streamData.stream_key);
+    formData.append("title", streamData.title);
+    formData.append("category_name", streamData.category_name);
+    if (thumbnail) {
+      formData.append("thumbnail", thumbnail);
+    }
+    
+    try {
+      const response = await fetch("/api/update_stream", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (response.ok) {
+        console.log("Stream updated successfully");
+        window.location.reload();
+      } else {
+        console.error("Failed to update stream");
+      }
+    } catch (error) {
+      console.error("Error updating stream:", error);
+    }
   };
 
   const handleEndStream = async () => {
@@ -392,7 +415,7 @@ const StreamDashboardPage: React.FC = () => {
                 <div className="flex gap-8">
                   <Button
                     onClick={
-                      isStreaming ? handleUpdateStream : handleStartStream
+                      isStreaming ? handleUpdateStream : handlePublishStream
                     }
                     disabled={!isFormValid()}
                     extraClasses="text-2xl px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"

frontend/src/pages/VideoPage.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { ToggleButton } from "../components/Input/Button";
-import ChatPanel from "../components/Video/ChatPanel";
+import ChatPanel from "../components/Stream/ChatPanel";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAuthModal } from "../hooks/useAuthModal";
 import { useAuth } from "../context/AuthContext";
 import { useFollow } from "../hooks/useFollow";
-import VideoPlayer from "../components/Video/VideoPlayer";
+import VideoPlayer from "../components/Stream/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
 import AuthModal from "../components/Auth/AuthModal";
 import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";