UPDATE/FEAT: Proper handling of profile pictures where a fallback to the default pfp is used;
REFACTOR: Remove unnecessary props from users on `ResultsPage`; REFACTOR: General formatting
This commit is contained in:
Chris-1010
@@ -84,7 +84,11 @@ const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, on
|
|||||||
onClick={onItemClick}
|
onClick={onItemClick}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/monkey.png"
|
src={`/user/${username}/profile_picture`}
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = "/images/pfps/default.png";
|
||||||
|
e.currentTarget.onerror = null;
|
||||||
|
}}
|
||||||
alt={`user ${username}`}
|
alt={`user ${username}`}
|
||||||
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
|
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -4,199 +4,164 @@ import { useNavigate } from "react-router-dom";
|
|||||||
import { useAuth } from "../../context/AuthContext";
|
import { useAuth } from "../../context/AuthContext";
|
||||||
import { useSidebar } from "../../context/SidebarContext";
|
import { useSidebar } from "../../context/SidebarContext";
|
||||||
import { ToggleButton } from "../Input/Button";
|
import { ToggleButton } from "../Input/Button";
|
||||||
|
import { getCategoryThumbnail } from "../../utils/thumbnailUtils";
|
||||||
|
|
||||||
interface Streamer {
|
interface Streamer {
|
||||||
user_id: number;
|
user_id: number;
|
||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Category {
|
interface Category {
|
||||||
category_id: number;
|
category_id: number;
|
||||||
category_name: string;
|
category_name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SideBarProps {
|
interface SideBarProps {
|
||||||
extraClasses?: string;
|
extraClasses?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
|
||||||
const { showSideBar, setShowSideBar } = useSidebar();
|
const { showSideBar, setShowSideBar } = useSidebar();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { username, isLoggedIn } = useAuth();
|
const { username, isLoggedIn } = useAuth();
|
||||||
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
|
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
|
||||||
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
|
const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
|
||||||
const [justToggled, setJustToggled] = useState(false);
|
const [justToggled, setJustToggled] = useState(false);
|
||||||
const sidebarId = useRef(Math.floor(Math.random() * 1000000));
|
const sidebarId = useRef(Math.floor(Math.random() * 1000000));
|
||||||
|
|
||||||
// Fetch followed streamers & categories
|
// Fetch followed streamers & categories
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isLoggedIn) return;
|
if (!isLoggedIn) return;
|
||||||
|
|
||||||
const fetchFollowData = async () => {
|
const fetchFollowData = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch("/api/user/following");
|
const response = await fetch("/api/user/following");
|
||||||
if (!response.ok) throw new Error("Failed to fetch followed content");
|
if (!response.ok) throw new Error("Failed to fetch followed content");
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
setFollowedStreamers(data.streams);
|
setFollowedStreamers(data.streams);
|
||||||
setFollowedCategories(data.categories);
|
setFollowedCategories(data.categories);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching followed content:", error);
|
console.error("Error fetching followed content:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fetchFollowData();
|
fetchFollowData();
|
||||||
}, [isLoggedIn]);
|
}, [isLoggedIn]);
|
||||||
|
|
||||||
const handleSideBar = () => {
|
const handleSideBar = () => {
|
||||||
setShowSideBar(!showSideBar);
|
setShowSideBar(!showSideBar);
|
||||||
setJustToggled(true);
|
setJustToggled(true);
|
||||||
setTimeout(() => setJustToggled(false), 200);
|
setTimeout(() => setJustToggled(false), 200);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Keyboard shortcut to toggle sidebar
|
// Keyboard shortcut to toggle sidebar
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyPress = (e: KeyboardEvent) => {
|
const handleKeyPress = (e: KeyboardEvent) => {
|
||||||
if (
|
if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar();
|
||||||
e.key === "s" &&
|
};
|
||||||
document.activeElement == document.body &&
|
|
||||||
isLoggedIn
|
|
||||||
)
|
|
||||||
handleSideBar();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("keydown", handleKeyPress);
|
document.addEventListener("keydown", handleKeyPress);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener("keydown", handleKeyPress);
|
document.removeEventListener("keydown", handleKeyPress);
|
||||||
};
|
};
|
||||||
}, [showSideBar, setShowSideBar, isLoggedIn]);
|
}, [showSideBar, setShowSideBar, isLoggedIn]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ToggleButton
|
<ToggleButton
|
||||||
onClick={() => handleSideBar()}
|
onClick={() => handleSideBar()}
|
||||||
extraClasses={`absolute group text-[1rem] top-[9vh] ${
|
extraClasses={`absolute group text-[1rem] top-[9vh] ${
|
||||||
showSideBar
|
showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
|
||||||
? "left-[16vw] duration-[0.5s]"
|
} ease-in-out cursor-pointer z-[50]`}
|
||||||
: "left-[20px] duration-[1s]"
|
toggled={showSideBar}
|
||||||
} ease-in-out cursor-pointer z-[50]`}
|
>
|
||||||
toggled={showSideBar}
|
<SidebarIcon className="h-[2vw] w-[2vw]" />
|
||||||
>
|
|
||||||
<SidebarIcon className="h-[2vw] w-[2vw]" />
|
|
||||||
|
|
||||||
{!showSideBar && !justToggled && (
|
{!showSideBar && !justToggled && (
|
||||||
<small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
|
<small className="absolute flex items-center top-0 ml-2 left-0 h-full my-auto w-fit text-nowrap font-bold my-auto group-hover:left-full opacity-0 group-hover:opacity-100 group-hover:bg-black/30 p-1 rounded-md text-white transition-all">
|
||||||
Press S
|
Press S
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</ToggleButton>
|
</ToggleButton>
|
||||||
<div
|
<div
|
||||||
id={`sidebar-${sidebarId.current}`}
|
id={`sidebar-${sidebarId.current}`}
|
||||||
className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
|
className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
|
||||||
transition-all duration-500 ease-in-out ${
|
transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"} z-50 ${extraClasses}`}
|
||||||
showSideBar ? "translate-x-0" : "-translate-x-full"
|
>
|
||||||
} ${extraClasses}`}
|
{/* Profile Info */}
|
||||||
>
|
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
|
||||||
{/* Profile Info */}
|
<img
|
||||||
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
|
src={`/user/${username}/profile_picture`}
|
||||||
<img
|
onError={(e) => {
|
||||||
src="/images/monkey.png"
|
e.currentTarget.src = "/images/pfps/default.png";
|
||||||
alt="profile picture"
|
e.currentTarget.onerror = null;
|
||||||
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
}}
|
||||||
onClick={() => navigate(`/user/${username}`)}
|
alt="profile picture"
|
||||||
/>
|
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
||||||
<div className="text-center flex flex-col items-center justify-center">
|
onClick={() => navigate(`/user/${username}`)}
|
||||||
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
|
/>
|
||||||
Logged in as
|
<div className="text-center flex flex-col items-center justify-center">
|
||||||
</h5>
|
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">Logged in as</h5>
|
||||||
<button
|
<button className="font-black text-[1.4rem] hover:underline" onClick={() => navigate(`/user/${username}`)}>
|
||||||
className="font-black text-[1.4rem] hover:underline"
|
<div className="text-[var(--sideBar-profile-text)]">{username}</div>
|
||||||
onClick={() => navigate(`/user/${username}`)}
|
</button>
|
||||||
>
|
</div>
|
||||||
<div className="text-[var(--sideBar-profile-text)]">
|
</div>
|
||||||
{username}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
|
||||||
id="following"
|
<div
|
||||||
className="flex flex-col flex-grow justify-evenly p-4 gap-4"
|
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
|
||||||
>
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||||
<div
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||||
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
|
>
|
||||||
onMouseEnter={(e) =>
|
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
|
||||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
</div>
|
||||||
}
|
<div id="streamers-followed" className="flex flex-col flex-grow items-center">
|
||||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Streamers</h2>
|
||||||
>
|
<div className="flex flex-col flex-grow justify-evenly w-full">
|
||||||
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
|
{followedStreamers.map((streamer) => (
|
||||||
Following
|
<button
|
||||||
</h1>
|
key={`${sidebarId.current}-streamer-${streamer.username}`}
|
||||||
</div>
|
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
|
||||||
<div
|
onClick={() => navigate(`/user/${streamer.username}`)}
|
||||||
id="streamers-followed"
|
>
|
||||||
className="flex flex-col flex-grow items-center"
|
{streamer.username}
|
||||||
>
|
</button>
|
||||||
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
|
))}
|
||||||
Streamers
|
</div>
|
||||||
</h2>
|
</div>
|
||||||
<div className="flex flex-col flex-grow justify-evenly w-full">
|
|
||||||
{followedStreamers.map((streamer) => (
|
|
||||||
<button
|
|
||||||
key={`${sidebarId.current}-streamer-${streamer.username}`}
|
|
||||||
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
|
|
||||||
onClick={() => navigate(`/user/${streamer.username}`)}
|
|
||||||
>
|
|
||||||
{streamer.username}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div id="categories-followed" className="flex flex-col flex-grow items-center">
|
||||||
id="categories-followed"
|
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2>
|
||||||
className="flex flex-col flex-grow items-center"
|
|
||||||
>
|
|
||||||
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
|
|
||||||
Categories
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{/* Followed Categories */}
|
{/* Followed Categories */}
|
||||||
<div
|
<div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
|
||||||
id="categories-followed"
|
{followedCategories.map((category) => {
|
||||||
className="grid grid-cols-1 gap-4 p-4 w-full"
|
return (
|
||||||
>
|
<div
|
||||||
{followedCategories.map((category) => {
|
key={`${sidebarId.current}-category-${category.category_id}`}
|
||||||
return (
|
className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
|
||||||
<div
|
|
||||||
key={`${sidebarId.current}-category-${category.category_id}`}
|
|
||||||
className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
|
|
||||||
rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
|
rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
|
||||||
onClick={() =>
|
onClick={() => (window.location.href = `/category/${category.category_name}`)}
|
||||||
(window.location.href = `/category/${category.category_name}`)
|
>
|
||||||
}
|
<img
|
||||||
>
|
src={getCategoryThumbnail(category.category_name)}
|
||||||
<img
|
alt={category.category_name}
|
||||||
src={`/images/category_thumbnails/${category.category_name
|
className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
|
||||||
.toLowerCase()
|
/>
|
||||||
.replace(/ /g, "_")}.webp`}
|
<div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
|
||||||
alt={category.category_name}
|
{category.category_name}
|
||||||
className="w-full h-28 object-cover group-hover:blur-[3px] transition-all"
|
</div>
|
||||||
/>
|
</div>
|
||||||
<div className="absolute bottom-2 bg-black bg-opacity-60 font-bold w-full text-center py-1">
|
);
|
||||||
{category.category_name}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
})}
|
</div>
|
||||||
</div>
|
</>
|
||||||
</div>
|
);
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar;
|
||||||
|
|||||||
@@ -183,7 +183,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
|
|||||||
onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
|
onClick={() => (msg.chatter_username === username ? null : (window.location.href = `/user/${msg.chatter_username}`))}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/monkey.png"
|
src={`/user/${msg.chatter_username}/profile_picture`}
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = "/images/pfps/default.png";
|
||||||
|
e.currentTarget.onerror = null;
|
||||||
|
}}
|
||||||
alt="User Avatar"
|
alt="User Avatar"
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
style={{ width: "2.5em", height: "2.5em" }}
|
style={{ width: "2.5em", height: "2.5em" }}
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ import { useAuthModal } from "../hooks/useAuthModal";
|
|||||||
import FollowUserButton from "../components/Input/FollowUserButton";
|
import FollowUserButton from "../components/Input/FollowUserButton";
|
||||||
|
|
||||||
interface Streamer {
|
interface Streamer {
|
||||||
user_id: number;
|
user_id: number;
|
||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FollowingStreamerProps {
|
interface FollowingStreamerProps {
|
||||||
@@ -45,10 +45,10 @@ const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isLoggedIn) {
|
if (isLoggedIn) {
|
||||||
fetchFollowedStreamers();
|
fetchFollowedStreamers();
|
||||||
}
|
}
|
||||||
}, [isLoggedIn]);
|
}, [isLoggedIn]);
|
||||||
|
|
||||||
|
|
||||||
const handleFollowToggle = async (userId: number) => {
|
const handleFollowToggle = async (userId: number) => {
|
||||||
|
|||||||
@@ -84,9 +84,7 @@ const ResultsPage: React.FC = ({ }) => {
|
|||||||
id: user.user_id,
|
id: user.user_id,
|
||||||
type: "user",
|
type: "user",
|
||||||
title: `${user.is_live ? "🔴" : ""} ${user.username}`,
|
title: `${user.is_live ? "🔴" : ""} ${user.username}`,
|
||||||
viewers: 0,
|
username: user.username
|
||||||
username: user.username,
|
|
||||||
thumbnail: user.profile_picture,
|
|
||||||
}))}
|
}))}
|
||||||
title="Users"
|
title="Users"
|
||||||
onItemClick={(username: string) =>
|
onItemClick={(username: string) =>
|
||||||
|
|||||||
@@ -14,343 +14,295 @@ import { getCategoryThumbnail } from "../utils/thumbnailUtils";
|
|||||||
import { useSameUser } from "../hooks/useSameUser";
|
import { useSameUser } from "../hooks/useSameUser";
|
||||||
|
|
||||||
interface UserProfileData {
|
interface UserProfileData {
|
||||||
id: number;
|
id: number;
|
||||||
username: string;
|
username: string;
|
||||||
bio: string;
|
bio: string;
|
||||||
followerCount: number;
|
followerCount: number;
|
||||||
isPartnered: boolean;
|
isPartnered: boolean;
|
||||||
isLive: boolean;
|
isLive: boolean;
|
||||||
currentStreamTitle?: string;
|
currentStreamTitle?: string;
|
||||||
currentStreamCategory?: string;
|
currentStreamCategory?: string;
|
||||||
currentStreamViewers?: number;
|
currentStreamViewers?: number;
|
||||||
currentStreamStartTime?: string;
|
currentStreamStartTime?: string;
|
||||||
currentStreamThumbnail?: string;
|
currentStreamThumbnail?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const UserPage: React.FC = () => {
|
const UserPage: React.FC = () => {
|
||||||
const [userPageVariant, setUserPageVariant] = useState<
|
const [userPageVariant, setUserPageVariant] = useState<"personal" | "streamer" | "user" | "admin">("user");
|
||||||
"personal" | "streamer" | "user" | "admin"
|
const [profileData, setProfileData] = useState<UserProfileData>();
|
||||||
>("user");
|
const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
|
||||||
const [profileData, setProfileData] = useState<UserProfileData>();
|
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||||
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
|
const { username: loggedInUsername } = useAuth();
|
||||||
useFollow();
|
const { username } = useParams();
|
||||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
const isUser = useSameUser({ username });
|
||||||
const { username: loggedInUsername } = useAuth();
|
const navigate = useNavigate();
|
||||||
const { username } = useParams();
|
|
||||||
const isUser = useSameUser({username});
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
// Saves uploaded image as profile picture for the user
|
// Saves uploaded image as profile picture for the user
|
||||||
const saveUploadedImage = async (event) => {
|
const saveUploadedImage = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const img = event.target.files[0];
|
const files = event.target.files;
|
||||||
if (img) {
|
if (!files) return;
|
||||||
const formData = new FormData();
|
const img = files[0];
|
||||||
formData.append('image', img);
|
if (img) {
|
||||||
|
const formData = new FormData();
|
||||||
try {
|
formData.append("image", img);
|
||||||
const response = await fetch('/api/user/profile_picture/upload', {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
console.log("Success");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log("Failure");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
try {
|
||||||
// Fetch user profile data
|
const response = await fetch("/api/user/profile_picture/upload", {
|
||||||
fetch(`/api/user/${username}`)
|
method: "POST",
|
||||||
.then((res) => res.json())
|
body: formData,
|
||||||
.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: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (data.is_live) {
|
if (response.ok) {
|
||||||
// Fetch stream data for this streamer
|
console.log("Success");
|
||||||
fetch(`/api/streams/${data.user_id}/data`)
|
window.location.reload();
|
||||||
.then((res) => res.json())
|
}
|
||||||
.then((streamData) => {
|
} catch (error) {
|
||||||
setProfileData((prevData) => {
|
console.log("Failure");
|
||||||
if (!prevData) return prevData;
|
}
|
||||||
return {
|
}
|
||||||
...prevData,
|
};
|
||||||
currentStreamTitle: streamData.title,
|
|
||||||
currentStreamCategory: streamData.category_id,
|
|
||||||
currentStreamViewers: streamData.num_viewers,
|
|
||||||
currentStreamStartTime: streamData.start_time,
|
|
||||||
currentStreamThumbnail: getCategoryThumbnail(
|
|
||||||
streamData.category_name,
|
|
||||||
streamData.thumbnail
|
|
||||||
),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
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);
|
|
||||||
navigate("/404");
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check if the *logged-in* user is following this user
|
useEffect(() => {
|
||||||
if (loggedInUsername && username) checkFollowStatus(username);
|
// Fetch user profile data
|
||||||
}, [username]);
|
fetch(`/api/user/${username}`)
|
||||||
|
.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: "",
|
||||||
|
});
|
||||||
|
|
||||||
if (!profileData) return <LoadingScreen />;
|
if (data.is_live) {
|
||||||
console.log(isUser)
|
// Fetch stream data for this streamer
|
||||||
return (
|
fetch(`/api/streams/${data.user_id}/data`)
|
||||||
<DynamicPageContent
|
.then((res) => res.json())
|
||||||
className={`min-h-screen text-white flex flex-col`}
|
.then((streamData) => {
|
||||||
>
|
setProfileData((prevData) => {
|
||||||
<div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
|
if (!prevData) return prevData;
|
||||||
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
|
return {
|
||||||
{/* Profile Section - TOP */}
|
...prevData,
|
||||||
|
currentStreamTitle: streamData.title,
|
||||||
|
currentStreamCategory: streamData.category_id,
|
||||||
|
currentStreamViewers: streamData.num_viewers,
|
||||||
|
currentStreamStartTime: streamData.start_time,
|
||||||
|
currentStreamThumbnail: getCategoryThumbnail(streamData.category_name, streamData.thumbnail),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
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);
|
||||||
|
navigate("/404");
|
||||||
|
});
|
||||||
|
|
||||||
<div
|
// Check if the *logged-in* user is following this user
|
||||||
id="profile"
|
if (loggedInUsername && username) checkFollowStatus(username);
|
||||||
className="col-span-4 row-span-1 h-full bg-[var(--user-bg)]
|
}, [username]);
|
||||||
|
|
||||||
|
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
|
rounded-[30px] p-3 shadow-lg
|
||||||
relative flex flex-col items-center"
|
relative flex flex-col items-center"
|
||||||
>
|
>
|
||||||
{/* Border Overlay (Always on Top) */}
|
{/* Border Overlay (Always on Top) */}
|
||||||
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
|
<div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
|
||||||
|
|
||||||
{/* Background Box */}
|
{/* Background Box */}
|
||||||
<div
|
<div
|
||||||
className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px]
|
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"
|
bg-[var(--user-box)] z-10 flex-shrink justify-center"
|
||||||
style={{ boxShadow: "var(--user-box-shadow)" }}
|
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 className="absolute top-4 w-[99.8%] h-[1vh] min-h-[1em] max-h-[2em] bg-[var(--user-box-strip)]"></div> */}
|
||||||
</div>
|
</div>
|
||||||
{/* Profile Picture */}
|
{/* Profile Picture */}
|
||||||
<div
|
<div
|
||||||
className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
|
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 border-[var(--user-pfp-border)] inset-0 z-20"
|
rounded-full flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
|
||||||
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
|
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
|
||||||
>
|
>
|
||||||
<label
|
<label className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}>
|
||||||
className={`relative ${isUser ? "cursor-pointer group" : ""} overflow-visible`}
|
{/* If user is live then displays a live div */}
|
||||||
>
|
{Boolean(profileData.isLive) && (
|
||||||
{/* If user is live then displays a live div */}
|
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 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">
|
||||||
{Boolean(profileData.isLive) && (
|
LIVE
|
||||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 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">
|
</div>
|
||||||
LIVE
|
)}
|
||||||
</div>
|
<img
|
||||||
)}
|
src={`/user/${profileData.username}/profile_picture`}
|
||||||
<img
|
onError={(e) => {
|
||||||
src="/images/monkey.png"
|
e.currentTarget.src = "/images/pfps/default.png";
|
||||||
alt={`${profileData.username}'s profile`}
|
e.currentTarget.onerror = null;
|
||||||
className="sm:w-full h-full object-cover rounded-full relative z-0"
|
}}
|
||||||
/>
|
alt={`${profileData.username}'s profile`}
|
||||||
|
className="sm:w-full h-full object-cover rounded-full relative z-0"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* If current user is the profile user then allow profile picture swap */}
|
{/* If current user is the profile user then allow profile picture swap */}
|
||||||
{isUser && (
|
{isUser && (
|
||||||
<>
|
<>
|
||||||
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
|
<div className="absolute top-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
|
||||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
<div className="absolute top-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||||
<CameraIcon
|
<CameraIcon size={32} className="text-white bg-black/50 p-1 rounded-full" />
|
||||||
size={32}
|
</div>
|
||||||
className="text-white bg-black/50 p-1 rounded-full"
|
<input type="file" className="hidden" onChange={saveUploadedImage} accept="image/*" />
|
||||||
/>
|
</>
|
||||||
</div>
|
)}
|
||||||
<input
|
</label>
|
||||||
type="file"
|
</div>
|
||||||
className="hidden"
|
|
||||||
onChange={saveUploadedImage}
|
|
||||||
accept="image/*" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Username - Now Directly Below PFP */}
|
{/* 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">
|
<h1 className="text-[var(--user-name)] text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
|
||||||
{profileData.username}
|
{profileData.username}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
{/* Follower Count */}
|
{/* Follower Count */}
|
||||||
{userPageVariant === "streamer" && (
|
{userPageVariant === "streamer" && (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center space-x-2 mb-6">
|
<div className="flex items-center space-x-2 mb-6">
|
||||||
<span className="text-gray-400">
|
<span className="text-gray-400">{profileData.followerCount.toLocaleString()} followers</span>
|
||||||
{profileData.followerCount.toLocaleString()} followers
|
{profileData.isPartnered && <span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">Partner</span>}
|
||||||
</span>
|
</div>
|
||||||
{profileData.isPartnered && (
|
|
||||||
<span className="bg-purple-600 text-white text-sm px-2 py-1 rounded">
|
|
||||||
Partner
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* (Un)Follow Button */}
|
{/* (Un)Follow Button */}
|
||||||
{!isFollowing ? (
|
{!isFollowing ? (
|
||||||
<Button
|
<Button
|
||||||
extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
|
extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
|
||||||
onClick={() => followUser(profileData.id, setShowAuthModal)}
|
onClick={() => followUser(profileData.id, setShowAuthModal)}
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button extraClasses="w-full bg-[#a80000] z-50" onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}>
|
||||||
extraClasses="w-full bg-[#a80000]"
|
Unfollow
|
||||||
onClick={() =>
|
</Button>
|
||||||
unfollowUser(profileData?.id, setShowAuthModal)
|
)}
|
||||||
}
|
</>
|
||||||
>
|
)}
|
||||||
Unfollow
|
</div>
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="settings"
|
id="settings"
|
||||||
className="col-span-1 bg-[var(--user-sideBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
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") */}
|
{/* User Type (e.g., "USER") */}
|
||||||
<small className="text-green-400">
|
<small className="text-green-400">{userPageVariant.toUpperCase()}</small>
|
||||||
{userPageVariant.toUpperCase()}
|
|
||||||
</small>
|
|
||||||
|
|
||||||
<div className="mt-6 text-center">
|
<div className="mt-6 text-center">
|
||||||
<h2 className="text-xl font-semibold mb-3">
|
<h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
|
||||||
About {profileData.username}
|
<p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
|
||||||
</h2>
|
</div>
|
||||||
<p className="text-gray-300 whitespace-pre-wrap">
|
</div>
|
||||||
{profileData.bio}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
<div
|
<div
|
||||||
id="content"
|
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"
|
className="col-span-2 bg-[var(--user-contentBox)] rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
|
||||||
>
|
>
|
||||||
{userPageVariant === "streamer" && (
|
{userPageVariant === "streamer" && (
|
||||||
<>
|
<>
|
||||||
{profileData.isLive ? (
|
{profileData.isLive ? (
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">
|
<h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">Currently Live!</h2>
|
||||||
Currently Live!
|
<StreamListItem
|
||||||
</h2>
|
id={profileData.id}
|
||||||
<StreamListItem
|
title={profileData.currentStreamTitle || ""}
|
||||||
id={profileData.id}
|
streamCategory=""
|
||||||
title={profileData.currentStreamTitle || ""}
|
username=""
|
||||||
streamCategory=""
|
viewers={profileData.currentStreamViewers || 0}
|
||||||
username=""
|
thumbnail={profileData.currentStreamThumbnail}
|
||||||
viewers={profileData.currentStreamViewers || 0}
|
onItemClick={() => {
|
||||||
thumbnail={profileData.currentStreamThumbnail}
|
navigate(`/${profileData.username}`);
|
||||||
onItemClick={() => {
|
}}
|
||||||
navigate(`/${profileData.username}`);
|
/>
|
||||||
}}
|
</div>
|
||||||
/>
|
) : (
|
||||||
</div>
|
<h1>Currently not live</h1>
|
||||||
) : (
|
)}
|
||||||
<h1>Currently not live</h1>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ↓↓ VODS ↓↓ */}
|
{/* ↓↓ VODS ↓↓ */}
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
||||||
<div className="text-gray-400 rounded-none">
|
<div className="text-gray-400 rounded-none">No past broadcasts found</div>
|
||||||
No past broadcasts found
|
</div>
|
||||||
</div>
|
</>
|
||||||
</div>
|
)}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{userPageVariant === "user" && (
|
{userPageVariant === "user" && (
|
||||||
<>
|
<>
|
||||||
{/* ↓↓ VODS ↓↓ */}
|
{/* ↓↓ VODS ↓↓ */}
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
<h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
|
||||||
<div className="text-gray-400 rounded-none">
|
<div className="text-gray-400 rounded-none">No past broadcasts found</div>
|
||||||
No past broadcasts found
|
</div>
|
||||||
</div>
|
</>
|
||||||
</div>
|
)}
|
||||||
</>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="mini"
|
id="mini"
|
||||||
className="bg-[var(--user-sideBox)] col-span-1 rounded-lg text-center items-center justify-center
|
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]"
|
flex flex-col flex-grow gap-4 p-[2rem]"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
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"
|
flex items-center justify-center w-full p-4 content-start"
|
||||||
onMouseEnter={(e) =>
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||||
}
|
>
|
||||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => navigate(`/user/${username}/following`)}>
|
||||||
>
|
Following
|
||||||
<button
|
</button>
|
||||||
className="text-[var(--follow-text)] whitespace-pre-wrap"
|
</div>
|
||||||
onClick={() => navigate(`/user/${username}/following`)}
|
<div
|
||||||
>
|
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||||
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"
|
flex items-center justify-center w-full p-4 content-start"
|
||||||
onMouseEnter={(e) =>
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||||
}
|
>
|
||||||
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 className="list-none">
|
</ul>
|
||||||
<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">
|
</div>
|
||||||
Streamers
|
<div
|
||||||
</li>
|
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300
|
||||||
</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"
|
flex items-center justify-center w-full p-4 content-start"
|
||||||
onMouseEnter={(e) =>
|
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
|
||||||
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
|
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||||
}
|
>
|
||||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
<button onClick={() => navigate(`/user/${username}/yourCategories`)}>Categories</button>
|
||||||
>
|
</div>
|
||||||
<button
|
</div>
|
||||||
onClick={() => navigate(`/user/${username}/yourCategories`)}
|
</div>
|
||||||
>
|
</div>
|
||||||
Categories
|
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||||
</button>
|
</DynamicPageContent>
|
||||||
</div>
|
);
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
|
||||||
</DynamicPageContent>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default UserPage;
|
export default UserPage;
|
||||||
|
|||||||
@@ -16,245 +16,228 @@ import { StreamType } from "../types/StreamType";
|
|||||||
const CheckoutForm = lazy(() => import("../components/Checkout/CheckoutForm"));
|
const CheckoutForm = lazy(() => import("../components/Checkout/CheckoutForm"));
|
||||||
|
|
||||||
interface VideoPageProps {
|
interface VideoPageProps {
|
||||||
streamerId: number;
|
streamerId: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
|
const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
|
||||||
const { isLoggedIn } = useAuth();
|
const { isLoggedIn } = useAuth();
|
||||||
const { streamerName } = useParams<{ streamerName: string }>();
|
const { streamerName } = useParams<{ streamerName: string }>();
|
||||||
const [streamData, setStreamData] = useState<StreamType>();
|
const [streamData, setStreamData] = useState<StreamType>();
|
||||||
const [viewerCount, setViewerCount] = useState(0);
|
const [viewerCount, setViewerCount] = useState(0);
|
||||||
const { showSideBar } = useSidebar();
|
const { showSideBar } = useSidebar();
|
||||||
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
|
const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
|
||||||
useFollow();
|
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
const [isStripeReady, setIsStripeReady] = useState(false);
|
||||||
const [isStripeReady, setIsStripeReady] = useState(false);
|
const [showCheckout, setShowCheckout] = useState(false);
|
||||||
const [showCheckout, setShowCheckout] = useState(false);
|
const { showChat } = useChat();
|
||||||
const { showChat } = useChat();
|
const navigate = useNavigate();
|
||||||
const navigate = useNavigate();
|
const [timeStarted, setTimeStarted] = useState("");
|
||||||
const [timeStarted, setTimeStarted] = useState("");
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Prevent scrolling when checkout is open
|
// Prevent scrolling when checkout is open
|
||||||
if (showCheckout) {
|
if (showCheckout) {
|
||||||
document.body.style.overflow = "hidden";
|
document.body.style.overflow = "hidden";
|
||||||
} else {
|
} else {
|
||||||
document.body.style.overflow = "unset";
|
document.body.style.overflow = "unset";
|
||||||
}
|
}
|
||||||
// Cleanup function to ensure overflow is restored when component unmounts
|
// Cleanup function to ensure overflow is restored when component unmounts
|
||||||
return () => {
|
return () => {
|
||||||
document.body.style.overflow = "unset";
|
document.body.style.overflow = "unset";
|
||||||
};
|
};
|
||||||
}, [showCheckout]);
|
}, [showCheckout]);
|
||||||
|
|
||||||
// Increment minutes of stream time every minute
|
// Increment minutes of stream time every minute
|
||||||
useEffect;
|
useEffect;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Fetch stream data for this streamer
|
// Fetch stream data for this streamer
|
||||||
fetch(`/api/streams/${streamerId}/data`).then((res) => {
|
fetch(`/api/streams/${streamerId}/data`).then((res) => {
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
console.error("Failed to load stream data:", res.statusText);
|
console.error("Failed to load stream data:", res.statusText);
|
||||||
}
|
}
|
||||||
res
|
res
|
||||||
.json()
|
.json()
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
const transformedData: StreamType = {
|
const transformedData: StreamType = {
|
||||||
type: "stream",
|
type: "stream",
|
||||||
id: data.stream_id,
|
id: data.stream_id,
|
||||||
username: data.username,
|
username: data.username,
|
||||||
title: data.title,
|
title: data.title,
|
||||||
startTime: data.start_time,
|
startTime: data.start_time,
|
||||||
streamCategory: data.category_name,
|
streamCategory: data.category_name,
|
||||||
viewers: data.viewers,
|
viewers: data.viewers,
|
||||||
};
|
};
|
||||||
setStreamData(transformedData);
|
setStreamData(transformedData);
|
||||||
|
|
||||||
// Check if the logged-in user is following this streamer
|
// Check if the logged-in user is following this streamer
|
||||||
if (isLoggedIn) checkFollowStatus(data.username);
|
if (isLoggedIn) checkFollowStatus(data.username);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("Error fetching stream data:", error);
|
console.error("Error fetching stream data:", error);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, [streamerId]);
|
}, [streamerId]);
|
||||||
|
|
||||||
// Time counter using DD:HH:MM:SS format
|
// Time counter using DD:HH:MM:SS format
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!streamData?.startTime) return;
|
if (!streamData?.startTime) return;
|
||||||
|
|
||||||
// Initial calculation
|
// Initial calculation
|
||||||
const startTime = new Date(streamData.startTime).getTime();
|
const startTime = new Date(streamData.startTime).getTime();
|
||||||
|
|
||||||
const calculateTimeDifference = () => {
|
const calculateTimeDifference = () => {
|
||||||
// Get the difference in seconds
|
// Get the difference in seconds
|
||||||
const diffInSeconds = Math.floor((Date.now() - startTime) / 1000);
|
const diffInSeconds = Math.floor((Date.now() - startTime) / 1000);
|
||||||
|
|
||||||
// Calculate days, hours, minutes, seconds
|
// Calculate days, hours, minutes, seconds
|
||||||
const days = Math.floor(diffInSeconds / 86400);
|
const days = Math.floor(diffInSeconds / 86400);
|
||||||
const hours = Math.floor((diffInSeconds % 86400) / 3600);
|
const hours = Math.floor((diffInSeconds % 86400) / 3600);
|
||||||
const minutes = Math.floor((diffInSeconds % 3600) / 60);
|
const minutes = Math.floor((diffInSeconds % 3600) / 60);
|
||||||
const seconds = diffInSeconds % 60;
|
const seconds = diffInSeconds % 60;
|
||||||
|
|
||||||
// Format as DD:HH:MM:SS
|
// Format as DD:HH:MM:SS
|
||||||
setTimeStarted(
|
setTimeStarted(
|
||||||
`${days.toString().padStart(2, "0")}:${hours
|
`${days.toString().padStart(2, "0")}:${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
|
||||||
.toString()
|
.toString()
|
||||||
.padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
|
.padStart(2, "0")}`
|
||||||
.toString()
|
);
|
||||||
.padStart(2, "0")}`
|
};
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Calculate immediately
|
// Calculate immediately
|
||||||
calculateTimeDifference();
|
calculateTimeDifference();
|
||||||
|
|
||||||
// Set up interval to update every second
|
// Set up interval to update every second
|
||||||
const intervalId = setInterval(calculateTimeDifference, 1000);
|
const intervalId = setInterval(calculateTimeDifference, 1000);
|
||||||
|
|
||||||
// Clean up interval on component unmount
|
// Clean up interval on component unmount
|
||||||
return () => clearInterval(intervalId);
|
return () => clearInterval(intervalId);
|
||||||
}, [streamData?.startTime]); // Re-run if startTime changes
|
}, [streamData?.startTime]); // Re-run if startTime changes
|
||||||
|
|
||||||
// Load Stripe in the background when component mounts
|
// Load Stripe in the background when component mounts
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadStripe = async () => {
|
const loadStripe = async () => {
|
||||||
await import("@stripe/stripe-js");
|
await import("@stripe/stripe-js");
|
||||||
setIsStripeReady(true);
|
setIsStripeReady(true);
|
||||||
};
|
};
|
||||||
loadStripe();
|
loadStripe();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SocketProvider>
|
<SocketProvider>
|
||||||
<DynamicPageContent className="w-full min-h-screen">
|
<DynamicPageContent className="w-full min-h-screen">
|
||||||
<div
|
<div
|
||||||
id="container"
|
id="container"
|
||||||
className={`bg-gray-900 h-full grid ${
|
className={`bg-gray-900 h-full grid ${
|
||||||
showChat
|
showChat
|
||||||
? showSideBar
|
? showSideBar
|
||||||
? "w-[85vw] duration-[1s]"
|
? "w-[85vw] duration-[1s]"
|
||||||
: "w-[100vw] duration-[0.5s]"
|
: "w-[100vw] duration-[0.5s]"
|
||||||
: showSideBar
|
: showSideBar
|
||||||
? "w-[110vw] duration-[1s]"
|
? "w-[110vw] duration-[1s]"
|
||||||
: "w-[125vw] duration-[0.5s]"
|
: "w-[125vw] duration-[0.5s]"
|
||||||
} grid-rows-[auto_1fr] grid-cols-[auto_25vw] transition-all ease-in-out`}
|
} grid-rows-[auto_1fr] grid-cols-[auto_25vw] transition-all ease-in-out`}
|
||||||
>
|
>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<VideoPlayer />
|
<VideoPlayer />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ChatPanel
|
<ChatPanel streamId={streamerId} onViewerCountChange={(count: number) => setViewerCount(count)} />
|
||||||
streamId={streamerId}
|
|
||||||
onViewerCountChange={(count: number) => setViewerCount(count)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Stream Data */}
|
{/* Stream Data */}
|
||||||
<div
|
<div
|
||||||
id="stream-info"
|
id="stream-info"
|
||||||
className="flex flex-row items-center justify-between gap-4 p-4 bg-[#18181b] text-white text-lg rounded-md shadow-lg"
|
className="flex flex-row items-center justify-between gap-4 p-4 bg-[#18181b] text-white text-lg rounded-md shadow-lg"
|
||||||
>
|
>
|
||||||
{/* Streamer Icon */}
|
{/* Streamer Icon */}
|
||||||
<div className="flex flex-col items-center mb-[1em]">
|
<div className="flex flex-col items-center mb-[1em]">
|
||||||
<img
|
<img
|
||||||
src="/images/monkey.png"
|
src={`/user/${streamerName}/profile_picture`}
|
||||||
alt="streamer"
|
onError={(e) => {
|
||||||
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
e.currentTarget.src = "/images/pfps/default.png";
|
||||||
onClick={() => navigate(`/user/${streamerName}`)}
|
e.currentTarget.onerror = null;
|
||||||
/>
|
}}
|
||||||
<button
|
alt="streamer"
|
||||||
className="text-white font-bold hover:underline mt-[0.5em]"
|
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
||||||
onClick={() => navigate(`/user/${streamerName}`)}
|
onClick={() => navigate(`/user/${streamerName}`)}
|
||||||
>
|
/>
|
||||||
{streamerName}
|
<button className="text-white font-bold hover:underline mt-[0.5em]" onClick={() => navigate(`/user/${streamerName}`)}>
|
||||||
</button>
|
{streamerName}
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Stream Title */}
|
{/* Stream Title */}
|
||||||
<div className="flex flex-col items-start flex-grow">
|
<div className="flex flex-col items-start flex-grow">
|
||||||
<h2 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">
|
<h2 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">{streamData ? streamData.title : "Loading..."}</h2>
|
||||||
{streamData ? streamData.title : "Loading..."}
|
<a
|
||||||
</h2>
|
href={streamData ? `/category/${streamData.streamCategory}` : "#"}
|
||||||
<a href={streamData ? `/category/${streamData.streamCategory}` : "#"} className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
|
className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400"
|
||||||
{streamData ? streamData.streamCategory : "Loading..."}
|
>
|
||||||
</a>
|
{streamData ? streamData.streamCategory : "Loading..."}
|
||||||
</div>
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Streamer Info */}
|
{/* Streamer Info */}
|
||||||
<div className="flex items-center gap-[0.75em] flex-col lg:flex-row">
|
<div className="flex items-center gap-[0.75em] flex-col lg:flex-row">
|
||||||
<div className="group flex flex-col items-center lg:items-start">
|
<div className="group flex flex-col items-center lg:items-start">
|
||||||
{!isFollowing ? (
|
{!isFollowing ? (
|
||||||
<button
|
<button
|
||||||
className="bg-purple-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-purple-700 text-sm"
|
className="bg-purple-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-purple-700 text-sm"
|
||||||
onClick={() => followUser(streamerId, setShowAuthModal)}
|
onClick={() => followUser(streamerId, setShowAuthModal)}
|
||||||
>
|
>
|
||||||
Follow
|
Follow
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
className="bg-gray-700 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-600 text-sm transition-all"
|
className="bg-gray-700 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-600 text-sm transition-all"
|
||||||
onClick={() => unfollowUser(streamerId, setShowAuthModal)}
|
onClick={() => unfollowUser(streamerId, setShowAuthModal)}
|
||||||
>
|
>
|
||||||
<span className="group-hover:hidden">Following</span>
|
<span className="group-hover:hidden">Following</span>
|
||||||
<span className="hidden group-hover:block">Unfollow</span>
|
<span className="hidden group-hover:block">Unfollow</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stream Stats */}
|
{/* Stream Stats */}
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<div className="flex items-center gap-[0.5em]">
|
<div className="flex items-center gap-[0.5em]">
|
||||||
<img
|
<img src="/images/icons/user.png" alt="Viewers Icon" className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]" />
|
||||||
src="../../../images/icons/user.png"
|
<span className="font-bold text-[1.2em]">{viewerCount}</span>
|
||||||
alt="Viewers Icon"
|
</div>
|
||||||
className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]"
|
</div>
|
||||||
/>
|
|
||||||
<span className="font-bold text-[1.2em]">{viewerCount}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center p-4 min-w-fit">
|
<div className="flex flex-col items-center p-4 min-w-fit">
|
||||||
<span className="text-[0.75em]">
|
<span className="text-[0.75em]">{streamData ? timeStarted : "Loading..."}</span>
|
||||||
{streamData ? timeStarted : "Loading..."}
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Subscribe Button */}
|
{/* Subscribe Button */}
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<button
|
<button
|
||||||
className={`bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md
|
className={`bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md
|
||||||
${
|
${isStripeReady ? "hover:bg-red-700" : "opacity-20 cursor-not-allowed"} transition-all`}
|
||||||
isStripeReady ? "hover:bg-red-700" : "opacity-20 cursor-not-allowed"
|
onClick={() => {
|
||||||
} transition-all`}
|
if (!isLoggedIn) {
|
||||||
onClick={() => {
|
setShowAuthModal(true);
|
||||||
if (!isLoggedIn) {
|
} else if (isStripeReady) {
|
||||||
setShowAuthModal(true);
|
setShowCheckout(true);
|
||||||
} else if (isStripeReady) {
|
}
|
||||||
setShowCheckout(true);
|
}}
|
||||||
}
|
>
|
||||||
}}
|
{isStripeReady ? "Subscribe" : "Loading..."}
|
||||||
>
|
</button>
|
||||||
{isStripeReady ? "Subscribe" : "Loading..."}
|
</div>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
{showCheckout && (
|
||||||
</div>
|
<Suspense fallback={<div>Loading checkout...</div>}>
|
||||||
{showCheckout && (
|
<CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId} />
|
||||||
<Suspense fallback={<div>Loading checkout...</div>}>
|
</Suspense>
|
||||||
<CheckoutForm
|
)}
|
||||||
onClose={() => setShowCheckout(false)}
|
{/* {showReturn && <Return />} */}
|
||||||
streamerID={streamerId}
|
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||||
/>
|
</div>
|
||||||
</Suspense>
|
</DynamicPageContent>
|
||||||
)}
|
</SocketProvider>
|
||||||
{/* {showReturn && <Return />} */}
|
);
|
||||||
{showAuthModal && (
|
|
||||||
<AuthModal onClose={() => setShowAuthModal(false)} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</DynamicPageContent>
|
|
||||||
</SocketProvider>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default VideoPage;
|
export default VideoPage;
|
||||||
|
|||||||
Reference in New Issue
Block a user