From b243191b2e97abee3f9dac3fef3a46354067c560 Mon Sep 17 00:00:00 2001 From: Chris-1010 <122332721@umail.ucc.ie> Date: Thu, 6 Mar 2025 22:44:08 +0000 Subject: [PATCH] UPDATE/REFACTOR: Change how VODs are accessed & loaded; FIX: `isLive` -> `streamerIsLive`; FIX: `Sidebar` profile pictures; --- frontend/src/components/Layout/ListItem.tsx | 2 +- frontend/src/components/Layout/ListRow.tsx | 6 ++-- .../src/components/Navigation/Sidebar.tsx | 6 +++- .../src/components/Stream/StreamerRoute.tsx | 8 ++--- .../src/components/Stream/VodsDashboard.tsx | 16 ++------- frontend/src/pages/HomePage.tsx | 13 ++----- frontend/src/pages/UserPage.tsx | 36 ++++++------------- 7 files changed, 28 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/Layout/ListItem.tsx b/frontend/src/components/Layout/ListItem.tsx index 6d24a40..aa62ea9 100644 --- a/frontend/src/components/Layout/ListItem.tsx +++ b/frontend/src/components/Layout/ListItem.tsx @@ -151,7 +151,7 @@ const VodListItem: React.FC = ({
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx index 69ac5e6..b30a4e4 100644 --- a/frontend/src/components/Layout/ListRow.tsx +++ b/frontend/src/components/Layout/ListRow.tsx @@ -17,7 +17,7 @@ interface ListRowProps { description?: string; items: ItemType[]; wrap?: boolean; - onItemClick: (itemName: string) => void; + onItemClick: (itemName: string, username?: string) => void; titleClickable?: boolean; extraClasses?: string; itemExtraClasses?: string; @@ -185,8 +185,8 @@ const ListRow = forwardRef((props, ref) => { category_name={item.category_name} length={item.length} views={item.views} - thumbnail={item.thumbnail} - onItemClick={() => handleVodClick(item)} + thumbnail={`/vods/${item.username}/${item.vod_id}.png`} + onItemClick={() => onItemClick(item.username, item.vod_id.toString())} extraClasses={itemExtraClasses} variant={variant} /> diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx index 7542015..8976adf 100644 --- a/frontend/src/components/Navigation/Sidebar.tsx +++ b/frontend/src/components/Navigation/Sidebar.tsx @@ -120,7 +120,7 @@ const Sidebar: React.FC = ({ extraClasses = "" }) => {

Streamers

-
+
{followedStreamers.map((streamer) => (
= ({ extraClasses = "" }) => { > { + e.currentTarget.src = "/images/pfps/default.png"; + e.currentTarget.onerror = null; + }} alt={`${streamer.username}'s Profile`} className="w-10 h-10 rounded-full object-cover" /> diff --git a/frontend/src/components/Stream/StreamerRoute.tsx b/frontend/src/components/Stream/StreamerRoute.tsx index d120242..eb15922 100644 --- a/frontend/src/components/Stream/StreamerRoute.tsx +++ b/frontend/src/components/Stream/StreamerRoute.tsx @@ -7,7 +7,7 @@ import { ChatProvider } from "../../context/ChatContext"; const StreamerRoute: React.FC = () => { const { streamerName } = useParams(); const [isLoading, setIsLoading] = useState(true); - const [isLive, setIsLive] = useState(false); + const [streamerIsLive, setStreamerIsLive] = useState(false); const [streamId, setStreamId] = useState(0); const navigate = useNavigate(); @@ -16,11 +16,11 @@ const StreamerRoute: React.FC = () => { try { const response = await fetch(`/api/user/${streamerName}/status`); const data = await response.json(); - setIsLive(Boolean(data.is_live)); + setStreamerIsLive(Boolean(data.is_live)); setStreamId(data.user_id); } catch (error) { console.error("Error checking stream status:", error); - setIsLive(false); + setStreamerIsLive(false); } finally { setIsLoading(false); } @@ -36,7 +36,7 @@ const StreamerRoute: React.FC = () => { if (isLoading) return ; - if (isLive) { + if (streamerIsLive) { return ( diff --git a/frontend/src/components/Stream/VodsDashboard.tsx b/frontend/src/components/Stream/VodsDashboard.tsx index ab39a1b..6242b5b 100644 --- a/frontend/src/components/Stream/VodsDashboard.tsx +++ b/frontend/src/components/Stream/VodsDashboard.tsx @@ -10,18 +10,6 @@ interface VodsDashboardProps { const VodsDashboard: React.FC = ({ vods }) => { const navigate = useNavigate(); - const handleVodClick = (vodId: string) => { - if (vods.length > 0) { - navigate(`/stream/${vods[0].username}/vods/${vodId}`); - } - }; - - // Ensure each VOD has a hardcoded thumbnail path - const thumbnails = vods.map((vod) => ({ - ...vod, - thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`, - })); - return (

Past Broadcasts

@@ -34,9 +22,9 @@ const VodsDashboard: React.FC = ({ vods }) => { navigate(`/vods/${username}/${vodId}`) } extraClasses="bg-black/50" itemExtraClasses="w-[20vw]" /> diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index cd2e4c2..5363379 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -6,7 +6,6 @@ import Button from "../components/Input/Button"; import DynamicPageContent from "../components/Layout/DynamicPageContent"; import LoadingScreen from "../components/Layout/LoadingScreen"; import Footer from "../components/Layout/Footer"; -import { useAuth } from "../context/AuthContext"; const HomePage: React.FC = () => { const { streams, isLoading: isLoadingStreams } = useStreams(); @@ -14,16 +13,8 @@ const HomePage: React.FC = () => { const { vods, isLoading: isLoadingVods } = useVods(); const navigate = useNavigate(); - - if (isLoadingStreams || isLoadingCategories || isLoadingVods) return Loading Content...; - const thumbnails = vods.map((vod) => ({ - ...vod, - thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`, - video: `/vods/${vod.username}/${vod.vod_id}.mp4`, - })); - return ( {/* Streams Section */} @@ -60,9 +51,9 @@ const HomePage: React.FC = () => { type="vod" title="Recent VODs" description="Watch the latest recorded streams!" - items={thumbnails} + items={vods} wrap={false} - onItemClick={() => null} + onItemClick={(username, vodId) => navigate(`/vods/${username}/${vodId}`) } extraClasses="bg-black/50" itemExtraClasses="w-[20vw]" /> diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx index 46469a4..5a29fbc 100644 --- a/frontend/src/pages/UserPage.tsx +++ b/frontend/src/pages/UserPage.tsx @@ -36,13 +36,6 @@ const UserPage: React.FC = () => { const navigate = useNavigate(); const { streams } = useStreams(`/api/streams/${username}/data`); const currentStream = streams[0]; - console.log(vods) - - const thumbnails = vods.map((vod) => ({ - ...vod, - thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`, - })); - const fetchProfileData = useCallback(async () => { try { @@ -80,7 +73,7 @@ const UserPage: React.FC = () => { if (response.ok) { console.log("Success"); - console.log(URL.createObjectURL(img)) + console.log(URL.createObjectURL(img)); setProfilePicture(URL.createObjectURL(img)); } } catch (error) { @@ -130,7 +123,7 @@ const UserPage: React.FC = () => { }); if (response.ok) { - setProfileData(prev => prev ? { ...prev, bio: editedBio } : undefined); + setProfileData((prev) => (prev ? { ...prev, bio: editedBio } : undefined)); setIsEditingBio(false); } } catch (error) { @@ -166,7 +159,8 @@ const UserPage: React.FC = () => { {/* Profile Picture */}
@@ -189,7 +183,7 @@ const UserPage: React.FC = () => { }} alt={`${profileData.username}'s profile`} className="sm:w-full h-full object-cover rounded-full group-hover:brightness-50 relative z-0 transition-all" - style={{ backgroundColor: 'white' }} + style={{ backgroundColor: "white" }} /> {/* If current user is the profile user then allow profile picture swap */} @@ -283,10 +277,7 @@ const UserPage: React.FC = () => {
{/* Content Section */} -
+
{/* Stream */} {currentStream && (
@@ -295,7 +286,7 @@ const UserPage: React.FC = () => { font-black mb-4 rounded-full text-center" > Currently Live! - + { {/* VODs */} {vods.length > 0 && (
-

{ - console.log("VOD Clicked:", vod); - }} + items={vods} + onItemClick={(user, vodId) => handleNavigation(`/vods/${user}/${vodId}`)} extraClasses="w-fit max-w-[40vw] py-0 mt-0" amountForScroll={2} itemExtraClasses="w-[15vw]" @@ -342,14 +330,12 @@ const UserPage: React.FC = () => { onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} > - +
handleNavigation(`/user/${username}/vods`)} + onClick={() => handleNavigation(`/vods/${username}`)} onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} >