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

FIX: Thumbnails in VodsDashboard

Browse Source
This commit is contained in:
EvanLin3141
2025-03-05 16:32:12 +00:00
parent 741a6f605b
commit 5c0e4a006f
2 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/Stream/VodsDashboard.tsx
View File

@@ -1,37 +1,48 @@
import React from "react"; import React from "react";
import ListRow from "../Layout/ListRow"; import ListRow from "../Layout/ListRow";
import { VodType } from "../../types/VodType"; import { VodType } from "../../types/VodType";
import { useNavigate } from "react-router-dom";
interface VodsDashboardProps { interface VodsDashboardProps {
vods: VodType[]; vods: VodType[];
} }
const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => { const VodsDashboard: React.FC<VodsDashboardProps> = ({ vods }) => {
const handleVodClick = (vodUrl: string) => { const navigate = useNavigate();
window.open(vodUrl, "_blank");
};
return ( const handleVodClick = (vodId: string) => {
<div className="w-full"> if (vods.length > 0) {
<h2 className="text-3xl font-bold text-white mb-6">Past Broadcasts</h2> navigate(`/stream/${vods[0].username}/vods/${vodId}`);
}
};
{vods.length === 0 ? ( // Ensure each VOD has a hardcoded thumbnail path
<div className="text-center text-gray-400 py-8"> const thumbnails = vods.map((vod) => ({
<p>No past broadcasts found</p> ...vod,
</div> thumbnail: `/vods/${vod.username}/${vod.vod_id}.png`,
) : ( }));
<ListRow
type="vod" return (
variant="vodDashboard" <div className="w-full">
items={vods} <h2 className="text-3xl font-bold text-white mb-6">Past Broadcasts</h2>
wrap={false}
onItemClick={handleVodClick} {vods.length === 0 ? (
extraClasses="bg-black/50" <div className="text-center text-gray-400 py-8">
itemExtraClasses="w-[20vw]" <p>No past broadcasts found</p>
/> </div>
)} ) : (
</div> <ListRow
); type="vod"
variant="vodDashboard"
items={thumbnails} // Use modified VODs with hardcoded thumbnail
wrap={false}
onItemClick={handleVodClick}
extraClasses="bg-black/50"
itemExtraClasses="w-[20vw]"
/>
)}
</div>
);
}; };
export default VodsDashboard; export default VodsDashboard;

2
frontend/src/pages/Vods.tsx
View File

@@ -50,7 +50,7 @@ const Vods: React.FC = () => {
<div className="mt-[3em] w-screen flex justify-center"> <div className="mt-[3em] w-screen flex justify-center">
<div <div
id="vods-container" id="vods-container"
className="w-[96vw] bg-slate-50/35 rounded-lg p-4 overflow-x-auto whitespace-nowrap scrollbar-hide" className="w-[96vw] bg-slate-50/35 rounded-lg p-4 overflow-x-auto whitespace-nowrap scrollbar-hide pb-7"
> >
<h1 className="text-2xl font-bold text-center mb-4">{username}'s VODs</h1> <h1 className="text-2xl font-bold text-center mb-4">{username}'s VODs</h1>