303 lines
12 KiB
TypeScript
303 lines
12 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from "react";
|
|
import AuthModal from "../components/Auth/AuthModal";
|
|
import { useAuthModal } from "../hooks/useAuthModal";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import { useParams } from "react-router-dom";
|
|
import { useFollow } from "../hooks/useFollow";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Button from "../components/Input/Button";
|
|
import DynamicPageContent from "../components/Layout/DynamicPageContent";
|
|
import LoadingScreen from "../components/Layout/LoadingScreen";
|
|
import { StreamListItem } from "../components/Layout/ListItem";
|
|
import { EditIcon } from "lucide-react";
|
|
import ListRow from "../components/Layout/ListRow";
|
|
import { useStreams, useVods } from "../hooks/useContent";
|
|
|
|
interface UserProfileData {
|
|
id: number;
|
|
username: string;
|
|
bio: string;
|
|
followerCount: number;
|
|
isPartnered: boolean;
|
|
isLive: boolean;
|
|
}
|
|
|
|
const UserPage: React.FC = () => {
|
|
const [userPageVariant, setUserPageVariant] = useState<"personal" | "user" | "admin">("user");
|
|
const [profileData, setProfileData] = useState<UserProfileData>();
|
|
const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
|
|
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
|
const { username: loggedInUsername, profilePicture, setProfilePicture } = useAuth();
|
|
const initialProfilePicture = useRef(profilePicture);
|
|
const { username } = useParams();
|
|
const { vods } = useVods(`/api/vods/${username}`);
|
|
const navigate = useNavigate();
|
|
const { streams } = useStreams(`/api/streams/${username}/data`);
|
|
const currentStream = streams[0];
|
|
|
|
const fetchProfileData = useCallback(async () => {
|
|
try {
|
|
// Profile data
|
|
const profileResponse = await fetch(`/api/user/${username}`);
|
|
const profileData = await profileResponse.json();
|
|
setProfileData({
|
|
id: profileData.user_id,
|
|
username: profileData.username,
|
|
bio: profileData.bio || "This user hasn't written a bio yet.",
|
|
followerCount: profileData.num_followers || 0,
|
|
isPartnered: profileData.isPartnered || false,
|
|
isLive: profileData.is_live,
|
|
});
|
|
} catch (err) {
|
|
console.error("Error fetching profile data:", err);
|
|
window.location.href = "/404";
|
|
}
|
|
}, [username]);
|
|
|
|
// Saves uploaded image as profile picture for the user
|
|
const saveUploadedImage = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = event.target.files;
|
|
if (!files) return;
|
|
const img = files[0];
|
|
if (img) {
|
|
const formData = new FormData();
|
|
formData.append("image", img);
|
|
|
|
try {
|
|
const response = await fetch("/api/user/profile_picture/upload", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log("Success");
|
|
console.log(URL.createObjectURL(img))
|
|
setProfilePicture(URL.createObjectURL(img));
|
|
}
|
|
} catch (error) {
|
|
console.log("Failure");
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleNavigation = (path: string) => {
|
|
if (profilePicture === initialProfilePicture.current) {
|
|
// Variable hasn't changed - use React Router navigation
|
|
navigate(path);
|
|
} else {
|
|
// Variable has changed - use full page reload
|
|
window.location.href = path;
|
|
}
|
|
};
|
|
|
|
// Store initial profile picture to know if it changes later
|
|
useEffect(() => {
|
|
initialProfilePicture.current = profilePicture;
|
|
}, []);
|
|
|
|
// Check if the current user is the currently logged-in user
|
|
useEffect(() => {
|
|
if (username === loggedInUsername) setUserPageVariant("personal");
|
|
// else if (data.isAdmin) setUserPageVariant("admin");
|
|
else setUserPageVariant("user");
|
|
|
|
if (loggedInUsername && username) checkFollowStatus(username);
|
|
}, [username, loggedInUsername, checkFollowStatus]);
|
|
|
|
// Fetch user profile data
|
|
useEffect(() => {
|
|
if (!username) return;
|
|
fetchProfileData();
|
|
}, [fetchProfileData]);
|
|
|
|
if (!profileData) return <LoadingScreen />;
|
|
|
|
return (
|
|
<DynamicPageContent className="min-h-screen text-white flex flex-col">
|
|
<div className="flex justify-evenly self-center items-center h-full px-4 pt-14 pb-8 mx-auto max-w-[80vw] w-full">
|
|
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
|
|
{/* Profile Section - TOP */}
|
|
|
|
<div
|
|
id="profile"
|
|
className="col-span-4 row-span-1 h-full bg-[var(--user-bg)]
|
|
rounded-[30px] p-3 shadow-lg
|
|
relative flex flex-col items-center"
|
|
>
|
|
{/* Border Overlay (Always on Top) */}
|
|
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
|
|
|
|
{/* Background Box */}
|
|
<div
|
|
className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
|
|
bg-[var(--user-box)] z-10 flex-shrink justify-center"
|
|
style={{ boxShadow: "var(--user-box-shadow)" }}
|
|
>
|
|
{/* <div className="absolute top-4 w-[99.8%] h-[1vh] min-h-[1em] max-h-[2em] bg-[var(--user-box-strip)]"></div> */}
|
|
</div>
|
|
{/* Profile Picture */}
|
|
<div
|
|
className={`relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
|
|
rounded-full flex-shrink-0 border-4 ${
|
|
profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
|
|
} inset-0 z-20`}
|
|
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
|
|
>
|
|
<label
|
|
className={`w-full h-full ${userPageVariant === "personal" ? "group cursor-pointer" : ""} overflow-visible rounded-full`}
|
|
>
|
|
{/* If user is live then displays a live div */}
|
|
{profileData.isLive ? (
|
|
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-[#ff0000] text-white text-sm font-bold py-1 sm:px-5 px-4 z-30 flex items-center justify-center rounded-tr-xl rounded-bl-xl rounded-tl-xl rounded-br-xl">
|
|
LIVE
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
<img
|
|
src={userPageVariant === "personal" && profilePicture ? profilePicture : `/user/${profileData.username}/profile_picture`}
|
|
onError={(e) => {
|
|
e.currentTarget.src = "/images/pfps/default.png";
|
|
e.currentTarget.onerror = null;
|
|
}}
|
|
alt={`${profileData.username}'s profile`}
|
|
className="sm:w-full h-full object-cover rounded-full group-hover:brightness-50 relative z-0 transition-all"
|
|
/>
|
|
|
|
{/* If current user is the profile user then allow profile picture swap */}
|
|
{userPageVariant === "personal" && (
|
|
<div className="absolute top-0 bottom-0 left-0 right-0 m-auto flex items-center justify-center opacity-0 z-50 group-hover:opacity-100 transition-opacity duration-200">
|
|
<EditIcon size={75} className="text-white bg-black/50 p-1 rounded-3xl" />
|
|
<input type="file" className="hidden" onChange={saveUploadedImage} accept="image/*" />
|
|
</div>
|
|
)}
|
|
</label>
|
|
</div>
|
|
|
|
{/* Username - Now Directly Below PFP */}
|
|
<h1 className="text-[var(--user-name)] text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
|
|
{profileData.username}
|
|
</h1>
|
|
|
|
{/* Follower Count */}
|
|
<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>
|
|
|
|
{/* (Un)Follow Button */}
|
|
{userPageVariant != "personal" ? (
|
|
!isFollowing ? (
|
|
<Button
|
|
extraClasses="w-full bg-purple-700 z-50 hover:bg-[#28005e]"
|
|
onClick={() => followUser(profileData.id, setShowAuthModal)}
|
|
>
|
|
Follow
|
|
</Button>
|
|
) : (
|
|
<Button extraClasses="w-full bg-[#a80000] z-50" onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}>
|
|
Unfollow
|
|
</Button>
|
|
)
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
|
|
{/* Bio */}
|
|
<div className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center">
|
|
{/* User Type (e.g., "USER") */}
|
|
<small className="text-green-400">{userPageVariant.toUpperCase()}</small>
|
|
|
|
<div className="mt-6 text-center">
|
|
<h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
|
|
<p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Section */}
|
|
<div
|
|
id="content"
|
|
className="col-span-2 bg-[var(--user-contentBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
|
>
|
|
{/* Stream */}
|
|
{currentStream && (
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">Currently Live!</h2>
|
|
<StreamListItem
|
|
id={profileData.id}
|
|
title={currentStream.title || ""}
|
|
streamCategory=""
|
|
username=""
|
|
viewers={currentStream.viewers || 0}
|
|
thumbnail={currentStream.thumbnail}
|
|
onItemClick={() => {
|
|
handleNavigation(`/${profileData.username}`);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
{/* VODs */}
|
|
{vods.length > 0 && (
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4"></h2>
|
|
<ListRow
|
|
type="vod"
|
|
title={`Past Broadcasts (${vods.length})`}
|
|
items={vods}
|
|
onItemClick={(vod) => {
|
|
console.log("VOD Clicked:", vod);
|
|
}}
|
|
extraClasses="w-fit max-w-[40vw] py-0 mt-0"
|
|
amountForScroll={2}
|
|
itemExtraClasses="w-[15vw]"
|
|
/>
|
|
</div>
|
|
)}
|
|
{/* No Content */}
|
|
{vods.length === 0 && currentStream && <h2 className="text-2xl font-bold mb-4">No Content Made Yet</h2>}
|
|
</div>
|
|
|
|
<div
|
|
id="mini"
|
|
className="bg-[var(--user-sideBox)] col-span-1 rounded-lg text-center items-center justify-center
|
|
flex flex-col flex-grow gap-4 p-[2rem]"
|
|
>
|
|
<div
|
|
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
|
flex items-center justify-center w-full p-4 content-start"
|
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
|
>
|
|
<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following`)}>
|
|
Following
|
|
</button>
|
|
</div>
|
|
<div
|
|
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
|
flex items-center justify-center w-full p-4 content-start"
|
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
|
>
|
|
<ul className="list-none">
|
|
<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">Streamers</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
|
flex items-center justify-center w-full p-4 content-start"
|
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
|
>
|
|
<button onClick={() => handleNavigation(`/user/${username}/followedCategories`)}>Categories</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
|
</DynamicPageContent>
|
|
);
|
|
};
|
|
|
|
export default UserPage;
|