574b125626
- Replace all #223e0d → #396817 across 24 files - Page bg: #f1fbeb (lightest green tint), BirthdayPricing: #fefaf6 (warm cream) - Hero: raise text to z-[25] above T-Rex, reduce font clamp, narrow max-w - PageHero: remove negative z-index that hid photo background - GallerySlider: replace setInterval+state with rAF+pauseRef, seamless half-wrap reset - Reviews: fix sub-pixel scroll (speed 0.3 → 1, intervalMs 16 → 20) - BtnPrimary: gradient background orange→yellow→orange with hover scale - Footer: add static fallback contacts (phone, address, metro, hours, Instagram, Facebook) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
55 lines
2 KiB
TypeScript
55 lines
2 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
interface VideoBlockProps {
|
|
videoUrl?: string | null
|
|
caption?: string | null
|
|
autoplay?: boolean | null
|
|
}
|
|
|
|
function toEmbedUrl(url: string, autoplay: boolean): string {
|
|
const yt = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9_-]+)/)
|
|
if (yt) return `https://www.youtube.com/embed/${yt[1]}${autoplay ? '?autoplay=1' : ''}`
|
|
const vi = url.match(/vimeo\.com\/(\d+)/)
|
|
if (vi) return `https://player.vimeo.com/video/${vi[1]}${autoplay ? '?autoplay=1' : ''}`
|
|
return url
|
|
}
|
|
|
|
export function VideoBlockComponent({ videoUrl, caption, autoplay }: VideoBlockProps) {
|
|
const [playing, setPlaying] = useState(!!autoplay)
|
|
if (!videoUrl) return null
|
|
|
|
return (
|
|
<section className="py-[20px] md:py-[40px]">
|
|
<div className="max-w-[1204px] mx-auto px-8">
|
|
<div className="relative w-full rounded-[20px] overflow-hidden" style={{ paddingTop: '56.25%' }}>
|
|
{playing ? (
|
|
<iframe
|
|
src={toEmbedUrl(videoUrl, true)}
|
|
className="absolute inset-0 w-full h-full"
|
|
allow="autoplay; fullscreen"
|
|
allowFullScreen
|
|
title={caption ?? 'Video'}
|
|
/>
|
|
) : (
|
|
<button
|
|
onClick={() => setPlaying(true)}
|
|
className="absolute inset-0 w-full h-full bg-[#396817] flex items-center justify-center group"
|
|
aria-label="Відтворити відео"
|
|
>
|
|
<span className="w-20 h-20 rounded-full bg-[#f28b4a] flex items-center justify-center group-hover:shadow-[0_0_40px_0_#f28b4a] transition-shadow">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
|
<path d="M10 6L26 16L10 26V6Z" fill="white" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
{caption && (
|
|
<p className="text-center text-[14px] text-[#272727]/60 mt-3">{caption}</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|