@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,315 @@
+"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

@@ -0,0 +1,11 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalOverlay.d.ts","sourceRoot":"","sources":["MinimalOverlay.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,gBAAwB,EACxB,SAAiB,EACjB,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,mBAAmB,kDAyCrB"}

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+export function MinimalOverlay({ visible, showCenterButton = false, isPlaying = false, icons, onPlayPause, className, }) {
+    if (!visible || !showCenterButton)
+        return null;
+    const PlayIcon = icons.play;
+    const PauseIcon = icons.pause;
+    if (!PlayIcon || !PauseIcon)
+        return null;
+    return (_jsx("div", { className: cn("absolute inset-0 z-30 flex items-center justify-center", "bg-black/20 transition-opacity duration-200", className), onClick: onPlayPause, children: _jsx("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", children: isPlaying ? (_jsx(PauseIcon, { size: 48 })) : (_jsx(PlayIcon, { size: 48, className: "ml-1" })) }) }));
+}

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

@@ -0,0 +1,64 @@
+"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

@@ -0,0 +1,9 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalPlayButton.d.ts","sourceRoot":"","sources":["MinimalPlayButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAK,EACL,IAAW,EACX,SAAS,GACV,EAAE,sBAAsB,kDA6CxB"}

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaDispatch, MediaActionTypes } from "../../../context/media-context";
+import { cn } from "../../../lib/utils";
+export function MinimalPlayButton({ isPlaying, icons, size = "md", className, }) {
+    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 (_jsx("button", { className: cn("minimal-btn", sizeClasses[size], className), onClick: handleClick, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying ? (_jsx(PauseIcon, { size: iconSizes[size] })) : (_jsx(PlayIcon, { size: iconSizes[size] })) }));
+}

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

@@ -0,0 +1,65 @@
+"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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalSeekBar.d.ts","sourceRoot":"","sources":["MinimalSeekBar.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,mBAAmB,2CAoIrB"}

package/dist/src/components/variants/minimal/MinimalSeekBar.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useState } from "react";
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context";
+import { formatTime } from "../../../lib/format-time";
+import { cn } from "../../../lib/utils";
+export function MinimalSeekBar({ thumbnails, onSeek, className, }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector((state) => state.currentTime);
+    const duration = useMediaSelector((state) => state.duration);
+    const buffered = useMediaSelector((state) => state.buffered);
+    const [isDragging, setIsDragging] = useState(false);
+    const [hoverTime, setHoverTime] = useState(0);
+    const [hoverPosition, setHoverPosition] = useState(0);
+    const seekBarRef = useRef(null);
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    const bufferedProgress = buffered && buffered.length > 0 && duration > 0
+        ? (buffered.end(buffered.length - 1) / duration) * 100
+        : 0;
+    const handleSeek = (clientX) => {
+        if (!seekBarRef.current || duration === 0)
+            return;
+        const rect = seekBarRef.current.getBoundingClientRect();
+        const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newTime = position * duration;
+        dispatch({
+            type: MediaActionTypes.SEEK,
+            detail: newTime
+        });
+        onSeek?.(newTime);
+    };
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        handleSeek(e.clientX);
+    };
+    const handleMouseMove = (e) => {
+        if (!seekBarRef.current || duration === 0)
+            return;
+        const rect = seekBarRef.current.getBoundingClientRect();
+        const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const time = position * duration;
+        setHoverTime(time);
+        setHoverPosition((e.clientX - rect.left));
+        if (isDragging) {
+            handleSeek(e.clientX);
+        }
+    };
+    const handleMouseUp = () => {
+        setIsDragging(false);
+    };
+    const handleMouseLeave = () => {
+        setIsDragging(false);
+        setHoverTime(0);
+    };
+    React.useEffect(() => {
+        if (isDragging) {
+            const handleGlobalMouseMove = (e) => {
+                handleSeek(e.clientX);
+            };
+            const handleGlobalMouseUp = () => {
+                setIsDragging(false);
+            };
+            document.addEventListener("mousemove", handleGlobalMouseMove);
+            document.addEventListener("mouseup", handleGlobalMouseUp);
+            return () => {
+                document.removeEventListener("mousemove", handleGlobalMouseMove);
+                document.removeEventListener("mouseup", handleGlobalMouseUp);
+            };
+        }
+    }, [isDragging]);
+    return (_jsxs("div", { className: cn("group relative", className), children: [hoverTime > 0 && (_jsxs("div", { className: "pointer-events-none absolute bottom-full z-50 mb-2", style: { left: `${hoverPosition}px`, transform: "translateX(-50%)" }, children: [thumbnails && (_jsx("div", { className: "mb-1 rounded bg-black/90 p-1", children: _jsx("div", { className: "h-18 w-32 rounded bg-gray-800" }) })), _jsx("div", { className: "whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs", children: formatTime(hoverTime) })] })), _jsxs("div", { ref: seekBarRef, className: "minimal-seekbar", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, children: [_jsx("div", { className: "minimal-seekbar-buffered", style: { width: `${bufferedProgress}%` } }), _jsx("div", { className: "minimal-seekbar-progress", style: { width: `${progress}%` } }), _jsx("div", { className: cn("minimal-seekbar-thumb", isDragging && "active"), style: { left: `${progress}%` } })] })] }));
+}