Merge branch 'main' of https://github.com/john-david3/cs3305-team11

2025-02-27 15:50:02 +00:00
parent dd8c953fb7 53cdb87004
commit d31c7f579c
7 changed files with 64 additions and 58 deletions
--- a/frontend/src/components/Layout/DynamicPageContent.tsx
+++ b/frontend/src/components/Layout/DynamicPageContent.tsx
@@ -30,7 +30,7 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
        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}
      </div>
--- a/frontend/src/components/Navigation/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar.tsx
@@ -25,6 +25,7 @@ const Navbar: React.FC<NavbarProps> = ({ 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<NavbarProps> = ({ variant = "default" }) => {

  const handleQuickSettings = () => {
    setShowQuickSettings(!showQuickSettings);
+    setJustToggled(true);
+    setTimeout(() => setJustToggled(false), 750);
  };

  // Keyboard shortcut to toggle sidebar
@@ -95,7 +98,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
        toggled={showQuickSettings}
      >
        <SettingsIcon className="h-[2vw] w-[2vw]" />
-            {showQuickSettings && (
+        {!showQuickSettings && !justToggled && (
          <small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
            Press Q
          </small>
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -25,6 +25,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
  const { username, isLoggedIn } = useAuth();
  const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
  const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
+  const [justToggled, setJustToggled] = useState(false);

  // Fetch followed streamers
  useEffect(() => {
@@ -46,6 +47,8 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {

  const handleSideBar = () => {
    setShowSideBar(!showSideBar);
+    setJustToggled(true);
+    setTimeout(() => setJustToggled(false), 750);
  };

  // Keyboard shortcut to toggle sidebar
@@ -98,7 +101,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
      >
        <SidebarIcon className="h-[2vw] w-[2vw]" />

-        {showSideBar && (
+        {!showSideBar && !justToggled && (
          <small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
            Press S
          </small>
--- a/frontend/src/components/Stream/ChatPanel.tsx
+++ b/frontend/src/components/Stream/ChatPanel.tsx
@@ -30,6 +30,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [inputMessage, setInputMessage] = useState("");
  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const [justToggled, setJustToggled] = useState(false);

  // Join chat room when component mounts
  useEffect(() => {
@@ -114,6 +115,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({

  const toggleChat = () => {
    setShowChat(!showChat);
+    setJustToggled(true);
+    setTimeout(() => setJustToggled(false), 750);
  };

  const sendChat = () => {
@@ -147,11 +150,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
      {/* Toggle Button for Chat */}
      <button
        onClick={toggleChat}
-        className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[3.3vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[50] duration-[0.3s] transition-all`}
+        className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
      >
        {showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}

-        <small className={`absolute ${showChat ? "right-0 group-hover:-right-[4vw]" : "left-0 group-hover:-left-[4vw]"} p-1 rounded-md group-hover:bg-white/10 w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
+        <small className={`absolute ${showChat ? justToggled ? "left-0 group-hover:-left-[4vw] group-hover:bg-white/10" : "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : justToggled ? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : "left-0 group-hover:-left-[4vw] group-hover:bg-white/10"} p-1 rounded-md w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
          Press C
        </small>
      </button>
--- 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}
--- 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<VideoPageProps> = ({ streamerId }) => {
  const { isLoggedIn } = useAuth();
  const { streamerName } = useParams<{ streamerName: string }>();
-  const [streamData, setStreamData] = useState<StreamDataProps>();
+  const [streamData, setStreamData] = useState<StreamType>();
  const [viewerCount, setViewerCount] = useState(0);
  const { showSideBar } = useSidebar();
  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
@@ -66,11 +60,14 @@ const VideoPage: React.FC<VideoPageProps> = ({ 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<VideoPageProps> = ({ 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<VideoPageProps> = ({ streamerId }) => {
                className="text-white font-bold hover:underline mt-[0.5em]"
                onClick={() => navigate(`/user/${streamerName}`)}
              >
-                {streamData ? streamData.streamerName : "Loading..."}
+                {streamerName}
              </button>
            </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..."}
+                {streamData ? streamData.title : "Loading..."}
              </h2>
              <span className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
-                {streamData ? streamData.categoryName : "Loading..."}
+                {streamData ? streamData.streamCategory : "Loading..."}
              </span>
            </div>

--- 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;
  }