"use client"; import * as React from "react"; import { OverlayAction } from "@/registry/berlin/circle-ui/overlay-action"; import { cn } from "@/registry/berlin/lib/utils"; type VideoContextValue = { isMuted: boolean; isPlaying: boolean; toggleMute: () => void; togglePlay: () => void; }; const VideoContext = React.createContext(null); function useVideoControls() { const context = React.useContext(VideoContext); if (!context) { throw new Error("Video controls must be used within Video."); } return context; } function parseTextContent(text: unknown): React.ReactNode { if (!text) return null; if (typeof text === "string") return text; if (React.isValidElement(text)) return text; if (Array.isArray(text)) { return text .map((item) => { if (typeof item === "string") return item; if ( item && typeof item === "object" && "children" in item && Array.isArray((item as { children?: unknown[] }).children) ) { return (item as { children: Array<{ text?: string }> }).children .map((child) => child.text ?? "") .join(""); } return ""; }) .join(" "); } return String(text); } function positionClasses( position: "top left" | "bottom right" | "center" = "bottom right", ) { if (position === "top left") return "left-4 top-4"; if (position === "center") return "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"; return "bottom-4 right-4"; } function PlayIcon({ className }: { className?: string }) { return ( ); } function PauseIcon({ className }: { className?: string }) { return ( ); } function VolumeIcon({ className, muted, }: { className?: string; muted: boolean; }) { return ( ); } function StarIcon({ className }: { className?: string }) { return ( ); } export interface VideoProps extends React.VideoHTMLAttributes { src: string; config?: { autoPlay?: boolean; muted?: boolean; loop?: boolean; }; } type PositionedControlProps = React.PropsWithChildren<{ className?: string; position?: "top left" | "bottom right" | "center"; }>; function PlayControl({ className, position = "bottom right", }: PositionedControlProps) { const { isPlaying, togglePlay } = useVideoControls(); return ( {isPlaying ? ( ) : ( )} ); } function MuteControl({ className, position = "top left", }: PositionedControlProps) { const { isMuted, toggleMute } = useVideoControls(); return ( ); } function PlayWithText({ className, position = "center", children, }: PositionedControlProps) { const { isPlaying, togglePlay } = useVideoControls(); return ( {isPlaying ? ( ) : ( )} {children} ); } type VideoComponent = React.FC & { Mute: typeof MuteControl; Play: typeof PlayControl; PlayWithText: typeof PlayWithText; }; const VideoBase: React.FC = ({ src, children, className, config, poster, ...props }) => { const videoRef = React.useRef(null); const [isPlaying, setIsPlaying] = React.useState(Boolean(config?.autoPlay)); const [isMuted, setIsMuted] = React.useState(Boolean(config?.muted)); const togglePlay = React.useCallback(() => { const node = videoRef.current; if (!node) return; if (node.paused) { void node.play(); } else { node.pause(); } }, []); const toggleMute = React.useCallback(() => { const node = videoRef.current; if (!node) return; node.muted = !node.muted; setIsMuted(node.muted); }, []); React.useEffect(() => { const node = videoRef.current; if (!node) return; node.muted = Boolean(config?.muted); setIsMuted(Boolean(config?.muted)); }, [config?.muted]); return (

{children ?? (

)}

); }; export const Video = VideoBase as VideoComponent; Video.Play = PlayControl; Video.Mute = MuteControl; Video.PlayWithText = PlayWithText; export interface MediaSlideProps { type: "image" | "video"; src: string; text?: unknown; poster?: string; altText?: string; desktopWidth?: number; label?: string; className?: string; } export function MediaSlide({ type, src, text, poster, altText, label, className, }: MediaSlideProps) { const textContent = parseTextContent(text); return (

{type === "video" ? (

); } export interface ImageLightboxProps { src: string; children: React.ReactNode; alt?: string; } export interface LightboxProps { image: string; alt: string; onClose: () => void; } export function Lightbox({ image, alt, onClose }: LightboxProps) { React.useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") onClose(); } document.body.style.overflow = "hidden"; window.addEventListener("keydown", onKeyDown); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKeyDown); }; }, [onClose]); return (

event.stopPropagation()} >

); } export function ImageWithLightbox({ src, alt = "", width, height, }: { src: string; alt?: string; width: number; height: number; }) { return ( {alt}

); } export function ImageLightbox({ src, children, alt = "" }: ImageLightboxProps) { const [isOpen, setIsOpen] = React.useState(false); const child = React.Children.only(children) as React.ReactElement<{ onClick?: React.MouseEventHandler; }>; return ( <> {React.cloneElement(child, { onClick: (event: React.MouseEvent) => { child.props.onClick?.(event); setIsOpen(true); }, })} {isOpen ? ( setIsOpen(false)} /> ) : null} ); } export interface TextOnlyTestimonialProps { reviewer: string; text: string; stars: number; source: string; link: string; } export function TextOnlyTestimonial({ reviewer, text, stars, source, link, }: TextOnlyTestimonialProps) { return (

{reviewer}

{text}

{Array.from({ length: stars }).map((_, index) => ( ))}

{source}

); } export function TestimonialsCarousel({ children, }: { children: React.ReactNode; }) { return (

{React.Children.map(children, (child, index) => (

{child}

))}

); } export interface HeroMediaItem { image?: { url: string; alternativeText?: string }; video?: { url: string }; visualText?: { text: string; name: string }; } export interface HeroGalleryProps { slides: HeroMediaItem[]; } export function HeroGallery({ slides }: HeroGalleryProps) { const [currentIndex, setCurrentIndex] = React.useState(0); const safeSlides = slides.length ? slides : [{ image: { url: "", alternativeText: "" } }]; function next() { setCurrentIndex((index) => (index + 1) % safeSlides.length); } function previous() { setCurrentIndex( (index) => (index - 1 + safeSlides.length) % safeSlides.length, ); } function mediaProps(media: HeroMediaItem) { if (media.video) { return { type: "video" as const, src: media.video.url, poster: media.image?.url || "", altText: media.image?.alternativeText || "", }; } return { type: "image" as const, src: media.image?.url || "", altText: media.image?.alternativeText || "", text: media.visualText ? `${media.visualText.text} - ${media.visualText.name}` : undefined, }; } return (

{currentIndex + 1} / {safeSlides.length}

); }

Installation

About

Usage

Dependencies

Source