@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,150 @@
+"use client"
+
+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 interface MinimalSeekBarProps {
+  thumbnails?: string
+  onSeek?: (time: number) => void
+  className?: string
+}
+
+export function MinimalSeekBar({
+  thumbnails,
+  onSeek,
+  className,
+}: MinimalSeekBarProps) {
+  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<HTMLDivElement>(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: number) => {
+    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: React.MouseEvent) => {
+    e.preventDefault()
+    setIsDragging(true)
+    handleSeek(e.clientX)
+  }
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    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: MouseEvent) => {
+        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 (
+    <div className={cn("group relative", className)}>
+      {/* Preview Tooltip */}
+      {hoverTime > 0 && (
+        <div
+          className="pointer-events-none absolute bottom-full z-50 mb-2"
+          style={{ left: `${hoverPosition}px`, transform: "translateX(-50%)" }}
+        >
+          {thumbnails && (
+            <div className="mb-1 rounded bg-black/90 p-1">
+              <div className="h-18 w-32 rounded bg-gray-800" />
+            </div>
+          )}
+          <div className="whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs">
+            {formatTime(hoverTime)}
+          </div>
+        </div>
+      )}
+
+      {/* Seek Bar */}
+      <div
+        ref={seekBarRef}
+        className="minimal-seekbar"
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+      >
+        {/* Buffered Progress */}
+        <div
+          className="minimal-seekbar-buffered"
+          style={{ width: `${bufferedProgress}%` }}
+        />
+
+        {/* Progress */}
+        <div
+          className="minimal-seekbar-progress"
+          style={{ width: `${progress}%` }}
+        />
+
+        {/* Thumb */}
+        <div
+          className={cn(
+            "minimal-seekbar-thumb",
+            isDragging && "active"
+          )}
+          style={{ left: `${progress}%` }}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+import type { IconSet } from "../../icons";
+export interface MinimalVolumeControlProps {
+    icons: IconSet;
+    className?: string;
+}
+export declare function MinimalVolumeControl({ icons, className, }: MinimalVolumeControlProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MinimalVolumeControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalVolumeControl.d.ts","sourceRoot":"","sources":["MinimalVolumeControl.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,kDAgE3B"}

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context";
+import { cn } from "../../../lib/utils";
+export function MinimalVolumeControl({ icons, className, }) {
+    const dispatch = useMediaDispatch();
+    const volume = useMediaSelector((state) => state.volume);
+    const isMuted = useMediaSelector((state) => state.isMuted);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const handleVolumeChange = (e) => {
+        const newVolume = parseFloat(e.target.value);
+        dispatch({
+            type: MediaActionTypes.SET_VOLUME,
+            detail: newVolume
+        });
+    };
+    const handleMuteToggle = () => {
+        dispatch({
+            type: MediaActionTypes.TOGGLE_MUTE
+        });
+    };
+    const VolumeIcon = isMuted || volume === 0 ? icons.volumeMuted : icons.volume;
+    if (!VolumeIcon)
+        return null;
+    return (_jsxs("div", { className: cn("minimal-volume-group flex items-center gap-2", className), onMouseEnter: () => setIsExpanded(true), onMouseLeave: () => setIsExpanded(false), children: [_jsx("button", { className: "minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20", onClick: handleMuteToggle, "aria-label": isMuted ? "Unmute" : "Mute", children: _jsx(VolumeIcon, { size: 18 }) }), _jsx("div", { className: cn("overflow-hidden transition-all duration-250", isExpanded ? "w-20 opacity-100" : "w-0 opacity-0"), children: _jsx("input", { type: "range", min: "0", max: "1", step: "0.01", value: isMuted ? 0 : volume, onChange: handleVolumeChange, className: "minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20", style: {
+                        background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) 100%)`
+                    } }) })] }));
+}

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

@@ -0,0 +1,80 @@
+"use client"
+
+import React, { useState } from "react"
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../../context/media-context"
+import { cn } from "../../../lib/utils"
+import type { IconSet } from "../../icons"
+
+export interface MinimalVolumeControlProps {
+  icons: IconSet
+  className?: string
+}
+
+export function MinimalVolumeControl({
+  icons,
+  className,
+}: MinimalVolumeControlProps) {
+  const dispatch = useMediaDispatch()
+  const volume = useMediaSelector((state) => state.volume)
+  const isMuted = useMediaSelector((state) => state.isMuted)
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = parseFloat(e.target.value)
+    dispatch({
+      type: MediaActionTypes.SET_VOLUME,
+      detail: newVolume
+    })
+  }
+
+  const handleMuteToggle = () => {
+    dispatch({
+      type: MediaActionTypes.TOGGLE_MUTE
+    })
+  }
+
+  const VolumeIcon = isMuted || volume === 0 ? icons.volumeMuted : icons.volume
+
+  if (!VolumeIcon) return null
+
+  return (
+    <div
+      className={cn(
+        "minimal-volume-group flex items-center gap-2",
+        className
+      )}
+      onMouseEnter={() => setIsExpanded(true)}
+      onMouseLeave={() => setIsExpanded(false)}
+    >
+      {/* Volume Button */}
+      <button
+        className="minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20"
+        onClick={handleMuteToggle}
+        aria-label={isMuted ? "Unmute" : "Mute"}
+      >
+        <VolumeIcon size={18} />
+      </button>
+
+      {/* Volume Slider */}
+      <div
+        className={cn(
+          "overflow-hidden transition-all duration-250",
+          isExpanded ? "w-20 opacity-100" : "w-0 opacity-0"
+        )}
+      >
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.01"
+          value={isMuted ? 0 : volume}
+          onChange={handleVolumeChange}
+          className="minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20"
+          style={{
+            background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) 100%)`
+          }}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+import type { LoadingStateProps } from "../../LoadingState";
+export interface SimpleMinimalPlayerProps {
+    src: string;
+    poster?: string;
+    className?: string;
+    subtitleSrc?: string;
+    subtitleTracks?: Array<{
+        id: string;
+        label: string;
+        language?: string;
+        src?: string;
+    }>;
+    crossOrigin?: "anonymous" | "use-credentials";
+    volumeOrientation?: "horizontal" | "vertical";
+    loadingComponent?: React.ComponentType<{
+        context: "initial" | "seeking" | "buffering";
+    }>;
+    showLoadingState?: boolean;
+    loadingProps?: Partial<LoadingStateProps>;
+}
+export declare function SimpleMinimalPlayer(props: SimpleMinimalPlayerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SimpleMinimalPlayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleMinimalPlayer.d.ts","sourceRoot":"","sources":["SimpleMinimalPlayer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAE3D,MAAM,WAAW,wBAAwB;IACxC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,KAAK,CAAC;QACtB,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,GAAG,CAAC,EAAE,MAAM,CAAA;KACZ,CAAC,CAAA;IACF,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAA;IAC7C,iBAAiB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAC7C,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;KAAE,CAAC,CAAA;IACxF,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAA;CACzC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA8KlE"}

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

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { cn } from "../../../lib/utils";
+import { useVideoPlayer } from "../../../hooks/useVideoPlayer";
+import { useEnhancedSubtitles } from "../../../hooks/useEnhancedSubtitles";
+import { useMediaControls } from "../../../hooks/useMediaControls";
+import { useKeyboardShortcuts } from "../../../hooks/useKeyboardShortcuts";
+import { useScreenshot } from "../../../hooks/useScreenshot";
+import { VideoElement } from "./components/VideoElement";
+import { SubtitleDisplay } from "./components/SubtitleDisplay";
+import { CenterPlayButton } from "./components/CenterPlayButton";
+import { ControlBar } from "./components/ControlBar";
+import { CustomLoading, LoadingPresets } from "../../LoadingState";
+export function SimpleMinimalPlayer(props) {
+    const { src, poster, className, subtitleSrc, subtitleTracks, crossOrigin, volumeOrientation = "horizontal", loadingComponent: LoadingComponent = undefined, showLoadingState = true, loadingProps = {} } = props;
+    const containerRef = useRef(null);
+    const [showSettings, setShowSettings] = useState(false);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const { videoRef, state: videoState, controls: videoControls } = useVideoPlayer(containerRef);
+    const { subtitlesEnabled, currentSubtitle, toggleSubtitles, getCurrentSubtitle, setCurrentSubtitle, selectSubtitleTrack, availableTracks, currentTrackId, loadError, hasSubtitles } = useEnhancedSubtitles({
+        subtitleSrc,
+        subtitleTracks,
+        onLoadError: (error) => console.error("Subtitle load error:", error)
+    });
+    const { takeScreenshot } = useScreenshot(videoRef);
+    const { controlsVisible, showVolumeSlider, setShowVolumeSlider, handleMouseMove, handleMouseEnter, handleMouseLeave } = useMediaControls(videoState.isPlaying, showSettings);
+    // Update subtitle display based on current time
+    useEffect(() => {
+        if (subtitlesEnabled) {
+            const subtitle = getCurrentSubtitle(videoState.currentTime);
+            setCurrentSubtitle(subtitle);
+        }
+    }, [videoState.currentTime, subtitlesEnabled, getCurrentSubtitle, setCurrentSubtitle]);
+    // Change playback rate
+    const changePlaybackRate = (rate) => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.playbackRate = rate;
+        setPlaybackRate(rate);
+        setShowSettings(false);
+    };
+    // Keyboard shortcuts
+    useKeyboardShortcuts({
+        videoControls,
+        toggleSubtitles,
+        takeScreenshot,
+        duration: videoState.duration
+    });
+    return (_jsxs("div", { ref: containerRef, className: cn("minimal-player relative rounded-lg bg-black", className), style: { overflow: "hidden" }, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(VideoElement, { videoRef: videoRef, src: src, poster: poster, subtitleSrc: subtitleSrc, subtitlesEnabled: subtitlesEnabled, crossOrigin: crossOrigin, onTogglePlay: videoControls.togglePlay }), _jsx(SubtitleDisplay, { subtitlesEnabled: subtitlesEnabled, subtitleText: currentSubtitle }), !videoState.isLoading && (_jsx(CenterPlayButton, { isPlaying: videoState.isPlaying, onTogglePlay: videoControls.togglePlay })), _jsx(ControlBar, { controlsVisible: controlsVisible, currentTime: videoState.currentTime, duration: videoState.duration, isPlaying: videoState.isPlaying, volume: videoState.volume, isMuted: videoState.isMuted, showVolumeSlider: showVolumeSlider, isFullscreen: videoState.isFullscreen, showSettings: showSettings, playbackRate: playbackRate, subtitleSrc: subtitleSrc, subtitlesEnabled: subtitlesEnabled, subtitleTracks: availableTracks, currentTrackId: currentTrackId, hasSubtitles: hasSubtitles, subtitleLoadError: loadError, volumeOrientation: volumeOrientation, bufferedRanges: videoState.bufferedRanges, isSeeking: videoState.isSeeking, onSeek: videoControls.seekTo, onTogglePlay: videoControls.togglePlay, onSeekBackward: videoControls.seekBackward, onSeekForward: videoControls.seekForward, onToggleMute: videoControls.toggleMute, onVolumeChange: videoControls.setVolume, onShowVolumeSlider: setShowVolumeSlider, onToggleSubtitles: toggleSubtitles, onSelectSubtitleTrack: selectSubtitleTrack, onTakeScreenshot: takeScreenshot, onToggleFullscreen: videoControls.toggleFullscreen, onToggleSettings: () => setShowSettings(!showSettings), onChangePlaybackRate: changePlaybackRate }), showLoadingState && (_jsxs(_Fragment, { children: [videoState.isLoading && !videoState.isSeeking && !videoState.isBuffering && (LoadingComponent ? (_jsx(CustomLoading, { context: "initial", children: _jsx(LoadingComponent, { context: "initial" }) })) : (_jsx(LoadingPresets.Initial, { ...loadingProps }))), videoState.isSeeking && (LoadingComponent ? (_jsx(CustomLoading, { context: "seeking", children: _jsx(LoadingComponent, { context: "seeking" }) })) : (_jsx(LoadingPresets.Seeking, { ...loadingProps }))), videoState.isBuffering && !videoState.isSeeking && (LoadingComponent ? (_jsx(CustomLoading, { context: "buffering", children: _jsx(LoadingComponent, { context: "buffering" }) })) : (_jsx(LoadingPresets.Buffering, { ...loadingProps })))] }))] }));
+}

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

@@ -0,0 +1,209 @@
+"use client"
+
+import { useState, useEffect, useRef, useCallback } from "react"
+import { cn } from "../../../lib/utils"
+import { useVideoPlayer } from "../../../hooks/useVideoPlayer"
+import { useEnhancedSubtitles } from "../../../hooks/useEnhancedSubtitles"
+import { useMediaControls } from "../../../hooks/useMediaControls"
+import { useKeyboardShortcuts } from "../../../hooks/useKeyboardShortcuts"
+import { useScreenshot } from "../../../hooks/useScreenshot"
+import { VideoElement } from "./components/VideoElement"
+import { SubtitleDisplay } from "./components/SubtitleDisplay"
+import { CenterPlayButton } from "./components/CenterPlayButton"
+import { ControlBar } from "./components/ControlBar"
+import { LoadingState, CustomLoading, LoadingPresets } from "../../LoadingState"
+import type { LoadingStateProps } from "../../LoadingState"
+
+export interface SimpleMinimalPlayerProps {
+	src: string
+	poster?: string
+	className?: string
+	subtitleSrc?: string
+	subtitleTracks?: Array<{
+		id: string
+		label: string
+		language?: string
+		src?: string
+	}>
+	crossOrigin?: "anonymous" | "use-credentials"
+	volumeOrientation?: "horizontal" | "vertical"
+	loadingComponent?: React.ComponentType<{ context: "initial" | "seeking" | "buffering" }>
+	showLoadingState?: boolean
+	loadingProps?: Partial<LoadingStateProps>
+}
+
+export function SimpleMinimalPlayer(props: SimpleMinimalPlayerProps) {
+	const {
+		src,
+		poster,
+		className,
+		subtitleSrc,
+		subtitleTracks,
+		crossOrigin,
+		volumeOrientation = "horizontal",
+		loadingComponent: LoadingComponent = undefined,
+		showLoadingState = true,
+		loadingProps = {}
+	} = props
+	const containerRef = useRef<HTMLDivElement>(null)
+	const [showSettings, setShowSettings] = useState(false)
+	const [playbackRate, setPlaybackRate] = useState(1)
+
+	const { videoRef, state: videoState, controls: videoControls } = useVideoPlayer(containerRef)
+	const {
+		subtitlesEnabled,
+		currentSubtitle,
+		toggleSubtitles,
+		getCurrentSubtitle,
+		setCurrentSubtitle,
+		selectSubtitleTrack,
+		availableTracks,
+		currentTrackId,
+		loadError,
+		hasSubtitles
+	} = useEnhancedSubtitles({
+		subtitleSrc,
+		subtitleTracks,
+		onLoadError: (error) => console.error("Subtitle load error:", error)
+	})
+	const { takeScreenshot } = useScreenshot(videoRef)
+	const {
+		controlsVisible,
+		showVolumeSlider,
+		setShowVolumeSlider,
+		handleMouseMove,
+		handleMouseEnter,
+		handleMouseLeave
+	} = useMediaControls(videoState.isPlaying, showSettings)
+
+	// Update subtitle display based on current time
+	useEffect(() => {
+		if (subtitlesEnabled) {
+			const subtitle = getCurrentSubtitle(videoState.currentTime)
+			setCurrentSubtitle(subtitle)
+		}
+	}, [videoState.currentTime, subtitlesEnabled, getCurrentSubtitle, setCurrentSubtitle])
+
+	// Change playback rate
+	const changePlaybackRate = (rate: number) => {
+    		if (!videoRef.current) return
+    		videoRef.current.playbackRate = rate
+    		setPlaybackRate(rate)
+    		setShowSettings(false)
+    	}
+
+	// Keyboard shortcuts
+	useKeyboardShortcuts({
+		videoControls,
+		toggleSubtitles,
+		takeScreenshot,
+		duration: videoState.duration
+	})
+
+	return (
+		<div
+			ref={containerRef}
+			className={cn("minimal-player relative rounded-lg bg-black", className)}
+			style={{ overflow: "hidden" }}
+			onMouseMove={handleMouseMove}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			<VideoElement
+				videoRef={videoRef}
+				src={src}
+				poster={poster}
+				subtitleSrc={subtitleSrc}
+				subtitlesEnabled={subtitlesEnabled}
+				crossOrigin={crossOrigin}
+				onTogglePlay={videoControls.togglePlay}
+			/>
+
+			<SubtitleDisplay
+				subtitlesEnabled={subtitlesEnabled}
+				subtitleText={currentSubtitle}
+			/>
+
+			{/* Show center play button only when not loading */}
+			{!videoState.isLoading && (
+				<CenterPlayButton
+					isPlaying={videoState.isPlaying}
+					onTogglePlay={videoControls.togglePlay}
+				/>
+			)}
+
+			<ControlBar
+				controlsVisible={controlsVisible}
+				currentTime={videoState.currentTime}
+				duration={videoState.duration}
+				isPlaying={videoState.isPlaying}
+				volume={videoState.volume}
+				isMuted={videoState.isMuted}
+				showVolumeSlider={showVolumeSlider}
+				isFullscreen={videoState.isFullscreen}
+				showSettings={showSettings}
+				playbackRate={playbackRate}
+				subtitleSrc={subtitleSrc}
+				subtitlesEnabled={subtitlesEnabled}
+				subtitleTracks={availableTracks}
+				currentTrackId={currentTrackId}
+				hasSubtitles={hasSubtitles}
+				subtitleLoadError={loadError}
+				volumeOrientation={volumeOrientation}
+				bufferedRanges={videoState.bufferedRanges}
+				isSeeking={videoState.isSeeking}
+				onSeek={videoControls.seekTo}
+				onTogglePlay={videoControls.togglePlay}
+				onSeekBackward={videoControls.seekBackward}
+				onSeekForward={videoControls.seekForward}
+				onToggleMute={videoControls.toggleMute}
+				onVolumeChange={videoControls.setVolume}
+				onShowVolumeSlider={setShowVolumeSlider}
+				onToggleSubtitles={toggleSubtitles}
+				onSelectSubtitleTrack={selectSubtitleTrack}
+				onTakeScreenshot={takeScreenshot}
+				onToggleFullscreen={videoControls.toggleFullscreen}
+				onToggleSettings={() => setShowSettings(!showSettings)}
+				onChangePlaybackRate={changePlaybackRate}
+			/>
+
+			{/* Loading states */}
+			{showLoadingState && (
+				<>
+					{/* Initial loading */}
+					{videoState.isLoading && !videoState.isSeeking && !videoState.isBuffering && (
+						LoadingComponent ? (
+							<CustomLoading context="initial">
+								<LoadingComponent context="initial" />
+							</CustomLoading>
+						) : (
+							<LoadingPresets.Initial {...loadingProps} />
+						)
+					)}
+
+					{/* Seeking */}
+					{videoState.isSeeking && (
+						LoadingComponent ? (
+							<CustomLoading context="seeking">
+								<LoadingComponent context="seeking" />
+							</CustomLoading>
+						) : (
+							<LoadingPresets.Seeking {...loadingProps} />
+						)
+					)}
+
+					{/* Buffering */}
+					{videoState.isBuffering && !videoState.isSeeking && (
+						LoadingComponent ? (
+							<CustomLoading context="buffering">
+								<LoadingComponent context="buffering" />
+							</CustomLoading>
+						) : (
+							<LoadingPresets.Buffering {...loadingProps} />
+						)
+					)}
+				</>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,7 @@
+interface CenterPlayButtonProps {
+    isPlaying: boolean;
+    onTogglePlay: () => void;
+}
+export declare const CenterPlayButton: ({ isPlaying, onTogglePlay }: CenterPlayButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=CenterPlayButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CenterPlayButton.d.ts","sourceRoot":"","sources":["CenterPlayButton.tsx"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC9B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,eAAO,MAAM,gBAAgB,GAA6B,6BAGvD,qBAAqB,mDAUvB,CAAA"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultMinimalIcons } from "../../../icons";
+export const CenterPlayButton = function CenterPlayButton({ isPlaying, onTogglePlay }) {
+    if (isPlaying)
+        return null;
+    const PlayIcon = defaultMinimalIcons.play;
+    return (_jsx("div", { className: "minimal-center-play cursor-pointer", onClick: onTogglePlay, children: PlayIcon && _jsx(PlayIcon, { size: 60 }) }));
+};

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

@@ -0,0 +1,22 @@
+import React, { memo } from "react"
+import { defaultMinimalIcons } from "../../../icons"
+
+interface CenterPlayButtonProps {
+	isPlaying: boolean
+	onTogglePlay: () => void
+}
+
+export const CenterPlayButton = function CenterPlayButton({
+	isPlaying,
+	onTogglePlay
+}: CenterPlayButtonProps) {
+	if (isPlaying) return null
+
+	const PlayIcon = defaultMinimalIcons.play
+
+	return (
+		<div className="minimal-center-play cursor-pointer" onClick={onTogglePlay}>
+			{PlayIcon && <PlayIcon size={60} />}
+		</div>
+	)
+}

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

@@ -0,0 +1,43 @@
+import type { BufferedRange } from "../../../../hooks/useVideoPlayer";
+interface ControlBarProps {
+    controlsVisible: boolean;
+    currentTime: number;
+    duration: number;
+    isPlaying: boolean;
+    volume: number;
+    isMuted: boolean;
+    showVolumeSlider: boolean;
+    isFullscreen: boolean;
+    showSettings: boolean;
+    playbackRate: number;
+    subtitleSrc?: string;
+    subtitlesEnabled: boolean;
+    subtitleTracks?: Array<{
+        id: string;
+        label: string;
+        language?: string;
+        src?: string;
+    }>;
+    currentTrackId?: string | null;
+    hasSubtitles?: boolean;
+    subtitleLoadError?: Error | null;
+    volumeOrientation?: "horizontal" | "vertical";
+    bufferedRanges?: BufferedRange[];
+    isSeeking?: boolean;
+    onSeek: (time: number) => void;
+    onTogglePlay: () => void;
+    onSeekBackward: () => void;
+    onSeekForward: () => void;
+    onToggleMute: () => void;
+    onVolumeChange: (volume: number) => void;
+    onShowVolumeSlider: (show: boolean) => void;
+    onToggleSubtitles: () => void;
+    onSelectSubtitleTrack?: (trackId: string | null) => void;
+    onTakeScreenshot: (ctrlKey: boolean) => void;
+    onToggleFullscreen: () => void;
+    onToggleSettings: () => void;
+    onChangePlaybackRate: (rate: number) => void;
+}
+export declare const ControlBar: ({ controlsVisible, currentTime, duration, isPlaying, volume, isMuted, showVolumeSlider, isFullscreen, showSettings, playbackRate, subtitleSrc, subtitlesEnabled, subtitleTracks, currentTrackId, hasSubtitles, subtitleLoadError, volumeOrientation, bufferedRanges, isSeeking, onSeek, onTogglePlay, onSeekBackward, onSeekForward, onToggleMute, onVolumeChange, onShowVolumeSlider, onToggleSubtitles, onSelectSubtitleTrack, onTakeScreenshot, onToggleFullscreen, onToggleSettings, onChangePlaybackRate }: ControlBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ControlBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlBar.d.ts","sourceRoot":"","sources":["ControlBar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAErE,UAAU,eAAe;IACxB,eAAe,EAAE,OAAO,CAAA;IACxB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,OAAO,CAAA;IACzB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC;QACtB,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,GAAG,CAAC,EAAE,MAAM,CAAA;KACZ,CAAC,CAAA;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IAChC,iBAAiB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAC7C,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxD,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAED,eAAO,MAAM,UAAU,GAAuB,ifAiC3C,eAAe,4CA+DjB,CAAA"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../lib/utils";
+import { SeekBar } from "./SeekBar";
+import { PlaybackControls } from "./PlaybackControls";
+import { VolumeControl } from "./VolumeControl";
+import { TimeDisplay } from "./TimeDisplay";
+import { RightControls } from "./RightControls";
+export const ControlBar = function ControlBar({ controlsVisible, currentTime, duration, isPlaying, volume, isMuted, showVolumeSlider, isFullscreen, showSettings, playbackRate, subtitleSrc, subtitlesEnabled, subtitleTracks, currentTrackId, hasSubtitles, subtitleLoadError, volumeOrientation = "horizontal", bufferedRanges, isSeeking, onSeek, onTogglePlay, onSeekBackward, onSeekForward, onToggleMute, onVolumeChange, onShowVolumeSlider, onToggleSubtitles, onSelectSubtitleTrack, onTakeScreenshot, onToggleFullscreen, onToggleSettings, onChangePlaybackRate }) {
+    return (_jsxs("div", { className: cn("minimal-control-bar", "absolute right-0 bottom-0 left-0 z-40", "px-6 py-3 transition-all duration-200", controlsVisible ? "minimal-controls-visible" : "minimal-controls-hidden"), children: [_jsx(SeekBar, { currentTime: currentTime, duration: duration, bufferedRanges: bufferedRanges, isSeeking: isSeeking, onSeek: onSeek }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PlaybackControls, { isPlaying: isPlaying, onTogglePlay: onTogglePlay, onSeekBackward: onSeekBackward, onSeekForward: onSeekForward }), _jsx(VolumeControl, { volume: volume, isMuted: isMuted, showVolumeSlider: showVolumeSlider, onToggleMute: onToggleMute, onVolumeChange: onVolumeChange, onShowVolumeSlider: onShowVolumeSlider, orientation: volumeOrientation }), _jsx(TimeDisplay, { currentTime: currentTime, duration: duration })] }), _jsx(RightControls, { subtitleSrc: subtitleSrc, subtitlesEnabled: subtitlesEnabled, subtitleTracks: subtitleTracks, currentTrackId: currentTrackId, hasSubtitles: hasSubtitles, subtitleLoadError: subtitleLoadError, isFullscreen: isFullscreen, showSettings: showSettings, playbackRate: playbackRate, onToggleSubtitles: onToggleSubtitles, onSelectSubtitleTrack: onSelectSubtitleTrack, onTakeScreenshot: onTakeScreenshot, onToggleFullscreen: onToggleFullscreen, onToggleSettings: onToggleSettings, onChangePlaybackRate: onChangePlaybackRate })] })] }));
+};