"use client"
import { ArrowLeft2, Setting2 } from 'iconsax-react';
import Image from 'next/image';
import React, { useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import HoverCards from '@/components/cards/HoverCards';
import { Button } from '@/components/ui/button';
interface Page {
id: number;
content: React.ReactNode;
videoSrc: string;
}
export default function Reader() {
const [currentPageIndex, setCurrentPageIndex] = useState(0);
const [transitioning, setTransitioning] = useState(false);
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
// Add wheel event handler
const handleWheel = useCallback((event: WheelEvent) => {
if (transitioning) return;
// Scroll down
if (event.deltaY > 0) {
handleNextPage();
}
// Scroll up
else if (event.deltaY < 0) {
handlePreviousPage();
}
}, []);
// Add previous page handler
const handlePreviousPage = () => {
if (transitioning) return;
setTransitioning(true);
if (currentPageIndex > 0) {
setCurrentPageIndex(prev => prev - 1);
} else {
setCurrentPageIndex(pages.length - 1);
}
setTimeout(() => {
setTransitioning(false);
}, 1000);
};
// Add useEffect for wheel event listener
useEffect(() => {
window.addEventListener('wheel', handleWheel);
return () => {
window.removeEventListener('wheel', handleWheel);
};
}, [currentPageIndex, transitioning, handleWheel]); // Add dependencies
// Content structured to match your design
const pages: Page[] = [
{
id: 1,
videoSrc: "/videos/background1.mp4",
content: (
<>
BRUTAL
Through the rain, flickering neon lights spell out of and illuminate an entrance to nightclub.
A stunning light show cascades across a dance floor crowded by partiers and adorned by dozens of video monitors.
WADE HARPER, an anxious businessman dressed in a black suit, follows two burly bouncers up a flight of stairs toward the at the back of the warehouse.
)
},
{
id: 2,
videoSrc: "/videos/background2.mp4",
content: (
<>
BRUTAL
"Wade Harper! What is up, old friend! It's been too long, man!" exclaims HANDSOME TWIN #1.
HANDSOME TWIN #2, more anxious and pushy, quickly interjects, "So do you have it for us?"
Wade reaches into his breast pocket.
"Yes, I do."
Wade considers the in his hand and fiddles with the device. The twins smile widely with delight.
)
},
{
id: 3,
videoSrc: "/videos/background3.mp4",
content: (
<>
BRUTAL
"Man, yes! Didn't I tell you not to question this man! I knew he was going to come through for us!" Handsome Twin #1 gloats.
Handsome Twin #2 sighs in satisfaction. "," he says, his tense demeanor turning to relief.
Wade hands the device to Handsome Twin #2.
"You will find all of the credentials you need on the drive. The shipment will arrive at the tomorrow night,” Wade explains.
)
}
];
// Add this function to validate video sources
const isValidVideoSrc = (src: string): boolean => {
return Boolean(src && src.length > 0);
};
useEffect(() => {
// Start playing the current video when the page changes
if (videoRefs.current[currentPageIndex]) {
videoRefs.current.forEach((video, index) => {
if (index === currentPageIndex && video) {
video.currentTime = 0;
video.play().catch(err => console.error("Error playing video:", err));
} else if (video) {
video.pause();
}
});
}
}, [currentPageIndex]);
const handleNextPage = () => {
if (transitioning) return;
setTransitioning(true);
if (currentPageIndex < pages.length - 1) {
setCurrentPageIndex(prev => prev + 1);
} else {
setCurrentPageIndex(0);
}
setTimeout(() => {
setTransitioning(false);
}, 1000);
};
return (
{/* NavBar */}
{/* Logo */}
{/* Brutal Logo - Center */}
{/* Settings */}
{/* Video Sections */}
{pages.map((page, index) => (
{/* Background Video */}
{/* Dark Overlay */}
{/* Content */}
))}
{/* Navigation Button - Down Arrow */}