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

2025-03-03 21:41:16 +00:00
parent 03decdcede 369f6785e5
commit 0ba21a7666
8 changed files with 271 additions and 142 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,8 @@
 <html lang="en" class="min-w-[850px]">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" href="public/images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Team Software Project</title>
  </head>
--- a/frontend/public/images/favicon.ico
+++ b/frontend/public/images/favicon.ico
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -16,6 +16,8 @@ import { Brightness } from "./context/BrightnessContext";
 import LoadingScreen from "./components/Layout/LoadingScreen";
 import Following from "./pages/Following";
 import UnsubscribePage from "./pages/UnsubscribePage";
+import Vods from "./pages/Vods";
+import VodPlayer from "./pages/VodPlayer";

 function App() {
 	const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -77,6 +79,8 @@ function App() {
 								<Route path="/results" element={<ResultsPage />}></Route>
 								<Route path="/404" element={<NotFoundPage />} />
 								<Route path="/user/:username/following" element={<Following />} />
+								<Route path="/user/:username/vods" element={<Vods />} />
+								<Route path="/stream/:username/vods/:vod_id" element={<VodPlayer />} />
 								<Route path="*" element={<Navigate to="/404" replace />} />
 							</Routes>
 						</BrowserRouter>
--- a/frontend/src/components/Input/SearchBar.tsx
+++ b/frontend/src/components/Input/SearchBar.tsx
@@ -1,66 +1,76 @@
-import React, { useState } from "react";
+// In SearchBar.tsx
+import React, { useState, useEffect } from "react";
 import Input from "./Input";
 import { SearchIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";

 interface SearchBarProps {
-  value?: string;
+	value?: string;
+  onSearchResults?: (results: any, query: string) => void;
 }

-const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
-  const [searchQuery, setSearchQuery] = useState(value);
-  //const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
-  const navigate = useNavigate();
+const SearchBar: React.FC<SearchBarProps> = ({ value = "", onSearchResults }) => {
+	const [searchQuery, setSearchQuery] = useState(value);
+	const navigate = useNavigate();

-  const handleSearch = async () => {
-    if (!searchQuery.trim()) return;
+	// Update searchQuery when value prop changes
+	useEffect(() => {
+		setSearchQuery(value);
+	}, [value]);

-    try {
-      const response = await fetch("/api/search", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ query: searchQuery }),
-      });
+	const handleSearch = async () => {
+		if (!searchQuery.trim()) return;

-      const data = await response.json();
+		try {
+			const response = await fetch("/api/search", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ query: searchQuery }),
+			});

-      navigate("/results", {
-        state: { searchResults: data, query: searchQuery },
-      });
+			const data = await response.json();

-      // Handle the search results here
-    } catch (error) {
-      console.error("Error performing search:", error);
-    }
-  };
+			// If we have a callback for search results, use that instead of navigating
+			if (onSearchResults) {
+				onSearchResults(data, searchQuery);
+			} else {
+				// Otherwise navigate to results page with the data
+				navigate("/results", {
+					state: { searchResults: data, query: searchQuery },
+				});
+			}
+		} catch (error) {
+			console.error("Error performing search:", error);
+		}
+	};

-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleSearch();
-    }
-  };
+	const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSearch();
+		}
+	};

-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-  };
+	const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setSearchQuery(e.target.value);
+	};

-  return (
-    <div id="search-bar" className="flex items-center">
-      <Input
-        type="text"
-        placeholder="Search..."
-        value={searchQuery}
-        onChange={handleSearchChange}
-        onKeyDown={handleKeyPress}
-        extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
-      />
+	return (
+		<div id="search-bar" className="flex items-center">
+			<Input
+				type="text"
+				placeholder="Search..."
+				value={searchQuery}
+				onChange={handleSearchChange}
+				onKeyDown={handleKeyPress}
+				extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
+			/>

-      <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
-    </div>
-  );
+			<SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white cursor-pointer" onClick={handleSearch} />
+		</div>
+	);
 };

 export default SearchBar;
--- a/frontend/src/pages/ResultsPage.tsx
+++ b/frontend/src/pages/ResultsPage.tsx
@@ -1,3 +1,4 @@
+// In ResultsPage.tsx
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import SearchBar from "../components/Input/SearchBar";
@@ -5,105 +6,105 @@ import ListRow from "../components/Layout/ListRow";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { getCategoryThumbnail } from "../utils/thumbnailUtils";

-const ResultsPage: React.FC = ({ }) => {
-  const [overflow, setOverflow] = useState(false);
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { searchResults, query } = location.state || {
-    searchResults: { categories: [], users: [], streams: [] },
-    query: "",
-  };
+const ResultsPage: React.FC = () => {
+	const [overflow, setOverflow] = useState(false);
+	const location = useLocation();
+	const navigate = useNavigate();

-  useEffect(() => {
-    const checkHeight = () => {
-      setOverflow(
-        document.documentElement.scrollHeight + 20 > window.innerHeight
-      );
-    };
+	// Initialize with state from navigation, or empty defaults
+	const [searchState, setSearchState] = useState({
+		searchResults: location.state?.searchResults || { categories: [], users: [], streams: [] },
+		query: location.state?.query || "",
+	});

-    checkHeight();
-    window.addEventListener("resize", checkHeight);
+	// Handle new search results
+	const handleSearchResults = (results: any, newQuery: string) => {
+		console.log("New search results:", results);
+		setSearchState({
+			searchResults: results,
+			query: newQuery,
+		});

-    return () => window.removeEventListener("resize", checkHeight);
-  }, []);
+		// Update URL state without navigation
+		window.history.replaceState({ searchResults: results, query: newQuery }, "", "/results");
+	};

-  return (
-    <DynamicPageContent id="results-page" navbarVariant="no-searchbar">
-      <div className="flex flex-col items-center justify-evenly gap-4 p-4">
-        <h1 className="text-3xl font-bold mb-4">
-          Search results for "{query}"
-        </h1>
-        <SearchBar value={query} />
+	useEffect(() => {
+		// If location state changes, update our internal state
+		if (location.state) {
+			setSearchState({
+				searchResults: location.state.searchResults,
+				query: location.state.query,
+			});
+		}
+	}, [location.state]);

-        <div id="results" className="flex flex-col flex-grow gap-10 w-full">
-          <ListRow
-            variant="search"
-            type="stream"
-            items={searchResults.streams.map((stream: any) => ({
-              id: stream.user_id,
-              type: "stream",
-              title: stream.title,
-              username: stream.username,
-              streamCategory: stream.category_name,
-              viewers: stream.num_viewers,
-              thumbnail: stream.thumbnail_url,
-            }))}
-            title="Streams"
-            onItemClick={(streamer_name: string) =>
-              (window.location.href = `/${streamer_name}`)
-            }
-            extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
-            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
-            amountForScroll={3}
-          />
+	return (
+		<DynamicPageContent id="results-page" navbarVariant="no-searchbar">
+			<div className="flex flex-col items-center justify-evenly gap-4 p-4">
+				<h1 className="text-3xl font-bold mb-4">Search results for "{searchState.query}"</h1>
+				<SearchBar value={searchState.query} onSearchResults={(results, query) => handleSearchResults(results, query)} />

-          <ListRow
-            variant="search"
-            type="category"
-            items={searchResults.categories.map((category: any) => ({
-              id: category.category_id,
-              type: "category",
-              title: category.category_name,
-              viewers: 0,
-              thumbnail: getCategoryThumbnail(category.category_name),
-            }))}
-            title="Categories"
-            onItemClick={(category_name: string) =>
-              navigate(`/category/${category_name}`)
-            }
-            titleClickable={true}
-            extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
-            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
-            amountForScroll={3}
-          />
+				<div id="results" className="flex flex-col flex-grow gap-10 w-full">
+					<ListRow
+						key={`stream-results-${searchState.query}`}
+						variant="search"
+						type="stream"
+						items={searchState.searchResults.streams.map((stream: any) => ({
+							id: stream.user_id,
+							type: "stream",
+							title: stream.title,
+							username: stream.username,
+							streamCategory: stream.category_name,
+							viewers: stream.num_viewers,
+							thumbnail: stream.thumbnail_url,
+						}))}
+						title="Streams"
+						onItemClick={(streamer_name: string) => (window.location.href = `/${streamer_name}`)}
+						extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
+						itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+						amountForScroll={3}
+					/>

-          <ListRow
-            variant="search"
-            type="user"
-            items={searchResults.users.map((user: any) => ({
-              id: user.user_id,
-              type: "user",
-              title: `${user.is_live ? "🔴" : ""} ${user.username}`,
-              username: user.username
-            }))}
-            title="Users"
-            onItemClick={(username: string) =>
-              (window.location.href = `/user/${username}`)
-            }
-            amountForScroll={3}
-            extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
-            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
-          />
-        </div>
+					<ListRow
+						key={`category-results-${searchState.query}`}
+						variant="search"
+						type="category"
+						items={searchState.searchResults.categories.map((category: any) => ({
+							id: category.category_id,
+							type: "category",
+							title: category.category_name,
+							viewers: 0,
+							thumbnail: getCategoryThumbnail(category.category_name),
+						}))}
+						title="Categories"
+						onItemClick={(category_name: string) => navigate(`/category/${category_name}`)}
+						titleClickable={true}
+						extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
+						itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+						amountForScroll={3}
+					/>

-        <div
-          className={`${overflow && "absolute top-[5vh] right-[2vw]"
-            } flex gap-[2vw]`}
-        >
-        </div>
-      </div>
-    </DynamicPageContent>
-  );
+					<ListRow
+						key={`user-results-${searchState.query}`}
+						variant="search"
+						type="user"
+						items={searchState.searchResults.users.map((user: any) => ({
+							id: user.user_id,
+							type: "user",
+							title: `${user.is_live ? "🔴" : ""} ${user.username}`,
+							username: user.username,
+						}))}
+						title="Users"
+						onItemClick={(username: string) => (window.location.href = `/user/${username}`)}
+						amountForScroll={3}
+						extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
+						itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+					/>
+				</div>
+			</div>
+		</DynamicPageContent>
+	);
 };

 export default ResultsPage;
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -278,9 +278,8 @@ const UserPage: React.FC = () => {
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<ul className="list-none">
-								<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">Streamers</li>
-							</ul>
+							<button onClick={() => handleNavigation(`/user/${username}/vods`)}>Categories</button>
+
 						</div>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
--- a/frontend/src/pages/VodPlayer.tsx
+++ b/frontend/src/pages/VodPlayer.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+const VodPlayer: React.FC = () => {
+  const params = useParams<{ vod_id?: string; username?: string }>();
+  const vod_id = params.vod_id || "unknown";
+  const username = params.username || "unknown";
+
+  const videoUrl = `/vods/${username}/${vod_id}.mp4`;
+
+  return (
+    <div className="p-4 flex flex-col items-center">
+      <h1 className="text-2xl font-bold mb-4">Watching VOD {vod_id}</h1>
+      <video controls className="w-full max-w-4xl rounded-lg shadow-lg">
+        <source src={videoUrl} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
+export default VodPlayer;
--- a/frontend/src/pages/Vods.tsx
+++ b/frontend/src/pages/Vods.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate, useParams } from "react-router-dom";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+
+interface Vod {
+  vod_id: number;
+  title: string;
+  datetime: string;
+  username: string;
+  category_name: string;
+  length: number;
+  views: number;
+}
+
+const Vods: React.FC = () => {
+  const navigate = useNavigate();
+  const { username } = useParams<{ username?: string }>();
+  const { isLoggedIn } = useAuth();
+  const [ownedVods, setOwnedVods] = useState<Vod[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!username) return;
+
+    const fetchVods = async () => {
+      try {
+        const response = await fetch(`/api/vods/${username}`);
+        if (!response.ok) throw new Error(`Failed to fetch VODs: ${response.statusText}`);
+
+        const data = await response.json();
+        setOwnedVods(data);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Error fetching VODs.";
+        setError(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVods();
+  }, [username]);
+
+  if (loading) return <p className="text-center">Loading VODs...</p>;
+  if (error) return <p className="text-center text-red-500">{error}</p>;
+
+  return (
+    <DynamicPageContent>
+      <div className="p-4">
+        <h1 className="text-2xl font-bold mb-4">{username}'s VODs</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {ownedVods.length === 0 ? (
+            <p className="col-span-full text-center">No VODs available.</p>
+          ) : (
+            ownedVods.map((vod) => {
+              const thumbnailUrl = `/stream/${username}/vods/${vod.vod_id}.png`;
+
+              return (
+                <div
+                  key={vod.vod_id}
+                  className="border rounded-lg p-4 bg-gray-800 text-white cursor-pointer hover:bg-gray-700 transition"
+                  onClick={() => navigate(`/stream/${username}/vods/${vod.vod_id}`)}
+                >
+                  {/* Thumbnail */}
+                  <img
+                    src={thumbnailUrl}
+                    alt={`Thumbnail for ${vod.title}`}
+                    className="w-full h-40 object-cover rounded-md mb-2"
+                    onError={(e) => {
+                      e.currentTarget.onerror = null;
+                      e.currentTarget.src = "/default-thumbnail.png";
+                    }}
+                  />
+
+                  {/* Video Info */}
+                  <h2 className="text-lg font-semibold">{vod.title}</h2>
+                  <p className="text-sm">📅 {new Date(vod.datetime).toLocaleString()}</p>
+                  <p className="text-sm">🎮 {vod.category_name}</p>
+                  <p className="text-sm">⏱ {Math.floor(vod.length / 60)} min</p>
+                  <p className="text-sm">👀 {vod.views} views</p>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </DynamicPageContent>
+  );
+};
+
+export default Vods;