Restored to '4297267681097f3ff53d34610ef0e8e98baf8e0e'
Replit-Restored-To: 4297267681
This commit is contained in:
sebastjanartic
@@ -54,7 +54,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
|
||||
|
||||
return [
|
||||
{
|
||||
title: "Meistgesehen",
|
||||
title: "Meist Angesehen",
|
||||
videos: sortedByViews.slice(0, 10)
|
||||
},
|
||||
...(folxStadlVideos.length > 0 ? [{
|
||||
@@ -105,7 +105,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
|
||||
})()
|
||||
},
|
||||
{
|
||||
title: "Beliebt jetzt",
|
||||
title: "Trending Now",
|
||||
videos: videos.slice(0, 12)
|
||||
}
|
||||
];
|
||||
@@ -153,7 +153,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
|
||||
<>
|
||||
<div>
|
||||
{categories.map((category, categoryIndex) => (
|
||||
<div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-8 mb-12' : 'mb-12'}`}>
|
||||
<div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-1' : 'mb-2'}`}>
|
||||
<CategoryRow
|
||||
category={category}
|
||||
onVideoClick={handleVideoClick}
|
||||
@@ -188,9 +188,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
|
||||
|
||||
const scroll = (direction: 'left' | 'right') => {
|
||||
if (scrollRef.current) {
|
||||
// Scroll exactly 4 cards (220px + 16px gap = 236px per card)
|
||||
const cardWidth = 220 + 16; // card width + gap
|
||||
const scrollAmount = cardWidth * 4; // 4 cards at once
|
||||
// Viewport-based scroll amount for full-width cards
|
||||
const containerWidth = scrollRef.current.clientWidth;
|
||||
const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area
|
||||
|
||||
const currentScroll = scrollRef.current.scrollLeft;
|
||||
const targetScroll = direction === 'left'
|
||||
@@ -236,36 +236,68 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative group mb-6"
|
||||
className="relative group"
|
||||
onMouseLeave={() => setClickedVideoId(null)}
|
||||
>
|
||||
<h2 className="text-xl font-semibold text-white mb-4 pl-6 pr-4">
|
||||
<h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase">
|
||||
{category.title}
|
||||
</h2>
|
||||
<div className="relative">
|
||||
<div className="relative overflow-hidden">
|
||||
{/* Left scroll button - only on desktop and not hidden */}
|
||||
{!hideScrollButtons && (
|
||||
<Button
|
||||
onClick={() => scroll('left')}
|
||||
onMouseEnter={() => startAutoScroll('left')}
|
||||
onMouseLeave={stopAutoScroll}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl"
|
||||
size="sm"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Right scroll button - only on desktop and not hidden */}
|
||||
{!hideScrollButtons && (
|
||||
<Button
|
||||
onClick={() => scroll('right')}
|
||||
onMouseEnter={() => startAutoScroll('right')}
|
||||
onMouseLeave={stopAutoScroll}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl"
|
||||
size="sm"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Scrollable video row - true edge to edge */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex gap-4 overflow-x-auto pl-4 pr-4"
|
||||
style={{
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none'
|
||||
}}
|
||||
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 -mx-1"
|
||||
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
||||
>
|
||||
{category.videos.map((video, index) => (
|
||||
<div
|
||||
key={video.id}
|
||||
className="flex-shrink-0 w-[180px]"
|
||||
className="flex-shrink-0 w-[calc(70vw-2px)] sm:w-[calc(40vw-2px)] md:w-[calc(30vw-2px)] lg:w-[calc(24vw-2px)] relative group hover:z-30"
|
||||
onMouseEnter={() => setClickedVideoId(video.id)}
|
||||
>
|
||||
{/* Top 10 Number overlay for first category */}
|
||||
{category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
|
||||
<div className="absolute top-0 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
|
||||
style={{
|
||||
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
|
||||
WebkitTextStroke: '2px rgba(0,0,0,0.8)'
|
||||
}}>
|
||||
{index + 1}
|
||||
</div>
|
||||
)}
|
||||
<VideoCard
|
||||
video={video}
|
||||
onClick={(video) => {
|
||||
setClickedVideoId(video.id);
|
||||
onVideoClick(video);
|
||||
}}
|
||||
className="w-full rounded-lg overflow-hidden"
|
||||
className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -123,7 +123,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
|
||||
return (
|
||||
<div
|
||||
data-testid={`card-video-${video.id}`}
|
||||
className={`video-card ${className}`}
|
||||
className={`video-card transition-transform duration-200 hover:scale-[1.02] ${className}`}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
@@ -136,7 +136,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
|
||||
<img
|
||||
src={video.thumbnailUrl}
|
||||
alt={video.title}
|
||||
className={`w-full h-full object-cover transition-all duration-300 ${showPreview ? 'opacity-0' : 'opacity-100'}`}
|
||||
className={`w-full h-full object-cover transition-all duration-300 ${showPreview ? 'opacity-0' : 'opacity-100 group-hover:scale-105'}`}
|
||||
style={{
|
||||
objectPosition: video.faceCenterPosition || 'center center',
|
||||
objectFit: 'cover'
|
||||
|
||||
Reference in New Issue
Block a user