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

Feat: Update to VideoPage to display stream data;

Browse Source
This commit is contained in:
Chris-1010
2025-01-28 21:06:23 +00:00
parent e384976686
commit a4f66ba321
12 changed files with 215 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/Layout/BaseLayout.tsx
View File

@@ -1,24 +0,0 @@
// base.html
// src/components/Layout/BaseLayout.tsx
import React from 'react';
interface BaseLayoutProps {
children: React.ReactNode;
}
const BaseLayout: React.FC<BaseLayoutProps> = ({ children }) => {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Stream</title>
</head>
<body>
{children}
</body>
</html>
);
};
export default BaseLayout;

87
frontend/src/components/Layout/ListRow.tsx Normal file
View File

@@ -0,0 +1,87 @@
import React from "react";
interface ListItemProps {
type: "stream" | "category";
id: number;
title: string;
streamer?: string;
viewers: number;
thumbnail?: string;
onItemClick?: () => void;
}
interface ListRowProps {
type: "stream" | "category";
title: string;
description: string;
items: ListItemProps[];
onClick: (itemId: number, itemName: string) => void;
}
// Individual list entry component
const ListItem: React.FC<ListItemProps> = ({
type,
title,
streamer,
viewers,
thumbnail,
onItemClick,
}) => {
return (
<div
className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
onClick={onItemClick}
>
<div className="relative w-full pt-[56.25%]">
{thumbnail ? (
<img
src={`images/` + thumbnail}
alt={title}
className="absolute top-0 left-0 w-full h-full object-cover"
/>
) : (
<div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
)}
</div>
<div className="p-3">
<h3 className="font-semibold text-lg">{title}</h3>
{type === "stream" && <p className="text-gray-400">{streamer}</p>}
<p className="text-sm text-gray-500">{viewers} viewers</p>
</div>
</div>
);
};
// Row of entries
const ListRow: React.FC<ListRowProps> = ({
title,
description,
items,
onClick,
}) => {
return (
<div className="flex flex-col space-y-4 py-6">
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>
<p className="text-gray-400">{description}</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{items.map((item) => (
<ListItem
key={item.id}
id={item.id}
type={item.type}
title={item.title}
streamer={item.type === "stream" ? (item.streamer) : undefined}
viewers={item.viewers}
onItemClick={() =>
onClick?.(item.id, item.streamer || item.title)
}
/>
))}
</div>
</div>
);
};
export default ListRow;

79
frontend/src/components/Layout/StreamListRow.tsx
View File

@@ -1,79 +0,0 @@
import React from "react";
interface StreamItem {
id: number;
title: string;
streamer: string;
viewers: number;
thumbnail?: string;
}
interface StreamListEntryProps {
stream: StreamItem;
onClick?: () => void;
}
interface StreamListRowProps {
title: string;
description: string;
streams: StreamItem[];
onStreamClick: (streamId: number, streamerName: string) => void;
}
// Individual stream entry component
const StreamListEntry: React.FC<StreamListEntryProps> = ({
stream,
onClick,
}) => {
return (
<div
className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
onClick={onClick}
>
<div className="relative w-full pt-[56.25%]">
{stream.thumbnail ? (
<img
src={`images/` + stream.thumbnail}
alt={stream.title}
className="absolute top-0 left-0 w-full h-full object-cover"
/>
) : (
<div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
)}
</div>
<div className="p-3">
<h3 className="font-semibold text-lg">{stream.title}</h3>
<p className="text-gray-400">{stream.streamer}</p>
<p className="text-sm text-gray-500">{stream.viewers} viewers</p>
</div>
</div>
);
};
// Row of stream entries
const StreamListRow: React.FC<StreamListRowProps> = ({
title,
description,
streams,
onStreamClick,
}) => {
return (
<div className="flex flex-col space-y-4 py-6">
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>
<p className="text-gray-400">{description}</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{streams.map((stream) => (
<StreamListEntry
key={stream.id}
stream={stream}
onClick={() => onStreamClick?.(stream.id, stream.streamer)}
/>
))}
</div>
</div>
);
};
export default StreamListRow;