8e:I[903690,["/chat-static/_next/static/immutable/chunks/19n90nb5xxg2t.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/0ya0e_15z9yqp.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/22n9earcnx5_-.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/3lht6quipswa6.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0kjwkfpw9virb.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/28gt91dhqr8rr.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/immutable/chunks/19n90nb5xxg2t.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/0ya0e_15z9yqp.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/22n9earcnx5_-.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/3lht6quipswa6.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0kjwkfpw9virb.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/28gt91dhqr8rr.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 90:T3d36,[V0_FILE]typescriptreact:file="/components/intro-video.tsx" "use client" import { useMemo, useRef, useState } from "react" import { Play, Pause, Volume2, VolumeX, X, Phone, MessageCircle } from "lucide-react" import { INTRO_VIDEO, SITE, parseVideoSource, telHref, smsHref } from "@/lib/config" /* * The intro video lives in two states inside the card: * * THUMBNAIL — a compact tactile chip (poster + play badge + label) in the * card's normal flow. * * EXPANDED — an overlay inset exactly 8px from the card's edges (the same * gutter the card keeps from the mat), corners concentric with the card * (card radius − 8px), scrim behind it. * * THE UNFOLD: the overlay is a CSS grid whose single row animates * 0fr → 1fr. The browser interpolates the row track itself, so the frame * UNFOLDS from the vertical center — no height measuring, no transform * fakery, and the aspect of the content never distorts because the inner * pane just gets clipped by the growing track. Timed on iOS's sheet curve * cubic-bezier(0.32, 0.72, 0, 1) — the exact easing UIKit uses for sheet * presentation, which is most of why it "feels iOS". * * Controls philosophy: iOS owns hardware volume and ignores JS volume, so * the only honest sound control is mute/unmute. Tap the video = play/pause. * One thin scrubbable progress bar. Speed is a cycling chip (1× → 1.5× → 2×, * the Apple Podcasts pattern) — a menu for three values is bureaucracy. * * YouTube sources render YouTube's own player inside the same unfolding * frame (custom controls can't drive an iframe), and the iframe mounts on * open / unmounts on close — unmounting is the only reliable way to stop * its audio without shipping the whole YT API. */ const RATES = [1, 1.5, 2] as const const IOS_SHEET = "cubic-bezier(0.32, 0.72, 0, 1)" const UNFOLD_MS = 560 function fmt(s: number) { if (!Number.isFinite(s)) return "0:00" const m = Math.floor(s / 60) const r = Math.floor(s % 60) return `${m}:${String(r).padStart(2, "0")}` } export function IntroVideo({ onFirstPlay, smsBody, onContact, }: { onFirstPlay?: () => void /** Ad-aware pre-written text, so the in-player Text exit matches the card's. */ smsBody: string onContact: (action: "call" | "text") => void }) { const videoRef = useRef(null) const firedRef = useRef(false) const [open, setOpen] = useState(false) const [playing, setPlaying] = useState(false) const [muted, setMuted] = useState(false) const [rateIdx, setRateIdx] = useState(0) const [progress, setProgress] = useState(0) const [duration, setDuration] = useState(0) const source = useMemo( () => (INTRO_VIDEO ? parseVideoSource(INTRO_VIDEO.src) : null), [], ) if (!INTRO_VIDEO || !source) return null const isFile = source.kind === "file" function openPlayer() { setOpen(true) if (!firedRef.current) { firedRef.current = true onFirstPlay?.() } // The tap that opened the overlay is the user gesture — sound stays on. const v = videoRef.current if (v) { v.muted = false setMuted(false) v.play().catch(() => { // Autoplay-with-sound refused (rare, non-iOS strictness): fall back muted. v.muted = true setMuted(true) v.play().catch(() => {}) }) } } function closePlayer() { setOpen(false) const v = videoRef.current if (v) v.pause() } function togglePlay() { const v = videoRef.current if (!v) return if (v.paused) v.play().catch(() => {}) else v.pause() } function cycleRate() { const v = videoRef.current if (!v) return /* * Cycle off the video's OWN playbackRate, not the rateIdx closure — * rapid taps land before React re-renders, and a stale closure would * make two fast taps advance the speed only once. indexOf on an * unknown rate returns -1, which +1 lands safely back on 1x. */ const next = (RATES.indexOf(v.playbackRate as (typeof RATES)[number]) + 1) % RATES.length v.playbackRate = RATES[next] setRateIdx(next) } function seek(e: React.PointerEvent) { const v = videoRef.current if (!v || !duration) return const rect = e.currentTarget.getBoundingClientRect() const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)) v.currentTime = ratio * duration setProgress(ratio) } return ( <> {/* THUMBNAIL CHIP — in normal card flow */} {/* SCRIM — dim + a whisper of blur, like content behind an iOS sheet */}

{/* * EXPANDED PLAYER — the grid unfold. Outer = positioning + the animated * grid track (0fr ↔ 1fr). Inner = min-h-0 overflow-hidden pane that the * track clips as it grows. Radius derived from the card's own tokens * (rounded-2xl, lg:rounded-3xl) minus the 8px inset so corners stay * concentric even if --radius changes. Underscores in calc() required — * Tailwind maps them to spaces. */}

About

Tags

Share

About

Tags

Share

More Templates Like This