@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/dist/src/components/LoadingState.d.ts

@@ -1,33 +0,0 @@
-import React from "react";
-export type LoadingVariant = "animate" | "spinner" | "skeleton" | "dots";
-export type LoadingContext = "initial" | "seeking" | "buffering";
-export type LoadingSize = "sm" | "md" | "lg" | "xl";
-export interface LoadingStateProps {
-    variant?: LoadingVariant;
-    context?: LoadingContext;
-    size?: LoadingSize;
-    color?: string;
-    message?: string;
-    showMessage?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-export declare const AnimateLoadingWrapper: ({ context, message, className, textSize }: {
-    context?: LoadingContext;
-    message?: string;
-    className?: string;
-    textSize?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingState: ({ variant, context, size, color, message, showMessage, className, style }: LoadingStateProps) => import("react/jsx-runtime").JSX.Element;
-export interface CustomLoadingProps {
-    children: React.ReactNode;
-    context?: LoadingContext;
-    className?: string;
-}
-export declare const CustomLoading: ({ children, context, className }: CustomLoadingProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingPresets: {
-    Initial: (props: Partial<LoadingStateProps>) => import("react/jsx-runtime").JSX.Element;
-    Seeking: (props: Partial<LoadingStateProps>) => import("react/jsx-runtime").JSX.Element;
-    Buffering: (props: Partial<LoadingStateProps>) => import("react/jsx-runtime").JSX.Element;
-};
-//# sourceMappingURL=LoadingState.d.ts.map

package/dist/src/components/LoadingState.tsx

@@ -1,248 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../lib/utils"
-import { AnimateLoading } from "./AnimateLoading"
-
-export type LoadingVariant = "animate" | "spinner" | "skeleton" | "dots"
-export type LoadingContext = "initial" | "seeking" | "buffering"
-export type LoadingSize = "sm" | "md" | "lg" | "xl"
-
-export interface LoadingStateProps {
-  variant?: LoadingVariant
-  context?: LoadingContext
-  size?: LoadingSize
-  color?: string
-  message?: string
-  showMessage?: boolean
-  className?: string
-  style?: React.CSSProperties
-}
-
-const sizeMap: Record<LoadingSize, { container: string; spinner: string; dots: string }> = {
-  sm: {
-    container: "h-8 w-8",
-    spinner: "h-6 w-6 border-2",
-    dots: "h-1.5 w-1.5"
-  },
-  md: {
-    container: "h-12 w-12",
-    spinner: "h-10 w-10 border-3",
-    dots: "h-2 w-2"
-  },
-  lg: {
-    container: "h-16 w-16",
-    spinner: "h-14 w-14 border-4",
-    dots: "h-2.5 w-2.5"
-  },
-  xl: {
-    container: "h-20 w-20",
-    spinner: "h-18 w-18 border-4",
-    dots: "h-3 w-3"
-  }
-}
-
-const contextStyles: Record<LoadingContext, { wrapper: string; background: string }> = {
-  initial: {
-    wrapper: "absolute inset-0 z-50 flex items-center justify-center",
-    background: "bg-black/80"
-  },
-  seeking: {
-    wrapper: "absolute inset-0 z-40 flex items-center justify-center",
-    background: "bg-black/40"
-  },
-  buffering: {
-    wrapper: "absolute inset-0 z-45 flex items-center justify-center",
-    background: "bg-black/60"
-  }
-}
-
-// Default AnimateLoading wrapper component
-export const AnimateLoadingWrapper = function AnimateLoadingWrapper({
-  context = "initial",
-  message,
-  className,
-  textSize = "text-sm"
-}: {
-  context?: LoadingContext
-  message?: string
-  className?: string
-  textSize?: string
-}) {
-  const contextStyle = contextStyles[context]
-  
-  const getLoadingText = () => {
-    if (message) return message
-    
-    switch (context) {
-      case "initial":
-        return "Loading video..."
-      case "seeking":
-        return "Seeking..."
-      case "buffering":
-        return "Buffering..."
-      default:
-        return "Loading..."
-    }
-  }
-  
-  return (
-    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
-      <AnimateLoading 
-        loadingText={getLoadingText()}
-        className={cn("text-white", textSize)}
-      />
-    </div>
-  )
-}
-
-export const LoadingState = function LoadingState({
-  variant = "animate",
-  context = "initial",
-  size = "md",
-  color,
-  message,
-  showMessage = true,
-  className,
-  style
-}: LoadingStateProps) {
-  const sizes = sizeMap[size]
-  const contextStyle = contextStyles[context]
-
-  // Use AnimateLoading as default
-  if (variant === "animate") {
-    return (
-      <AnimateLoadingWrapper
-        context={context}
-        message={message}
-        className={className}
-        textSize={size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm"}
-      />
-    )
-  }
-
-  const renderLoadingIndicator = () => {
-    switch (variant) {
-      case "spinner":
-        return (
-          <div
-            className={cn(
-              "minimal-loading-spinner animate-spin rounded-full",
-              "border-white/20 border-t-cyan-500",
-              sizes.spinner,
-              className
-            )}
-            style={{
-              borderTopColor: color || undefined,
-              ...style
-            }}
-          />
-        )
-
-      case "dots":
-        return (
-          <div className="flex items-center gap-1">
-            {[0, 1, 2].map((i) => (
-              <div
-                key={i}
-                className={cn(
-                  "minimal-loading-dot rounded-full bg-cyan-500",
-                  sizes.dots,
-                  className
-                )}
-                style={{
-                  backgroundColor: color || undefined,
-                  animationDelay: `${i * 150}ms`,
-                  ...style
-                }}
-              />
-            ))}
-          </div>
-        )
-
-      case "skeleton":
-        return (
-          <div className={cn("space-y-3", className)}>
-            <div className="minimal-loading-skeleton h-4 w-32 rounded bg-white/10" />
-            <div className="minimal-loading-skeleton h-3 w-24 rounded bg-white/10" />
-            <div className="minimal-loading-skeleton h-3 w-28 rounded bg-white/10" />
-          </div>
-        )
-
-      default:
-        return null
-    }
-  }
-
-  const getMessage = () => {
-    if (message) return message
-    
-    switch (context) {
-      case "initial":
-        return "Loading video..."
-      case "seeking":
-        return "Seeking..."
-      case "buffering":
-        return "Buffering..."
-      default:
-        return "Loading..."
-    }
-  }
-
-  return (
-    <div className={cn(contextStyle.wrapper, contextStyle.background)}>
-      <div className="flex flex-col items-center gap-4">
-        <div className={cn(sizes.container, "flex items-center justify-center")}>
-          {renderLoadingIndicator()}
-        </div>
-        
-        {showMessage && (
-          <div className="text-center">
-            <p className="font-medium text-sm text-white/90">
-              {getMessage()}
-            </p>
-            {context === "buffering" && (
-              <p className="mt-1 text-white/60 text-xs">
-                Please wait...
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Custom loading component wrapper
-export interface CustomLoadingProps {
-  children: React.ReactNode
-  context?: LoadingContext
-  className?: string
-}
-
-export const CustomLoading = function CustomLoading({
-  children,
-  context = "initial",
-  className
-}: CustomLoadingProps) {
-  const contextStyle = contextStyles[context]
-  
-  return (
-    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
-      {children}
-    </div>
-  )
-}
-
-// Export default presets
-export const LoadingPresets = {
-  Initial: (props: Partial<LoadingStateProps>) => (
-    <LoadingState variant="animate" context="initial" size="md" {...props} />
-  ),
-  Seeking: (props: Partial<LoadingStateProps>) => (
-    <LoadingState variant="animate" context="seeking" size="sm" {...props} />
-  ),
-  Buffering: (props: Partial<LoadingStateProps>) => (
-    <LoadingState variant="animate" context="buffering" size="sm" {...props} />
-  )
-}

package/dist/src/components/accessibility/keyboard-help-overlay.d.ts

@@ -1,17 +0,0 @@
-interface KeyboardHelpOverlayProps {
-    isOpen: boolean;
-    onClose: () => void;
-    shortcuts: Array<{
-        key: string;
-        description: string;
-        modifiers?: {
-            ctrl?: boolean;
-            alt?: boolean;
-            shift?: boolean;
-        };
-    }>;
-    className?: string;
-}
-export declare function KeyboardHelpOverlay({ isOpen, onClose, shortcuts, className }: KeyboardHelpOverlayProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=keyboard-help-overlay.d.ts.map

package/dist/src/components/accessibility/keyboard-help-overlay.tsx

@@ -1,213 +0,0 @@
-import React from 'react'
-import { cn } from '../../lib/utils'
-import type { KeyboardShortcut } from '../../hooks/accessibility/use-keyboard-shortcuts'
-
-interface KeyboardHelpOverlayProps {
-  isOpen: boolean
-  onClose: () => void
-  shortcuts: Array<{
-    key: string
-    description: string
-    modifiers?: {
-      ctrl?: boolean
-      alt?: boolean
-      shift?: boolean
-    }
-  }>
-  className?: string
-}
-
-export function KeyboardHelpOverlay({
-  isOpen,
-  onClose,
-  shortcuts,
-  className
-}: KeyboardHelpOverlayProps) {
-  // Handle escape key to close
-  React.useEffect(() => {
-    if (!isOpen) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [isOpen, onClose])
-
-  // Focus trap within the overlay
-  React.useEffect(() => {
-    if (!isOpen) return
-
-    const overlay = document.querySelector('[data-keyboard-help-overlay]')
-    if (!overlay) return
-
-    const focusableElements = Array.from(
-      overlay.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      )
-    ) as HTMLElement[]
-
-    if (focusableElements.length === 0) return
-
-    const firstElement = focusableElements[0]
-    const lastElement = focusableElements[focusableElements.length - 1]
-
-    // Focus the close button initially
-    const closeButton = overlay.querySelector('[data-close-button]') as HTMLElement
-    closeButton?.focus()
-
-    const handleTabKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') return
-
-      if (e.shiftKey) {
-        if (document.activeElement === firstElement) {
-          e.preventDefault()
-          lastElement.focus()
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          e.preventDefault()
-          firstElement.focus()
-        }
-      }
-    }
-
-    document.addEventListener('keydown', handleTabKey)
-    return () => document.removeEventListener('keydown', handleTabKey)
-  }, [isOpen])
-
-  if (!isOpen) return null
-
-  const formatKey = (key: string, modifiers?: { ctrl?: boolean; alt?: boolean; shift?: boolean }) => {
-    const parts = []
-    
-    if (modifiers?.ctrl) parts.push('Ctrl')
-    if (modifiers?.alt) parts.push('Alt')
-    if (modifiers?.shift) parts.push('Shift')
-    
-    // Format special keys
-    let keyDisplay = key
-    switch (key) {
-      case ' ':
-        keyDisplay = 'Space'
-        break
-      case 'ArrowUp':
-        keyDisplay = '↑'
-        break
-      case 'ArrowDown':
-        keyDisplay = '↓'
-        break
-      case 'ArrowLeft':
-        keyDisplay = '←'
-        break
-      case 'ArrowRight':
-        keyDisplay = '→'
-        break
-      default:
-        keyDisplay = key.toUpperCase()
-    }
-    
-    parts.push(keyDisplay)
-    return parts.join(' + ')
-  }
-
-  return (
-    <div
-      className={cn(
-        'fixed inset-0 z-50 flex items-center justify-center bg-black/50',
-        'backdrop-blur-sm',
-        className
-      )}
-      data-keyboard-help-overlay
-      onClick={(e) => {
-        if (e.target === e.currentTarget) {
-          onClose()
-        }
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="keyboard-help-title"
-      aria-describedby="keyboard-help-description"
-    >
-      <div className={cn(
-        'w-full max-w-md rounded-lg bg-white p-6 shadow-xl',
-        'dark:bg-gray-900 dark:text-white',
-        'focus-within:outline-none',
-        "fade-in-0 zoom-in-95 animate-in duration-200"
-      )}>
-        <div className="mb-4 flex items-center justify-between">
-          <h2
-            id="keyboard-help-title"
-            className="font-semibold text-lg"
-          >
-            Keyboard Shortcuts
-          </h2>
-          <button
-            data-close-button
-            onClick={onClose}
-            className={cn(
-              'rounded-md p-2 text-gray-500 transition-colors',
-              'hover:bg-gray-100 hover:text-gray-700',
-              'focus:outline-none focus:ring-2 focus:ring-blue-500',
-              'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'
-            )}
-            aria-label="Close keyboard shortcuts help"
-          >
-            <svg
-              className="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-
-        <p
-          id="keyboard-help-description"
-          className="mb-4 text-gray-600 text-sm dark:text-gray-400"
-        >
-          Use these keyboard shortcuts to control the media player:
-        </p>
-
-        <div className="max-h-64 overflow-y-auto">
-          <dl className="space-y-3">
-            {shortcuts.map(({ key, description, modifiers }, index) => (
-              <div
-                key={`${key}-${index}`}
-                className="flex items-center justify-between"
-              >
-                <dt className="text-gray-600 text-sm dark:text-gray-400">
-                  {description}
-                </dt>
-                <dd>
-                  <kbd className={cn(
-                    "inline-flex items-center rounded px-2 py-1 font-mono text-xs",
-                    "border border-gray-300 bg-gray-100 text-gray-800",
-                    "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
-                  )}>
-                    {formatKey(key, modifiers)}
-                  </kbd>
-                </dd>
-              </div>
-            ))}
-          </dl>
-        </div>
-
-        <div className="mt-4 text-gray-500 text-xs dark:text-gray-400">
-          Press <kbd className="rounded bg-gray-100 px-1 dark:bg-gray-800">Esc</kbd> to close this help
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,3 +0,0 @@
-import type { AudioPlayerProps } from "../types/index";
-export declare const AudioPlayer: import("react").ForwardRefExoticComponent<AudioPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=audio-player.d.ts.map

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

@@ -1,85 +0,0 @@
-"use client"
-
-import { forwardRef } from "react"
-import { useKeyboardControls } from "../hooks/use-keyboard-controls"
-import { useMediaPlayer } from "../hooks/use-media-player"
-import { cn } from "../lib/utils"
-import type { AudioPlayerProps } from "../types/index"
-
-export const AudioPlayer = forwardRef<HTMLDivElement, AudioPlayerProps>(
-	(
-		{
-			src,
-			className,
-			children,
-			keyboardControls = true,
-			showControls = true,
-			customControls = false,
-			...options
-		},
-		ref
-	) => {
-		const { state, controls, mediaRef, containerRef } = useMediaPlayer({
-			src,
-			...options
-		})
-
-		useKeyboardControls({
-			enabled: keyboardControls,
-			state,
-			controls
-		})
-
-		const renderSources = () => {
-			if (Array.isArray(src)) {
-				return src.map((source, index) => <source key={index} src={source} />)
-			}
-			return null
-		}
-
-		const audioProps = {
-			ref: mediaRef as React.RefObject<HTMLAudioElement>,
-			controls: showControls && !customControls,
-			className: "w-full",
-			...(Array.isArray(src) ? {} : { src })
-		}
-
-		return (
-			<div
-				ref={ref || containerRef}
-				className={cn("relative", "focus-within:outline-none", className)}
-				tabIndex={0}>
-				<audio {...audioProps}>
-					{Array.isArray(src) && renderSources()}
-					Your browser does not support the audio element.
-				</audio>
-
-				{state.error && (
-					<div className="mt-2 rounded-md border border-red-300 bg-red-100 p-3">
-						<div className="text-red-800">
-							<p className="font-semibold">Error</p>
-							<p className="text-sm">{state.error}</p>
-						</div>
-					</div>
-				)}
-
-				{state.isLoading && (
-					<div className="mt-2 rounded-md border border-gray-300 bg-gray-100 p-3">
-						<div className="flex items-center space-x-2 text-gray-600">
-							<div className="h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2"></div>
-							<span className="text-sm">Loading...</span>
-						</div>
-					</div>
-				)}
-
-				{customControls && typeof children === "function" && (
-					<div className="mt-2">{children({ state, controls })}</div>
-				)}
-
-				{customControls && typeof children !== "function" && <div className="mt-2">{children}</div>}
-			</div>
-		)
-	}
-)
-
-AudioPlayer.displayName = "AudioPlayer"

package/dist/src/components/basic/index.d.ts

@@ -1,26 +0,0 @@
-export { AudioPlayer } from "../audio-player";
-export { MediaPlayer } from "../media-player";
-export { VideoPlayer } from "../video-player";
-export { SimpleVideoPlayer } from "../simple-video-player";
-export { ModernMediaPlayer } from "../react-player-wrapper";
-export type { ModernMediaPlayerProps } from "../react-player-wrapper";
-export { FullscreenButton } from "../ui/fullscreen-button";
-export { PlayButton } from "../ui/play-button";
-export { SeekBar } from "../ui/seek-bar";
-export { TimeDisplay } from "../ui/time-display";
-export { VolumeControl } from "../ui/volume-control";
-export { MediaPlayerAudio } from "../media-player-audio";
-export { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
-export { MediaPlayerError } from "../media-player-error";
-export { MediaPlayerFullscreen } from "../media-player-fullscreen";
-export { MediaPlayerLoading } from "../media-player-loading";
-export { MediaPlayerPlay } from "../media-player-play";
-export { MediaPlayerRoot } from "../media-player-root";
-export { MediaPlayerSeek } from "../media-player-seek";
-export { MediaPlayerTime } from "../media-player-time";
-export { MediaPlayerTooltip } from "../media-player-tooltip";
-export { MediaPlayerVideo } from "../media-player-video";
-export { MediaPlayerVolume } from "../media-player-volume";
-export { BasicVideoPlayer } from "../examples/basic-video-player";
-export { CustomControlsExample } from "../examples/custom-controls-example";
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/basic/index.ts

@@ -1,37 +0,0 @@
-// Basic Media Player Components
-export { AudioPlayer } from "../audio-player";
-export { MediaPlayer } from "../media-player"; 
-export { VideoPlayer } from "../video-player";
-export { SimpleVideoPlayer } from "../simple-video-player";
-
-// Modern React Player
-export { ModernMediaPlayer } from "../react-player-wrapper";
-export type { ModernMediaPlayerProps } from "../react-player-wrapper";
-
-// Basic UI Components  
-export { FullscreenButton } from "../ui/fullscreen-button";
-export { PlayButton } from "../ui/play-button";
-export { SeekBar } from "../ui/seek-bar";
-export { TimeDisplay } from "../ui/time-display";
-export { VolumeControl } from "../ui/volume-control";
-
-// DiceUI-style Basic Components
-export { MediaPlayerAudio } from "../media-player-audio";
-export {
-  MediaPlayerControls,
-  MediaPlayerControlsOverlay
-} from "../media-player-controls";
-export { MediaPlayerError } from "../media-player-error";
-export { MediaPlayerFullscreen } from "../media-player-fullscreen";
-export { MediaPlayerLoading } from "../media-player-loading";
-export { MediaPlayerPlay } from "../media-player-play";
-export { MediaPlayerRoot } from "../media-player-root";
-export { MediaPlayerSeek } from "../media-player-seek";
-export { MediaPlayerTime } from "../media-player-time";
-export { MediaPlayerTooltip } from "../media-player-tooltip";
-export { MediaPlayerVideo } from "../media-player-video";
-export { MediaPlayerVolume } from "../media-player-volume";
-
-// Basic Examples
-export { BasicVideoPlayer } from "../examples/basic-video-player";
-export { CustomControlsExample } from "../examples/custom-controls-example";