sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove categories and sorting options from the video search filters

Browse Source 
Removes category/sort selection from UI and `/api/videos`, updates `getVideos`/`getVideoCount` in `storage.ts`, and removes `/api/categories` route.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aa92e7e2-ec62-4c92-b21b-02ef78a664c2
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/aa92e7e2-ec62-4c92-b21b-02ef78a664c2/Cz5fe6k
This commit is contained in:
sebastjanartic 2025-08-04 20:18:18 +00:00
parent 58dc46ef4b
commit 645fa51028
4 changed files with 44 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
client/src/components/search-header.tsx
View File

@ -6,19 +6,13 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
interface SearchHeaderProps {
onSearch: (query: string) => void;
onCategoryChange: (category: string) => void;
onSortChange: (sort: string) => void;
onViewChange: (view: "grid" | "list") => void;
categories: string[];
currentView: "grid" | "list";
}
export default function SearchHeader({
onSearch,
onCategoryChange,
onSortChange,
onViewChange,
categories,
currentView
}: SearchHeaderProps) {
const [searchQuery, setSearchQuery] = useState("");
@ -79,61 +73,33 @@ export default function SearchHeader({
<p className="text-bunny-muted">Streaming from Bunny.net CDN</p>
</div>
<div className="flex flex-wrap gap-3">
<Select onValueChange={onCategoryChange} data-testid="select-category">
<SelectTrigger className="bg-bunny-gray border border-gray-600 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-bunny-blue w-40">
<SelectValue placeholder="All Categories" />
</SelectTrigger>
<SelectContent>
<SelectItem value="All Categories">All Categories</SelectItem>
{categories.map((category) => (
<SelectItem key={category} value={category}>
{category}
</SelectItem>
))}
</SelectContent>
</Select>
<Select onValueChange={onSortChange} data-testid="select-sort">
<SelectTrigger className="bg-bunny-gray border border-gray-600 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-bunny-blue w-32">
<SelectValue placeholder="Latest" />
</SelectTrigger>
<SelectContent>
<SelectItem value="latest">Latest</SelectItem>
<SelectItem value="views">Most Viewed</SelectItem>
<SelectItem value="duration">Duration</SelectItem>
<SelectItem value="title">A-Z</SelectItem>
</SelectContent>
</Select>
<div className="flex bg-bunny-gray rounded-lg p-1">
<Button
variant={currentView === "grid" ? "default" : "ghost"}
size="sm"
onClick={() => onViewChange("grid")}
className={`px-3 py-1 rounded text-sm ${
currentView === "grid"
? "bg-bunny-blue text-white"
: "text-bunny-muted hover:text-white"
}`}
data-testid="button-grid-view"
>
<Grid3X3 className="w-4 h-4" />
</Button>
<Button
variant={currentView === "list" ? "default" : "ghost"}
size="sm"
onClick={() => onViewChange("list")}
className={`px-3 py-1 rounded text-sm ${
currentView === "list"
? "bg-bunny-blue text-white"
: "text-bunny-muted hover:text-white"
}`}
data-testid="button-list-view"
>
<List className="w-4 h-4" />
</Button>
</div>
<div className="flex bg-bunny-gray rounded-lg p-1">
<Button
variant={currentView === "grid" ? "default" : "ghost"}
size="sm"
onClick={() => onViewChange("grid")}
className={`px-3 py-1 rounded text-sm ${
currentView === "grid"
? "bg-bunny-blue text-white"
: "text-bunny-muted hover:text-white"
}`}
data-testid="button-grid-view"
>
<Grid3X3 className="w-4 h-4" />
</Button>
<Button
variant={currentView === "list" ? "default" : "ghost"}
size="sm"
onClick={() => onViewChange("list")}
className={`px-3 py-1 rounded text-sm ${
currentView === "list"
? "bg-bunny-blue text-white"
: "text-bunny-muted hover:text-white"
}`}
data-testid="button-list-view"
>
<List className="w-4 h-4" />
</Button>
</div>
</div>
</div>

32
client/src/pages/home.tsx
View File

@ -12,25 +12,16 @@ interface VideosResponse {
export default function Home() {
const [searchQuery, setSearchQuery] = useState("");
const [selectedCategory, setSelectedCategory] = useState("All Categories");
const [sortBy, setSortBy] = useState("latest");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [offset, setOffset] = useState(0);
const [allVideos, setAllVideos] = useState<Video[]>([]);
// Fetch categories
const { data: categories = [] } = useQuery<string[]>({
queryKey: ["/api/categories"],
});
// Fetch videos
const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
queryKey: ["/api/videos", {
limit: 20,
offset,
search: searchQuery || undefined,
category: selectedCategory !== "All Categories" ? selectedCategory : undefined,
sort: sortBy
search: searchQuery || undefined
}],
queryFn: async ({ queryKey }) => {
const [, params] = queryKey as [string, any];
@ -61,42 +52,27 @@ export default function Home() {
}
}, [videosResponse, offset]);
// Reset videos when search/filter changes
// Reset videos when search changes
const handleSearch = (query: string) => {
setSearchQuery(query);
setOffset(0);
setAllVideos([]);
};
const handleCategoryChange = (category: string) => {
setSelectedCategory(category);
setOffset(0);
setAllVideos([]);
};
const handleSortChange = (sort: string) => {
setSortBy(sort);
setOffset(0);
setAllVideos([]);
};
const handleLoadMore = () => {
setOffset(prev => prev + 20);
};
// Force refetch when filters change
// Force refetch when search changes
useEffect(() => {
refetch();
}, [searchQuery, selectedCategory, sortBy, offset, refetch]);
}, [searchQuery, offset, refetch]);
return (
<div className="min-h-screen bg-bunny-dark">
<SearchHeader
onSearch={handleSearch}
onCategoryChange={handleCategoryChange}
onSortChange={handleSortChange}
onViewChange={setViewMode}
categories={categories}
currentView={viewMode}
/>

17
server/routes.ts
View File

@ -10,10 +10,9 @@ export async function registerRoutes(app: Express): Promise<Server> {
const limit = parseInt(req.query.limit as string) || 20;
const offset = parseInt(req.query.offset as string) || 0;
const search = req.query.search as string;
const category = req.query.category as string;
const videos = await storage.getVideos(limit, offset, search, category);
const total = await storage.getVideoCount(search, category);
const videos = await storage.getVideos(limit, offset, search);
const total = await storage.getVideoCount(search);
res.json({
videos,
@ -48,17 +47,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
}
});
// Get video categories
app.get("/api/categories", async (req, res) => {
try {
const videos = await storage.getVideos(1000);
const categories = Array.from(new Set(videos.map(v => v.category).filter(Boolean)));
res.json(categories);
} catch (error) {
console.error("Error fetching categories:", error);
res.status(500).json({ message: "Failed to fetch categories" });
}
});
const httpServer = createServer(app);
return httpServer;

30
server/storage.ts
View File

@ -3,11 +3,11 @@ import { randomUUID } from "crypto";
import { BunnyService } from "./bunny";
export interface IStorage {
getVideos(limit?: number, offset?: number, search?: string, category?: string): Promise<Video[]>;
getVideos(limit?: number, offset?: number, search?: string): Promise<Video[]>;
getVideo(id: string): Promise<Video | undefined>;
createVideo(video: InsertVideo): Promise<Video>;
updateVideoViews(id: string): Promise<void>;
getVideoCount(search?: string, category?: string): Promise<number>;
getVideoCount(search?: string): Promise<number>;
}
export class MemStorage implements IStorage {
@ -92,7 +92,7 @@ export class MemStorage implements IStorage {
});
}
async getVideos(limit = 20, offset = 0, search?: string, category?: string): Promise<Video[]> {
async getVideos(limit = 20, offset = 0, search?: string): Promise<Video[]> {
let videos = Array.from(this.videos.values());
// Filter by search
@ -104,11 +104,6 @@ export class MemStorage implements IStorage {
);
}
// Filter by category
if (category && category !== "All Categories") {
videos = videos.filter(video => video.category === category);
}
// Sort by created date (newest first)
videos.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
@ -141,8 +136,8 @@ export class MemStorage implements IStorage {
}
}
async getVideoCount(search?: string, category?: string): Promise<number> {
const videos = await this.getVideos(1000, 0, search, category);
async getVideoCount(search?: string): Promise<number> {
const videos = await this.getVideos(1000, 0, search);
return videos.length;
}
}
@ -156,11 +151,11 @@ class BunnyStorage implements IStorage {
this.bunnyService = new BunnyService();
}
async getVideos(limit = 20, offset = 0, search?: string, category?: string): Promise<Video[]> {
async getVideos(limit = 20, offset = 0, search?: string): Promise<Video[]> {
try {
// For search/filtering, we need to get more videos than the requested limit
// For search filtering, we need to get more videos than the requested limit
// because we'll filter client-side and then slice to the requested amount
const fetchLimit = (search || category) ? 100 : limit;
const fetchLimit = search ? 100 : limit;
const page = Math.floor(offset / fetchLimit) + 1;
// Get videos from Bunny API
@ -177,11 +172,6 @@ class BunnyStorage implements IStorage {
(video.description && video.description.toLowerCase().includes(searchLower))
);
}
// Filter by category if specified
if (category && category !== "All Categories") {
filteredVideos = filteredVideos.filter(video => video.category === category);
}
// Apply cached view counts
filteredVideos.forEach(video => {
@ -228,10 +218,10 @@ class BunnyStorage implements IStorage {
this.viewsCache.set(id, currentViews + 1);
}
async getVideoCount(search?: string, category?: string): Promise<number> {
async getVideoCount(search?: string): Promise<number> {
try {
// For accurate count with client-side filtering, we need to get all videos and filter them
const allVideos = await this.getVideos(1000, 0, search, category);
const allVideos = await this.getVideos(1000, 0, search);
return allVideos.length;
} catch (error) {
console.error('Error getting video count from Bunny:', error);