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