FEAT: Added more info & functionality to UserPage & Added ability to follow streamers on both UserPage and VideoPage;

Added shortcut to toggle chat;
2025-02-07 02:11:22 +00:00
parent 1499e042cb
commit 16dc8f1ea2
16 changed files with 438 additions and 240 deletions
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -1,24 +1,45 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
-import { useParams } from "react-router-dom";
+import AuthModal from "../components/Auth/AuthModal";
+import { useAuthModal } from "../hooks/useAuthModal";
 import { useAuth } from "../context/AuthContext";
+import { useParams } from "react-router-dom";
+import { ListItem } from "../components/Layout/ListRow";
+import { useFollow } from "../hooks/useFollow";
+import { useNavigate } from "react-router-dom";
+import Button from "../components/Layout/Button";

 interface UserProfileData {
+  id: number;
  username: string;
  bio: string;
  followerCount: number;
  isPartnered: boolean;
+  isLive: boolean;
+  currentStreamTitle?: string;
+  currentStreamCategory?: string;
+  currentStreamViewers?: number;
+  currentStreamStartTime?: string;
+  currentStreamThumbnail?: string;
 }

 const UserPage: React.FC = () => {
-  const [profileData, setProfileData] = useState<UserProfileData | null>(null);
+  const [userPageVariant, setUserPageVariant] = useState<
+    "personal" | "streamer" | "user" | "admin"
+  >("user");
+  const [profileData, setProfileData] = useState<UserProfileData>();
+  const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
+  const { showAuthModal, setShowAuthModal } = useAuthModal();
  const { username: loggedInUsername } = useAuth();
  const { username } = useParams();
-  let userPageVariant = "user";
+  const navigate = useNavigate();

-  let setUserPageVariant = (currentStream: string) => {
-    if (username === loggedInUsername) userPageVariant = "personal";
-    else if (currentStream) userPageVariant = "streamer";
+  const bgColors = {
+    personal: "",
+    streamer: "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]", // offline streamer
+    user: "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff00f1]",
+    admin:
+      "bg-gradient-to-r from-[rgb(255,0,0)] via-transparent to-[rgb(0,0,255)]",
  };

  useEffect(() => {
@@ -27,15 +48,52 @@ const UserPage: React.FC = () => {
      .then((res) => res.json())
      .then((data) => {
        setProfileData({
+          id: data.user_id,
          username: data.username,
          bio: data.bio || "This user hasn't written a bio yet.",
          followerCount: data.num_followers || 0,
          isPartnered: data.isPartnered || false,
+          isLive: data.is_live,
+          currentStreamTitle: "",
+          currentStreamCategory: "",
+          currentStreamViewers: 0,
+          currentStreamThumbnail: "",
        });

-        setUserPageVariant(data.current_stream_title);
+        if (data.is_live) {
+          // Fetch stream data for this streamer
+          fetch(`/api/streams/${data.user_id}/data`)
+            .then((res) => res.json())
+            .then((streamData) => {
+              setProfileData((prevData) => {
+                if (!prevData) return prevData;
+                return {
+                  ...prevData,
+                  currentStreamTitle: streamData.title,
+                  currentStreamCategory: streamData.category_id,
+                  currentStreamViewers: streamData.num_viewers,
+                  currentStreamStartTime: streamData.start_time,
+                  currentStreamThumbnail:
+                    streamData.thumbnail ||
+                    `/images/thumbnails/categories/${streamData.category_name
+                      .toLowerCase()
+                      .replace(/ /g, "_")}.webp`,
+                };
+              });
+              let variant: "user" | "streamer" | "personal" | "admin";
+              if (username === loggedInUsername) variant = "personal";
+              else if (streamData.title) variant = "streamer";
+              // else if (data.isAdmin) variant = "admin";
+              else variant = "user";
+              setUserPageVariant(variant);
+            })
+            .catch((err) => console.error("Error fetching stream data:", err));
+        }
      })
      .catch((err) => console.error("Error fetching profile data:", err));
+
+    // Check if the *logged-in* user is following this user
+    if (loggedInUsername && username) checkFollowStatus(username);
  }, [username]);

  if (!profileData) {
@@ -45,12 +103,17 @@ const UserPage: React.FC = () => {
      </div>
    );
  }
-
  return (
-    <div className="min-h-screen bg-gray-900 text-white">
+    <div
+      className={`min-h-screen ${
+        profileData.isLive
+          ? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]"
+          : bgColors[userPageVariant]
+      } text-white flex flex-col`}
+    >
      <Navbar />
-      <div className="mx-auto px-4 py-8">
-        <div className="grid grid-cols-3 gap-8">
+      <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8">
+        <div className="grid grid-cols-3 w-full gap-8">
          {/* Profile Section - Left Third */}
          <div
            id="profile"
@@ -82,26 +145,46 @@ const UserPage: React.FC = () => {
              <h1 className="text-3xl font-bold mb-2">
                {profileData.username}
              </h1>
-              <small className="text-green-400" >{userPageVariant.toUpperCase()}</small>
+              <small className="text-green-400">
+                {userPageVariant.toUpperCase()}
+              </small>

-              <div className="flex items-center space-x-2 mb-6">
-                <span className="text-gray-400">
-                  {profileData.followerCount.toLocaleString()} followers
-                </span>
-                {profileData.isPartnered && (
-                  <span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">
-                    Partner
-                  </span>
-                )}
-              </div>
+              {/* Follower Count */}
+              {userPageVariant === "streamer" && (
+                <>
+                  <div className="flex items-center space-x-2 mb-6">
+                    <span className="text-gray-400">
+                      {profileData.followerCount.toLocaleString()} followers
+                    </span>
+                    {profileData.isPartnered && (
+                      <span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">
+                        Partner
+                      </span>
+                    )}
+                  </div>

-              <button className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg mb-4 transition-colors">
-                Follow
-              </button>
+                  {/* (Un)Follow Button */}
+                  {!isFollowing ? (
+                    <Button
+                      extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
+                      onClick={() => followUser(profileData.id, setShowAuthModal)}
+                    >
+                      Follow
+                    </Button>
+                  ) : (
+                    <Button
+                      extraClasses="w-full bg-[#a80000]"
+                      onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}
+                    >
+                      Unfollow
+                    </Button>
+                  )}
+                </>
+              )}
            </div>

            {/* Bio Section */}
-            <div className="mt-6">
+            <div className="mt-6 text-center">
              <h2 className="text-xl font-semibold mb-3">
                About {profileData.username}
              </h2>
@@ -109,34 +192,47 @@ const UserPage: React.FC = () => {
                {profileData.bio}
              </p>
            </div>
-
-            {/* Additional Stats */}
-            <div className="mt-6 pt-6 border-t border-gray-700">
-              <div className="grid grid-cols-2 gap-4 text-center">
-                <div>
-                  <div className="text-2xl font-bold text-purple-400">0</div>
-                  <div className="text-sm text-gray-400">Total Views</div>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-purple-400">0</div>
-                  <div className="text-sm text-gray-400">Following</div>
-                </div>
-              </div>
-            </div>
          </div>

          {/* Content Section */}
          <div
            id="content"
-            className="col-span-2 bg-gray-800 rounded-lg p-6 flex flex-col"
+            className="col-span-2 bg-gray-800 rounded-lg p-6 grid grid-rows-[auto_1fr] items-center justify-center"
          >
-            <h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
-            <div className="text-gray-400 flex h-full rounded-none">
-              No past broadcasts found
-            </div>
+            {userPageVariant === "streamer" && (
+              <>
+                {/* ↓↓ Current Stream ↓↓ */}
+                {profileData.isLive && (
+                  <div className="mb-8">
+                    <h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">
+                      Currently Live!
+                    </h2>
+                    <ListItem
+                      id={profileData.id}
+                      type="stream"
+                      title={profileData.currentStreamTitle || ""}
+                      streamer=""
+                      viewers={profileData.currentStreamViewers || 0}
+                      thumbnail={profileData.currentStreamThumbnail}
+                      onItemClick={() => {
+                        navigate(`/${profileData.username}`);
+                      }}
+                    />
+                  </div>
+                )}
+                {/* ↓↓ VODS ↓↓ */}
+                <div>
+                  <h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
+                  <div className="text-gray-400 rounded-none">
+                    No past broadcasts found
+                  </div>
+                </div>
+              </>
+            )}
          </div>
        </div>
      </div>
+      {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
    </div>
  );
 };
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -3,9 +3,12 @@ import Navbar from "../components/Layout/Navbar";
 import Button, { ToggleButton } from "../components/Layout/Button";
 import ChatPanel from "../components/Video/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 { SocketProvider } from "../context/SocketContext";
+import AuthModal from "../components/Auth/AuthModal";

 interface VideoPageProps {
  streamerId: number;
@@ -24,6 +27,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
  const [streamData, setStreamData] = useState<StreamDataProps>();
  const [viewerCount, setViewerCount] = useState(0);
  const [isChatOpen, setIsChatOpen] = useState(true);
+  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+    useFollow();
+  const { showAuthModal, setShowAuthModal } = useAuthModal();
  // const [showCheckout, setShowCheckout] = useState(false);
  // const showReturn = window.location.search.includes("session_id");
  const navigate = useNavigate();
@@ -40,6 +46,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
  //     document.body.style.overflow = "unset";
  //   };
  // }, [showCheckout]);
+
  useEffect(() => {
    // Fetch stream data for this streamer
    fetch(`/api/streams/${streamerId}/data`).then((res) => {
@@ -57,6 +64,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
            categoryName: data.category_name,
          };
          setStreamData(transformedData);
+
+          // Check if the logged-in user is following this streamer
+          if (isLoggedIn) checkFollowStatus(data.username);
        })
        .catch((error) => {
          console.error("Error fetching stream data:", error);
@@ -64,6 +74,21 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
    });
  }, [streamerId]);

+  // Keyboard shortcut to toggle chat
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "c") {
+        setIsChatOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, []);
+
  const toggleChat = () => {
    setIsChatOpen((prev) => !prev);
  };
@@ -86,9 +111,11 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
          <ToggleButton
            onClick={toggleChat}
            toggled={isChatOpen}
-            extraClasses="absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
+            extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
          >
            {isChatOpen ? "Hide Chat" : "Show Chat"}
+            
+            <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">Press C</small>
          </ToggleButton>

          <ChatPanel
@@ -98,53 +125,66 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {

          <div
            id="stream-info"
-            className="flex flex-col gap-2 p-4 text-white"
+            className="flex flex-row items-center justify-evenly gap-2 p-8 text-white text-xl"
            style={{ gridArea: "2 / 1 / 3 / 2" }}
          >
-            <h1 className="text-2xl font-bold">
+            <h1 className="text-3xl text-center font-bold">
              {streamData ? streamData.streamTitle : "Loading..."}
            </h1>
-            <div className="flex flex-col gap-2">
-              <div
-                id="streamer"
-                className="flex items-center gap-2 cursor-pointer"
+            <div>
+              <Button
+                extraClasses="flex flex-col items-center font-bold bg-[#ff0000] p-4 px-12 rounded-[3rem] cursor-pointer"
                onClick={() => navigate(`/user/${streamerName}`)}
              >
+                <h1>{streamData ? streamData.streamerName : "Loading..."}</h1>
                <img
                  src="/images/monkey.png"
                  alt="streamer"
-                  className="w-10 h-10 bg-indigo-500 rounded-full"
+                  className="w-30 h-10 bg-indigo-500 rounded-full"
                />
-                <span>
-                  {streamData ? streamData.streamerName : "Loading..."}
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="font-semibold">Viewer Count:</span>
-                <span>{viewerCount}</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="font-semibold">Started At:</span>
-                <span>
-                  {streamData
-                    ? new Date(streamData.startTime).toLocaleString()
-                    : "Loading..."}
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="font-semibold">Category ID:</span>
-                <span>
-                  {streamData ? streamData.categoryName : "Loading..."}
-                </span>
-              </div>
+              </Button>
+
+              {/* (Un)Follow Button */}
+              {!isFollowing ? (
+                <Button
+                  extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
+                  onClick={() => followUser(streamerId, setShowAuthModal)}
+                >
+                  Follow
+                </Button>
+              ) : (
+                <Button
+                  extraClasses="w-full bg-green-400/30 hover:content-['Unfollow'] hover:border-[#a80000]"
+                  onClick={() => unfollowUser(streamerId, setShowAuthModal)}
+                >
+                  Following
+                </Button>
+              )}
+            </div>
+            <div className="flex flex-col items-center font-bold">
+              <span className="font-thin">Viewers</span>
+              <span>{viewerCount}</span>
+            </div>
+            <div className="flex flex-col items-center font-bold">
+              <span className="font-thin">Started</span>
+              <span>
+                {streamData
+                  ? new Date(streamData.startTime).toLocaleString()
+                  : "Loading..."}
+              </span>
+            </div>
+            <div className="flex flex-col items-center font-bold">
+              <span className="font-thin">Category</span>
+              <span>{streamData ? streamData.categoryName : "Loading..."}</span>
            </div>
-            {isLoggedIn && (
-              <Button extraClasses="mx-auto mb-4">Payment Screen Test</Button>
-            )}
          </div>
+          {isLoggedIn && (
+            <Button extraClasses="mx-auto mb-4">Payment Screen Test</Button>
+          )}
        </div>
        {/* {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />} */}
        {/* {showReturn && <Return />} */}
+        {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
      </div>
    </SocketProvider>
  );