You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.9 KiB
79 lines
2.9 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { useMarriageConfigQuery } from "@/hooks/marriage/use-marriage-config";
|
|
import { SliderHeader } from "./slider-header";
|
|
import type { SliderSlideProps } from "./slider-slide";
|
|
import VideoPlayer from "./video-player";
|
|
import NetworkImage from "./network-image";
|
|
|
|
export function SliderSlideTwo({ index }: SliderSlideProps) {
|
|
const [isPlayerOpen, setIsPlayerOpen] = useState(false);
|
|
const { data: config } = useMarriageConfigQuery();
|
|
|
|
const thumbnailSrc =
|
|
config?.video_step_2_thumbnail_url ||
|
|
(config?.intro_video_thumbnail_url &&
|
|
!config.intro_video_thumbnail_url.includes("Frame 2095586523")
|
|
? config.intro_video_thumbnail_url
|
|
: undefined);
|
|
|
|
return (
|
|
<section
|
|
aria-label={`Slide ${index + 1}`}
|
|
className="flex h-full min-h-0 w-full shrink-0 flex-col"
|
|
>
|
|
<div className="min-h-0 flex-1 overflow-y-auto pb-[86px]">
|
|
<SliderHeader index={index} title="Watch Video" />
|
|
<div
|
|
className="mt-6 flex min-h-0 justify-center cursor-pointer group"
|
|
onClick={() => setIsPlayerOpen(true)}
|
|
>
|
|
<div className="relative w-full max-w-[344px] aspect-[344/488] overflow-hidden rounded-[24px] shadow-xs">
|
|
<NetworkImage
|
|
src={thumbnailSrc}
|
|
fallbackSrc="/assets/images/Frame 20953586523.png"
|
|
alt="video"
|
|
fill
|
|
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-black/5 transition-colors duration-300 group-hover:bg-black/15" />
|
|
<Image
|
|
src={"/assets/images/Frame 1116607280.svg"}
|
|
alt="play"
|
|
width={68}
|
|
height={68}
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-300 group-hover:scale-110 active:scale-95 z-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4">
|
|
<div className="flex items-center justify-center gap-1.5">
|
|
<Image
|
|
src={"/assets/images/Avatar Image.png"}
|
|
alt="Dr. Hasti Masoudi"
|
|
width={20}
|
|
height={20}
|
|
className="rounded-full"
|
|
/>
|
|
<p className="text-[#2F3A48] group-14 font-semibold">
|
|
Dr. Hasti Masoudi
|
|
</p>
|
|
</div>
|
|
<p className="group-12 text-[#4D4D4D] text-center mt-2 max-w-[340px] mx-auto leading-relaxed">
|
|
We have come together with the goal of creating a secure and
|
|
confidential path for "permanent marriage" among Muslims
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<VideoPlayer
|
|
isOpen={isPlayerOpen}
|
|
onClose={() => setIsPlayerOpen(false)}
|
|
videoUrl={config?.video_step_2_url}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|