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

FEAT: isChatOpen can now be expanded and collapsed

Browse Source
This commit is contained in:
EvanLin3141
2025-02-02 00:54:08 +00:00
parent 36af1efe73
commit f31834bc1d
3 changed files with 92 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Layout/Navbar.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import Logo from "./Logo";
import Button from "./Button";
import Button, {ToggleButton} from "./Button";
import Sidebar from "./Sidebar";
import { Sidebar as SidebarIcon } from "lucide-react";
import {
@@ -16,11 +16,14 @@ import { useAuth } from "../../context/AuthContext";
interface NavbarProps {
variant?: "home" | "default";
isChatOpen: boolean;
toggleChat: () => void;
}
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
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) {
@@ -79,6 +82,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
<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

17
frontend/src/components/Video/ChatPanel.tsx
View File

@@ -21,7 +21,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
const [inputMessage, setInputMessage] = useState("");
const chatContainerRef = useRef<HTMLDivElement>(null);
const { isLoggedIn, username } = useAuth();
const [isChatVisible, setIsChatVisible] = useState(false);
// Join chat room when component mounts
useEffect(() => {
@@ -93,10 +92,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
setInputMessage("");
};
const toggleChat = () => {
setIsChatVisible((prev) => !prev);
};
const handleKeyPress = (e: React.KeyboardEvent) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
@@ -120,14 +115,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
return (
<>
<ToggleButton
onClick={toggleChat}
toggled={isChatVisible}
extraClasses="cursor-pointer"
>
{isChatVisible ? "Hide Chat" : "Show Chat"}
</ToggleButton>
{isChatVisible && (
<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>
@@ -142,8 +129,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
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
className={`font-bold ${msg.chatter_username === username
? "text-blue-400"
: "text-green-400"
}`}
@@ -196,7 +182,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
</div>
)}
</div>
)}
</>
);
};

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

@@ -1,9 +1,8 @@
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 CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
import { useNavigate, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import VideoPlayer from "../components/Video/VideoPlayer";
import { SocketProvider } from "../context/SocketContext";
@@ -26,6 +25,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
const { isLoggedIn } = useAuth();
const { streamerName } = useParams<{ streamerName: string }>();
const [streamData, setStreamData] = useState<StreamDataProps>();
const [isChatOpen, setIsChatOpen] = useState(true);
// const [showCheckout, setShowCheckout] = useState(false);
// const showReturn = window.location.search.includes("session_id");
// const navigate = useNavigate();
@@ -45,8 +45,7 @@ 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) {
@@ -73,19 +72,28 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
});
}, [streamId, streamerName]);
const toggleChat = () => {
setIsChatOpen((prev) => !prev);
};
return (
<SocketProvider>
<div id="videoPage" className="w-full">
<Navbar />
<div id="container" className="grid grid-rows-[auto_1fr] grid-cols-[3fr_1fr] bg-gray-900">
<Navbar isChatOpen={isChatOpen} toggleChat={toggleChat} />
<div id="container" className={`grid grid-rows-[auto_1fr] bg-gray-900 h-full ${isChatOpen ? "grid-cols-[3fr_1fr]" : "grid-cols-1"}`}
>
<div className="relative">
<VideoPlayer streamId={streamId} />
</div>
<div
id="chat"
className="relative top-0 right-0 w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 z-10"
style={{ gridArea: "1 / 2 / 3 / 3" }}
className={`relative w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 z-10 ${
isChatOpen ? "block" : "hidden"
}`}
>
<ChatPanel streamId={streamId} />
</div>
<div
id="stream-info"
className="flex flex-col gap-2 p-4 text-white"