ec397a188c
Update client-side components to use transparent background logos with adjusted sizing, positioning, and opacity to enhance the geometric design language and adaptive content presentation. Replit-Commit-Author: Agent Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/QR3yqRB
331 lines
11 KiB
TypeScript
331 lines
11 KiB
TypeScript
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";
|
|
import go4LogoPath from "@assets/go4_1756394900352.png";
|
|
|
|
|
|
interface VideosResponse {
|
|
videos: Video[];
|
|
total: number;
|
|
hasMore: boolean;
|
|
}
|
|
|
|
export default function Home() {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
|
const [offset, setOffset] = useState(0);
|
|
const [allVideos, setAllVideos] = useState<Video[]>([]);
|
|
|
|
|
|
|
|
// Fetch videos with optimized caching
|
|
const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
|
|
queryKey: ["/api/videos", {
|
|
limit: 20,
|
|
offset,
|
|
search: searchQuery || undefined
|
|
}],
|
|
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();
|
|
},
|
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
|
gcTime: 10 * 60 * 1000, // 10 minutes
|
|
refetchOnWindowFocus: false,
|
|
refetchOnReconnect: false
|
|
});
|
|
|
|
// 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 changes
|
|
const handleSearch = (query: string) => {
|
|
setSearchQuery(query);
|
|
setOffset(0);
|
|
setAllVideos([]);
|
|
};
|
|
|
|
const handleLoadMore = () => {
|
|
setOffset(prev => prev + 20);
|
|
};
|
|
|
|
// Force refetch when search changes
|
|
useEffect(() => {
|
|
refetch();
|
|
}, [searchQuery, offset, refetch]);
|
|
|
|
return (
|
|
<div className="min-h-screen bunny-dark floating-triangles">
|
|
<SearchHeader
|
|
onSearch={handleSearch}
|
|
onViewChange={setViewMode}
|
|
currentView={viewMode}
|
|
/>
|
|
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
|
|
{/* Background logo decorations - fiksni veliki go4.video logoti v ozadju */}
|
|
{/* VELIKI go4.video logoti v ozadju - s transparenco */}
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
top: '5%',
|
|
left: '2%',
|
|
transform: 'rotate(-25deg)',
|
|
width: '800px',
|
|
height: '400px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.3,
|
|
filter: 'contrast(1.5) brightness(1.2)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
top: '10%',
|
|
right: '5%',
|
|
transform: 'rotate(30deg)',
|
|
width: '700px',
|
|
height: '350px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.25,
|
|
filter: 'contrast(1.5) brightness(1.2)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
top: '40%',
|
|
left: '8%',
|
|
transform: 'rotate(18deg)',
|
|
width: '900px',
|
|
height: '450px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.2,
|
|
filter: 'contrast(1.5) brightness(1.2)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
top: '45%',
|
|
right: '3%',
|
|
transform: 'rotate(-35deg)',
|
|
width: '750px',
|
|
height: '375px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.18,
|
|
filter: 'contrast(1.5) brightness(1.2)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
bottom: '8%',
|
|
left: '12%',
|
|
transform: 'rotate(-15deg)',
|
|
width: '850px',
|
|
height: '425px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.15,
|
|
filter: 'contrast(1.5) brightness(1.2)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
bottom: '12%',
|
|
right: '8%',
|
|
transform: 'rotate(22deg)',
|
|
width: '650px',
|
|
height: '325px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.12,
|
|
filter: 'contrast(1.5) brightness(1.2)'
|
|
}}
|
|
/>
|
|
|
|
{/* Dodatni veliki logoti na sredini */}
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
top: '30%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%) rotate(-45deg)',
|
|
width: '1200px',
|
|
height: '600px',
|
|
pointerEvents: 'none',
|
|
zIndex: -2,
|
|
opacity: 0.08,
|
|
filter: 'contrast(2) brightness(1.5)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'fixed',
|
|
top: '70%',
|
|
left: '30%',
|
|
transform: 'rotate(60deg)',
|
|
width: '1000px',
|
|
height: '500px',
|
|
pointerEvents: 'none',
|
|
zIndex: -2,
|
|
opacity: 0.06,
|
|
filter: 'contrast(2) brightness(1.5)'
|
|
}}
|
|
/>
|
|
|
|
{/* Trikotniki na robovih - ne prekrivajo video kartic */}
|
|
<div className="absolute top-10 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
|
|
<div className="absolute top-1/2 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
|
|
<div className="absolute bottom-1/4 right-2 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[70px] border-b-cyan-400/8 rotate-45 z-0"></div>
|
|
<VideoGrid
|
|
videos={allVideos}
|
|
isLoading={isLoading}
|
|
hasMore={videosResponse?.hasMore || false}
|
|
onLoadMore={handleLoadMore}
|
|
viewMode={viewMode}
|
|
/>
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Footer with large triangle design */}
|
|
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
|
|
{/* go4.video logoti v footerju - transparentni */}
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'absolute',
|
|
top: '15px',
|
|
right: '8%',
|
|
transform: 'rotate(-20deg)',
|
|
width: '350px',
|
|
height: '175px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.25,
|
|
filter: 'contrast(1.5) brightness(1.3)'
|
|
}}
|
|
/>
|
|
<img
|
|
src={go4LogoPath}
|
|
alt=""
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '15px',
|
|
left: '10%',
|
|
transform: 'rotate(30deg)',
|
|
width: '300px',
|
|
height: '150px',
|
|
pointerEvents: 'none',
|
|
zIndex: -1,
|
|
opacity: 0.2,
|
|
filter: 'contrast(1.5) brightness(1.3)'
|
|
}}
|
|
/>
|
|
|
|
{/* Trikotniki v footerju - z nižjim z-index da ne zakrivajo besedila */}
|
|
<div className="absolute top-0 right-0 w-0 h-0 border-l-[150px] border-l-transparent border-b-[90px] border-b-blue-500/6 z-0"></div>
|
|
<div className="absolute bottom-0 left-0 w-0 h-0 border-r-[120px] border-r-transparent border-t-[80px] border-t-purple-500/6 z-0"></div>
|
|
<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 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
|
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[5px] border-y-transparent ml-1"></div>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-bunny-light">go4.video</h3>
|
|
</div>
|
|
<p className="text-bunny-muted mb-4">
|
|
Fast, reliable, and globally distributed video streaming platform.
|
|
</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 go4.video. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|