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

28
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">
<VideoPlayer streamId={streamId} />
<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"