@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/media-player-controls.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import React from "react"
+import { useMediaSelector } from "../context/media-context"
+import { useDeviceInfo, useContainerQuery } from "@rp/ui/hooks/use-mobile"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerControlsProps {
+	children: React.ReactNode
+	className?: string
+	asChild?: boolean
+	variant?: 'default' | 'mobile' | 'compact'
+	adaptiveLayout?: boolean
+}
+
+export function MediaPlayerControls({
+	children,
+	className,
+	asChild = false,
+	variant,
+	adaptiveLayout = true,
+	...props
+}: MediaPlayerControlsProps) {
+	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
+	const disabled = useMediaSelector((state) => state.error !== null)
+	const { isMobile, isTablet, isTouchDevice, orientation } = useDeviceInfo()
+	
+	// Container ref for responsive queries
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const isCompactContainer = useContainerQuery(containerRef as React.RefObject<HTMLElement>, '(max-width: 480px)')
+	
+	// Determine the effective variant
+	const effectiveVariant = React.useMemo(() => {
+		if (variant) return variant
+		if (!adaptiveLayout) return 'default'
+		
+		// Auto-detect based on device and container size
+		if (isMobile || isCompactContainer) return 'mobile'
+		if (isTablet) return 'compact'
+		return 'default'
+	}, [variant, adaptiveLayout, isMobile, isTablet, isCompactContainer])
+	
+	// Get mobile-optimized classes
+	const getMobileClasses = () => {
+		const baseClasses = [
+			// Base mobile-first classes
+			"pointer-events-none absolute right-0 bottom-0 left-0 z-50",
+			"opacity-0 transition-opacity duration-200",
+			"data-[visible]:pointer-events-auto data-[visible]:opacity-100"
+		]
+		
+		switch (effectiveVariant) {
+			case 'mobile':
+				return [
+					...baseClasses,
+					// Mobile-first layout with larger touch targets
+					"flex flex-col gap-3 px-4 py-4",
+					// Larger padding for better thumb reach
+					"[@container(min-width:360px)]:px-6 [@container(min-width:360px)]:py-5",
+					// Portrait orientation adjustments
+					orientation === 'portrait' && "pb-6",
+					// Fullscreen mobile adjustments
+					"[:fullscreen_&]:px-8 [:fullscreen_&]:py-6",
+					// Ensure minimum touch target sizes (44px)
+					"[&_button]:min-h-[44px] [&_button]:min-w-[44px]",
+					"[&_[role=slider]]:min-h-[44px]",
+					// Better spacing for touch
+					"[&>*]:gap-4",
+				]
+			
+			case 'compact':
+				return [
+					...baseClasses,
+					// Tablet-optimized compact layout
+					"flex items-center gap-2 px-4 py-3",
+					"[:fullscreen_&]:px-6 [:fullscreen_&]:py-4",
+					// Medium-sized touch targets (40px)
+					"[&_button]:min-h-[40px] [&_button]:min-w-[40px]",
+					"[&_[role=slider]]:min-h-[40px]",
+				]
+			
+			default:
+				return [
+					...baseClasses,
+					// Desktop default layout
+					"flex items-center gap-2 px-4 py-3",
+					"[:fullscreen_&]:px-6 [:fullscreen_&]:py-4",
+					// Standard button sizes for desktop
+					"[&_button]:min-h-[36px] [&_button]:min-w-[36px]",
+				]
+		}
+	}
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, {
+			...props,
+			ref: containerRef,
+			"data-slot": "media-player-controls",
+			"data-state": isFullscreen ? "fullscreen" : "inline",
+			"data-disabled": disabled ? "" : undefined,
+			"data-variant": effectiveVariant,
+			"data-touch": isTouchDevice ? "" : undefined,
+			className: cn(
+				getMobileClasses(),
+				// Add container query support
+				"@container",
+				className
+			)
+		} as any)
+	}
+
+	return (
+		<div
+			ref={containerRef}
+			data-slot="media-player-controls"
+			data-state={isFullscreen ? "fullscreen" : "inline"}
+			data-disabled={disabled ? "" : undefined}
+			data-variant={effectiveVariant}
+			data-touch={isTouchDevice ? "" : undefined}
+			className={cn(
+				"dark",
+				getMobileClasses(),
+				// Add container query support
+				"@container",
+				className
+			)}
+			{...props}>
+			{children}
+		</div>
+	)
+}
+
+MediaPlayerControls.displayName = "MediaPlayerControls"
+
+// Controls overlay for background gradient
+export interface MediaPlayerControlsOverlayProps {
+	className?: string
+	asChild?: boolean
+	children?: React.ReactNode
+	variant?: 'default' | 'mobile' | 'compact'
+}
+
+export function MediaPlayerControlsOverlay({
+	className,
+	asChild = false,
+	children,
+	variant,
+	...props
+}: MediaPlayerControlsOverlayProps) {
+	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
+	const { isMobile, isTablet, isTouchDevice } = useDeviceInfo()
+	
+	// Determine the effective variant
+	const effectiveVariant = React.useMemo(() => {
+		if (variant) return variant
+		if (isMobile) return 'mobile'
+		if (isTablet) return 'compact'
+		return 'default'
+	}, [variant, isMobile, isTablet])
+	
+	// Get mobile-optimized gradient classes
+	const getOverlayClasses = () => {
+		const baseClasses = [
+			"-z-10 pointer-events-none absolute inset-0",
+			"opacity-0 transition-opacity duration-200 data-[visible]:opacity-100"
+		]
+		
+		switch (effectiveVariant) {
+			case 'mobile':
+				return [
+					...baseClasses,
+					// Enhanced gradient for better readability on mobile
+					"bg-gradient-to-t from-black/90 via-black/60 to-transparent",
+					// Larger gradient area for mobile controls
+					"from-0% via-40% to-70%"
+				]
+			
+			case 'compact':
+				return [
+					...baseClasses,
+					// Medium gradient for tablet
+					"bg-gradient-to-t from-black/85 via-black/40 to-transparent",
+					"from-0% via-30% to-60%"
+				]
+			
+			default:
+				return [
+					...baseClasses,
+					// Standard desktop gradient
+					"bg-gradient-to-t from-black/80 to-transparent"
+				]
+		}
+	}
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, {
+			...props,
+			"data-slot": "media-player-controls-overlay",
+			"data-state": isFullscreen ? "fullscreen" : "inline",
+			"data-variant": effectiveVariant,
+			"data-touch": isTouchDevice ? "" : undefined,
+			className: cn(
+				getOverlayClasses(),
+				className
+			)
+		} as any)
+	}
+
+	return (
+		<div
+			data-slot="media-player-controls-overlay"
+			data-state={isFullscreen ? "fullscreen" : "inline"}
+			data-variant={effectiveVariant}
+			data-touch={isTouchDevice ? "" : undefined}
+			className={cn(
+				getOverlayClasses(),
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+MediaPlayerControlsOverlay.displayName = "MediaPlayerControlsOverlay"

package/dist/src/components/media-player-error.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface MediaPlayerErrorProps {
+    error?: Error | string | null;
+    label?: string;
+    description?: string;
+    onRetry?: () => void;
+    onReload?: () => void;
+    className?: string;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerError({ error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, className, asChild, children, ...props }: MediaPlayerErrorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MediaPlayerError {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-error.d.ts.map

package/dist/src/components/media-player-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-error.d.ts","sourceRoot":"","sources":["media-player-error.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,WAAW,EACX,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,qBAAqB,kDAmIvB;yBA7Ie,gBAAgB"}

package/dist/src/components/media-player-error.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "lucide-react";
+import React from "react";
+import { useMediaContext, useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+export function MediaPlayerError({ error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, className, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const stateError = useMediaSelector((state) => state.error);
+    const error = errorProp || stateError;
+    const [actionState, setActionState] = React.useState({
+        retryPending: false,
+        reloadPending: false
+    });
+    const handleRetry = React.useCallback(() => {
+        setActionState((prev) => ({ ...prev, retryPending: true }));
+        requestAnimationFrame(() => {
+            const mediaElement = context.mediaRef.current;
+            if (!mediaElement) {
+                setActionState((prev) => ({ ...prev, retryPending: false }));
+                return;
+            }
+            if (onRetryProp) {
+                onRetryProp();
+            }
+            else {
+                const currentSrc = mediaElement.src;
+                if (currentSrc) {
+                    mediaElement.load();
+                }
+            }
+            setActionState((prev) => ({ ...prev, retryPending: false }));
+        });
+    }, [context.mediaRef, onRetryProp]);
+    const handleReload = React.useCallback(() => {
+        setActionState((prev) => ({ ...prev, reloadPending: true }));
+        requestAnimationFrame(() => {
+            if (onReloadProp) {
+                onReloadProp();
+            }
+            else {
+                window.location.reload();
+            }
+        });
+    }, [onReloadProp]);
+    const errorLabel = React.useMemo(() => {
+        if (label)
+            return label;
+        if (error instanceof Error) {
+            return "Media Error";
+        }
+        return "Playback Error";
+    }, [label, error]);
+    const errorDescription = React.useMemo(() => {
+        if (description)
+            return description;
+        if (error instanceof Error) {
+            return error.message;
+        }
+        if (typeof error === "string") {
+            return error;
+        }
+        return "An error occurred while loading the media";
+    }, [description, error]);
+    if (!error)
+        return null;
+    const errorProps = {
+        role: "alert",
+        "aria-describedby": `${context.mediaId}-error-description`,
+        "aria-labelledby": `${context.mediaId}-error-label`,
+        "aria-live": "assertive",
+        "data-slot": "media-player-error",
+        "data-state": "error",
+        className: cn("pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm", className),
+        ...props
+    };
+    const content = (_jsxs("div", { className: "flex flex-col items-center gap-4 p-6 text-center", children: [_jsx(AlertTriangleIcon, { className: "size-12 text-red-400" }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { id: `${context.mediaId}-error-label`, className: "font-semibold text-lg", children: errorLabel }), _jsx("p", { id: `${context.mediaId}-error-description`, className: "text-sm text-white/80", children: errorDescription })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleRetry, disabled: actionState.retryPending, children: [actionState.retryPending ? (_jsx(RefreshCcwIcon, { className: "mr-2 size-4 animate-spin" })) : (_jsx(RefreshCcwIcon, { className: "mr-2 size-4" })), "Try again"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleReload, disabled: actionState.reloadPending, children: [actionState.reloadPending ? (_jsx(RotateCcwIcon, { className: "mr-2 size-4 animate-spin" })) : (_jsx(RotateCcwIcon, { className: "mr-2 size-4" })), "Reload page"] })] })] }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, errorProps, content);
+    }
+    return _jsx("div", { ...errorProps, children: content });
+}
+MediaPlayerError.displayName = "MediaPlayerError";

package/dist/src/components/media-player-error.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import { Button } from "@rp/ui/components/button"
+import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "lucide-react"
+import React from "react"
+import { useMediaContext, useMediaSelector } from "../context/media-context"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerErrorProps {
+	error?: Error | string | null
+	label?: string
+	description?: string
+	onRetry?: () => void
+	onReload?: () => void
+	className?: string
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerError({
+	error: errorProp,
+	label,
+	description,
+	onRetry: onRetryProp,
+	onReload: onReloadProp,
+	className,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerErrorProps) {
+	const context = useMediaContext()
+	const stateError = useMediaSelector((state) => state.error)
+
+	const error = errorProp || stateError
+	const [actionState, setActionState] = React.useState({
+		retryPending: false,
+		reloadPending: false
+	})
+
+	const handleRetry = React.useCallback(() => {
+		setActionState((prev) => ({ ...prev, retryPending: true }))
+
+		requestAnimationFrame(() => {
+			const mediaElement = context.mediaRef.current
+			if (!mediaElement) {
+				setActionState((prev) => ({ ...prev, retryPending: false }))
+				return
+			}
+
+			if (onRetryProp) {
+				onRetryProp()
+			} else {
+				const currentSrc = mediaElement.src
+				if (currentSrc) {
+					mediaElement.load()
+				}
+			}
+
+			setActionState((prev) => ({ ...prev, retryPending: false }))
+		})
+	}, [context.mediaRef, onRetryProp])
+
+	const handleReload = React.useCallback(() => {
+		setActionState((prev) => ({ ...prev, reloadPending: true }))
+
+		requestAnimationFrame(() => {
+			if (onReloadProp) {
+				onReloadProp()
+			} else {
+				window.location.reload()
+			}
+		})
+	}, [onReloadProp])
+
+	const errorLabel = React.useMemo(() => {
+		if (label) return label
+
+		if (error instanceof Error) {
+			return "Media Error"
+		}
+
+		return "Playback Error"
+	}, [label, error])
+
+	const errorDescription = React.useMemo(() => {
+		if (description) return description
+
+		if (error instanceof Error) {
+			return error.message
+		}
+
+		if (typeof error === "string") {
+			return error
+		}
+
+		return "An error occurred while loading the media"
+	}, [description, error])
+
+	if (!error) return null
+
+	const errorProps = {
+		role: "alert",
+		"aria-describedby": `${context.mediaId}-error-description`,
+		"aria-labelledby": `${context.mediaId}-error-label`,
+		"aria-live": "assertive" as const,
+		"data-slot": "media-player-error",
+		"data-state": "error",
+		className: cn(
+			"pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm",
+			className
+		),
+		...props
+	}
+
+	const content = (
+		<div className="flex flex-col items-center gap-4 p-6 text-center">
+			<AlertTriangleIcon className="size-12 text-red-400" />
+			<div className="space-y-2">
+				<h3 id={`${context.mediaId}-error-label`} className="font-semibold text-lg">
+					{errorLabel}
+				</h3>
+				<p id={`${context.mediaId}-error-description`} className="text-sm text-white/80">
+					{errorDescription}
+				</p>
+			</div>
+			<div className="flex items-center gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={handleRetry}
+					disabled={actionState.retryPending}>
+					{actionState.retryPending ? (
+						<RefreshCcwIcon className="mr-2 size-4 animate-spin" />
+					) : (
+						<RefreshCcwIcon className="mr-2 size-4" />
+					)}
+					Try again
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={handleReload}
+					disabled={actionState.reloadPending}>
+					{actionState.reloadPending ? (
+						<RotateCcwIcon className="mr-2 size-4 animate-spin" />
+					) : (
+						<RotateCcwIcon className="mr-2 size-4" />
+					)}
+					Reload page
+				</Button>
+			</div>
+		</div>
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, errorProps as any, content)
+	}
+
+	return <div {...errorProps}>{content}</div>
+}
+
+MediaPlayerError.displayName = "MediaPlayerError"

package/dist/src/components/media-player-fullscreen.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MediaPlayerFullscreenProps {
+    className?: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerFullscreen({ className, disabled, asChild, children, ...props }: MediaPlayerFullscreenProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerFullscreen {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-fullscreen.d.ts.map

package/dist/src/components/media-player-fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-fullscreen.d.ts","sourceRoot":"","sources":["media-player-fullscreen.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,0BAA0B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,EACrC,SAAS,EACT,QAAgB,EAChB,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,0BAA0B,2CAgF5B;yBAtFe,qBAAqB"}

package/dist/src/components/media-player-fullscreen.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import React from "react";
+import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
+import { MediaPlayerTooltip } from "./media-player-tooltip";
+export function MediaPlayerFullscreen({ className, disabled = false, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    const isFullscreen = useMediaSelector((state) => state.isFullscreen);
+    const isDisabled = disabled || useMediaSelector((state) => state.error !== null);
+    const handleClick = React.useCallback((event) => {
+        event.preventDefault();
+        if (isDisabled)
+            return;
+        dispatch({
+            type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+        });
+    }, [dispatch, isFullscreen, isDisabled]);
+    // Set up fullscreen API event listeners
+    React.useEffect(() => {
+        const handleFullscreenChange = () => {
+            const isCurrentlyFullscreen = !!document.fullscreenElement;
+            dispatch({
+                type: isCurrentlyFullscreen
+                    ? MediaActionTypes.ENTER_FULLSCREEN
+                    : MediaActionTypes.EXIT_FULLSCREEN
+            });
+        };
+        document.addEventListener("fullscreenchange", handleFullscreenChange);
+        return () => {
+            document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        };
+    }, [dispatch]);
+    // Handle actual fullscreen API calls
+    React.useEffect(() => {
+        const rootElement = context.rootRef.current;
+        if (!rootElement)
+            return;
+        if (isFullscreen && !document.fullscreenElement) {
+            rootElement.requestFullscreen?.().catch(console.error);
+        }
+        else if (!isFullscreen && document.fullscreenElement) {
+            document.exitFullscreen?.().catch(console.error);
+        }
+    }, [isFullscreen, context.rootRef]);
+    const buttonProps = {
+        type: "button",
+        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+        "data-disabled": isDisabled ? "" : undefined,
+        "data-slot": "media-player-fullscreen",
+        "data-state": isFullscreen ? "fullscreen" : "inline",
+        disabled: isDisabled,
+        variant: "ghost",
+        size: "icon",
+        className: "size-8",
+        onClick: handleClick,
+        ...props
+    };
+    const content = isFullscreen ? (_jsx(Minimize2Icon, { className: "size-4" })) : (_jsx(Maximize2Icon, { className: "size-4" }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, buttonProps, content);
+    }
+    return (_jsx(MediaPlayerTooltip, { tooltip: isFullscreen ? "Exit fullscreen" : "Enter fullscreen", shortcut: "F", children: _jsx(Button, { ...buttonProps, children: content }) }));
+}
+MediaPlayerFullscreen.displayName = "MediaPlayerFullscreen";

package/dist/src/components/media-player-fullscreen.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { Button } from "@rp/ui/components/button"
+import { Maximize2Icon, Minimize2Icon } from "lucide-react"
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { MediaPlayerTooltip } from "./media-player-tooltip"
+
+export interface MediaPlayerFullscreenProps {
+	className?: string
+	disabled?: boolean
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerFullscreen({
+	className,
+	disabled = false,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerFullscreenProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
+	const isDisabled = disabled || useMediaSelector((state) => state.error !== null)
+
+	const handleClick = React.useCallback(
+		(event: React.MouseEvent) => {
+			event.preventDefault()
+
+			if (isDisabled) return
+
+			dispatch({
+				type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+			})
+		},
+		[dispatch, isFullscreen, isDisabled]
+	)
+
+	// Set up fullscreen API event listeners
+	React.useEffect(() => {
+		const handleFullscreenChange = () => {
+			const isCurrentlyFullscreen = !!document.fullscreenElement
+			dispatch({
+				type: isCurrentlyFullscreen
+					? MediaActionTypes.ENTER_FULLSCREEN
+					: MediaActionTypes.EXIT_FULLSCREEN
+			})
+		}
+
+		document.addEventListener("fullscreenchange", handleFullscreenChange)
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange)
+		}
+	}, [dispatch])
+
+	// Handle actual fullscreen API calls
+	React.useEffect(() => {
+		const rootElement = context.rootRef.current
+		if (!rootElement) return
+
+		if (isFullscreen && !document.fullscreenElement) {
+			rootElement.requestFullscreen?.().catch(console.error)
+		} else if (!isFullscreen && document.fullscreenElement) {
+			document.exitFullscreen?.().catch(console.error)
+		}
+	}, [isFullscreen, context.rootRef])
+
+	const buttonProps = {
+		type: "button" as const,
+		"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+		"data-disabled": isDisabled ? "" : undefined,
+		"data-slot": "media-player-fullscreen",
+		"data-state": isFullscreen ? "fullscreen" : "inline",
+		disabled: isDisabled,
+		variant: "ghost" as const,
+		size: "icon" as const,
+		className: "size-8",
+		onClick: handleClick,
+		...props
+	}
+
+	const content = isFullscreen ? (
+		<Minimize2Icon className="size-4" />
+	) : (
+		<Maximize2Icon className="size-4" />
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, buttonProps as any, content)
+	}
+
+	return (
+		<MediaPlayerTooltip
+			tooltip={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+			shortcut="F">
+			<Button {...buttonProps}>{content}</Button>
+		</MediaPlayerTooltip>
+	)
+}
+
+MediaPlayerFullscreen.displayName = "MediaPlayerFullscreen"