From 46a000855144e1950e1c9fc716d5b8ff3d0f92a7 Mon Sep 17 00:00:00 2001 From: Yussif Yahuza Date: Mon, 28 Apr 2025 14:42:01 +0000 Subject: [PATCH] Enhance Reader component with structured content and navigation handlers; implement HoverCards for dynamic media display. --- app/creator/reader/page.tsx | 492 +++++++++++++++++++------------- components/cards/HoverCards.tsx | 12 +- 2 files changed, 298 insertions(+), 206 deletions(-) diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx index 1797d0e..7002262 100644 --- a/app/creator/reader/page.tsx +++ b/app/creator/reader/page.tsx @@ -15,218 +15,302 @@ interface Page { } export default function Reader() { - const [currentPageIndex, setCurrentPageIndex] = useState(0); - const [transitioning, setTransitioning] = useState(false); - const videoRefs = useRef<(HTMLVideoElement | null)[]>([]); + 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; + // 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/background3.mp4", - // 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 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/background2.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.

-
- - ) - } - ]; + But this man seemed untouched by such conventions, and that stood out to the pastor..." + link="" + />{" "} + tomorrow night," Wade explains. +

+
+ + ), + }, + ]; - // Add this function to validate video sources - const isValidVideoSrc = (src: string): boolean => { - return Boolean(src && src.length > 0); + const handleNextPage = useCallback(() => { + if (transitioning) return; + + setTransitioning(true); + + if (currentPageIndex < pages.length - 1) { + setCurrentPageIndex((prev) => prev + 1); + } else { + setCurrentPageIndex(0); + } + + setTimeout(() => { + setTransitioning(false); + }, 1000); + }, [currentPageIndex, transitioning, pages.length]); + + // Add previous page handler + const handlePreviousPage = useCallback(() => { + if (transitioning) return; + + setTransitioning(true); + + if (currentPageIndex > 0) { + setCurrentPageIndex((prev) => prev - 1); + } else { + setCurrentPageIndex(pages.length - 1); + } + + setTimeout(() => { + setTransitioning(false); + }, 1000); + }, [currentPageIndex, transitioning, pages.length]); + + // 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(); + } + }, + [handleNextPage, handlePreviousPage, transitioning] + ); + + // Add useEffect for wheel event listener + useEffect(() => { + window.addEventListener("wheel", handleWheel); + return () => { + window.removeEventListener("wheel", handleWheel); }; + }, [currentPageIndex, transitioning, handleWheel]); // Add dependencies - 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(); - } - }); + // 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]); + }); + } + }, [currentPageIndex]); - const handleNextPage = () => { - if (transitioning) return; + return ( +
+ {/* NavBar */} +
+ {/* Logo */} - setTransitioning(true); - - if (currentPageIndex < pages.length - 1) { - setCurrentPageIndex(prev => prev + 1); - } else { - setCurrentPageIndex(0); - } - - setTimeout(() => { - setTransitioning(false); - }, 1000); - }; - - return ( -
- {/* NavBar */} -
- {/* Logo */} - - -
- - - - Wodey - Wodey -
- - {/* Brutal Logo - Center */} -
- Wodey -
- - {/* Settings */} - -
- - {/* Video Sections */} -
- {pages.map((page, index) => ( -
- {/* Background Video */} - - - {/* Dark Overlay */} -
- - {/* Content */} -
-
- {page.content} -
-
-
- ))} -
- - {/* Navigation Button - Down Arrow */} - +
+ + + + Wodey + Wodey
- ); + + {/* Brutal Logo - Center */} +
+ Wodey +
+ + {/* Settings */} + +
+ + {/* Video Sections */} +
+ {pages.map((page, index) => ( +
+ {/* Background Video */} + + + {/* Dark Overlay */} +
+ + {/* Content */} +
+
{page.content}
+
+
+ ))} +
+ + {/* Navigation Button - Down Arrow */} + +
+ ); } diff --git a/components/cards/HoverCards.tsx b/components/cards/HoverCards.tsx index fcac5ca..d2f5202 100644 --- a/components/cards/HoverCards.tsx +++ b/components/cards/HoverCards.tsx @@ -1,6 +1,7 @@ 'use client' import React from 'react' +import Image from 'next/image' import Link from 'next/link' import { HoverCard, @@ -13,7 +14,8 @@ export interface HoverCardsProps { videourl: string description: string linkText?: string - link?: string + link?: string, + isImage?: boolean, } export default function HoverCards({ @@ -21,7 +23,8 @@ export default function HoverCards({ videourl, description, link = '#', - linkText = 'Purchase & Read More' + linkText = 'Purchase & Read More', + isImage }: HoverCardsProps) { return ( @@ -31,6 +34,9 @@ export default function HoverCards({
+ {isImage ? + {videourl} + : + } +