Merge branch 'main' of https://github.com/john-david3/cs3305-team11
This commit is contained in:
@@ -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>
|
||||
|
||||
BIN
frontend/public/images/favicon.ico
Normal file
BIN
frontend/public/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
22
frontend/src/pages/VodPlayer.tsx
Normal file
22
frontend/src/pages/VodPlayer.tsx
Normal 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
92
frontend/src/pages/Vods.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user