From c3fd9f5dee235db2c7fcf15cfaecf784ab5f9631 Mon Sep 17 00:00:00 2001
From: JustIceO7 <oscarcao777@gmail.com>
Date: Mon, 17 Feb 2025 04:13:18 +0000
Subject: [PATCH] UPDATE: Reverted VideoPage look

---
 frontend/src/pages/VideoPage.tsx | 196 +++++++++++++++----------------
 1 file changed, 94 insertions(+), 102 deletions(-)

diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx
index 3b98fa2..b264d88 100644
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -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,108 +124,101 @@ 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" }}
-        >
-          {/* 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-fit max-w-[60%] mx-8 text-wrap">
-            <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]">
+          {/* Stream Data */}
+          <div
+            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"
+          >
+            {/* Streamer Icon */}
+            <div className="flex flex-col items-center mb-[1em]">
               <img
-                src="../../../images/icons/user.png"
-                alt="Viewers Icon"
-                className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]"
+                src="/images/monkey.png"
+                alt="streamer"
+                className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
+                onClick={() => navigate(`/user/${streamerName}`)}
               />
-              <span className="font-bold text-[1.2em]">{viewerCount}</span>
+              <button
+                className="text-white font-bold hover:underline mt-[0.5em]"
+                onClick={() => navigate(`/user/${streamerName}`)}
+              >
+                {streamData ? streamData.streamerName : "Loading..."}
+              </button>
             </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>
+            {/* Stream Title */}
+            <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..."}
+              </h2>
+              <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>
 
-          {/* 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>
+          {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId}/>}
+          {showReturn && <Return />}
+          {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
         </div>
-        {showCheckout && (
-          <CheckoutForm
-            onClose={() => setShowCheckout(false)}
-            streamerID={streamerId}
-          />
-        )}
-        {showReturn && <Return />}
-        {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
       </div>
     </SocketProvider>
   );