@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,210 @@
+"use client"
+
+import { useState, useEffect, useRef, useCallback } from "react"
+import "../../../styles/minimal-player.css"
+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/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/src/components/variants/minimal/components/ControlBar.tsx

@@ -0,0 +1,146 @@
+import React, { memo } from "react"
+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"
+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 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
+}: ControlBarProps) {
+	return (
+		<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"
+			)}
+		>
+			<SeekBar
+				currentTime={currentTime}
+				duration={duration}
+				bufferedRanges={bufferedRanges}
+				isSeeking={isSeeking}
+				onSeek={onSeek}
+			/>
+
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<PlaybackControls
+						isPlaying={isPlaying}
+						onTogglePlay={onTogglePlay}
+						onSeekBackward={onSeekBackward}
+						onSeekForward={onSeekForward}
+					/>
+
+					<VolumeControl
+						volume={volume}
+						isMuted={isMuted}
+						showVolumeSlider={showVolumeSlider}
+						onToggleMute={onToggleMute}
+						onVolumeChange={onVolumeChange}
+						onShowVolumeSlider={onShowVolumeSlider}
+						orientation={volumeOrientation}
+					/>
+
+					<TimeDisplay
+						currentTime={currentTime}
+						duration={duration}
+					/>
+				</div>
+
+				<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}
+				/>
+			</div>
+		</div>
+	)
+}