admin
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Play } from "lucide-react";
|
|
import { useVideoIndex } from "./VideoIndexProvider";
|
|
import { VideoPlayerModal } from "./VideoPlayerModal";
|
|
|
|
/**
|
|
* Centered play button overlay for cover images. Visible only when the
|
|
* video index has a match for this code. Same UX as the cover-grid play
|
|
* button — always visible, rectangular, opens the in-app player modal.
|
|
*/
|
|
export function CoverPlayButton({
|
|
code,
|
|
actresses,
|
|
}: {
|
|
code: string | null;
|
|
actresses?: Array<{ id: number; name: string; slug: string }>;
|
|
}) {
|
|
const idx = useVideoIndex();
|
|
const [playing, setPlaying] = useState(false);
|
|
if (!code || !idx.hasVideo(code)) return null;
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPlaying(true)}
|
|
aria-label="Play video"
|
|
title="Play video"
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 inline-flex items-center justify-center w-20 h-14 rounded-lg backdrop-blur-md text-white/95 cursor-pointer transition-colors hover:text-[var(--color-cyan)] hover:[animation:play-pulse_1.2s_ease-out_infinite] active:scale-95"
|
|
style={{
|
|
background: "rgba(20,20,28,0.75)",
|
|
border: 0,
|
|
boxShadow: "0 6px 16px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5)",
|
|
}}
|
|
>
|
|
<Play className="w-6 h-6" style={{ fill: "currentColor" }} />
|
|
</button>
|
|
{playing && (
|
|
<VideoPlayerModal
|
|
code={code}
|
|
actresses={actresses}
|
|
onClose={() => setPlaying(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|