"use client"; import { useState } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Image } from "@/components/registry/primitives/editables/image"; import { cn } from "@/lib/registry/cn"; export interface VideoBlockProps { url: string; label: string; className?: string; videoClassName?: string; behaviorOptions?: { load?: { enabled?: boolean; /** Backward-compatible alias for `enabled`. */ clickToLoad?: boolean; isLoaded?: boolean; onLoad?: () => void; label?: string; }; playback?: { controls?: boolean; autoPlay?: boolean; muted?: boolean; loop?: boolean; playsInline?: boolean; poster?: string; preload?: "none" | "metadata" | "auto"; }; captions?: { trackUrl?: string; language?: string; label?: string; }; }; } export function isEmbedVideoUrl(url: string): boolean { return ( url.includes("youtube.com") || url.includes("youtu.be") || url.includes("vimeo.com") ); } function getYouTubeVideoId(url: string): string | undefined { try { const parsed = new URL(url); if (parsed.hostname.includes("youtu.be")) { const id = parsed.pathname.split("/").filter(Boolean)[0]; return id?.trim() || undefined; } if (parsed.hostname.includes("youtube.com")) { if (parsed.pathname.startsWith("/watch")) { return parsed.searchParams.get("v")?.trim() || undefined; } if (parsed.pathname.startsWith("/embed/")) { return ( parsed.pathname.split("/").filter(Boolean)[1]?.trim() || undefined ); } if (parsed.pathname.startsWith("/shorts/")) { return ( parsed.pathname.split("/").filter(Boolean)[1]?.trim() || undefined ); } } } catch { return undefined; } return undefined; } function getVimeoVideoId(url: string): string | undefined { try { const parsed = new URL(url); if (!parsed.hostname.includes("vimeo.com")) return undefined; const segments = parsed.pathname.split("/").filter(Boolean); const numericSegment = [...segments] .reverse() .find((segment) => /^\d+$/.test(segment)); return numericSegment?.trim() || undefined; } catch { return undefined; } } function resolveEmbedUrlAndThumbnail(url: string): { embedUrl: string; thumbnailUrl?: string; provider?: "youtube" | "vimeo"; } { const youtubeId = getYouTubeVideoId(url); if (youtubeId) { return { embedUrl: `https://www.youtube.com/embed/${youtubeId}`, thumbnailUrl: `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`, provider: "youtube", }; } const vimeoId = getVimeoVideoId(url); if (vimeoId) { return { embedUrl: `https://player.vimeo.com/video/${vimeoId}`, thumbnailUrl: `https://vumbnail.com/${vimeoId}.jpg`, provider: "vimeo", }; } return { embedUrl: url }; } function withEmbedPlaybackParams({ embedUrl, provider, autoPlay, muted, playsInline, }: { embedUrl: string; provider?: "youtube" | "vimeo"; autoPlay: boolean; muted: boolean; playsInline: boolean; }) { if (!provider || !autoPlay) return embedUrl; try { const parsed = new URL(embedUrl); if (provider === "youtube") { parsed.searchParams.set("autoplay", "1"); parsed.searchParams.set("mute", muted ? "1" : "0"); if (playsInline) parsed.searchParams.set("playsinline", "1"); return parsed.toString(); } if (provider === "vimeo") { parsed.searchParams.set("autoplay", "1"); parsed.searchParams.set("muted", muted ? "1" : "0"); if (playsInline) parsed.searchParams.set("playsinline", "1"); return parsed.toString(); } } catch { return embedUrl; } return embedUrl; } /** * Shared video renderer for embed URLs and native video URLs. */ export function VideoBlock({ url, label, className, videoClassName, behaviorOptions, }: VideoBlockProps) { const poster = behaviorOptions?.playback?.poster; const { embedUrl, thumbnailUrl: derivedThumbnailUrl, provider, } = resolveEmbedUrlAndThumbnail(url); const thumbnailUrl = poster ?? derivedThumbnailUrl; const clickToLoad = behaviorOptions?.load?.enabled ?? behaviorOptions?.load?.clickToLoad ?? false; const [internalLoaded, setInternalLoaded] = useState(false); const hasControlledLoadedState = typeof behaviorOptions?.load?.isLoaded === "boolean"; const isLoaded = clickToLoad ? hasControlledLoadedState ? Boolean(behaviorOptions?.load?.isLoaded) : internalLoaded : true; const onLoad = () => { behaviorOptions?.load?.onLoad?.(); if (!hasControlledLoadedState) { setInternalLoaded(true); } }; const loadLabel = behaviorOptions?.load?.label ?? "Load video"; const controls = behaviorOptions?.playback?.controls ?? true; const autoPlay = behaviorOptions?.playback?.autoPlay ?? false; const muted = behaviorOptions?.playback?.muted ?? false; const loop = behaviorOptions?.playback?.loop ?? false; const playsInline = behaviorOptions?.playback?.playsInline ?? false; const preload = behaviorOptions?.playback?.preload ?? "metadata"; const captionTrackUrl = behaviorOptions?.captions?.trackUrl; const captionLanguage = behaviorOptions?.captions?.language ?? "en"; const captionLabel = behaviorOptions?.captions?.label ?? "English captions"; const embedSrc = withEmbedPlaybackParams({ embedUrl, provider, autoPlay, muted, playsInline, }); if (clickToLoad && !isLoaded) { return (

{thumbnailUrl ? ( ) : null}

); } if (isEmbedVideoUrl(url)) { return (

Video Block

Showcase

Video Block