@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,111 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaPlayerRoot, MediaPlayerRootProps } from "./media-player-root"
-import { VideoJSAdapter, VideoSource, TextTrack } from "../adapters/videojs-adapter"
-import { MediaPlayerControls } from "./media-player-controls"
-import { MediaPlayerLoading } from "./media-player-loading"
-import { MediaPlayerError } from "./media-player-error"
-import { useMediaSelector } from "../context/media-context"
-import { cn } from "../lib/utils"
-import "../styles/videojs.css" // Import Video.js styles
-
-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
-}
-
-function MediaPlayerHLSContent({
-  sources,
-  poster,
-  textTracks = [],
-  showControls = true,
-  customControls,
-  hlsConfig,
-  enableQualitySelector = true,
-  enableSubtitles = true,
-  containerClassName,
-  videoClassName,
-  onPlayerReady,
-  onPlayerError
-}: MediaPlayerHLSProps) {
-  const isLoading = useMediaSelector(state => state.isLoading)
-  const isBuffering = useMediaSelector(state => state.isBuffering)
-  const error = useMediaSelector(state => state.error)
-
-  return (
-    <div className={cn("relative h-full w-full", containerClassName)}>
-      {/* Video.js Adapter */}
-      <VideoJSAdapter
-        sources={sources}
-        poster={poster}
-        textTracks={textTracks}
-        controls={true} // Enable Video.js controls
-        autoplay={false}
-        muted={true} // Muted for autoplay policy
-        preload="auto"
-        className={videoClassName}
-        hlsConfig={hlsConfig}
-        enableQualitySelector={enableQualitySelector}
-        enableSubtitles={enableSubtitles}
-        onReady={onPlayerReady}
-        onError={onPlayerError}
-      />
-
-      {/* Loading state */}
-      {(isLoading || isBuffering) && <MediaPlayerLoading />}
-
-      {/* Error state */}
-      {error && <MediaPlayerError>{error}</MediaPlayerError>}
-    </div>
-  )
-}
-
-export function MediaPlayerHLS(props: MediaPlayerHLSProps) {
-  const {
-    sources,
-    poster,
-    textTracks,
-    showControls,
-    customControls,
-    hlsConfig,
-    enableQualitySelector,
-    enableSubtitles,
-    containerClassName,
-    videoClassName,
-    onPlayerReady,
-    onPlayerError,
-    ...rootProps
-  } = props
-
-  return (
-    <MediaPlayerRoot {...rootProps}>
-      <MediaPlayerHLSContent
-        sources={sources}
-        poster={poster}
-        textTracks={textTracks}
-        showControls={showControls}
-        customControls={customControls}
-        hlsConfig={hlsConfig}
-        enableQualitySelector={enableQualitySelector}
-        enableSubtitles={enableSubtitles}
-        containerClassName={containerClassName}
-        videoClassName={videoClassName}
-        onPlayerReady={onPlayerReady}
-        onPlayerError={onPlayerError}
-      />
-    </MediaPlayerRoot>
-  )
-}
-
-MediaPlayerHLS.displayName = "MediaPlayerHLS"

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

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

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

@@ -1,76 +0,0 @@
-"use client"
-
-import { Loader2Icon } from "lucide-react"
-import React from "react"
-import { useMediaSelector } from "../context/media-context"
-import { cn } from "../lib/utils"
-
-export interface MediaPlayerLoadingProps {
-	className?: string
-	delayMs?: number
-	asChild?: boolean
-	children?: React.ReactNode
-}
-
-export function MediaPlayerLoading({
-	className,
-	delayMs = 300,
-	asChild = false,
-	children,
-	...props
-}: MediaPlayerLoadingProps) {
-	const isLoading = useMediaSelector((state) => state.isLoading)
-	const [shouldRender, setShouldRender] = React.useState(false)
-	const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
-
-	React.useEffect(() => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current)
-			timeoutRef.current = undefined
-		}
-
-		if (isLoading) {
-			if (delayMs > 0) {
-				timeoutRef.current = setTimeout(() => {
-					setShouldRender(true)
-					timeoutRef.current = undefined
-				}, delayMs)
-			} else {
-				setShouldRender(true)
-			}
-		} else {
-			setShouldRender(false)
-		}
-
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current)
-				timeoutRef.current = undefined
-			}
-		}
-	}, [isLoading, delayMs])
-
-	if (!shouldRender) return null
-
-	const loadingProps = {
-		role: "status",
-		"aria-live": "polite" as const,
-		"data-slot": "media-player-loading",
-		className: cn(
-			"fade-in-0 zoom-in-95 pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200",
-			className
-		),
-		...props
-	}
-
-	const content = <Loader2Icon className="size-8 animate-spin text-white" />
-
-	if (asChild) {
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(child, loadingProps as any, content)
-	}
-
-	return <div {...loadingProps}>{content}</div>
-}
-
-MediaPlayerLoading.displayName = "MediaPlayerLoading"

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

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

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

@@ -1,75 +0,0 @@
-"use client"
-
-import { Button } from "../components/ui/button"
-import { PauseIcon, PlayIcon } 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 MediaPlayerPlayProps {
-	className?: string
-	asChild?: boolean
-	children?: React.ReactNode
-}
-
-export function MediaPlayerPlay({
-	className,
-	asChild = false,
-	children,
-	...props
-}: MediaPlayerPlayProps) {
-	const context = useMediaContext()
-	const dispatch = useMediaDispatch()
-	const isPlaying = useMediaSelector((state) => state.isPlaying)
-	const disabled = useMediaSelector((state) => state.error !== null)
-
-	const handleClick = React.useCallback(
-		(event: React.MouseEvent) => {
-			event.preventDefault()
-
-			const mediaElement = context.mediaRef.current
-			if (!mediaElement || disabled) return
-
-			dispatch({
-				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-			})
-		},
-		[dispatch, context.mediaRef, isPlaying, disabled]
-	)
-
-	const buttonProps = {
-		type: "button" as const,
-		"aria-controls": context.mediaId,
-		"aria-label": isPlaying ? "Pause" : "Play",
-		"aria-pressed": isPlaying,
-		"data-disabled": disabled ? "" : undefined,
-		"data-slot": "media-player-play",
-		"data-state": isPlaying ? "playing" : "paused",
-		disabled,
-		variant: "ghost" as const,
-		size: "icon" as const,
-		className: "size-8 [&_svg:not([class*='fill-'])]:fill-current",
-		onClick: handleClick,
-		...props
-	}
-
-	const content = isPlaying ? <PauseIcon className="size-4" /> : <PlayIcon 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={isPlaying ? "Pause" : "Play"} shortcut="Space">
-			<Button {...buttonProps}>{content}</Button>
-		</MediaPlayerTooltip>
-	)
-}
-
-MediaPlayerPlay.displayName = "MediaPlayerPlay"

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

@@ -1,28 +0,0 @@
-import React from "react";
-export interface MediaPlayerRootProps {
-    children: React.ReactNode;
-    className?: string;
-    dir?: "ltr" | "rtl";
-    disabled?: boolean;
-    asChild?: boolean;
-    autoHide?: boolean;
-    tooltipDelayDuration?: number;
-    tooltipSideOffset?: number;
-    withoutTooltip?: boolean;
-    enableGestures?: boolean;
-    enableMobileOptimizations?: boolean;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnded?: () => void;
-    onTimeUpdate?: (currentTime: number) => void;
-    onVolumeChange?: (volume: number) => void;
-    onMuted?: (muted: boolean) => void;
-    onMediaError?: (error: string) => void;
-    onPipError?: (error: Error) => void;
-    onFullscreenChange?: (isFullscreen: boolean) => void;
-}
-export declare function MediaPlayerRoot(props: MediaPlayerRootProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MediaPlayerRoot {
-    var displayName: string;
-}
-//# sourceMappingURL=media-player-root.d.ts.map

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

@@ -1,340 +0,0 @@
-"use client"
-
-import React from "react"
-import {
-	MediaActionTypes,
-	useMediaContext,
-	useMediaDispatch,
-	useMediaSelector
-} from "../context/media-context"
-import { MediaProvider } from "../context/media-provider"
-import { useMediaGestures } from "../hooks/use-touch-gestures"
-import { useMobileOptimizations, useDeviceInfo } from "../hooks/use-mobile"
-import { cn } from "../lib/utils"
-
-// Utility function to compose refs
-function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
-	return (node: T) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") {
-				ref(node)
-			} else if (ref && typeof ref === "object") {
-				;(ref as React.MutableRefObject<T>).current = node
-			}
-		})
-	}
-}
-
-// MediaPlayer root component props
-export interface MediaPlayerRootProps {
-	children: React.ReactNode
-	className?: string
-	dir?: "ltr" | "rtl"
-	disabled?: boolean
-	asChild?: boolean
-	autoHide?: boolean
-	tooltipDelayDuration?: number
-	tooltipSideOffset?: number
-	withoutTooltip?: boolean
-
-	// Mobile-first options
-	enableGestures?: boolean
-	enableMobileOptimizations?: boolean
-
-	// Media event handlers
-	onPlay?: () => void
-	onPause?: () => void
-	onEnded?: () => void
-	onTimeUpdate?: (currentTime: number) => void
-	onVolumeChange?: (volume: number) => void
-	onMuted?: (muted: boolean) => void
-	onMediaError?: (error: string) => void
-	onPipError?: (error: Error) => void
-	onFullscreenChange?: (isFullscreen: boolean) => void
-}
-
-// Internal MediaPlayer implementation
-function MediaPlayerImpl({
-	children,
-	className,
-	dir = "ltr",
-	disabled = false,
-	asChild = false,
-	autoHide = true,
-	enableGestures = true,
-	enableMobileOptimizations = true,
-	onPlay,
-	onPause,
-	onEnded,
-	onTimeUpdate,
-	onVolumeChange,
-	onMuted,
-	onMediaError,
-	onPipError,
-	onFullscreenChange,
-	...props
-}: MediaPlayerRootProps) {
-	const context = useMediaContext()
-	const dispatch = useMediaDispatch()
-	const { isTouchDevice } = useDeviceInfo()
-
-	// Get state values
-	const isPlaying = useMediaSelector((state) => state.isPlaying)
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const volume = useMediaSelector((state) => state.volume)
-	const isMuted = useMediaSelector((state) => state.isMuted)
-	const error = useMediaSelector((state) => state.error)
-	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
-	const isPictureInPicture = useMediaSelector((state) => state.isPictureInPicture)
-
-	// Enable mobile optimizations
-	useMobileOptimizations()
-
-	// Gesture handling actions - React 19 compiler will optimize this
-	const gestureActions = {
-		onPlayPause: () => {
-			if (disabled) return
-			dispatch({
-				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-			})
-		},
-		onSeek: (direction: 'forward' | 'backward', amount: number) => {
-			if (disabled || !context.isVideo) return
-			const mediaElement = context.mediaRef.current
-			if (!mediaElement) return
-			
-			const newTime = direction === 'forward' 
-				? Math.min(mediaElement.duration || 0, currentTime + amount)
-				: Math.max(0, currentTime - amount)
-			
-			dispatch({
-				type: MediaActionTypes.SEEK,
-				detail: newTime
-			})
-		},
-		onVolumeChange: (direction: 'up' | 'down', amount: number) => {
-			if (disabled) return
-			const newVolume = direction === 'up'
-				? Math.min(1, volume + amount)
-				: Math.max(0, volume - amount)
-			
-			dispatch({
-				type: MediaActionTypes.SET_VOLUME,
-				detail: newVolume
-			})
-		},
-		onToggleFullscreen: () => {
-			if (disabled || !context.isVideo) return
-			dispatch({
-				type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
-			})
-		},
-		onZoom: (scale: number) => {
-			// Handle video zoom - this could be implemented with CSS transforms
-			// For now, we'll just log it as a placeholder
-			console.log('Zoom gesture detected:', scale)
-		}
-	}
-
-		// Set up touch gestures for mobile devices
-		const { isGestureEnabled } = useMediaGestures(
-			context.rootRef as React.RefObject<HTMLElement>,
-			enableGestures ? gestureActions : {}
-		)
-
-	// Keyboard event handler - React 19 compiler will optimize this
-	const handleKeyDown = (event: React.KeyboardEvent) => {
-		if (disabled) return
-
-		const target = event.target as HTMLElement
-		const isInputElement =
-			target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable
-
-		if (isInputElement) return
-
-		const mediaElement = context.mediaRef.current
-		if (!mediaElement) return
-
-		switch (event.code) {
-			case "Space":
-			case "KeyK":
-				event.preventDefault()
-				dispatch({
-					type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-				})
-				break
-
-			case "KeyF":
-				event.preventDefault()
-				dispatch({
-					type: isFullscreen
-						? MediaActionTypes.EXIT_FULLSCREEN
-						: MediaActionTypes.ENTER_FULLSCREEN
-				})
-				break
-
-			case "KeyM":
-				event.preventDefault()
-				dispatch({
-					type: MediaActionTypes.TOGGLE_MUTE
-				})
-				break
-
-			case "ArrowLeft":
-				event.preventDefault()
-				if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
-					dispatch({
-						type: MediaActionTypes.SEEK,
-						detail: Math.max(0, currentTime - 10)
-					})
-				}
-				break
-
-			case "ArrowRight":
-				event.preventDefault()
-				if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
-					dispatch({
-						type: MediaActionTypes.SEEK,
-						detail: Math.min(mediaElement.duration || 0, currentTime + 10)
-					})
-				}
-				break
-
-			case "ArrowUp":
-				event.preventDefault()
-				dispatch({
-					type: MediaActionTypes.SET_VOLUME,
-					detail: Math.min(1, volume + 0.1)
-				})
-				break
-
-			case "ArrowDown":
-				event.preventDefault()
-				dispatch({
-					type: MediaActionTypes.SET_VOLUME,
-					detail: Math.max(0, volume - 0.1)
-				})
-				break
-		}
-	}
-
-	// Set up media element event listeners
-	React.useEffect(() => {
-		const mediaElement = context.mediaRef.current
-		if (!mediaElement) return
-
-		const handlePlay = () => {
-			dispatch({ type: MediaActionTypes.PLAY })
-			onPlay?.()
-		}
-
-		const handlePause = () => {
-			dispatch({ type: MediaActionTypes.PAUSE })
-			onPause?.()
-		}
-
-		const handleEnded = () => {
-			dispatch({ type: MediaActionTypes.PAUSE })
-			onEnded?.()
-		}
-
-		const handleTimeUpdate = () => {
-			const time = mediaElement.currentTime
-			dispatch({ type: MediaActionTypes.SET_CURRENT_TIME, detail: time })
-			onTimeUpdate?.(time)
-		}
-
-		const handleVolumeChange = () => {
-			const vol = mediaElement.volume
-			const muted = mediaElement.muted
-			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: vol })
-			dispatch({ type: muted ? MediaActionTypes.MUTE : MediaActionTypes.UNMUTE })
-			onVolumeChange?.(vol)
-			onMuted?.(muted)
-		}
-
-		const handleLoadedMetadata = () => {
-			dispatch({ type: MediaActionTypes.SET_DURATION, detail: mediaElement.duration })
-			dispatch({ type: MediaActionTypes.SET_LOADING, detail: false })
-		}
-
-		const handleError = () => {
-			const errorMessage = "An error occurred while loading the media"
-			dispatch({ type: MediaActionTypes.SET_ERROR, detail: errorMessage })
-			onMediaError?.(errorMessage)
-		}
-
-		const handleLoadStart = () => {
-			dispatch({ type: MediaActionTypes.SET_LOADING, detail: true })
-		}
-
-		// Add event listeners
-		mediaElement.addEventListener("play", handlePlay)
-		mediaElement.addEventListener("pause", handlePause)
-		mediaElement.addEventListener("ended", handleEnded)
-		mediaElement.addEventListener("timeupdate", handleTimeUpdate)
-		mediaElement.addEventListener("volumechange", handleVolumeChange)
-		mediaElement.addEventListener("loadedmetadata", handleLoadedMetadata)
-		mediaElement.addEventListener("error", handleError)
-		mediaElement.addEventListener("loadstart", handleLoadStart)
-
-		return () => {
-			mediaElement.removeEventListener("play", handlePlay)
-			mediaElement.removeEventListener("pause", handlePause)
-			mediaElement.removeEventListener("ended", handleEnded)
-			mediaElement.removeEventListener("timeupdate", handleTimeUpdate)
-			mediaElement.removeEventListener("volumechange", handleVolumeChange)
-			mediaElement.removeEventListener("loadedmetadata", handleLoadedMetadata)
-			mediaElement.removeEventListener("error", handleError)
-			mediaElement.removeEventListener("loadstart", handleLoadStart)
-		}
-	}, [dispatch, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onMuted, onMediaError])
-
-	const rootProps = {
-		"aria-labelledby": context.labelId,
-		"aria-describedby": context.descriptionId,
-		"aria-disabled": disabled,
-		"data-disabled": disabled ? "" : undefined,
-		"data-slot": "media-player",
-		"data-state": isFullscreen ? "fullscreen" : "inline",
-		dir,
-		tabIndex: disabled ? -1 : 0,
-		className: cn(
-			"dark relative isolate flex flex-col overflow-hidden rounded-lg bg-background outline-none",
-			"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			"[&_video]:relative [&_video]:object-contain",
-			"data-[state=fullscreen]:[&_video]:size-full",
-			"[:fullscreen_&]:flex [:fullscreen_&]:h-full [:fullscreen_&]:max-h-screen [:fullscreen_&]:flex-col [:fullscreen_&]:justify-between",
-			// Mobile-first optimizations
-			isTouchDevice && [
-				"touch-manipulation", // Improves touch responsiveness
-				"select-none", // Prevents text selection during gestures
-				"overscroll-contain", // Prevents scroll chaining
-			],
-			// Enable hardware acceleration for smooth animations
-			"will-change-transform",
-			"transform-gpu",
-			className
-		),
-		onKeyDown: handleKeyDown,
-		...props
-	}
-
-	return (
-		<div ref={composeRefs(context.rootRef)} {...rootProps}>
-			{children}
-		</div>
-	)
-}
-
-// Main MediaPlayer component with provider
-export function MediaPlayerRoot(props: MediaPlayerRootProps) {
-	return (
-		<MediaProvider>
-			<MediaPlayerImpl {...props} />
-		</MediaProvider>
-	)
-}
-
-MediaPlayerRoot.displayName = "MediaPlayerRoot"

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

@@ -1,15 +0,0 @@
-import React from "react";
-export interface MediaPlayerSeekProps {
-    className?: string;
-    disabled?: boolean;
-    withTime?: boolean;
-    withoutTooltip?: boolean;
-    tooltipTimeVariant?: "current" | "remaining" | "duration";
-    asChild?: boolean;
-    children?: React.ReactNode;
-}
-export declare function MediaPlayerSeek({ className, disabled, withTime, withoutTooltip, tooltipTimeVariant, asChild, children, ...props }: MediaPlayerSeekProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace MediaPlayerSeek {
-    var displayName: string;
-}
-//# sourceMappingURL=media-player-seek.d.ts.map