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

STYLE: Added Styling for Categories, Vods and Following

Browse Source
This commit is contained in:
EvanLin3141
2025-03-04 00:19:07 +00:00
parent 12c09fe261
commit 082b01ef51
2 changed files with 105 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/pages/Following.tsx
View File

@@ -5,6 +5,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { useFollow } from "../hooks/useFollow";
import FollowUserButton from "../components/Input/FollowUserButton";
import FollowButton from "../components/Input/FollowButton";
import Footer from "../components/Layout/Footer";
interface Streamer {
user_id: number;
@@ -78,10 +79,11 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
}, [isLoggedIn]);
return (
<DynamicPageContent>
<DynamicPageContent className="overflow-x-hidden h-full">
<div className="flex items-center justify-center mb-20">
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
id="follow_page"
className={`w-[96vw] h-full bg-slate-50/35 rounded-lg overflow-x-hidden flex flex-col text-center scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
>
{activeTab === "streamers" && (
<div
@@ -90,7 +92,7 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
{followedStreamers.map((streamer: any) => (
<div
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
className="h-full cursor-pointer bg-black w-full py-2 rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
/*onClick={() => navigate(`/user/${streamer.username}`)}*/
>
{streamer.username}
@@ -107,34 +109,32 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
)}
{activeTab === "categories" && (
<div id="categories-followed" className="grid grid-cols-4 gap-4 p-4 w-full">
<div id="categories-followed" className="grid grid-cols-3 gap-4 p-10 w-full">
{followedCategories.map((category) => {
return (
<div
key={category.category_id}
className="relative flex flex-col items-center justify-center border border-[--text-color] rounded-lg overflow-hidden hover:shadow-lg transition-all"
className="relative flex flex-col items-center justify-center rounded-lg overflow-hidden hover:shadow-lg transition-all"
onClick={() => navigate(`/category/${category.category_name}`)}
>
<FollowButton category={category} />
<img
src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
alt={category.category_name}
className="w-full h-28 object-cover"
className="w-full h-[200px] object-cover"
/>
<div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
{category.category_name}
</div>
</div>
);
)
})}
</div>
)};
</div>
</div>
<Footer />
</DynamicPageContent >
);
};

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { useAuth } from "../context/AuthContext";
import { useNavigate, useParams } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import Footer from "../components/Layout/Footer";
interface Vod {
vod_id: number;
@@ -46,7 +47,12 @@ const Vods: React.FC = () => {
if (error) return <p className="text-center text-red-500">{error}</p>;
return (
<DynamicPageContent>
<DynamicPageContent className="h-full">
<div className="mt-[3em] w-screen h-[100vh] max-h-[500px] flex items-center justify-center">
<div
id="follow_page"
className={`w-[96vw] h-full bg-slate-50/35 rounded-lg overflow-x-hidden flex flex-col text-center scrollbar-hide transition-all duration-500 ease-in-out`}
>
<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">
@@ -59,32 +65,46 @@ const Vods: React.FC = () => {
return (
<div
key={vod.vod_id}
className="border rounded-lg p-4 bg-gray-800 text-white cursor-pointer hover:bg-gray-700 transition"
className="mt-5 h-full 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"
className="w-full h-[200px] 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 className="flex flex-col space-y-1">
{/* Video Title */}
<h2 className="text-white font-bold text-lg">{vod.title}</h2>
{/* Channel Name */}
<div className="flex items-center space-x-2">
<p className="text-white text-sm">{username}</p>
</div>
{/* Views and Date */}
<div className="flex space-x-2 text-white text-sm">
<p>{vod.views} views</p>
<p>{new Date(vod.datetime).toLocaleString()}</p>
</div>
</div>
</div>
);
})
)}
</div>
</div>
</div>
</div>
<Footer />
</DynamicPageContent>
);
};