@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,206 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useRef, useState } from "react"
-import "../../../styles/minimal-player.css"
-import { useEnhancedSubtitles } from "../../../hooks/useEnhancedSubtitles"
-import { useKeyboardShortcuts } from "../../../hooks/useKeyboardShortcuts"
-import { useMediaControls } from "../../../hooks/useMediaControls"
-import { useScreenshot } from "../../../hooks/useScreenshot"
-import { useVideoPlayer } from "../../../hooks/useVideoPlayer"
-import { cn } from "../../../lib/utils"
-import { CustomLoading, LoadingPresets, LoadingState } from "../../LoadingState"
-import type { LoadingStateProps } from "../../LoadingState"
-import { CenterPlayButton } from "./components/CenterPlayButton"
-import { ControlBar } from "./components/ControlBar"
-import { SubtitleDisplay } from "./components/SubtitleDisplay"
-import { VideoElement } from "./components/VideoElement"
-
-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

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

@@ -1,142 +0,0 @@
-import React, { memo } from "react"
-import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
-import { cn } from "../../../../lib/utils"
-import { PlaybackControls } from "./PlaybackControls"
-import { RightControls } from "./RightControls"
-import { SeekBar } from "./SeekBar"
-import { TimeDisplay } from "./TimeDisplay"
-import { VolumeControl } from "./VolumeControl"
-
-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>
-	)
-}