Set up video streaming website with Bunny.net CDN integration
Initialize project structure with UI components, CDN video display, and configurations. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/uoltFyL
This commit is contained in:
sebastjanartic
@@ -0,0 +1,168 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { type Video } from "@shared/schema";
|
||||
import SearchHeader from "@/components/search-header";
|
||||
import VideoGrid from "@/components/video-grid";
|
||||
|
||||
interface VideosResponse {
|
||||
videos: Video[];
|
||||
total: number;
|
||||
hasMore: boolean;
|
||||
}
|
||||
|
||||
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
|
||||
}],
|
||||
queryFn: async ({ queryKey }) => {
|
||||
const [, params] = queryKey as [string, any];
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (value !== undefined) {
|
||||
searchParams.append(key, String(value));
|
||||
}
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/videos?${searchParams}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch videos');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
});
|
||||
|
||||
// Update videos when new data comes in
|
||||
useEffect(() => {
|
||||
if (videosResponse) {
|
||||
if (offset === 0) {
|
||||
setAllVideos(videosResponse.videos);
|
||||
} else {
|
||||
setAllVideos(prev => [...prev, ...videosResponse.videos]);
|
||||
}
|
||||
}
|
||||
}, [videosResponse, offset]);
|
||||
|
||||
// Reset videos when search/filter 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
|
||||
useEffect(() => {
|
||||
refetch();
|
||||
}, [searchQuery, selectedCategory, sortBy, offset, refetch]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-bunny-dark">
|
||||
<SearchHeader
|
||||
onSearch={handleSearch}
|
||||
onCategoryChange={handleCategoryChange}
|
||||
onSortChange={handleSortChange}
|
||||
onViewChange={setViewMode}
|
||||
categories={categories}
|
||||
currentView={viewMode}
|
||||
/>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<VideoGrid
|
||||
videos={allVideos}
|
||||
isLoading={isLoading}
|
||||
hasMore={videosResponse?.hasMore || false}
|
||||
onLoadMore={handleLoadMore}
|
||||
viewMode={viewMode}
|
||||
/>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-bunny-gray/50 border-t border-gray-700 mt-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-8 h-8 bg-bunny-blue rounded-full flex items-center justify-center">
|
||||
<div className="w-0 h-0 border-l-[6px] border-l-white border-y-[4px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-bunny-light">VideoStream</h3>
|
||||
</div>
|
||||
<p className="text-bunny-muted mb-4">
|
||||
High-performance video streaming powered by Bunny.net CDN. Fast, reliable, and globally distributed content delivery.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
|
||||
Twitter
|
||||
</a>
|
||||
<a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
|
||||
GitHub
|
||||
</a>
|
||||
<a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
|
||||
LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-bunny-light">Platform</h4>
|
||||
<ul className="space-y-2 text-bunny-muted">
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Upload</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Analytics</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">API Docs</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-bunny-light">Company</h4>
|
||||
<ul className="space-y-2 text-bunny-muted">
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">About</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Privacy</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Terms</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 mt-8 pt-8 text-center text-bunny-muted">
|
||||
<p>© 2024 VideoStream. Powered by Bunny.net CDN for optimal performance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
|
||||
<Card className="w-full max-w-md mx-4">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex mb-4 gap-2">
|
||||
<AlertCircle className="h-8 w-8 text-red-500" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600">
|
||||
Did you forget to add the page to the router?
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user