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

FIX: VOD results on ResultsPage;

Browse Source 
FIX: Correct aspect-ratio of users' profile pictures on `ResultsPage`;
UPDATE: Remove elements from `VodListItem` that are not being used;
This commit is contained in:
Chris-1010
2025-03-06 23:28:28 +00:00
parent 38f8c52ad8
commit 1173896710
3 changed files with 7 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/Layout/ListItem.tsx
View File

@@ -90,7 +90,7 @@ const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, on
e.currentTarget.onerror = null; e.currentTarget.onerror = null;
}} }}
alt={`user ${username}`} alt={`user ${username}`}
className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer" className="rounded-xl border-[0.15em] border-[var(--bg-color)] aspect-video cursor-pointer"
style={{ backgroundColor: 'white' }} style={{ backgroundColor: 'white' }}
/> />
<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">{title}</button> <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">{title}</button>
@@ -134,7 +134,7 @@ const VodListItem: React.FC<VodListItemProps> = ({
<img src={thumbnail} alt={title} className="absolute top-0 left-0 w-full h-full object-cover" /> <img src={thumbnail} alt={title} className="absolute top-0 left-0 w-full h-full object-cover" />
{/* Duration badge */} {/* Duration badge */}
<div className="absolute bottom-2 right-2 bg-black/80 text-white px-2 py-1 text-xs rounded">{length}</div> {length && <div className="absolute bottom-2 right-2 bg-black/80 text-white px-2 py-1 text-xs rounded">{length}</div>}
</div> </div>
<div className="p-3"> <div className="p-3">
@@ -142,8 +142,8 @@ const VodListItem: React.FC<VodListItemProps> = ({
{variant != "vodDashboard" && <p className="text-sm text-gray-300">{username}</p>} {variant != "vodDashboard" && <p className="text-sm text-gray-300">{username}</p>}
<p className="text-sm text-gray-400">{category_name}</p> <p className="text-sm text-gray-400">{category_name}</p>
<div className="flex justify-between items-center mt-2"> <div className="flex justify-between items-center mt-2">
<p className="text-xs text-gray-500">{datetime}</p> {datetime && <p className="text-xs text-gray-500">{datetime}</p>}
<p className="text-xs text-gray-500">{views} views</p> {/* <p className="text-xs text-gray-500">{views} views</p> */}
</div> </div>
</div> </div>
</div> </div>

7
frontend/src/components/Layout/ListRow.tsx
View File

@@ -50,12 +50,6 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
const scrollAmount = window.innerWidth * 0.4; const scrollAmount = window.innerWidth * 0.4;
const navigate = useNavigate(); const navigate = useNavigate();
const handleVodClick = (item: VodType) => {
if (type === "vod" && "username" in item && "vod_id" in item) {
navigate(`/stream/${item.username}/vods/${item.vod_id}`); // ✅ Directly navigate
}
};
const addMoreItems = (newItems: ItemType[]) => { const addMoreItems = (newItems: ItemType[]) => {
setCurrentItems((prevItems) => [...prevItems, ...newItems]); setCurrentItems((prevItems) => [...prevItems, ...newItems]);
}; };
@@ -175,6 +169,7 @@ const ListRow = forwardRef<ListRowRef, ListRowProps>((props, ref) => {
/> />
); );
} else if (type === "vod" && isVodType(item)) { } else if (type === "vod" && isVodType(item)) {
console.log(item);
return ( return (
<VodListItem <VodListItem
key={`vod-${item.vod_id}`} key={`vod-${item.vod_id}`}

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

@@ -106,11 +106,10 @@ const ResultsPage: React.FC = () => {
variant="search" variant="search"
type="vod" type="vod"
items={searchState.searchResults.vods.map((vod: any) => ({ items={searchState.searchResults.vods.map((vod: any) => ({
id: vod.vod_id, vod_id: vod.vod_id,
type: "vod", type: "vod",
title: vod.title, title: vod.title,
username: vod.username, username: vod.username
thumbnail: vod.thumbnail_url,
}))} }))}
title="VODs" title="VODs"
onItemClick={(username, vod_id) => navigate(`/vods/${username}/${vod_id}`)} onItemClick={(username, vod_id) => navigate(`/vods/${username}/${vod_id}`)}