REFACTOR: Separated Navbar and ChatPanel components; Updated VideoPage layout and toggle chat functionality

2025-02-04 17:43:31 +00:00
parent d472d672bd
commit 595190b0a0
5 changed files with 98 additions and 95 deletions
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Logo from "./Logo";
-import Button, { ToggleButton } from "./Button";
+import Button from "./Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
@@ -15,18 +15,13 @@ import { useAuth } from "../../context/AuthContext";

 interface NavbarProps {
  variant?: "home" | "default";
-  isChatOpen?: boolean;
-  toggleChat?: () => void;
 }

 const Navbar: React.FC<NavbarProps> = ({
  variant = "default",
-  isChatOpen,
-  toggleChat,
 }) => {
  const [showAuthModal, setShowAuthModal] = useState(false);
  const { isLoggedIn } = useAuth();
-  const isVideoPage = location.pathname.includes("/EduGuru");

  useEffect(() => {
    if (showAuthModal) {
@@ -88,15 +83,6 @@ const Navbar: React.FC<NavbarProps> = ({
        <SettingsIcon className="h-15 w-15 mr-1" />
        Quick Settings
      </Button>
-      {isVideoPage && (
-        <ToggleButton
-          onClick={toggleChat}
-          toggled={isChatOpen}
-          extraClasses="absolute top-[80px] right-[20px] text-[1rem] flex items-center flex-nowrap"
-        >
-          {isChatOpen ? "Hide Chat" : "Show Chat"}
-        </ToggleButton>
-      )}

      <div id="search-bar" className="flex items-center">
        <Input
--- a/frontend/src/components/Video/ChatPanel.tsx
+++ b/frontend/src/components/Video/ChatPanel.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import Input from "../Layout/Input";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
-import Button, { ToggleButton } from "../Layout/Button";
+import Button from "../Layout/Button";
 import AuthModal from "../Auth/AuthModal";

 interface ChatMessage {
@@ -47,6 +47,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
        })
        .then((data) => {
          if (data.chat_history) {
+            console.log("Chat history:", data.chat_history);
            setMessages(data.chat_history);
          }
        })
@@ -114,75 +115,77 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
  }, [showAuthModal]);

  return (
-    <>
-      <div id="chat-panel" className="h-full flex flex-col rounded-lg p-4">
-        <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
+    <div
+      id="chat-panel"
+      className="max-w-[30vw] h-full flex flex-col rounded-lg p-4"
+      style={{ gridArea: "1 / 2 / 3 / 3" }}
+    >
+      <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>

-        <div
-          ref={chatContainerRef}
-          id="chat-message-list"
-          className="flex-grow w-full max-h-[50vh] overflow-y-auto mb-4 space-y-2 rounded-md"
-        >
-          {messages.map((msg, index) => (
-            <div
-              key={index}
-              className="grid grid-cols-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
+      <div
+        ref={chatContainerRef}
+        id="chat-message-list"
+        className="flex-grow w-full max-h-[50vh] overflow-y-auto mb-4 space-y-2 rounded-md"
+      >
+        {messages.map((msg, index) => (
+          <div
+            key={index}
+            className="grid grid-cols-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
+          >
+            <span
+              className={`font-bold ${
+                msg.chatter_username === username
+                  ? "text-blue-400"
+                  : "text-green-400"
+              }`}
            >
-              <span
-                className={`font-bold ${
-                  msg.chatter_username === username
-                    ? "text-blue-400"
-                    : "text-green-400"
-                }`}
-              >
-                {" "}
-                {msg.chatter_username}:{" "}
-              </span>
-              <span className="text-center">{msg.message}</span>
-              <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
-                {new Date(msg.time_sent).toLocaleTimeString()}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex justify-center gap-2">
-          {isLoggedIn ? (
-            <>
-              <Input
-                type="text"
-                value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)}
-                onKeyDown={handleKeyPress}
-                placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
-                disabled={!isLoggedIn}
-                extraClasses="flex-grow focus:w-[20vw]"
-                onClick={() => !isLoggedIn && setShowAuthModal(true)}
-              />
-
-              <button
-                onClick={sendChat}
-                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-              >
-                Send
-              </button>
-            </>
-          ) : (
-            <Button
-              extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
-              onClick={() => setShowAuthModal(true)}
-            >
-              Login to Chat
-            </Button>
-          )}
-        </div>
-        {showAuthModal && (
-          <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-            <AuthModal onClose={() => setShowAuthModal(false)} />
+              {" "}
+              {msg.chatter_username}:{" "}
+            </span>
+            <span className="text-center">{msg.message}</span>
+            <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
+              {new Date(msg.time_sent).toLocaleTimeString()}
+            </span>
          </div>
+        ))}
+      </div>
+
+      <div className="flex justify-center gap-2">
+        {isLoggedIn ? (
+          <>
+            <Input
+              type="text"
+              value={inputMessage}
+              onChange={(e) => setInputMessage(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
+              disabled={!isLoggedIn}
+              extraClasses="flex-grow w-full focus:w-full"
+              onClick={() => !isLoggedIn && setShowAuthModal(true)}
+            />
+
+            <button
+              onClick={sendChat}
+              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+            >
+              Send
+            </button>
+          </>
+        ) : (
+          <Button
+            extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
+            onClick={() => setShowAuthModal(true)}
+          >
+            Login to Chat
+          </Button>
        )}
      </div>
-    </>
+      {showAuthModal && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+          <AuthModal onClose={() => setShowAuthModal(false)} />
+        </div>
+      )}
+    </div>
  );
 };

--- a/frontend/src/components/Video/VideoPlayer.tsx
+++ b/frontend/src/components/Video/VideoPlayer.tsx
@@ -52,7 +52,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
  return (
    <div
      id="video-container"
-      className="h-full flex items-center bg-gray-900 rounded-lg"
+      className="min-w-[65vw] w-full h-full flex items-center bg-gray-900 rounded-lg"
      style={{ gridArea: "1 / 1 / 2 / 2" }}
    >
      <div ref={videoRef} id="video-player" className="w-full" />
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
-import Button from "../components/Layout/Button";
+import Button, { ToggleButton } from "../components/Layout/Button";
 import ChatPanel from "../components/Video/ChatPanel";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
@@ -45,7 +45,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
  useEffect(() => {
    // Fetch stream data for this streamer
    fetch(
-      `/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`}`,
+      `/api/get_stream_data/${streamerName}${
+        streamId == 0 ? "" : `/${streamId}`
+      }`
    ).then((res) => {
      if (!res.ok) {
        console.error("Failed to load stream data:", res.statusText);
@@ -78,23 +80,27 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
  return (
    <SocketProvider>
      <div id="videoPage" className="w-full">
-        <Navbar isChatOpen={isChatOpen} toggleChat={toggleChat} />
+        <Navbar />

        <div
          id="container"
-          className={`grid grid-rows-[auto_1fr] bg-gray-900 h-full ${isChatOpen ? "grid-cols-[3fr_1fr]" : "grid-cols-1"}`}
+          className={`grid ${
+            isChatOpen ? "w-[100vw]" : "w-[125vw]"
+          } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
        >
          <div className="relative">
            <VideoPlayer streamId={streamId} />
          </div>
-          <div
-            id="chat"
-            className={`relative w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 z-10 ${
-              isChatOpen ? "block" : "hidden"
-            }`}
+
+          <ToggleButton
+            onClick={toggleChat}
+            toggled={isChatOpen}
+            extraClasses="absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
          >
-            <ChatPanel streamId={streamId} />
-          </div>
+            {isChatOpen ? "Hide Chat" : "Show Chat"}
+          </ToggleButton>
+
+          <ChatPanel streamId={streamId} />

          <div
            id="stream-info"
@@ -105,8 +111,16 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
              {streamData ? streamData.streamTitle : "Loading..."}
            </h1>
            <div className="flex flex-col gap-2">
-              <div id="streamer" className="flex items-center gap-2 cursor-pointer" onClick={() => navigate(`/user/${streamerName}`)} >
-                <img src="/images/monkey.png" alt="streamer" className="w-10 h-10 bg-indigo-500 rounded-full" />
+              <div
+                id="streamer"
+                className="flex items-center gap-2 cursor-pointer"
+                onClick={() => navigate(`/user/${streamerName}`)}
+              >
+                <img
+                  src="/images/monkey.png"
+                  alt="streamer"
+                  className="w-10 h-10 bg-indigo-500 rounded-full"
+                />
                <span>
                  {streamData ? streamData.streamerName : "Loading..."}
                </span>