@nationaldesignstudio/react 0.5.4 → 0.5.6

package/src/components/molecules/video-dialog/video-dialog.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { Dialog as BaseDialog } from "@base-ui-components/react/dialog";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import {
+	BlurredVideoBackdrop,
+	type BlurredVideoBackdropProps,
+} from "@/components/atoms/blurred-video-backdrop";
+import {
+	VideoPlayer,
+	type VideoPlayerProps,
+} from "@/components/atoms/video-player";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Variant Definitions
+// ============================================================================
+
+/**
+ * Video dialog container variants.
+ * Uses fixed positioning to cover the viewport.
+ */
+const videoDialogVariants = tv({
+	base: [
+		// Fixed positioning covering viewport
+		"fixed inset-0",
+		// Dark background base
+		"bg-black",
+		// Flex centering for the video
+		"flex items-center justify-center",
+		// Animation
+		"transition-opacity duration-300",
+		"data-[starting-style]:opacity-0",
+		"data-[ending-style]:opacity-0",
+		// Focus outline
+		"outline-none",
+	],
+});
+
+/**
+ * Close button variants.
+ */
+const closeButtonVariants = tv({
+	base: [
+		// Positioning
+		"absolute z-50",
+		// Size and shape
+		"w-48 h-48 rounded-full",
+		// Colors
+		"bg-black/60 text-white",
+		"hover:bg-black/80",
+		// Transition
+		"transition-all duration-150",
+		// Focus
+		"focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+		// Flex centering for icon
+		"flex items-center justify-center",
+		// Cursor
+		"cursor-pointer",
+	],
+	variants: {
+		position: {
+			"top-right": "top-24 right-24",
+			"top-left": "top-24 left-24",
+		},
+	},
+	defaultVariants: {
+		position: "top-right",
+	},
+});
+
+/**
+ * Video container variants.
+ * Expands to fill viewport, constrained by height (maintains aspect ratio).
+ */
+const videoContainerVariants = tv({
+	base: [
+		// Relative for z-index
+		"relative z-10",
+		// Fill available space
+		"w-full h-full",
+		// Flex to center the video
+		"flex items-center justify-center",
+		// Padding from viewport edges
+		"p-16 sm:p-24 lg:p-32",
+	],
+});
+
+// ============================================================================
+// VideoDialog Component
+// ============================================================================
+
+export interface VideoDialogProps
+	extends Omit<VideoPlayerProps, "videoRef" | "className"> {
+	/** Trigger element that opens the dialog */
+	trigger: React.ReactNode;
+	/** Blur intensity for backdrop (default: high) */
+	blur?: BlurredVideoBackdropProps["blur"];
+	/** Gradient overlay for backdrop (default: vignette) */
+	overlay?: BlurredVideoBackdropProps["overlay"];
+	/** Backdrop opacity (default: 0.6) */
+	backdropOpacity?: number;
+	/** Whether to show close button (default: true) */
+	showClose?: boolean;
+	/** Close button position (default: top-right) */
+	closePosition?: "top-right" | "top-left";
+	/** Video player rounded corners (default: lg) */
+	rounded?: VideoPlayerProps["rounded"];
+	/** Controlled open state */
+	open?: boolean;
+	/** Default open state */
+	defaultOpen?: boolean;
+	/** Callback when open state changes */
+	onOpenChange?: (open: boolean) => void;
+	/** Additional className for the dialog container */
+	className?: string;
+}
+
+/**
+ * VideoDialog - Fullscreen video modal with blurred video backdrop.
+ *
+ * Creates an immersive video viewing experience where the blurred video
+ * serves as the modal backdrop, with the main video centered on top.
+ * Based on the DGA modal pattern.
+ *
+ * Features:
+ * - Blurred video backdrop that syncs with main video
+ * - Configurable blur intensity and gradient overlays
+ * - Automatic play/pause when dialog opens/closes
+ * - HLS streaming support via Cloudflare Stream
+ * - Accessible dialog with focus trap and escape key handling
+ *
+ * @example
+ * ```tsx
+ * <VideoDialog
+ *   trigger={<Button>Watch Video</Button>}
+ *   cloudflare={{ videoId: "abc123", customerCode: "xyz789" }}
+ *   blur="high"
+ *   overlay="vignette"
+ * />
+ * ```
+ */
+const VideoDialog = React.forwardRef<HTMLDivElement, VideoDialogProps>(
+	(
+		{
+			trigger,
+			src,
+			cloudflare,
+			blur = "high",
+			overlay = "vignette",
+			backdropOpacity = 0.6,
+			showClose = true,
+			closePosition = "top-right",
+			rounded = "lg",
+			open: controlledOpen,
+			defaultOpen,
+			onOpenChange,
+			className,
+			autoPlay,
+			...videoProps
+		},
+		ref,
+	) => {
+		// Internal open state for autoplay control
+		const [internalOpen, setInternalOpen] = React.useState(
+			defaultOpen ?? false,
+		);
+		const isControlled = controlledOpen !== undefined;
+		const open = isControlled ? controlledOpen : internalOpen;
+
+		const handleOpenChange = React.useCallback(
+			(newOpen: boolean) => {
+				if (!isControlled) {
+					setInternalOpen(newOpen);
+				}
+				onOpenChange?.(newOpen);
+			},
+			[isControlled, onOpenChange],
+		);
+
+		// Primary video ref for sync
+		const primaryVideoRef = React.useRef<HTMLVideoElement | null>(null);
+
+		return (
+			<BaseDialog.Root
+				open={open}
+				defaultOpen={defaultOpen}
+				onOpenChange={handleOpenChange}
+			>
+				<BaseDialog.Trigger
+					render={
+						React.isValidElement(trigger)
+							? (trigger as React.ReactElement<Record<string, unknown>>)
+							: undefined
+					}
+				>
+					{!React.isValidElement(trigger) ? trigger : undefined}
+				</BaseDialog.Trigger>
+				<BaseDialog.Portal>
+					<BaseDialog.Popup
+						ref={ref}
+						className={cn(videoDialogVariants(), className)}
+						data-component="video-dialog"
+					>
+						{/* Blur Video Backdrop - covers entire viewport */}
+						<BlurredVideoBackdrop
+							videoRef={primaryVideoRef}
+							blur={blur}
+							overlay={overlay}
+							opacity={backdropOpacity}
+							extension={120}
+						/>
+
+						{/* Close Button */}
+						{showClose && (
+							<BaseDialog.Close
+								className={closeButtonVariants({ position: closePosition })}
+							>
+								<svg
+									width="20"
+									height="20"
+									viewBox="0 0 20 20"
+									fill="none"
+									aria-hidden="true"
+								>
+									<path
+										d="M4 4L16 16M4 16L16 4"
+										stroke="currentColor"
+										strokeWidth="2"
+										strokeLinecap="round"
+									/>
+								</svg>
+								<span className="sr-only">Close</span>
+							</BaseDialog.Close>
+						)}
+
+						{/* Video Container - fills viewport, video centered within */}
+						<div className={videoContainerVariants()}>
+							<VideoPlayer
+								src={src}
+								cloudflare={cloudflare}
+								videoRef={primaryVideoRef}
+								rounded={rounded}
+								autoPlay={autoPlay ?? open}
+								aspectRatio="16/9"
+								style={{
+									width: "min(100%, calc((100vh - 64px) * 16 / 9))",
+									maxHeight: "calc(100vh - 64px)",
+								}}
+								{...videoProps}
+							/>
+						</div>
+					</BaseDialog.Popup>
+				</BaseDialog.Portal>
+			</BaseDialog.Root>
+		);
+	},
+);
+
+VideoDialog.displayName = "VideoDialog";
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export {
+	VideoDialog,
+	videoDialogVariants,
+	closeButtonVariants,
+	videoContainerVariants,
+};

package/src/components/molecules/video-with-backdrop/video-with-backdrop.tsx

@@ -0,0 +1,383 @@
+"use client";
+
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import {
+	BlurredVideoBackdrop,
+	type BlurredVideoBackdropProps,
+} from "@/components/atoms/blurred-video-backdrop";
+import {
+	VideoPlayer,
+	type VideoPlayerProps,
+} from "@/components/atoms/video-player";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// Context
+// ============================================================================
+
+interface VideoWithBackdropContextValue {
+	/** Ref to primary video element */
+	videoRef: React.RefObject<HTMLVideoElement | null>;
+	/** Video source URL */
+	src?: string;
+	/** Cloudflare config */
+	cloudflare?: CloudflareConfig;
+}
+
+const VideoWithBackdropContext =
+	React.createContext<VideoWithBackdropContextValue | null>(null);
+
+function useVideoWithBackdropContext() {
+	const context = React.useContext(VideoWithBackdropContext);
+	if (!context) {
+		throw new Error(
+			"VideoWithBackdrop compound components must be used within VideoWithBackdrop.Root",
+		);
+	}
+	return context;
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Cloudflare Stream configuration */
+interface CloudflareConfig {
+	/** Cloudflare Stream video ID */
+	videoId: string;
+	/** Cloudflare customer code/subdomain */
+	customerCode: string;
+}
+
+// ============================================================================
+// Variant Definitions
+// ============================================================================
+
+/**
+ * Root container variants.
+ */
+const videoWithBackdropVariants = tv({
+	base: ["relative", "overflow-hidden", "bg-black"],
+	variants: {
+		/**
+		 * Full-height mode for dialogs.
+		 */
+		fullHeight: {
+			true: "h-full w-full",
+			false: "",
+		},
+	},
+	defaultVariants: {
+		fullHeight: false,
+	},
+});
+
+/**
+ * Content container variants.
+ */
+const contentVariants = tv({
+	base: ["relative", "z-10", "flex", "items-center", "justify-center"],
+	variants: {
+		fullHeight: {
+			true: "h-full w-full",
+			false: "",
+		},
+		padding: {
+			none: "",
+			sm: "p-16",
+			md: "p-24",
+			lg: "p-48",
+		},
+	},
+	defaultVariants: {
+		fullHeight: false,
+		padding: "md",
+	},
+});
+
+// ============================================================================
+// Root Component
+// ============================================================================
+
+export interface VideoWithBackdropRootProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof videoWithBackdropVariants> {
+	/** Video source URL (HLS .m3u8 or regular video file) */
+	src?: string;
+	/** Cloudflare Stream configuration (takes precedence over src) */
+	cloudflare?: CloudflareConfig;
+	/** Children to render */
+	children: React.ReactNode;
+}
+
+/**
+ * VideoWithBackdrop Root
+ *
+ * Container that provides video context to child components.
+ * Use with VideoWithBackdrop.Backdrop and VideoWithBackdrop.Content.
+ *
+ * @example
+ * ```tsx
+ * <VideoWithBackdrop.Root cloudflare={config}>
+ *   <VideoWithBackdrop.Backdrop blur="high" overlay="vignette" />
+ *   <VideoWithBackdrop.Content>
+ *     <VideoWithBackdrop.Video />
+ *   </VideoWithBackdrop.Content>
+ * </VideoWithBackdrop.Root>
+ * ```
+ */
+const VideoWithBackdropRoot = React.forwardRef<
+	HTMLDivElement,
+	VideoWithBackdropRootProps
+>(({ className, src, cloudflare, fullHeight, children, ...props }, ref) => {
+	const videoRef = React.useRef<HTMLVideoElement | null>(null);
+
+	const contextValue = React.useMemo(
+		() => ({ videoRef, src, cloudflare }),
+		[src, cloudflare],
+	);
+
+	return (
+		<VideoWithBackdropContext.Provider value={contextValue}>
+			<div
+				ref={ref}
+				className={cn(videoWithBackdropVariants({ fullHeight }), className)}
+				data-full-height={fullHeight ?? false}
+				{...props}
+			>
+				{children}
+			</div>
+		</VideoWithBackdropContext.Provider>
+	);
+});
+VideoWithBackdropRoot.displayName = "VideoWithBackdropRoot";
+
+// ============================================================================
+// Backdrop Component
+// ============================================================================
+
+export interface VideoWithBackdropBackdropProps
+	extends Omit<BlurredVideoBackdropProps, "videoRef"> {}
+
+/**
+ * VideoWithBackdrop Backdrop
+ *
+ * Renders the blurred video backdrop layer using canvas.
+ * Automatically draws from the video element in context.
+ */
+const VideoWithBackdropBackdrop = React.forwardRef<
+	HTMLDivElement,
+	VideoWithBackdropBackdropProps
+>(({ ...props }, ref) => {
+	const { videoRef } = useVideoWithBackdropContext();
+
+	return <BlurredVideoBackdrop ref={ref} videoRef={videoRef} {...props} />;
+});
+VideoWithBackdropBackdrop.displayName = "VideoWithBackdropBackdrop";
+
+// ============================================================================
+// Content Component
+// ============================================================================
+
+export interface VideoWithBackdropContentProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof contentVariants> {}
+
+/**
+ * VideoWithBackdrop Content
+ *
+ * Container for the main video player and any additional content.
+ * Positioned above the backdrop with z-index.
+ */
+const VideoWithBackdropContent = React.forwardRef<
+	HTMLDivElement,
+	VideoWithBackdropContentProps
+>(({ className, fullHeight, padding, children, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			className={cn(contentVariants({ fullHeight, padding }), className)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+});
+VideoWithBackdropContent.displayName = "VideoWithBackdropContent";
+
+// ============================================================================
+// Video Component (convenience wrapper)
+// ============================================================================
+
+export interface VideoWithBackdropVideoProps
+	extends Omit<VideoPlayerProps, "videoRef"> {
+	/** Max width of the video player container */
+	maxWidth?: string;
+}
+
+/**
+ * VideoWithBackdrop Video
+ *
+ * Convenience wrapper for VideoPlayer that automatically connects
+ * to the backdrop via context.
+ */
+const VideoWithBackdropVideo = React.forwardRef<
+	HTMLDivElement,
+	VideoWithBackdropVideoProps
+>(({ className, maxWidth = "960px", cloudflare, src, ...props }, ref) => {
+	const context = useVideoWithBackdropContext();
+
+	// Use context values if not explicitly provided
+	const videoCloudflare = cloudflare ?? context.cloudflare;
+	const videoSrc = src ?? context.src;
+
+	return (
+		<div ref={ref} className={cn("w-full", className)} style={{ maxWidth }}>
+			<VideoPlayer
+				cloudflare={videoCloudflare}
+				src={videoSrc}
+				videoRef={context.videoRef}
+				{...props}
+			/>
+		</div>
+	);
+});
+VideoWithBackdropVideo.displayName = "VideoWithBackdropVideo";
+
+// ============================================================================
+// Simple Pre-composed Component
+// ============================================================================
+
+export interface VideoWithBackdropProps
+	extends Omit<VideoPlayerProps, "videoRef" | "className" | "aspectRatio"> {
+	/** Blur intensity (default: high) */
+	blur?: BlurredVideoBackdropProps["blur"];
+	/** Gradient overlay (default: vignette) */
+	overlay?: BlurredVideoBackdropProps["overlay"];
+	/** Backdrop opacity (default: 0.6) */
+	backdropOpacity?: number;
+	/** Max width of video player (default: 960px) */
+	maxWidth?: string;
+	/** Content padding (default: md) */
+	padding?: "none" | "sm" | "md" | "lg";
+	/** Video player rounded corners */
+	rounded?: VideoPlayerProps["rounded"];
+	/** Additional className for root container */
+	className?: string;
+	/** Target FPS for backdrop canvas (default: 30) */
+	targetFps?: number;
+	/** Canvas scale factor for backdrop (default: 0.5) */
+	scale?: number;
+}
+
+/**
+ * VideoWithBackdrop - Pre-composed video player with blurred backdrop.
+ *
+ * A simple, ready-to-use component that combines VideoPlayer with
+ * BlurredVideoBackdrop for modal video experiences. Uses canvas rendering
+ * for optimal performance.
+ *
+ * For custom layouts, use the compound components:
+ * - VideoWithBackdrop.Root
+ * - VideoWithBackdrop.Backdrop
+ * - VideoWithBackdrop.Content
+ * - VideoWithBackdrop.Video
+ *
+ * @example
+ * ```tsx
+ * // Simple usage (in a full-height container like Dialog)
+ * <VideoWithBackdrop
+ *   cloudflare={{ videoId: "...", customerCode: "..." }}
+ *   autoPlay
+ *   blur="high"
+ *   overlay="vignette"
+ * />
+ *
+ * // With Dialog
+ * <Dialog size="full" variant="minimal">
+ *   <VideoWithBackdrop cloudflare={config} autoPlay />
+ * </Dialog>
+ * ```
+ */
+const VideoWithBackdrop = React.forwardRef<
+	HTMLDivElement,
+	VideoWithBackdropProps
+>(
+	(
+		{
+			src,
+			cloudflare,
+			blur = "high",
+			overlay = "vignette",
+			backdropOpacity = 0.6,
+			maxWidth = "960px",
+			padding = "md",
+			rounded = "lg",
+			className,
+			targetFps = 30,
+			scale = 0.5,
+			...videoProps
+		},
+		ref,
+	) => {
+		const videoRef = React.useRef<HTMLVideoElement | null>(null);
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					videoWithBackdropVariants({ fullHeight: true }),
+					className,
+				)}
+				data-component="video-with-backdrop"
+			>
+				<BlurredVideoBackdrop
+					videoRef={videoRef}
+					blur={blur}
+					overlay={overlay}
+					opacity={backdropOpacity}
+					targetFps={targetFps}
+					scale={scale}
+				/>
+				<div className={cn(contentVariants({ fullHeight: true, padding }))}>
+					<div className="w-full" style={{ maxWidth }}>
+						<VideoPlayer
+							src={src}
+							cloudflare={cloudflare}
+							videoRef={videoRef}
+							rounded={rounded}
+							{...videoProps}
+						/>
+					</div>
+				</div>
+			</div>
+		);
+	},
+);
+VideoWithBackdrop.displayName = "VideoWithBackdrop";
+
+// ============================================================================
+// Compound Component Export
+// ============================================================================
+
+export const VideoWithBackdropParts = Object.assign(VideoWithBackdropRoot, {
+	Root: VideoWithBackdropRoot,
+	Backdrop: VideoWithBackdropBackdrop,
+	Content: VideoWithBackdropContent,
+	Video: VideoWithBackdropVideo,
+});
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export {
+	VideoWithBackdrop,
+	VideoWithBackdropRoot,
+	VideoWithBackdropBackdrop,
+	VideoWithBackdropContent,
+	VideoWithBackdropVideo,
+	videoWithBackdropVariants,
+	contentVariants,
+};

package/src/hooks/index.ts

@@ -1 +1,17 @@
+// Utility hooks
+
+export {
+	BREAKPOINTS,
+	type Breakpoint,
+	useBreakpoint,
+	useMaxBreakpoint,
+	useMinBreakpoint,
+} from "./use-breakpoint";
+// Video player hooks
+export { type CaptionCue, useCaptions } from "./use-captions";
 export { useEventListener } from "./use-event-listener";
+export {
+	type UseVideoKeyboardOptions,
+	type UseVideoKeyboardReturn,
+	useVideoKeyboard,
+} from "./use-video-keyboard";