236 lines
8.2 KiB
TypeScript
236 lines
8.2 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import Navbar from "../components/Navigation/Navbar";
|
|
import { ToggleButton } from "../components/Input/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";
|
|
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
|
|
|
|
interface VideoPageProps {
|
|
streamerId: number;
|
|
}
|
|
|
|
interface StreamDataProps {
|
|
streamTitle: string;
|
|
streamerName: string;
|
|
startTime: string;
|
|
categoryName: string;
|
|
}
|
|
|
|
const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
|
|
const { isLoggedIn } = useAuth();
|
|
const { streamerName } = useParams<{ streamerName: string }>();
|
|
const [streamData, setStreamData] = useState<StreamDataProps>();
|
|
const [viewerCount, setViewerCount] = useState(0);
|
|
const [isChatOpen, setIsChatOpen] = useState(true);
|
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
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();
|
|
|
|
useEffect(() => {
|
|
// Prevent scrolling when checkout is open
|
|
if (showCheckout) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "unset";
|
|
}
|
|
// Cleanup function to ensure overflow is restored when component unmounts
|
|
return () => {
|
|
document.body.style.overflow = "unset";
|
|
};
|
|
}, [showCheckout]);
|
|
|
|
useEffect(() => {
|
|
// Fetch stream data for this streamer
|
|
fetch(`/api/streams/${streamerId}/data`).then((res) => {
|
|
if (!res.ok) {
|
|
console.error("Failed to load stream data:", res.statusText);
|
|
}
|
|
res
|
|
.json()
|
|
.then((data) => {
|
|
// Transform snake_case to camelCase
|
|
const transformedData: StreamDataProps = {
|
|
streamerName: data.username,
|
|
streamTitle: data.title,
|
|
startTime: data.start_time,
|
|
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);
|
|
});
|
|
});
|
|
}, [streamerId]);
|
|
|
|
// Keyboard shortcut to toggle chat
|
|
useEffect(() => {
|
|
const handleKeyPress = (e: KeyboardEvent) => {
|
|
if (e.key === "c" && !isInputFocused) {
|
|
setIsChatOpen((prev) => !prev);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", handleKeyPress);
|
|
|
|
return () => {
|
|
document.removeEventListener("keydown", handleKeyPress);
|
|
};
|
|
}, [isInputFocused]);
|
|
|
|
const toggleChat = () => {
|
|
setIsChatOpen((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<SocketProvider>
|
|
<div id="videoPage" className="w-full h-full bg-gray-900 flex flex-col">
|
|
<Navbar />
|
|
|
|
<div
|
|
id="container"
|
|
className={`grid ${
|
|
isChatOpen ? "w-[100vw]" : "w-[125vw]"
|
|
} flex-grow bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
|
|
>
|
|
<VideoPlayer />
|
|
|
|
<ToggleButton
|
|
onClick={toggleChat}
|
|
toggled={isChatOpen}
|
|
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
|
|
streamId={streamerId}
|
|
onViewerCountChange={(count: number) => setViewerCount(count)}
|
|
onInputFocus={setIsInputFocused}
|
|
/>
|
|
</div>
|
|
{/* Stream Data */}
|
|
<div
|
|
id="stream-info"
|
|
className="flex flex-row items-center justify-evenly gap-4 p-4 bg-[#18181b] text-white text-lg rounded-md shadow-lg"
|
|
style={{ gridArea: "2 / 1 / 3 / 3" }}
|
|
>
|
|
{/* Streamer Icon */}
|
|
<div className="flex flex-col items-center mb-[1em]">
|
|
<img
|
|
src="/images/monkey.png"
|
|
alt="streamer profile picture"
|
|
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
|
|
onClick={() => navigate(`/user/${streamerName}`)}
|
|
/>
|
|
<button
|
|
className="text-white font-bold hover:underline mt-[0.5em]"
|
|
onClick={() => navigate(`/user/${streamerName}`)}
|
|
>
|
|
{streamData ? streamData.streamerName : "Loading..."}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Stream Title */}
|
|
<div className="flex flex-col items-start min-w-[45%] max-w-[60%] mx-12 text-pretty">
|
|
<h1 className="text-[1rem] lg:text-[1.25em] xl:text-[1.5em] font-bold">
|
|
{streamData ? streamData.streamTitle : "Loading..."}
|
|
</h1>
|
|
<span className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
|
|
{streamData ? streamData.categoryName : "Loading..."}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Streamer Info */}
|
|
<div className="flex items-center gap-[0.75em] flex-col lg:flex-row">
|
|
<div className="flex flex-col items-center lg:items-start">
|
|
{!isFollowing ? (
|
|
<button
|
|
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)}
|
|
>
|
|
Follow
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="bg-gray-700 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-600 text-sm"
|
|
onClick={() => unfollowUser(streamerId, setShowAuthModal)}
|
|
>
|
|
Unfollow
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stream Stats */}
|
|
<div className="flex flex-col items-center">
|
|
<div className="flex items-center gap-[0.5em]">
|
|
<img
|
|
src="../../../images/icons/user.png"
|
|
alt="Viewers Icon"
|
|
className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]"
|
|
/>
|
|
<span className="font-bold text-[1.2em]">{viewerCount}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-gray-400 text-[0.75em]">Started</span>
|
|
<span className="text-[0.75em]">
|
|
{streamData
|
|
? `${Math.floor(
|
|
(Date.now() - new Date(streamData.startTime).getTime()) /
|
|
3600000
|
|
)} hours ago`
|
|
: "Loading..."}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Subscribe Button */}
|
|
<div className="flex flex-col items-center">
|
|
<button
|
|
className="bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-700 text-sm"
|
|
onClick={() => {
|
|
if (!isLoggedIn) {
|
|
setShowAuthModal(true);
|
|
} else {
|
|
setShowCheckout(true);
|
|
}
|
|
}}
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{showCheckout && (
|
|
<CheckoutForm
|
|
onClose={() => setShowCheckout(false)}
|
|
streamerID={streamerId}
|
|
/>
|
|
)}
|
|
{showReturn && <Return />}
|
|
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
|
</div>
|
|
</SocketProvider>
|
|
);
|
|
};
|
|
|
|
export default VideoPage;
|