dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Reverted VideoPage look

Browse Source
This commit is contained in:
JustIceO7
2025-02-17 04:13:18 +00:00
parent c9455e3b72
commit c3fd9f5dee
1 changed files with 94 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/pages/VideoPage.tsx
View File

@@ -97,16 +97,17 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
return (
<SocketProvider>
<div id="videoPage" className="w-full h-full min-h-screen bg-gray-900 flex flex-col">
<div id="videoPage" className="w-full">
<Navbar />
<div
id="container"
className={`grid ${
isChatOpen ? "w-[100vw]" : "w-[125vw]"
} flex-grow bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
>
<VideoPlayer />
<div className="relative">
<VideoPlayer streamId={streamerId} />
</div>
<ToggleButton
onClick={toggleChat}
@@ -115,9 +116,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
>
{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>
<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
@@ -125,18 +124,17 @@ const VideoPage: React.FC<VideoPageProps> = ({ 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" }}
className="flex flex-row items-center justify-between gap-4 p-4 bg-[#18181b] text-white text-lg rounded-md shadow-lg"
>
{/* Streamer Icon */}
<div className="flex flex-col items-center mb-[1em]">
<img
src="/images/monkey.png"
alt="streamer profile picture"
alt="streamer"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${streamerName}`)}
/>
@@ -149,10 +147,10 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
</div>
{/* Stream Title */}
<div className="flex flex-col items-start min-w-fit max-w-[60%] mx-8 text-wrap">
<h1 className="text-[1rem] lg:text-[1.25em] xl:text-[1.5em] font-bold">
<div className="flex flex-col items-start flex-grow">
<h2 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">
{streamData ? streamData.streamTitle : "Loading..."}
</h1>
</h2>
<span className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
{streamData ? streamData.categoryName : "Loading..."}
</span>
@@ -195,10 +193,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<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`
? `${Math.floor((Date.now() - new Date(streamData.startTime).getTime()) / 3600000)} hours ago`
: "Loading..."}
</span>
</div>
@@ -218,16 +213,13 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
Subscribe
</button>
</div>
</div>
{showCheckout && (
<CheckoutForm
onClose={() => setShowCheckout(false)}
streamerID={streamerId}
/>
)}
{showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId}/>}
{showReturn && <Return />}
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</div>
</div>
</SocketProvider>
);
};