Wodey/woedii
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Reader component with structured content and navigation handlers; implement HoverCards for dynamic media display.

Browse Source
This commit is contained in:
Yussif Yahuza 2025-04-28 14:42:01 +00:00
parent a2a9bb9b18
commit 46a0008551
2 changed files with 298 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

292
app/creator/reader/page.tsx
View File

@ -19,8 +19,156 @@ export default function Reader() {
const [transitioning, setTransitioning] = useState(false);
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
// Content structured to match your design
const pages: Page[] = [
{
id: 1,
videoSrc: "/videos/background1.mp4",
content: (
<>
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
<div className="space-y-6 text-center max-w-3xl">
<p className="text-lg">
Through the rain, flickering neon lights spell out of{" "}
<HoverCards
triggerText="SEPHORA"
videourl="/images/card1.png"
isImage={true}
description="Bloomberg, COMEX, Dubai Gold & Commodities Exchange, ICE Benchmark Administration, London Metal Exchange, Multi Commodity Exchange of India, Nasdaq, Shanghai Gold Exchange, Shanghai Futures Exchange, Tokyo Commodities Exchange, World Gold Council;"
link=" https://www.gold.org/goldhub/data/gold-trading"
/>{" "}
and illuminate an entrance to nightclub.
</p>
<p className="text-lg">
A stunning light show cascades across a dance floor crowded by
partiers and adorned by dozens of video monitors.
</p>
<p className="text-lg">
WADE HARPER, an anxious businessman dressed in a black suit,
follows two burly bouncers up a flight of stairs toward the{" "}
<HoverCards
triggerText="VIP Suite"
videourl="/videos/background2.mp4"
description='"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. “Gold!,” he says, his tense demeanor turning to relief. '
/>{" "}
at the back of the warehouse.
</p>
</div>
</>
),
},
{
id: 2,
videoSrc: "/videos/background3.mp4",
content: (
<>
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
<div className="space-y-6 text-center max-w-3xl">
<p className="text-lg">
&quot;Wade Harper! What is up, old friend! It&#39;s been too long,
man!&quot; exclaims HANDSOME TWIN #1.
</p>
<p className="text-lg">
HANDSOME TWIN #2, more anxious and pushy, quickly interjects,
&quot;So do you have it for us?&quot;
</p>
<p className="text-lg">Wade reaches into his breast pocket.</p>
<p className="text-lg">&quot;Yes, I do.&quot;</p>
<div className="text-lg">
Wade considers the{" "}
<HoverCards
triggerText="USB drive"
videourl="/videos/usb.mp4"
description="The USB drive Wade carries holds classified footage from a secret government surveillance project called Project Echo, which monitored paranormal activities around an abandoned research facility in Nevada."
/>{" "}
in his hand and fiddles with the device. The twins smile widely
with delight.
</div>
</div>
</>
),
},
{
id: 3,
videoSrc: "/videos/background2.mp4",
content: (
<>
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
<div className="space-y-6 text-center max-w-3xl">
<p className="text-lg">
Man, yes! Didn&#39;t I tell you not to question this man! I knew
he was going to come through for us!&quot; Handsome Twin #1
gloats.
</p>
<p className="text-lg">
Handsome Twin #2 sighs in satisfaction. &quot;
<HoverCards
triggerText="Gold"
videourl="/videos/trend.mp4"
description="Bloomberg, COMEX, Dubai Gold & Commodities Exchange, ICE Benchmark Administration, London Metal Exchange, Multi Commodity Exchange of India, Nasdaq, Shanghai Gold Exchange, Shanghai Futures Exchange, Tokyo Commodities Exchange, World Gold Council;"
link=" https://www.gold.org/goldhub/data/gold-trading"
/>
,&quot; he says, his tense demeanor turning to relief.
</p>
<p className="text-lg">
Wade hands the device to Handsome Twin #2.
</p>
<p className="text-lg">
&quot;You will find all of the credentials you need on the drive.
The shipment will arrive at the{" "}
<HoverCards
triggerText="Port of Dreytown"
videourl="/videos/man.mp4"
description="A young, sobbing visitor sat unusually close to the pulpit in the empty church, catching Pastor Evan’s attention.
Typically, even regular members avoided those front pews, out of reverence, fear, or habit.
But this man seemed untouched by such conventions, and that stood out to the pastor..."
link=""
/>{" "}
tomorrow night,&quot; Wade explains.
</p>
</div>
</>
),
},
];
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) => {
const handleWheel = useCallback(
(event: WheelEvent) => {
if (transitioning) return;
// Scroll down
@ -31,85 +179,18 @@ export default function Reader() {
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);
};
},
[handleNextPage, handlePreviousPage, transitioning]
);
// Add useEffect for wheel event listener
useEffect(() => {
window.addEventListener('wheel', handleWheel);
window.addEventListener("wheel", handleWheel);
return () => {
window.removeEventListener('wheel', handleWheel);
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: (
<>
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
<div className="space-y-6 text-center max-w-3xl">
<p className="text-lg">Through the rain, flickering neon lights spell out of <HoverCards triggerText="SEPHORA" videourl="/videos/usb.mp4" description="Bloomberg, COMEX, Dubai Gold & Commodities Exchange, ICE Benchmark Administration, London Metal Exchange, Multi Commodity Exchange of India, Nasdaq, Shanghai Gold Exchange, Shanghai Futures Exchange, Tokyo Commodities Exchange, World Gold Council;" link=' https://www.gold.org/goldhub/data/gold-trading' /> and illuminate an entrance to nightclub.</p>
<p className="text-lg">A stunning light show cascades across a dance floor crowded by partiers and adorned by dozens of video monitors.</p>
<p className="text-lg">WADE HARPER, an anxious businessman dressed in a black suit, follows two burly bouncers up a flight of stairs toward the <HoverCards triggerText="VIP Suite" videourl="/videos/background2.mp4" description='"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. “Gold!,” he says, his tense demeanor turning to relief. ' /> at the back of the warehouse.</p>
</div>
</>
)
},
{
id: 2,
videoSrc: "/videos/background2.mp4",
content: (
<>
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
<div className="space-y-6 text-center max-w-3xl">
<p className="text-lg">&quot;Wade Harper! What is up, old friend! It&apos;s been too long, man!&quot; exclaims HANDSOME TWIN #1.</p>
<p className="text-lg">HANDSOME TWIN #2, more anxious and pushy, quickly interjects, &quot;So do you have it for us?&quot;</p>
<p className="text-lg">Wade reaches into his breast pocket.</p>
<p className="text-lg">&quot;Yes, I do.&quot;</p>
<p className="text-lg">Wade considers the <HoverCards triggerText="USB drive" videourl="/videos/usb.mp4" description="The USB drive Wade carries holds classified footage from a secret government surveillance project called Project Echo, which monitored paranormal activities around an abandoned research facility in Nevada." /> in his hand and fiddles with the device. The twins smile widely with delight.</p>
</div>
</>
)
},
{
id: 3,
videoSrc: "/videos/background3.mp4",
content: (
<>
<h1 className="text-4xl font-bold mb-8 text-center">BRUTAL</h1>
<div className="space-y-6 text-center max-w-3xl">
<p className="text-lg">&quot;Man, yes! Didn&apos;t I tell you not to question this man! I knew he was going to come through for us!&quot; Handsome Twin #1 gloats.</p>
<p className="text-lg">Handsome Twin #2 sighs in satisfaction. &quot;<HoverCards triggerText="Gold" videourl="/videos/trend.mp4" description="Bloomberg, COMEX, Dubai Gold & Commodities Exchange, ICE Benchmark Administration, London Metal Exchange, Multi Commodity Exchange of India, Nasdaq, Shanghai Gold Exchange, Shanghai Futures Exchange, Tokyo Commodities Exchange, World Gold Council;" link='https://www.gold.org/goldhub/data/gold-trading' />,&quot; he says, his tense demeanor turning to relief.</p>
<p className="text-lg">Wade hands the device to Handsome Twin #2.</p>
<p className="text-lg">&quot;You will find all of the credentials you need on the drive. The shipment will arrive at the <HoverCards triggerText="Port of Dreytown" videourl="/videos/man.mp4"
description="A young, sobbing visitor sat unusually close to the pulpit in the empty church, catching Pastor Evan’s attention.
Typically, even regular members avoided those front pews, out of reverence, fear, or habit.
But this man seemed untouched by such conventions, and that stood out to the pastor..." link='' /> tomorrow night,&rdquo; Wade explains.</p>
</div>
</>
)
}
];
// Add this function to validate video sources
const isValidVideoSrc = (src: string): boolean => {
return Boolean(src && src.length > 0);
@ -121,7 +202,9 @@ export default function Reader() {
videoRefs.current.forEach((video, index) => {
if (index === currentPageIndex && video) {
video.currentTime = 0;
video.play().catch(err => console.error("Error playing video:", err));
video
.play()
.catch((err) => console.error("Error playing video:", err));
} else if (video) {
video.pause();
}
@ -129,47 +212,42 @@ export default function Reader() {
}
}, [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 (
<div className="h-screen overflow-hidden relative bg-black">
{/* NavBar */}
<div className='w-full h-[80px] fixed top-0 z-30 flex items-center justify-between px-6 bg-transparent'>
<div className="w-full h-[80px] fixed top-0 z-30 flex items-center justify-between px-6 bg-transparent">
{/* Logo */}
<div className="flex items-center text-white">
<Link href='/creator' className='mr-4 '>
<Link href="/creator" className="mr-4 ">
<Button size="icon" className="bg-white">
<ArrowLeft2 size="24" color="#555555" />
</Button>
</Link>
<Image src="/images/logo2.png" alt="Wodey" width={60} height={60} className='mr-2' />
<Image
src="/images/logo2.png"
alt="Wodey"
width={60}
height={60}
className="mr-2"
/>
<span className="text-xl font-semibold">Wodey</span>
</div>
{/* Brutal Logo - Center */}
<div className="absolute left-1/2 transform -translate-x-1/2">
<Image src="/images/brutal.png" alt="Wodey" width={91} height={55} className='mr-2' />
<Image
src="/images/brutal.png"
alt="Wodey"
width={91}
height={55}
className="mr-2"
/>
</div>
{/* Settings */}
<button className='flex items-center text-white'>
<Setting2 size={20} className="mr-2" color='#ffffff' />
<button className="flex items-center text-white">
<Setting2 size={20} className="mr-2" color="#ffffff" />
<span>Settings</span>
</button>
</div>
@ -179,12 +257,15 @@ export default function Reader() {
{pages.map((page, index) => (
<section
key={page.id}
className={`absolute w-full h-full transition-opacity duration-1000 ${currentPageIndex === index ? 'opacity-100 z-10' : 'opacity-0 z-0'
className={`absolute w-full h-full transition-opacity duration-1000 ${
currentPageIndex === index ? "opacity-100 z-10" : "opacity-0 z-0"
}`}
>
{/* Background Video */}
<video
ref={(el: HTMLVideoElement | null) => { videoRefs.current[index] = el }}
ref={(el: HTMLVideoElement | null) => {
videoRefs.current[index] = el;
}}
className="absolute top-0 left-0 w-full h-full object-cover"
muted
loop
@ -194,7 +275,7 @@ export default function Reader() {
onError={(e) => {
console.warn(`Failed to load video: ${page.videoSrc}`);
// Optionally set a fallback background color or image
e.currentTarget.style.backgroundColor = '#000000';
e.currentTarget.style.backgroundColor = "#000000";
}}
></video>
@ -203,9 +284,7 @@ export default function Reader() {
{/* Content */}
<div className="absolute inset-0 flex items-center justify-center text-white z-10 px-5">
<div className="mt-16 max-w-4xl">
{page.content}
</div>
<div className="mt-16 max-w-4xl">{page.content}</div>
</div>
</section>
))}
@ -224,7 +303,12 @@ export default function Reader() {
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
</div>

12
components/cards/HoverCards.tsx
View File

@ -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 (
<HoverCard>
@ -31,6 +34,9 @@ export default function HoverCards({
<HoverCardContent className="w-80">
<div className="max-w-xs bg-white rounded-lg overflow-hidden shadow-lg">
<div className="relative h-48 w-full">
{isImage ?
<Image src={videourl} alt={videourl} width={100} height={100} className="absolute top-0 left-0 w-full h-full object-cover" />
:
<video
className="absolute top-0 left-0 w-full h-full object-cover"
muted
@ -39,6 +45,8 @@ export default function HoverCards({
autoPlay
src={videourl}
></video>
}
</div>