From 56985f8f6a87f898c92a2f9c623d68259c15582d Mon Sep 17 00:00:00 2001 From: Chris-1010 <122332721@umail.ucc.ie> Date: Thu, 27 Feb 2025 14:15:19 +0000 Subject: [PATCH 1/2] REFACTOR: Use `StreamType` instead of `StreamDataProps` on `VideoPage` --- frontend/src/pages/VideoPage.tsx | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx index 02a7b73..11e91c2 100644 --- a/frontend/src/pages/VideoPage.tsx +++ b/frontend/src/pages/VideoPage.tsx @@ -10,6 +10,7 @@ import { SocketProvider } from "../context/SocketContext"; import { useAuthModal } from "../hooks/useAuthModal"; import { useFollow } from "../hooks/useFollow"; import { useChat } from "../context/ChatContext"; +import { StreamType } from "../types/StreamType"; // Lazy load the CheckoutForm component const CheckoutForm = lazy(() => import("../components/Checkout/CheckoutForm")); @@ -18,17 +19,10 @@ interface VideoPageProps { streamerId: number; } -interface StreamDataProps { - streamTitle: string; - streamerName: string; - startTime: string; - categoryName: string; -} - const VideoPage: React.FC = ({ streamerId }) => { const { isLoggedIn } = useAuth(); const { streamerName } = useParams<{ streamerName: string }>(); - const [streamData, setStreamData] = useState(); + const [streamData, setStreamData] = useState(); const [viewerCount, setViewerCount] = useState(0); const { showSideBar } = useSidebar(); const { isFollowing, checkFollowStatus, followUser, unfollowUser } = @@ -66,11 +60,14 @@ const VideoPage: React.FC = ({ streamerId }) => { res .json() .then((data) => { - const transformedData: StreamDataProps = { - streamerName: data.username, - streamTitle: data.title, + const transformedData: StreamType = { + type: "stream", + id: data.stream_id, + username: data.username, + title: data.title, startTime: data.start_time, - categoryName: data.category_name, + streamCategory: data.category_name, + viewers: data.viewers, }; setStreamData(transformedData); @@ -134,7 +131,6 @@ const VideoPage: React.FC = ({ streamerId }) => { fetch(`/api/user/subscription/${streamerName}/expiration`) .then((response) => response.json()) .then((data) => { - console.log(streamData?.streamerName, data.remaining_time); if (data.remaining_time > 0) { setIsSubscribed(true); } @@ -183,17 +179,17 @@ const VideoPage: React.FC = ({ streamerId }) => { className="text-white font-bold hover:underline mt-[0.5em]" onClick={() => navigate(`/user/${streamerName}`)} > - {streamData ? streamData.streamerName : "Loading..."} + {streamerName} {/* Stream Title */}

- {streamData ? streamData.streamTitle : "Loading..."} + {streamData ? streamData.title : "Loading..."}

- {streamData ? streamData.categoryName : "Loading..."} + {streamData ? streamData.streamCategory : "Loading..."}
From 53cdb8700458c6a04d56e8ffd5bbe200b5c1789e Mon Sep 17 00:00:00 2001 From: Chris-1010 <122332721@umail.ucc.ie> Date: Thu, 27 Feb 2025 15:30:12 +0000 Subject: [PATCH 2/2] REFACTOR: Styles; UPDATE: Remove shortcut tips teleporting on toggle; FIX: Clicking on a category on `AllCategoriesPage` now correctly routes; REFACTOR: Update `StreamType` to match backend return structure; --- .../components/Layout/DynamicPageContent.tsx | 2 +- frontend/src/components/Navigation/Navbar.tsx | 77 ++++++++++--------- .../src/components/Navigation/Sidebar.tsx | 5 +- frontend/src/components/Stream/ChatPanel.tsx | 7 +- frontend/src/pages/AllCategoriesPage.tsx | 2 +- frontend/src/types/StreamType.ts | 1 + 6 files changed, 52 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/Layout/DynamicPageContent.tsx b/frontend/src/components/Layout/DynamicPageContent.tsx index 87f6f45..8a8049f 100644 --- a/frontend/src/components/Layout/DynamicPageContent.tsx +++ b/frontend/src/components/Layout/DynamicPageContent.tsx @@ -30,7 +30,7 @@ const DynamicPageContent: React.FC = ({ id="content" className={`min-w-[850px] ${ showSideBar ? "w-[85vw] translate-x-[15vw]" : "w-[100vw]" - } items-start pb-[12vh] transition-all duration-[500ms] ease-in-out ${contentClassName}`} + } items-start transition-all duration-[500ms] ease-in-out ${contentClassName}`} > {children} diff --git a/frontend/src/components/Navigation/Navbar.tsx b/frontend/src/components/Navigation/Navbar.tsx index 3e91eb6..219b3ed 100644 --- a/frontend/src/components/Navigation/Navbar.tsx +++ b/frontend/src/components/Navigation/Navbar.tsx @@ -25,6 +25,7 @@ const Navbar: React.FC = ({ variant = "default" }) => { const { showAuthModal, setShowAuthModal } = useAuthModal(); const { showSideBar } = useSidebar(); const { showQuickSettings, setShowQuickSettings } = useQuickSettings(); + const [justToggled, setJustToggled] = React.useState(false); const handleLogout = () => { console.log("Logging out..."); @@ -38,6 +39,8 @@ const Navbar: React.FC = ({ variant = "default" }) => { const handleQuickSettings = () => { setShowQuickSettings(!showQuickSettings); + setJustToggled(true); + setTimeout(() => setJustToggled(false), 750); }; // Keyboard shortcut to toggle sidebar @@ -65,43 +68,43 @@ const Navbar: React.FC = ({ variant = "default" }) => { > {isLoggedIn && window.innerWidth > 900 && } - {/* Login / Logout Button */} - - {/* Quick Settings Sidebar */} - handleQuickSettings()} - toggled={showQuickSettings} - > - - {showQuickSettings && ( - - Press Q - - )} - - + {/* Login / Logout Button */} + + {/* Quick Settings Sidebar */} + handleQuickSettings()} + toggled={showQuickSettings} + > + + {!showQuickSettings && !justToggled && ( + + Press Q + + )} + + {variant != "no-searchbar" && } diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx index da7e580..8ae95bd 100644 --- a/frontend/src/components/Navigation/Sidebar.tsx +++ b/frontend/src/components/Navigation/Sidebar.tsx @@ -25,6 +25,7 @@ const Sidebar: React.FC = ({ extraClasses = "" }) => { const { username, isLoggedIn } = useAuth(); const [followedStreamers, setFollowedStreamers] = useState([]); const [followedCategories, setFollowedCategories] = useState([]); + const [justToggled, setJustToggled] = useState(false); // Fetch followed streamers useEffect(() => { @@ -46,6 +47,8 @@ const Sidebar: React.FC = ({ extraClasses = "" }) => { const handleSideBar = () => { setShowSideBar(!showSideBar); + setJustToggled(true); + setTimeout(() => setJustToggled(false), 750); }; // Keyboard shortcut to toggle sidebar @@ -98,7 +101,7 @@ const Sidebar: React.FC = ({ extraClasses = "" }) => { > - {showSideBar && ( + {!showSideBar && !justToggled && ( Press S diff --git a/frontend/src/components/Stream/ChatPanel.tsx b/frontend/src/components/Stream/ChatPanel.tsx index 13d8149..5a2a9bb 100644 --- a/frontend/src/components/Stream/ChatPanel.tsx +++ b/frontend/src/components/Stream/ChatPanel.tsx @@ -30,6 +30,7 @@ const ChatPanel: React.FC = ({ const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const chatContainerRef = useRef(null); + const [justToggled, setJustToggled] = useState(false); // Join chat room when component mounts useEffect(() => { @@ -114,6 +115,8 @@ const ChatPanel: React.FC = ({ const toggleChat = () => { setShowChat(!showChat); + setJustToggled(true); + setTimeout(() => setJustToggled(false), 750); }; const sendChat = () => { @@ -147,11 +150,11 @@ const ChatPanel: React.FC = ({ {/* Toggle Button for Chat */} diff --git a/frontend/src/pages/AllCategoriesPage.tsx b/frontend/src/pages/AllCategoriesPage.tsx index 26fffcb..f32d33c 100644 --- a/frontend/src/pages/AllCategoriesPage.tsx +++ b/frontend/src/pages/AllCategoriesPage.tsx @@ -87,7 +87,7 @@ const AllCategoriesPage: React.FC = () => { type="category" title="All Categories" items={categories} - onClick={handleCategoryClick} + onItemClick={handleCategoryClick} extraClasses="bg-[var(--recommend)] text-center" itemExtraClasses="w-[20vw]" wrap={true} diff --git a/frontend/src/types/StreamType.ts b/frontend/src/types/StreamType.ts index c6d4d58..6a1445c 100644 --- a/frontend/src/types/StreamType.ts +++ b/frontend/src/types/StreamType.ts @@ -5,5 +5,6 @@ export interface StreamType { username: string; streamCategory: string; viewers: number; + startTime?: string; thumbnail?: string; } \ No newline at end of file