@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,9 +0,0 @@
-import React from "react";
-export interface MediaPlayerAudioProps extends React.AudioHTMLAttributes<HTMLAudioElement> {
-    asChild?: boolean;
-}
-export declare function MediaPlayerAudio({ asChild, className, children, ...props }: MediaPlayerAudioProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MediaPlayerAudio {
-    var displayName: string;
-}
-//# sourceMappingURL=media-player-audio.d.ts.map

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

@@ -1,39 +0,0 @@
-"use client"
-
-import React from "react"
-import { useMediaContext } from "../context/media-context"
-
-export interface MediaPlayerAudioProps extends React.AudioHTMLAttributes<HTMLAudioElement> {
-	asChild?: boolean
-}
-
-export function MediaPlayerAudio({
-	asChild = false,
-	className,
-	children,
-	...props
-}: MediaPlayerAudioProps) {
-	const context = useMediaContext()
-
-	if (asChild) {
-		// When asChild is true, clone the child element and add our props
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(child, {
-			...props,
-			ref: context.mediaRef,
-			"data-slot": "media-player-audio"
-		} as any)
-	}
-
-	return (
-		<audio
-			ref={context.mediaRef as React.RefObject<HTMLAudioElement>}
-			data-slot="media-player-audio"
-			className={className}
-			{...props}>
-			{children}
-		</audio>
-	)
-}
-
-MediaPlayerAudio.displayName = "MediaPlayerAudio"

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

@@ -1,23 +0,0 @@
-import React from "react";
-export interface MediaPlayerControlsProps {
-    children: React.ReactNode;
-    className?: string;
-    asChild?: boolean;
-    variant?: 'default' | 'mobile' | 'compact';
-    adaptiveLayout?: boolean;
-}
-export declare function MediaPlayerControls({ children, className, asChild, variant, adaptiveLayout, ...props }: MediaPlayerControlsProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MediaPlayerControls {
-    var displayName: string;
-}
-export interface MediaPlayerControlsOverlayProps {
-    className?: string;
-    asChild?: boolean;
-    children?: React.ReactNode;
-    variant?: 'default' | 'mobile' | 'compact';
-}
-export declare function MediaPlayerControlsOverlay({ className, asChild, children, variant, ...props }: MediaPlayerControlsOverlayProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MediaPlayerControlsOverlay {
-    var displayName: string;
-}
-//# sourceMappingURL=media-player-controls.d.ts.map

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

@@ -1,226 +0,0 @@
-"use client"
-
-import React from "react"
-import { useMediaSelector } from "../context/media-context"
-import { useDeviceInfo, useContainerQuery } from "../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

@@ -1,16 +0,0 @@
-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.tsx

@@ -1,163 +0,0 @@
-"use client"
-
-import { Button } from "../components/ui/button"
-import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "../components/ui/icons"
-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

@@ -1,12 +0,0 @@
-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.tsx

@@ -1,109 +0,0 @@
-"use client"
-
-import { Button } from "../components/ui/button"
-import { Maximize2Icon, Minimize2Icon } from "../components/ui/icons"
-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"

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

@@ -1,23 +0,0 @@
-import React from "react";
-import { MediaPlayerRootProps } from "./media-player-root";
-import { VideoSource, TextTrack } from "../adapters/videojs-adapter";
-import "../styles/videojs.css";
-export interface MediaPlayerHLSProps extends Omit<MediaPlayerRootProps, "children"> {
-    sources: VideoSource[];
-    poster?: string;
-    textTracks?: TextTrack[];
-    showControls?: boolean;
-    customControls?: React.ReactNode;
-    hlsConfig?: any;
-    enableQualitySelector?: boolean;
-    enableSubtitles?: boolean;
-    containerClassName?: string;
-    videoClassName?: string;
-    onPlayerReady?: (player: any) => void;
-    onPlayerError?: (error: any) => void;
-}
-export declare function MediaPlayerHLS(props: MediaPlayerHLSProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MediaPlayerHLS {
-    var displayName: string;
-}
-//# sourceMappingURL=media-player-hls.d.ts.map