@nationaldesignstudio/react 0.5.5 → 0.6.0

package/src/components/atoms/video-player/video-player.tsx

@@ -0,0 +1,811 @@
+"use client";
+
+import {
+	MediaControlBar,
+	MediaController,
+	MediaLoadingIndicator,
+	MediaMuteButton,
+	MediaPlayButton,
+	MediaTimeDisplay,
+	MediaTimeRange,
+	MediaVolumeRange,
+} from "media-chrome/react";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { useCaptions } from "@/hooks/use-captions";
+import { useVideoKeyboard } from "@/hooks/use-video-keyboard";
+import { cn } from "@/lib/utils";
+import { CaptionOverlay } from "./caption-overlay";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Cloudflare Stream configuration */
+interface CloudflareConfig {
+	/** Cloudflare Stream video ID */
+	videoId: string;
+	/** Cloudflare customer code/subdomain */
+	customerCode: string;
+}
+
+// ============================================================================
+// Variant Definitions
+// ============================================================================
+
+/**
+ * Video player container variants.
+ */
+const videoPlayerVariants = tv({
+	base: [
+		"relative",
+		"bg-black",
+		"overflow-hidden",
+		// Focus styling for keyboard navigation
+		"focus:outline-none",
+		"focus-visible:ring-2",
+		"focus-visible:ring-white/50",
+	],
+	variants: {
+		aspectRatio: {
+			"16/9": "aspect-video",
+			"4/3": "aspect-[4/3]",
+			"1/1": "aspect-square",
+			"9/16": "aspect-[9/16]",
+			auto: "",
+		},
+		rounded: {
+			none: "",
+			sm: "rounded-4",
+			md: "rounded-8",
+			lg: "rounded-12",
+		},
+	},
+	defaultVariants: {
+		aspectRatio: "16/9",
+		rounded: "none",
+	},
+});
+
+/**
+ * Media controller container styles.
+ * Uses CSS custom properties to configure media-chrome components.
+ * Styled to match DGA video player design with ghost-style buttons.
+ */
+const mediaControllerVariants = tv({
+	base: [
+		"absolute inset-0",
+		"w-full h-full",
+		// Button styling - transparent base, hover shows background
+		"[--media-control-background:transparent]",
+		"[--media-control-hover-background:var(--color-video-player-button-bg-hover)]",
+		"[--media-control-padding:8px]",
+		"[--media-control-height:36px]",
+		"[--media-button-icon-width:20px]",
+		"[--media-button-icon-height:20px]",
+		// Progress bar / range styling
+		"[--media-range-track-background:var(--color-video-player-progress-bg)]",
+		"[--media-range-bar-color:var(--color-video-player-progress-fill)]",
+		"[--media-range-track-height:4px]",
+		"[--media-range-track-border-radius:2px]",
+		"[--media-range-thumb-background:var(--color-video-player-progress-fill)]",
+		"[--media-range-thumb-height:12px]",
+		"[--media-range-thumb-width:12px]",
+		"[--media-range-thumb-border-radius:50%]",
+		// Text/icon colors
+		"[--media-icon-color:var(--color-video-player-controls-text)]",
+		"[--media-primary-color:var(--color-video-player-controls-text)]",
+		"[--media-secondary-color:transparent]",
+		"[--media-text-color:var(--color-video-player-controls-text)]",
+		"[--media-font-size:14px]",
+		// Time display styling
+		"[--media-time-display-background:transparent]",
+	],
+});
+
+/**
+ * Media-chrome control button styles.
+ * Applied to media-play-button, media-mute-button, etc.
+ * Transparent by default, shows background on hover (ghost style).
+ */
+const mediaButtonStyles: React.CSSProperties = {
+	padding: "8px",
+	borderRadius: "50%",
+	// Tooltip styling - consistent across all buttons
+	"--media-tooltip-background": "var(--color-video-player-tooltip-bg)",
+	"--media-tooltip-arrow-display": "none",
+	"--media-tooltip-distance": "8px",
+} as React.CSSProperties;
+
+/**
+ * Time range styles matching DGA.
+ */
+const timeRangeStyles: React.CSSProperties = {
+	flex: 1,
+	background: "transparent",
+	// Preview tooltip styling - consistent with button tooltips
+	"--media-box-arrow-display": "none",
+	"--media-preview-box-margin": "0 0 8px 0",
+	"--media-preview-time-margin": "0 0 8px 0",
+	"--media-preview-time-background": "var(--color-video-player-tooltip-bg)",
+} as React.CSSProperties;
+
+/**
+ * Volume range styles.
+ */
+const volumeRangeStyles: React.CSSProperties = {
+	width: "80px",
+	background: "transparent",
+	// Tooltip styling - consistent with button tooltips
+	"--media-tooltip-background": "var(--color-video-player-tooltip-bg)",
+	"--media-tooltip-arrow-display": "none",
+	"--media-tooltip-distance": "8px",
+} as React.CSSProperties;
+
+/**
+ * Time display styles.
+ */
+const timeDisplayStyles: React.CSSProperties = {
+	background: "transparent",
+	fontFamily: "monospace",
+	fontSize: "14px",
+	color: "white",
+	whiteSpace: "nowrap",
+};
+
+/**
+ * Control bar variants.
+ * Note: Positioning is handled via inline styles to override web component defaults.
+ * Tailwind classes handle background color and visibility transitions.
+ */
+const controlBarVariants = tv({
+	base: [
+		// Layout handled in inline styles, but we need flex
+		"flex items-center",
+		// Background using semantic token
+		"bg-video-player-controls-bg",
+		// Animation
+		"transition-all duration-300",
+	],
+	variants: {
+		visible: {
+			true: "opacity-100 translate-y-0",
+			false: "opacity-0 translate-y-16 pointer-events-none",
+		},
+	},
+	defaultVariants: {
+		visible: true,
+	},
+});
+
+/**
+ * Control button styles for custom buttons.
+ * Transparent by default, shows background on hover (ghost style).
+ */
+const controlButtonVariants = tv({
+	base: [
+		"flex items-center justify-center",
+		"p-8 rounded-full",
+		// Transparent by default, background on hover
+		"bg-transparent",
+		"text-video-player-controls-text",
+		"hover:bg-video-player-button-bg-hover",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-video-player-progress-bg",
+		"transition-colors duration-150",
+		"cursor-pointer",
+	],
+});
+
+/**
+ * Loading overlay variants.
+ */
+const loadingOverlayVariants = tv({
+	base: [
+		"absolute inset-0",
+		"flex items-center justify-center",
+		"bg-black/50",
+		"pointer-events-none",
+		"z-10",
+	],
+});
+
+// ============================================================================
+// HLS Hook (internal)
+// ============================================================================
+
+/**
+ * Internal hook for HLS.js initialization.
+ * Handles both native HLS (Safari) and HLS.js (Chrome/Firefox).
+ */
+function useHlsInternal(
+	videoRef: React.RefObject<HTMLVideoElement | null>,
+	src: string | undefined,
+	enabled: boolean,
+) {
+	const [isLoading, setIsLoading] = React.useState(true);
+	const [error, setError] = React.useState<Error | null>(null);
+	const hlsRef = React.useRef<unknown>(null);
+
+	React.useEffect(() => {
+		if (!enabled || !src || !videoRef.current) {
+			return;
+		}
+
+		const video = videoRef.current;
+		const isHlsSource = src.includes(".m3u8");
+
+		// For non-HLS sources, just set the src directly
+		if (!isHlsSource) {
+			video.src = src;
+			setIsLoading(false);
+			return;
+		}
+
+		// Check if native HLS is supported (Safari)
+		if (video.canPlayType("application/vnd.apple.mpegurl")) {
+			video.src = src;
+			setIsLoading(false);
+			return;
+		}
+
+		// Try to use HLS.js for other browsers
+		const loadHls = async () => {
+			try {
+				// Dynamic import of HLS.js (peer dependency)
+				const HlsModule = await import("hls.js");
+				const Hls = HlsModule.default;
+
+				if (!Hls.isSupported()) {
+					// Fallback: try setting src directly
+					video.src = src;
+					setIsLoading(false);
+					return;
+				}
+
+				const hls = new Hls({
+					enableWorker: true,
+					lowLatencyMode: false,
+				});
+
+				hls.loadSource(src);
+				hls.attachMedia(video);
+
+				hls.on(Hls.Events.MANIFEST_PARSED, () => {
+					setIsLoading(false);
+				});
+
+				hls.on(
+					Hls.Events.ERROR,
+					(_event: unknown, data: { fatal?: boolean; details?: string }) => {
+						if (data.fatal) {
+							setError(new Error(`HLS error: ${data.details}`));
+							setIsLoading(false);
+						}
+					},
+				);
+
+				hlsRef.current = hls;
+			} catch {
+				// HLS.js not available, try direct source
+				video.src = src;
+				setIsLoading(false);
+			}
+		};
+
+		loadHls();
+
+		return () => {
+			if (hlsRef.current) {
+				(hlsRef.current as { destroy: () => void }).destroy();
+				hlsRef.current = null;
+			}
+		};
+	}, [enabled, src, videoRef]);
+
+	return { isLoading, error };
+}
+
+// ============================================================================
+// VideoPlayer Component
+// ============================================================================
+
+export interface VideoPlayerProps
+	extends Omit<
+			React.HTMLAttributes<HTMLDivElement>,
+			"children" | "onError" | "onPlay" | "onPause" | "onEnded" | "onTimeUpdate"
+		>,
+		VariantProps<typeof videoPlayerVariants> {
+	/** Video source URL (HLS .m3u8 or regular video file) */
+	src?: string;
+	/** Cloudflare Stream configuration (takes precedence over src) */
+	cloudflare?: CloudflareConfig;
+	/** Poster image URL */
+	poster?: string;
+	/** VTT captions URL */
+	captionsSrc?: string;
+	/** Whether to autoplay (default: false) */
+	autoPlay?: boolean;
+	/** Whether to loop the video (default: false) */
+	loop?: boolean;
+	/** Whether to mute initially (default: false) */
+	muted?: boolean;
+	/** Whether to show controls (default: true) */
+	controls?: boolean;
+	/** Whether to auto-hide controls when not interacting (default: true) */
+	autoHideControls?: boolean;
+	/** Control auto-hide delay in ms (default: 3000) */
+	autoHideDelay?: number;
+	/** Whether captions are enabled by default (default: false) */
+	captionsEnabled?: boolean;
+	/** Callback when video starts playing */
+	onPlay?: () => void;
+	/** Callback when video pauses */
+	onPause?: () => void;
+	/** Callback when video ends */
+	onEnded?: () => void;
+	/** Callback on time update */
+	onTimeUpdate?: (time: number) => void;
+	/** Callback on error */
+	onError?: (error: Error) => void;
+	/** Ref to the video element */
+	videoRef?: React.RefObject<HTMLVideoElement | null>;
+}
+
+/**
+ * VideoPlayer - Standalone video player component with media-chrome controls.
+ *
+ * Supports Cloudflare Stream (recommended) or direct video URLs with HLS support.
+ * Works standalone or can be composed with Modal for fullscreen playback.
+ *
+ * @example
+ * ```tsx
+ * // With Cloudflare Stream (recommended)
+ * <VideoPlayer
+ *   cloudflare={{ videoId: "abc123", customerCode: "xyz789" }}
+ *   poster="/thumbnail.jpg"
+ *   captionsSrc="/captions.vtt"
+ * />
+ *
+ * // With direct URL
+ * <VideoPlayer
+ *   src="https://example.com/video.mp4"
+ *   poster="/thumbnail.jpg"
+ * />
+ *
+ * // With Modal for fullscreen
+ * <Modal trigger={<Button>Watch Video</Button>}>
+ *   <VideoPlayer cloudflare={{ videoId: "...", customerCode: "..." }} />
+ * </Modal>
+ * ```
+ */
+const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
+	(
+		{
+			className,
+			src,
+			cloudflare,
+			poster,
+			captionsSrc,
+			autoPlay = false,
+			loop = false,
+			muted = false,
+			controls = true,
+			autoHideControls = true,
+			autoHideDelay = 3000,
+			captionsEnabled: initialCaptionsEnabled = false,
+			aspectRatio,
+			rounded,
+			onPlay,
+			onPause,
+			onEnded,
+			onTimeUpdate,
+			onError,
+			videoRef: externalVideoRef,
+			...props
+		},
+		ref,
+	) => {
+		// Internal refs
+		const containerRef = React.useRef<HTMLDivElement>(null);
+		const internalVideoRef = React.useRef<HTMLVideoElement | null>(null);
+		const controlsTimeoutRef = React.useRef<ReturnType<
+			typeof setTimeout
+		> | null>(null);
+
+		// State
+		const [isPlaying, setIsPlaying] = React.useState(false);
+		const [currentTime, setCurrentTime] = React.useState(0);
+		const [controlsVisible, setControlsVisible] = React.useState(true);
+		const [captionsEnabled, setCaptionsEnabled] = React.useState(
+			initialCaptionsEnabled,
+		);
+		const [isFullscreen, setIsFullscreen] = React.useState(false);
+
+		// Compute video source URL
+		const videoSrc = React.useMemo(() => {
+			if (cloudflare) {
+				return `https://customer-${cloudflare.customerCode}.cloudflarestream.com/${cloudflare.videoId}/manifest/video.m3u8`;
+			}
+			return src;
+		}, [cloudflare, src]);
+
+		// HLS support
+		const { isLoading, error: hlsError } = useHlsInternal(
+			internalVideoRef,
+			videoSrc,
+			true,
+		);
+
+		// Caption parsing
+		const { activeCue } = useCaptions({
+			src: captionsSrc,
+			currentTime,
+		});
+
+		// Merge refs
+		React.useEffect(() => {
+			if (externalVideoRef) {
+				(
+					externalVideoRef as React.MutableRefObject<HTMLVideoElement | null>
+				).current = internalVideoRef.current;
+			}
+		}, [externalVideoRef]);
+
+		// Merge container ref
+		React.useImperativeHandle(
+			ref,
+			() => containerRef.current as HTMLDivElement,
+		);
+
+		// Report errors
+		React.useEffect(() => {
+			if (hlsError && onError) {
+				onError(hlsError);
+			}
+		}, [hlsError, onError]);
+
+		// Video event handlers
+		React.useEffect(() => {
+			const video = internalVideoRef.current;
+			if (!video) return;
+
+			const handlePlay = () => {
+				setIsPlaying(true);
+				onPlay?.();
+			};
+
+			const handlePause = () => {
+				setIsPlaying(false);
+				onPause?.();
+			};
+
+			const handleEnded = () => {
+				setIsPlaying(false);
+				onEnded?.();
+			};
+
+			const handleTimeUpdate = () => {
+				setCurrentTime(video.currentTime);
+				onTimeUpdate?.(video.currentTime);
+			};
+
+			const handleCanPlay = () => {
+				if (autoPlay) {
+					video.play().catch(() => {
+						// Autoplay may be blocked
+					});
+				}
+			};
+
+			video.addEventListener("play", handlePlay);
+			video.addEventListener("pause", handlePause);
+			video.addEventListener("ended", handleEnded);
+			video.addEventListener("timeupdate", handleTimeUpdate);
+			video.addEventListener("canplay", handleCanPlay);
+
+			return () => {
+				video.removeEventListener("play", handlePlay);
+				video.removeEventListener("pause", handlePause);
+				video.removeEventListener("ended", handleEnded);
+				video.removeEventListener("timeupdate", handleTimeUpdate);
+				video.removeEventListener("canplay", handleCanPlay);
+			};
+		}, [autoPlay, onPlay, onPause, onEnded, onTimeUpdate]);
+
+		// Auto-hide controls
+		React.useEffect(() => {
+			if (!autoHideControls || !isPlaying || !controlsVisible) return;
+
+			controlsTimeoutRef.current = setTimeout(() => {
+				setControlsVisible(false);
+			}, autoHideDelay);
+
+			return () => {
+				if (controlsTimeoutRef.current) {
+					clearTimeout(controlsTimeoutRef.current);
+				}
+			};
+		}, [autoHideControls, isPlaying, controlsVisible, autoHideDelay]);
+
+		// Track fullscreen state
+		React.useEffect(() => {
+			const handleFullscreenChange = () => {
+				setIsFullscreen(!!document.fullscreenElement);
+			};
+
+			document.addEventListener("fullscreenchange", handleFullscreenChange);
+			document.addEventListener(
+				"webkitfullscreenchange",
+				handleFullscreenChange,
+			);
+			return () => {
+				document.removeEventListener(
+					"fullscreenchange",
+					handleFullscreenChange,
+				);
+				document.removeEventListener(
+					"webkitfullscreenchange",
+					handleFullscreenChange,
+				);
+			};
+		}, []);
+
+		// Actions
+		const togglePlay = React.useCallback(() => {
+			const video = internalVideoRef.current;
+			if (!video) return;
+
+			if (video.paused) {
+				video.play().catch(() => {});
+			} else {
+				video.pause();
+			}
+		}, []);
+
+		const toggleCaptions = React.useCallback(() => {
+			setCaptionsEnabled((prev) => !prev);
+		}, []);
+
+		const toggleFullscreen = React.useCallback(() => {
+			if (!document.fullscreenElement) {
+				containerRef.current?.requestFullscreen();
+			} else {
+				document.exitFullscreen();
+			}
+		}, []);
+
+		const showControls = React.useCallback(() => {
+			setControlsVisible(true);
+			if (controlsTimeoutRef.current) {
+				clearTimeout(controlsTimeoutRef.current);
+			}
+		}, []);
+
+		const handleMouseLeave = React.useCallback(() => {
+			if (autoHideControls && isPlaying) {
+				setControlsVisible(false);
+			}
+		}, [autoHideControls, isPlaying]);
+
+		// Keyboard shortcuts for video player
+		const { containerProps: keyboardProps } = useVideoKeyboard({
+			videoRef: internalVideoRef,
+			onTogglePlay: togglePlay,
+			onToggleFullscreen: toggleFullscreen,
+			onToggleCaptions: captionsSrc ? toggleCaptions : undefined,
+			onShowControls: showControls,
+		});
+
+		return (
+			// biome-ignore lint/a11y/noStaticElementInteractions: role is applied via keyboardProps spread
+			<div
+				ref={containerRef}
+				className={cn(videoPlayerVariants({ aspectRatio, rounded }), className)}
+				onMouseMove={showControls}
+				onMouseLeave={handleMouseLeave}
+				{...keyboardProps}
+				{...props}
+			>
+				{controls ? (
+					<MediaController
+						noAutohide={true}
+						className={mediaControllerVariants()}
+					>
+						{/* Video Element */}
+						<video
+							ref={internalVideoRef}
+							slot="media"
+							poster={poster}
+							loop={loop}
+							muted={muted}
+							playsInline
+							crossOrigin="anonymous"
+							className="w-full h-full object-contain"
+						/>
+
+						{/* Loading Indicator */}
+						<MediaLoadingIndicator slot="centered-chrome" noAutohide />
+
+						{/* Click to play/pause overlay */}
+						<div
+							onClick={togglePlay}
+							className="absolute inset-0 cursor-pointer z-[1]"
+							aria-hidden="true"
+						/>
+
+						{/* Control Bar */}
+						<MediaControlBar
+							className={controlBarVariants({ visible: controlsVisible })}
+							onClick={(e: React.MouseEvent) => e.stopPropagation()}
+							style={{
+								position: "absolute",
+								left: "24px",
+								right: "24px",
+								bottom: "24px",
+								gap: "12px",
+								padding: "8px 16px",
+								borderRadius: "9999px",
+								backdropFilter: "blur(10px)",
+								WebkitBackdropFilter: "blur(10px)",
+								zIndex: 2,
+							}}
+						>
+							<MediaPlayButton style={mediaButtonStyles} />
+							<MediaMuteButton style={mediaButtonStyles} />
+							<MediaVolumeRange style={volumeRangeStyles} />
+							<MediaTimeDisplay
+								style={timeDisplayStyles}
+								showDuration
+								noToggle
+							/>
+							<MediaTimeRange style={timeRangeStyles} />
+
+							{/* Captions Button */}
+							{captionsSrc && (
+								<button
+									type="button"
+									className={controlButtonVariants()}
+									onClick={(e) => {
+										e.stopPropagation();
+										toggleCaptions();
+									}}
+									aria-label={
+										captionsEnabled ? "Disable captions" : "Enable captions"
+									}
+									aria-pressed={captionsEnabled}
+								>
+									<CaptionsIcon enabled={captionsEnabled} />
+								</button>
+							)}
+
+							{/* Fullscreen Button */}
+							<button
+								type="button"
+								className={controlButtonVariants()}
+								onClick={(e) => {
+									e.stopPropagation();
+									toggleFullscreen();
+								}}
+								aria-label={
+									isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
+								}
+							>
+								<FullscreenIcon isFullscreen={isFullscreen} />
+							</button>
+						</MediaControlBar>
+					</MediaController>
+				) : (
+					/* Video without controls */
+					<video
+						ref={internalVideoRef}
+						poster={poster}
+						loop={loop}
+						muted={muted}
+						playsInline
+						crossOrigin="anonymous"
+						className="w-full h-full object-contain"
+						onClick={togglePlay}
+					/>
+				)}
+
+				{/* Loading Overlay (when HLS is loading) */}
+				{isLoading && (
+					<div className={loadingOverlayVariants()}>
+						<div className="w-40 h-40 border-3 border-white/30 border-t-white rounded-full animate-spin" />
+					</div>
+				)}
+
+				{/* Error Display */}
+				{hlsError && (
+					<div className={loadingOverlayVariants()}>
+						<div className="text-white text-center px-16">
+							<p className="typography-body-sm-sm">Failed to load video</p>
+							<p className="typography-caption text-white/60 mt-4">
+								{hlsError.message}
+							</p>
+						</div>
+					</div>
+				)}
+
+				{/* Caption Overlay */}
+				{captionsEnabled && activeCue && <CaptionOverlay cue={activeCue} />}
+			</div>
+		);
+	},
+);
+VideoPlayer.displayName = "VideoPlayer";
+
+// ============================================================================
+// Icons
+// ============================================================================
+
+const CaptionsIcon = ({ enabled }: { enabled: boolean }) => (
+	<svg
+		className="w-20 h-20"
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		aria-hidden="true"
+	>
+		{enabled ? (
+			// Captions On
+			<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" />
+		) : (
+			// Captions Off (with strike-through)
+			<>
+				<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" />
+				<line
+					x1="4"
+					y1="20"
+					x2="20"
+					y2="4"
+					stroke="currentColor"
+					strokeWidth="2"
+				/>
+			</>
+		)}
+	</svg>
+);
+
+const FullscreenIcon = ({ isFullscreen }: { isFullscreen: boolean }) => (
+	<svg
+		className="w-20 h-20"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+	>
+		{isFullscreen ? (
+			// Minimize (exit fullscreen)
+			<>
+				<polyline points="4 14 10 14 10 20" />
+				<polyline points="20 10 14 10 14 4" />
+				<line x1="14" y1="10" x2="21" y2="3" />
+				<line x1="3" y1="21" x2="10" y2="14" />
+			</>
+		) : (
+			// Maximize (enter fullscreen)
+			<>
+				<polyline points="15 3 21 3 21 9" />
+				<polyline points="9 21 3 21 3 15" />
+				<line x1="21" y1="3" x2="14" y2="10" />
+				<line x1="3" y1="21" x2="10" y2="14" />
+			</>
+		)}
+	</svg>
+);
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export {
+	VideoPlayer,
+	videoPlayerVariants,
+	mediaControllerVariants,
+	controlBarVariants,
+	controlButtonVariants,
+	loadingOverlayVariants,
+};