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

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

Browse Source
This commit is contained in:
Dylan De Faoite
2025-03-03 21:41:16 +00:00
parent 03decdcede 369f6785e5
commit 0ba21a7666
8 changed files with 271 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/index.html
View File

@@ -2,7 +2,8 @@
<html lang="en" class="min-w-[850px]"> <html lang="en" class="min-w-[850px]">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Team Software Project</title> <title>Team Software Project</title>
</head> </head>

BIN
frontend/public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
frontend/src/App.tsx
View File

@@ -16,6 +16,8 @@ import { Brightness } from "./context/BrightnessContext";
import LoadingScreen from "./components/Layout/LoadingScreen"; import LoadingScreen from "./components/Layout/LoadingScreen";
import Following from "./pages/Following"; import Following from "./pages/Following";
import UnsubscribePage from "./pages/UnsubscribePage"; import UnsubscribePage from "./pages/UnsubscribePage";
import Vods from "./pages/Vods";
import VodPlayer from "./pages/VodPlayer";
function App() { function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -77,6 +79,8 @@ function App() {
<Route path="/results" element={<ResultsPage />}></Route> <Route path="/results" element={<ResultsPage />}></Route>
<Route path="/404" element={<NotFoundPage />} /> <Route path="/404" element={<NotFoundPage />} />
<Route path="/user/:username/following" element={<Following />} /> <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 />} /> <Route path="*" element={<Navigate to="/404" replace />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

22
frontend/src/components/Input/SearchBar.tsx
View File

@@ -1,17 +1,23 @@
import React, { useState } from "react"; // In SearchBar.tsx
import React, { useState, useEffect } from "react";
import Input from "./Input"; import Input from "./Input";
import { SearchIcon } from "lucide-react"; import { SearchIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
interface SearchBarProps { interface SearchBarProps {
value?: string; value?: string;
onSearchResults?: (results: any, query: string) => void;
} }
const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => { const SearchBar: React.FC<SearchBarProps> = ({ value = "", onSearchResults }) => {
const [searchQuery, setSearchQuery] = useState(value); const [searchQuery, setSearchQuery] = useState(value);
//const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
const navigate = useNavigate(); const navigate = useNavigate();
// Update searchQuery when value prop changes
useEffect(() => {
setSearchQuery(value);
}, [value]);
const handleSearch = async () => { const handleSearch = async () => {
if (!searchQuery.trim()) return; if (!searchQuery.trim()) return;
@@ -26,11 +32,15 @@ const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
const data = await response.json(); const data = await response.json();
// 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", { navigate("/results", {
state: { searchResults: data, query: searchQuery }, state: { searchResults: data, query: searchQuery },
}); });
}
// Handle the search results here
} catch (error) { } catch (error) {
console.error("Error performing search:", error); console.error("Error performing search:", error);
} }
@@ -58,7 +68,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]" 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" /> <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white cursor-pointer" onClick={handleSearch} />
</div> </div>
); );
}; };

77
frontend/src/pages/ResultsPage.tsx
View File

@@ -1,3 +1,4 @@
// In ResultsPage.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import SearchBar from "../components/Input/SearchBar"; import SearchBar from "../components/Input/SearchBar";
@@ -5,41 +6,51 @@ import ListRow from "../components/Layout/ListRow";
import DynamicPageContent from "../components/Layout/DynamicPageContent"; import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { getCategoryThumbnail } from "../utils/thumbnailUtils"; import { getCategoryThumbnail } from "../utils/thumbnailUtils";
const ResultsPage: React.FC = ({ }) => { const ResultsPage: React.FC = () => {
const [overflow, setOverflow] = useState(false); const [overflow, setOverflow] = useState(false);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const { searchResults, query } = location.state || {
searchResults: { categories: [], users: [], streams: [] }, // Initialize with state from navigation, or empty defaults
query: "", const [searchState, setSearchState] = useState({
searchResults: location.state?.searchResults || { categories: [], users: [], streams: [] },
query: location.state?.query || "",
});
// Handle new search results
const handleSearchResults = (results: any, newQuery: string) => {
console.log("New search results:", results);
setSearchState({
searchResults: results,
query: newQuery,
});
// Update URL state without navigation
window.history.replaceState({ searchResults: results, query: newQuery }, "", "/results");
}; };
useEffect(() => { useEffect(() => {
const checkHeight = () => { // If location state changes, update our internal state
setOverflow( if (location.state) {
document.documentElement.scrollHeight + 20 > window.innerHeight setSearchState({
); searchResults: location.state.searchResults,
}; query: location.state.query,
});
checkHeight(); }
window.addEventListener("resize", checkHeight); }, [location.state]);
return () => window.removeEventListener("resize", checkHeight);
}, []);
return ( return (
<DynamicPageContent id="results-page" navbarVariant="no-searchbar"> <DynamicPageContent id="results-page" navbarVariant="no-searchbar">
<div className="flex flex-col items-center justify-evenly gap-4 p-4"> <div className="flex flex-col items-center justify-evenly gap-4 p-4">
<h1 className="text-3xl font-bold mb-4"> <h1 className="text-3xl font-bold mb-4">Search results for "{searchState.query}"</h1>
Search results for "{query}" <SearchBar value={searchState.query} onSearchResults={(results, query) => handleSearchResults(results, query)} />
</h1>
<SearchBar value={query} />
<div id="results" className="flex flex-col flex-grow gap-10 w-full"> <div id="results" className="flex flex-col flex-grow gap-10 w-full">
<ListRow <ListRow
key={`stream-results-${searchState.query}`}
variant="search" variant="search"
type="stream" type="stream"
items={searchResults.streams.map((stream: any) => ({ items={searchState.searchResults.streams.map((stream: any) => ({
id: stream.user_id, id: stream.user_id,
type: "stream", type: "stream",
title: stream.title, title: stream.title,
@@ -49,18 +60,17 @@ const ResultsPage: React.FC = ({ }) => {
thumbnail: stream.thumbnail_url, thumbnail: stream.thumbnail_url,
}))} }))}
title="Streams" title="Streams"
onItemClick={(streamer_name: string) => onItemClick={(streamer_name: string) => (window.location.href = `/${streamer_name}`)}
(window.location.href = `/${streamer_name}`)
}
extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]" extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
itemExtraClasses="min-w-[calc(12vw+12vh/2)]" itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3} amountForScroll={3}
/> />
<ListRow <ListRow
key={`category-results-${searchState.query}`}
variant="search" variant="search"
type="category" type="category"
items={searchResults.categories.map((category: any) => ({ items={searchState.searchResults.categories.map((category: any) => ({
id: category.category_id, id: category.category_id,
type: "category", type: "category",
title: category.category_name, title: category.category_name,
@@ -68,9 +78,7 @@ const ResultsPage: React.FC = ({ }) => {
thumbnail: getCategoryThumbnail(category.category_name), thumbnail: getCategoryThumbnail(category.category_name),
}))} }))}
title="Categories" title="Categories"
onItemClick={(category_name: string) => onItemClick={(category_name: string) => navigate(`/category/${category_name}`)}
navigate(`/category/${category_name}`)
}
titleClickable={true} titleClickable={true}
extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]" extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
itemExtraClasses="min-w-[calc(12vw+12vh/2)]" itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
@@ -78,29 +86,22 @@ const ResultsPage: React.FC = ({ }) => {
/> />
<ListRow <ListRow
key={`user-results-${searchState.query}`}
variant="search" variant="search"
type="user" type="user"
items={searchResults.users.map((user: any) => ({ items={searchState.searchResults.users.map((user: any) => ({
id: user.user_id, id: user.user_id,
type: "user", type: "user",
title: `${user.is_live ? "🔴" : ""} ${user.username}`, title: `${user.is_live ? "🔴" : ""} ${user.username}`,
username: user.username username: user.username,
}))} }))}
title="Users" title="Users"
onItemClick={(username: string) => onItemClick={(username: string) => (window.location.href = `/user/${username}`)}
(window.location.href = `/user/${username}`)
}
amountForScroll={3} amountForScroll={3}
extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]" extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
itemExtraClasses="min-w-[calc(12vw+12vh/2)]" itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
/> />
</div> </div>
<div
className={`${overflow && "absolute top-[5vh] right-[2vw]"
} flex gap-[2vw]`}
>
</div>
</div> </div>
</DynamicPageContent> </DynamicPageContent>
); );

5
frontend/src/pages/UserPage.tsx
View File

@@ -278,9 +278,8 @@ const UserPage: React.FC = () => {
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
<ul className="list-none"> <button onClick={() => handleNavigation(`/user/${username}/vods`)}>Categories</button>
<li className="text-[var(--follow-text)] whitespace-pre-wrap list-none">Streamers</li>
</ul>
</div> </div>
<div <div
className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300

22
frontend/src/pages/VodPlayer.tsx Normal file
View File

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

92
frontend/src/pages/Vods.tsx Normal file
View File

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