diff --git a/.replit b/.replit index c806144..1c624ba 100644 --- a/.replit +++ b/.replit @@ -40,3 +40,4 @@ args = "npm run dev" waitForPort = 5000 [agent] +integrations = ["javascript_log_in_with_replit==1.0.0", "javascript_database==1.0.0", "javascript_object_storage==1.0.0"] diff --git a/attached_assets/IMG_0571_1756462340289.png b/attached_assets/IMG_0571_1756462340289.png deleted file mode 100644 index 1ddb204..0000000 Binary files a/attached_assets/IMG_0571_1756462340289.png and /dev/null differ diff --git a/attached_assets/IMG_0577_1756509573946.jpeg b/attached_assets/IMG_0577_1756509573946.jpeg deleted file mode 100644 index 36ff5f1..0000000 Binary files a/attached_assets/IMG_0577_1756509573946.jpeg and /dev/null differ diff --git a/attached_assets/image_1756463985155.png b/attached_assets/image_1756463985155.png deleted file mode 100644 index b2c317c..0000000 Binary files a/attached_assets/image_1756463985155.png and /dev/null differ diff --git a/attached_assets/image_1756477531696.png b/attached_assets/image_1756477531696.png deleted file mode 100644 index 373a104..0000000 Binary files a/attached_assets/image_1756477531696.png and /dev/null differ diff --git a/attached_assets/image_1756477639503.png b/attached_assets/image_1756477639503.png deleted file mode 100644 index fb47e7b..0000000 Binary files a/attached_assets/image_1756477639503.png and /dev/null differ diff --git a/attached_assets/image_1756477766206.png b/attached_assets/image_1756477766206.png deleted file mode 100644 index b42af93..0000000 Binary files a/attached_assets/image_1756477766206.png and /dev/null differ diff --git a/attached_assets/image_1756478620689.png b/attached_assets/image_1756478620689.png deleted file mode 100644 index c942c9d..0000000 Binary files a/attached_assets/image_1756478620689.png and /dev/null differ diff --git a/attached_assets/image_1756480103081.png b/attached_assets/image_1756480103081.png deleted file mode 100644 index fb0aeff..0000000 Binary files a/attached_assets/image_1756480103081.png and /dev/null differ diff --git a/attached_assets/image_1756480148246.png b/attached_assets/image_1756480148246.png deleted file mode 100644 index 8b7f977..0000000 Binary files a/attached_assets/image_1756480148246.png and /dev/null differ diff --git a/attached_assets/image_1756484420030.png b/attached_assets/image_1756484420030.png deleted file mode 100644 index 10dafbd..0000000 Binary files a/attached_assets/image_1756484420030.png and /dev/null differ diff --git a/attached_assets/image_1756484512243.png b/attached_assets/image_1756484512243.png deleted file mode 100644 index e18d294..0000000 Binary files a/attached_assets/image_1756484512243.png and /dev/null differ diff --git a/attached_assets/image_1756484767870.png b/attached_assets/image_1756484767870.png deleted file mode 100644 index 22fea11..0000000 Binary files a/attached_assets/image_1756484767870.png and /dev/null differ diff --git a/attached_assets/image_1756487569961.png b/attached_assets/image_1756487569961.png deleted file mode 100644 index 1d92294..0000000 Binary files a/attached_assets/image_1756487569961.png and /dev/null differ diff --git a/attached_assets/image_1756487706679.png b/attached_assets/image_1756487706679.png deleted file mode 100644 index f41abf3..0000000 Binary files a/attached_assets/image_1756487706679.png and /dev/null differ diff --git a/attached_assets/image_1756488439771.png b/attached_assets/image_1756488439771.png deleted file mode 100644 index fa8201c..0000000 Binary files a/attached_assets/image_1756488439771.png and /dev/null differ diff --git a/attached_assets/image_1756490646609.png b/attached_assets/image_1756490646609.png deleted file mode 100644 index 1a414f3..0000000 Binary files a/attached_assets/image_1756490646609.png and /dev/null differ diff --git a/client/index.html b/client/index.html index e6422bd..a88c6d1 100644 --- a/client/index.html +++ b/client/index.html @@ -26,19 +26,6 @@ - - - - - -
diff --git a/client/src/components/ad-settings.tsx b/client/src/components/ad-settings.tsx index ba15e05..fe65a79 100644 --- a/client/src/components/ad-settings.tsx +++ b/client/src/components/ad-settings.tsx @@ -116,7 +116,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) { if (!isOpen) return null; return ( -
+
diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx index fb5fafb..7e3dec4 100644 --- a/client/src/components/bunny-video-modal.tsx +++ b/client/src/components/bunny-video-modal.tsx @@ -168,19 +168,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos return (
{/* Header with close button */} @@ -275,7 +265,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos className="absolute inset-0 w-full h-full" frameBorder="0" allowFullScreen - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" onLoad={handleVideoPlay} title={video.title} /> diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 93850dd..d1e3631 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -1,10 +1,9 @@ -import { useState, useRef, useEffect } from "react"; +import { useState, useRef } from "react"; import { type Video } from "@shared/schema"; import VideoCard from "./video-card"; import BunnyVideoModal from "./bunny-video-modal"; import { Button } from "@/components/ui/button"; import { ChevronLeft, ChevronRight } from "lucide-react"; -import SimpleCarousel from "./simple-carousel"; interface VideoCategory { title: string; @@ -106,9 +105,9 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) { return ( <> -
+
{categories.map((category, categoryIndex) => ( - void; } -function CategoryRowOLD_BROKEN({ category, onVideoClick }: CategoryRowProps) { +function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const scrollRef = useRef(null); - const scrollIntervalRef = useRef(null); - const scrollContainerRef = useRef(null); - const [showLeftButton, setShowLeftButton] = useState(false); - const [showRightButton, setShowRightButton] = useState(true); - const [isScrolling, setIsScrolling] = useState(false); - const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal'); const scroll = (direction: 'left' | 'right') => { - if (!scrollContainerRef.current) return; - - const scrollAmount = direction === 'right' ? 300 : -300; - scrollContainerRef.current.scrollBy({ - left: scrollAmount, - behavior: 'smooth' - }); - }; - - const toggleSpeed = (direction: 'left' | 'right') => { - // Toggle speed mode and restart animation with new speed - const newSpeed = speedMode === 'normal' ? 'fast' : 'normal'; - setSpeedMode(newSpeed); - - // Restart the animation with new speed - if (isScrolling && scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - - // Start new interval with updated speed immediately - const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8; - const interval = 16; // Fixed interval - speed controlled by pixel movement only - - scrollIntervalRef.current = setInterval(() => { - if (!scrollContainerRef.current) return; + if (scrollRef.current) { + // Responsive scroll amount - wider cards on desktop + const isMobile = window.innerWidth < 768; + const scrollAmount = isMobile ? 240 : 336; // Mobile: 224px + gap, Desktop: 320px + gap + const currentScroll = scrollRef.current.scrollLeft; + const targetScroll = direction === 'left' + ? currentScroll - scrollAmount + : currentScroll + scrollAmount; - const currentSpeed = newSpeed === 'fast' ? 5 : 2; - const scrollAmount = direction === 'right' ? currentSpeed : -currentSpeed; - scrollContainerRef.current.scrollBy({ - left: scrollAmount, - behavior: 'auto' - }); - }, 16); - } - }; - - const startAutoScroll = (direction: 'left' | 'right') => { - // Clear any existing interval - if (scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - } - - setIsScrolling(true); - - // Start continuous smooth scrolling with variable speed - scrollIntervalRef.current = setInterval(() => { - if (!scrollContainerRef.current) return; - - const baseSpeed = 3; // Faster speed on hover - const scrollAmount = direction === 'right' ? baseSpeed : -baseSpeed; - scrollContainerRef.current.scrollBy({ - left: scrollAmount, - behavior: 'auto' + scrollRef.current.scrollTo({ + left: targetScroll, + behavior: 'smooth' }); - }, 16); - }; - - // Initialize with first video on the left side - useEffect(() => { - // No need to set initial position for scroll - browser handles it - }, [category.videos.length]); - - // Always show both buttons - useEffect(() => { - setShowLeftButton(true); - setShowRightButton(true); - }, []); - - const stopAutoScroll = () => { - setIsScrolling(false); - if (scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - scrollIntervalRef.current = null; } }; @@ -223,125 +157,50 @@ function CategoryRowOLD_BROKEN({ category, onVideoClick }: CategoryRowProps) { {category.title} -
- {/* Left scroll button - positioned at video thumbnail center */} - + + - {/* Right scroll button - positioned at video thumbnail center */} - + + - {/* Mobile scroll buttons */} - - - - {/* Simple horizontal scroll carousel */} -
-
- {/* ULTRA SIMPLE - just many copies */} - {Array.from({ length: 50 }).map((_, copyIndex) => - category.videos.map((video, videoIndex) => ( -
- {/* Top 10 Number overlay for first category */} - {category.title.includes("Top 10") && ( -
- {videoIndex + 1} -
- )} - - {/* Simple debug number */} -
- {videoIndex + 1} -
+ {category.videos.map((video, index) => ( +
+ {/* Top 10 Number overlay for first category */} + {category.title.includes("Top 10") && index < 10 && ( +
+ {index + 1}
- )) - ).flat()} -
+ )} + +
+ ))}
diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx index 37ac6c7..3399965 100644 --- a/client/src/components/search-header.tsx +++ b/client/src/components/search-header.tsx @@ -59,7 +59,7 @@ export default function SearchHeader({
-

go4.video

+

go4.video

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx deleted file mode 100644 index b93d165..0000000 --- a/client/src/components/simple-carousel.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { useState, useRef, useEffect } from "react"; -import { type Video } from "@shared/schema"; -import VideoCard from "./video-card"; -import { ChevronLeft, ChevronRight } from "lucide-react"; - -interface SimpleCarouselProps { - category: { - title: string; - videos: Video[]; - }; - onVideoClick: (video: Video) => void; -} - -export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouselProps) { - const scrollContainerRef = useRef(null); - const scrollIntervalRef = useRef(null); - const [isScrolling, setIsScrolling] = useState(false); - const [currentDirection, setCurrentDirection] = useState<'left' | 'right' | null>(null); - const [speed, setSpeed] = useState<'normal' | 'fast'>('normal'); - - const scroll = (direction: 'left' | 'right') => { - // If already scrolling in same direction, toggle speed - if (isScrolling && currentDirection === direction) { - const newSpeed = speed === 'normal' ? 'fast' : 'normal'; - setSpeed(newSpeed); - - // Restart with new speed immediately - if (scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - } - - const speedValue = newSpeed === 'fast' ? 1.8 : 0.8; - scrollIntervalRef.current = setInterval(() => { - if (!scrollContainerRef.current) return; - - const scrollAmount = direction === 'right' ? speedValue : -speedValue; - scrollContainerRef.current.scrollBy({ - left: scrollAmount, - behavior: 'auto' - }); - }, 8); - } else { - // If not scrolling or different direction, start scrolling - startAutoScroll(direction); - } - }; - - const startAutoScroll = (direction: 'left' | 'right') => { - if (scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - } - - setIsScrolling(true); - setCurrentDirection(direction); - setSpeed('normal'); // Reset to normal speed when starting - - const speedValue = 0.8; // Always start with normal speed - scrollIntervalRef.current = setInterval(() => { - if (!scrollContainerRef.current) return; - - const scrollAmount = direction === 'right' ? speedValue : -speedValue; - scrollContainerRef.current.scrollBy({ - left: scrollAmount, - behavior: 'auto' - }); - }, 8); - }; - - const stopAutoScroll = () => { - if (scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - scrollIntervalRef.current = null; - } - setIsScrolling(false); - setCurrentDirection(null); - setSpeed('normal'); - }; - - // Initialize scroll position in the middle so we can scroll both ways - useEffect(() => { - if (scrollContainerRef.current && category.videos.length > 0) { - // Wait for content to load, then scroll to middle - setTimeout(() => { - if (scrollContainerRef.current) { - const containerWidth = scrollContainerRef.current.scrollWidth; - const viewportWidth = scrollContainerRef.current.clientWidth; - const middlePosition = (containerWidth - viewportWidth) / 2; - - scrollContainerRef.current.scrollTo({ - left: middlePosition, - behavior: 'auto' - }); - } - }, 100); - } - }, [category.videos.length]); - - return ( -
-

- {category.title} -

- - {/* Container z flex wrap */} -
- {category.videos.map((video, videoIndex) => ( -
- {/* Top 10 Number overlay for first category */} - {category.title.includes("Top 10") && ( -
- {videoIndex + 1} -
- )} - -
- ))} -
-
- ); -} \ No newline at end of file diff --git a/client/src/components/vast-player.tsx b/client/src/components/vast-player.tsx index fdc4a8c..c07f376 100644 --- a/client/src/components/vast-player.tsx +++ b/client/src/components/vast-player.tsx @@ -270,7 +270,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru }; return ( -
+
{/* Close button */}