@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/dist/src/components/variants/minimal/MinimalLoading.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export interface MinimalLoadingProps {
-    icon?: React.FC<{
-        size?: number;
-        className?: string;
-    }>;
-    className?: string;
-}
-export declare function MinimalLoading({ icon: LoadingIcon, className, }: MinimalLoadingProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MinimalLoading.d.ts.map

package/dist/src/components/variants/minimal/MinimalLoading.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../../../lib/utils"
-
-export interface MinimalLoadingProps {
-  icon?: React.FC<{ size?: number; className?: string }>
-  className?: string
-}
-
-export function MinimalLoading({
-  icon: LoadingIcon,
-  className,
-}: MinimalLoadingProps) {
-  return (
-    <div
-      className={cn(
-        "absolute inset-0 z-40 flex items-center justify-center",
-        "bg-black/60 backdrop-blur-sm",
-        className
-      )}
-    >
-      <div className="text-white">
-        {LoadingIcon ? (
-          <LoadingIcon size={48} className="animate-spin" />
-        ) : (
-          <div className="minimal-spinner h-12 w-12 animate-spin rounded-full border-3 border-white/20 border-t-white" />
-        )}
-      </div>
-    </div>
-  )
-}

package/dist/src/components/variants/minimal/MinimalMediaPlayer.d.ts

@@ -1,38 +0,0 @@
-import type { IconSet } from "../../icons";
-export interface MinimalMediaPlayerProps {
-    src: string | string[];
-    poster?: string;
-    autoPlay?: boolean;
-    muted?: boolean;
-    loop?: boolean;
-    autoHideControls?: boolean;
-    hideDelay?: number;
-    theme?: "dark" | "light" | "transparent";
-    customIcons?: IconSet;
-    showCenterPlayButton?: boolean;
-    showLoadingSpinner?: boolean;
-    className?: string;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnded?: () => void;
-    onTimeUpdate?: (currentTime: number) => void;
-    onVolumeChange?: (volume: number) => void;
-    onSeek?: (time: number) => void;
-    onError?: (error: Error) => void;
-    watermark?: {
-        src: string;
-        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        opacity?: number;
-        size?: "small" | "medium" | "large";
-    };
-    qualities?: Array<{
-        src: string;
-        quality: string;
-        default?: boolean;
-    }>;
-    showQualitySelector?: boolean;
-    showSpeedControl?: boolean;
-    thumbnails?: string;
-}
-export declare function MinimalMediaPlayer({ src, poster, autoPlay, muted, loop, autoHideControls, hideDelay, theme, customIcons, showCenterPlayButton, showLoadingSpinner, className, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onSeek, onError, watermark, qualities, showQualitySelector, showSpeedControl, thumbnails, }: MinimalMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MinimalMediaPlayer.d.ts.map

package/dist/src/components/variants/minimal/MinimalMediaPlayer.tsx

@@ -1,315 +0,0 @@
-"use client"
-
-import React, { useCallback, useEffect, useRef, useState } from "react"
-import { MediaPlayerRoot } from "../../media-player-root"
-import { MediaPlayerVideo } from "../../media-player-video"
-import { MinimalControls } from "./MinimalControls"
-import { MinimalOverlay } from "./MinimalOverlay"
-import { MinimalLoading } from "./MinimalLoading"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-import { defaultMinimalIcons } from "../../icons"
-
-export interface MinimalMediaPlayerProps {
-  src: string | string[]
-  poster?: string
-  autoPlay?: boolean
-  muted?: boolean
-  loop?: boolean
-  autoHideControls?: boolean
-  hideDelay?: number
-  theme?: "dark" | "light" | "transparent"
-  customIcons?: IconSet
-  showCenterPlayButton?: boolean
-  showLoadingSpinner?: boolean
-  className?: string
-  onPlay?: () => void
-  onPause?: () => void
-  onEnded?: () => void
-  onTimeUpdate?: (currentTime: number) => void
-  onVolumeChange?: (volume: number) => void
-  onSeek?: (time: number) => void
-  onError?: (error: Error) => void
-  watermark?: {
-    src: string
-    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-    opacity?: number
-    size?: "small" | "medium" | "large"
-  }
-  qualities?: Array<{
-    src: string
-    quality: string
-    default?: boolean
-  }>
-  showQualitySelector?: boolean
-  showSpeedControl?: boolean
-  thumbnails?: string
-}
-
-export function MinimalMediaPlayer({
-  src,
-  poster,
-  autoPlay = false,
-  muted = false,
-  loop = false,
-  autoHideControls = true,
-  hideDelay = 2500,
-  theme = "dark",
-  customIcons,
-  showCenterPlayButton = true,
-  showLoadingSpinner = true,
-  className,
-  onPlay,
-  onPause,
-  onEnded,
-  onTimeUpdate,
-  onVolumeChange,
-  onSeek,
-  onError,
-  watermark,
-  qualities,
-  showQualitySelector = false,
-  showSpeedControl = false,
-  thumbnails,
-}: MinimalMediaPlayerProps) {
-  const [controlsVisible, setControlsVisible] = useState(true)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const [isHovered, setIsHovered] = useState(false)
-  const [userInteracting, setUserInteracting] = useState(false)
-
-  // Merge default icons with custom icons
-  const icons = { ...defaultMinimalIcons, ...customIcons }
-
-  // Auto-hide controls logic
-  const resetHideTimer = () => {
-      if (!autoHideControls) return
-
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-      setControlsVisible(true)
-
-      if (!userInteracting && isPlaying) {
-        hideTimeoutRef.current = setTimeout(() => {
-          setControlsVisible(false)
-        }, hideDelay)
-      }
-    }
-
-  // Handle mouse movement
-  const handleMouseMove = () => {
-      resetHideTimer()
-    }
-
-  // Handle mouse enter/leave
-  const handleMouseEnter = () => {
-      setIsHovered(true)
-      setControlsVisible(true)
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-    }
-
-  const handleMouseLeave = () => {
-      setIsHovered(false)
-      if (isPlaying && autoHideControls && !userInteracting) {
-        hideTimeoutRef.current = setTimeout(() => {
-          setControlsVisible(false)
-        }, 500)
-      }
-    }
-
-  // Handle user interaction
-  const handleUserInteractionStart = () => {
-      setUserInteracting(true)
-      setControlsVisible(true)
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-    }
-
-  const handleUserInteractionEnd = () => {
-      setUserInteracting(false)
-      resetHideTimer()
-    }
-
-  // Handle play state changes
-  const handlePlayStateChange = (playing: boolean) => {
-      setIsPlaying(playing)
-      if (playing) {
-        onPlay?.()
-        resetHideTimer()
-      } else {
-        onPause?.()
-        setControlsVisible(true)
-        if (hideTimeoutRef.current) {
-          clearTimeout(hideTimeoutRef.current)
-        }
-      }
-    }
-
-  // Handle loading state
-  const handleLoadStart = () => {
-      setIsLoading(true)
-      setError(null)
-    }
-
-  const handleLoadedData = () => {
-      setIsLoading(false)
-    }
-
-  // Handle errors
-  const handleError = (e: Error) => {
-      setIsLoading(false)
-      setError(e.message || "An error occurred")
-      onError?.(e)
-    }
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  // Determine video source
-  const videoSrc = qualities && qualities.length > 0
-    ? qualities.find(q => q.default)?.src || qualities[0]?.src || (typeof src === 'string' ? src : src[0])
-    : (typeof src === 'string' ? src : src[0])
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn(
-        "minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black",
-        `theme-minimal-${theme}`,
-        className
-      )}
-      data-theme={theme}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <MediaPlayerRoot
-        className="relative h-full w-full"
-        autoHide={false}
-        enableGestures={true}
-        enableMobileOptimizations={true}
-      >
-        {/* Video Element */}
-        <MediaPlayerVideo
-          src={videoSrc}
-          poster={poster}
-          autoPlay={autoPlay}
-          muted={muted}
-          loop={loop}
-          playsInline
-          crossOrigin="anonymous"
-          onPlay={() => handlePlayStateChange(true)}
-          onPause={() => handlePlayStateChange(false)}
-          onEnded={onEnded}
-          onTimeUpdate={(e) => {
-            const video = e.currentTarget as HTMLVideoElement
-            onTimeUpdate?.(video.currentTime)
-          }}
-          onVolumeChange={(e) => {
-            const video = e.currentTarget as HTMLVideoElement
-            onVolumeChange?.(video.volume)
-          }}
-          onLoadStart={handleLoadStart}
-          onLoadedData={handleLoadedData}
-          onError={(e) => handleError(new Error("Failed to load video"))}
-        />
-
-        {/* Loading State */}
-        {showLoadingSpinner && isLoading && (
-          <MinimalLoading icon={icons.spinner} />
-        )}
-
-        {/* Error State */}
-        {error && (
-          <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80">
-            <div className="text-center">
-              <div className="mb-4 text-red-500">
-                <svg className="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              </div>
-              <p className="mb-2 text-lg text-white">Playback Error</p>
-              <p className="text-gray-400 text-sm">{error}</p>
-            </div>
-          </div>
-        )}
-
-        {/* Watermark */}
-        {watermark && (
-          <div
-            className={cn(
-              "pointer-events-none absolute z-20",
-              {
-                "top-4 left-4": watermark.position === "top-left",
-                "top-4 right-4": watermark.position === "top-right",
-                "bottom-16 left-4": watermark.position === "bottom-left",
-                "right-4 bottom-16": watermark.position === "bottom-right",
-              }
-            )}
-            style={{ opacity: watermark.opacity || 0.7 }}
-          >
-            <img
-              src={watermark.src}
-              alt=""
-              className={cn(
-                "object-contain",
-                {
-                  "h-8": watermark.size === "small",
-                  "h-12": watermark.size === "medium" || !watermark.size,
-                  "h-16": watermark.size === "large",
-                }
-              )}
-            />
-          </div>
-        )}
-
-        {/* Center Play Button */}
-        {showCenterPlayButton && !isPlaying && !isLoading && (
-          <MinimalOverlay
-            visible={true}
-            showCenterButton={true}
-            isPlaying={isPlaying}
-            icons={icons}
-            onPlayPause={() => {
-              const video = containerRef.current?.querySelector("video")
-              if (video) {
-                if (isPlaying) {
-                  video.pause()
-                } else {
-                  video.play()
-                }
-              }
-            }}
-          />
-        )}
-
-        {/* Controls */}
-        <MinimalControls
-          visible={controlsVisible || !isPlaying || isHovered}
-          icons={icons}
-          isPlaying={isPlaying}
-          showQualitySelector={showQualitySelector}
-          showSpeedControl={showSpeedControl}
-          qualities={qualities}
-          thumbnails={thumbnails}
-          onUserInteractionStart={handleUserInteractionStart}
-          onUserInteractionEnd={handleUserInteractionEnd}
-          onSeek={onSeek}
-        />
-      </MediaPlayerRoot>
-    </div>
-  )
-}

package/dist/src/components/variants/minimal/MinimalOverlay.d.ts

@@ -1,11 +0,0 @@
-import type { IconSet } from "../../icons";
-export interface MinimalOverlayProps {
-    visible: boolean;
-    showCenterButton?: boolean;
-    isPlaying?: boolean;
-    icons: IconSet;
-    onPlayPause?: () => void;
-    className?: string;
-}
-export declare function MinimalOverlay({ visible, showCenterButton, isPlaying, icons, onPlayPause, className, }: MinimalOverlayProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=MinimalOverlay.d.ts.map

package/dist/src/components/variants/minimal/MinimalOverlay.tsx

@@ -1,64 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-
-export interface MinimalOverlayProps {
-  visible: boolean
-  showCenterButton?: boolean
-  isPlaying?: boolean
-  icons: IconSet
-  onPlayPause?: () => void
-  className?: string
-}
-
-export function MinimalOverlay({
-  visible,
-  showCenterButton = false,
-  isPlaying = false,
-  icons,
-  onPlayPause,
-  className,
-}: MinimalOverlayProps) {
-  if (!visible || !showCenterButton) return null
-
-  const PlayIcon = icons.play
-  const PauseIcon = icons.pause
-
-  if (!PlayIcon || !PauseIcon) return null
-
-  return (
-    <div
-      className={cn(
-        "absolute inset-0 z-30 flex items-center justify-center",
-        "bg-black/20 transition-opacity duration-200",
-        className
-      )}
-      onClick={onPlayPause}
-    >
-      <button
-        className={cn(
-          "minimal-center-play",
-          "h-20 w-20 rounded-full",
-          "flex items-center justify-center",
-          "text-white",
-          "transition-all duration-200",
-          "hover:scale-110",
-          "active:scale-95"
-        )}
-        onClick={(e) => {
-          e.stopPropagation()
-          onPlayPause?.()
-        }}
-        aria-label={isPlaying ? "Pause" : "Play"}
-      >
-        {isPlaying ? (
-          <PauseIcon size={48} />
-        ) : (
-          <PlayIcon size={48} className="ml-1" />
-        )}
-      </button>
-    </div>
-  )
-}

package/dist/src/components/variants/minimal/MinimalPlayButton.d.ts

@@ -1,9 +0,0 @@
-import type { IconSet } from "../../icons";
-export interface MinimalPlayButtonProps {
-    isPlaying: boolean;
-    icons: IconSet;
-    size?: "sm" | "md" | "lg" | "xl";
-    className?: string;
-}
-export declare function MinimalPlayButton({ isPlaying, icons, size, className, }: MinimalPlayButtonProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=MinimalPlayButton.d.ts.map

package/dist/src/components/variants/minimal/MinimalPlayButton.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import React from "react"
-import { useMediaContext, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-
-export interface MinimalPlayButtonProps {
-  isPlaying: boolean
-  icons: IconSet
-  size?: "sm" | "md" | "lg" | "xl"
-  className?: string
-}
-
-export function MinimalPlayButton({
-  isPlaying,
-  icons,
-  size = "md",
-  className,
-}: MinimalPlayButtonProps) {
-  const dispatch = useMediaDispatch()
-  
-  const handleClick = () => {
-    dispatch({
-      type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-    })
-  }
-
-  const sizeClasses = {
-    sm: "h-10 w-10",
-    md: "h-12 w-12 minimal-btn",
-    lg: "h-16 w-16 minimal-btn-lg",
-    xl: "h-20 w-20 minimal-btn-lg",
-  }
-
-  const iconSizes = {
-    sm: 27,
-    md: 30,
-    lg: 36,
-    xl: 42,
-  }
-
-  const PlayIcon = icons.play
-  const PauseIcon = icons.pause
-
-  if (!PlayIcon || !PauseIcon) return null
-
-  return (
-    <button
-      className={cn(
-        "minimal-btn",
-        sizeClasses[size],
-        className
-      )}
-      onClick={handleClick}
-      aria-label={isPlaying ? "Pause" : "Play"}
-    >
-      {isPlaying ? (
-        <PauseIcon size={iconSizes[size]} />
-      ) : (
-        <PlayIcon size={iconSizes[size]} />
-      )}
-    </button>
-  )
-}

package/dist/src/components/variants/minimal/MinimalSeekBar.d.ts

@@ -1,7 +0,0 @@
-export interface MinimalSeekBarProps {
-    thumbnails?: string;
-    onSeek?: (time: number) => void;
-    className?: string;
-}
-export declare function MinimalSeekBar({ thumbnails, onSeek, className, }: MinimalSeekBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MinimalSeekBar.d.ts.map