@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/audio-player.tsx

@@ -1,85 +0,0 @@
-"use client"
-
-import { forwardRef } from "react"
-import { useKeyboardControls } from "../hooks/use-keyboard-controls"
-import { useMediaPlayer } from "../hooks/use-media-player"
-import { cn } from "../lib/utils"
-import type { AudioPlayerProps } from "../types/index"
-
-export const AudioPlayer = forwardRef<HTMLDivElement, AudioPlayerProps>(
-	(
-		{
-			src,
-			className,
-			children,
-			keyboardControls = true,
-			showControls = true,
-			customControls = false,
-			...options
-		},
-		ref
-	) => {
-		const { state, controls, mediaRef, containerRef } = useMediaPlayer({
-			src,
-			...options
-		})
-
-		useKeyboardControls({
-			enabled: keyboardControls,
-			state,
-			controls
-		})
-
-		const renderSources = () => {
-			if (Array.isArray(src)) {
-				return src.map((source, index) => <source key={index} src={source} />)
-			}
-			return null
-		}
-
-		const audioProps = {
-			ref: mediaRef as React.RefObject<HTMLAudioElement>,
-			controls: showControls && !customControls,
-			className: "w-full",
-			...(Array.isArray(src) ? {} : { src })
-		}
-
-		return (
-			<div
-				ref={ref || containerRef}
-				className={cn("relative", "focus-within:outline-none", className)}
-				tabIndex={0}>
-				<audio {...audioProps}>
-					{Array.isArray(src) && renderSources()}
-					Your browser does not support the audio element.
-				</audio>
-
-				{state.error && (
-					<div className="mt-2 rounded-md border border-red-300 bg-red-100 p-3">
-						<div className="text-red-800">
-							<p className="font-semibold">Error</p>
-							<p className="text-sm">{state.error}</p>
-						</div>
-					</div>
-				)}
-
-				{state.isLoading && (
-					<div className="mt-2 rounded-md border border-gray-300 bg-gray-100 p-3">
-						<div className="flex items-center space-x-2 text-gray-600">
-							<div className="h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2"></div>
-							<span className="text-sm">Loading...</span>
-						</div>
-					</div>
-				)}
-
-				{customControls && typeof children === "function" && (
-					<div className="mt-2">{children({ state, controls })}</div>
-				)}
-
-				{customControls && typeof children !== "function" && <div className="mt-2">{children}</div>}
-			</div>
-		)
-	}
-)
-
-AudioPlayer.displayName = "AudioPlayer"

package/src/components/basic/index.ts

@@ -1,37 +0,0 @@
-// Basic Media Player Components
-export { AudioPlayer } from "../audio-player"
-export { MediaPlayer } from "../media-player"
-export { VideoPlayer } from "../video-player"
-export { SimpleVideoPlayer } from "../simple-video-player"
-
-// Modern React Player
-export { ModernMediaPlayer } from "../react-player-wrapper"
-export type { ModernMediaPlayerProps } from "../react-player-wrapper"
-
-// Basic UI Components
-export { FullscreenButton } from "../ui/fullscreen-button"
-export { PlayButton } from "../ui/play-button"
-export { SeekBar } from "../ui/seek-bar"
-export { TimeDisplay } from "../ui/time-display"
-export { VolumeControl } from "../ui/volume-control"
-
-// DiceUI-style Basic Components
-export { MediaPlayerAudio } from "../media-player-audio"
-export {
-	MediaPlayerControls,
-	MediaPlayerControlsOverlay
-} from "../media-player-controls"
-export { MediaPlayerError } from "../media-player-error"
-export { MediaPlayerFullscreen } from "../media-player-fullscreen"
-export { MediaPlayerLoading } from "../media-player-loading"
-export { MediaPlayerPlay } from "../media-player-play"
-export { MediaPlayerRoot } from "../media-player-root"
-export { MediaPlayerSeek } from "../media-player-seek"
-export { MediaPlayerTime } from "../media-player-time"
-export { MediaPlayerTooltip } from "../media-player-tooltip"
-export { MediaPlayerVideo } from "../media-player-video"
-export { MediaPlayerVolume } from "../media-player-volume"
-
-// Basic Examples
-export { BasicVideoPlayer } from "../examples/basic-video-player"
-export { CustomControlsExample } from "../examples/custom-controls-example"

package/src/components/enhanced/advanced-features.tsx

@@ -1,311 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "../../context/media-context"
-import { formatTime } from "../../lib/format-time"
-import { cn } from "../../lib/utils"
-
-// Types for advanced features
-export interface Chapter {
-	id: string
-	title: string
-	startTime: number
-	endTime: number
-	thumbnail?: string
-}
-
-export interface QualityLevel {
-	id: string
-	label: string
-	width: number
-	height: number
-	bitrate?: number
-}
-
-export interface Subtitle {
-	id: string
-	label: string
-	language: string
-	src: string
-	default?: boolean
-}
-
-// Quality selector component
-export const QualitySelector = function QualitySelector({
-	qualities,
-	currentQuality,
-	onQualityChange,
-	className
-}: {
-	qualities: QualityLevel[]
-	currentQuality: string
-	onQualityChange: (qualityId: string) => void
-	className?: string
-}) {
-	const [isOpen, setIsOpen] = React.useState(false)
-
-	const currentQualityLabel = React.useMemo(() => {
-		return qualities.find((q) => q.id === currentQuality)?.label || "Auto"
-	}, [qualities, currentQuality])
-
-	return (
-		<div className={cn("relative", className)}>
-			<button
-				type="button"
-				onClick={() => setIsOpen(!isOpen)}
-				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
-				aria-label="Select quality">
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-					<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-				</svg>
-				<span className="text-sm">{currentQualityLabel}</span>
-				<svg
-					viewBox="0 0 24 24"
-					fill="currentColor"
-					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}>
-					<path d="M7 10l5 5 5-5z" />
-				</svg>
-			</button>
-
-			{isOpen && (
-				<div className="absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
-					{qualities.map((quality) => (
-						<button
-							key={quality.id}
-							onClick={() => {
-								onQualityChange(quality.id)
-								setIsOpen(false)
-							}}
-							className={cn(
-								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-								quality.id === currentQuality && "bg-primary/20 text-primary"
-							)}>
-							{quality.label}
-							{quality.bitrate && (
-								<span className="ml-2 text-white/60 text-xs">
-									({Math.round(quality.bitrate / 1000)}k)
-								</span>
-							)}
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	)
-}
-
-// Subtitle selector component
-export const SubtitleSelector = function SubtitleSelector({
-	subtitles,
-	currentSubtitle,
-	onSubtitleChange,
-	className
-}: {
-	subtitles: Subtitle[]
-	currentSubtitle: string | null
-	onSubtitleChange: (subtitleId: string | null) => void
-	className?: string
-}) {
-	const [isOpen, setIsOpen] = React.useState(false)
-
-	const currentSubtitleLabel = React.useMemo(() => {
-		if (!currentSubtitle) return "Off"
-		return subtitles.find((s) => s.id === currentSubtitle)?.label || "Off"
-	}, [subtitles, currentSubtitle])
-
-	return (
-		<div className={cn("relative", className)}>
-			<button
-				type="button"
-				onClick={() => setIsOpen(!isOpen)}
-				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
-				aria-label="Select subtitles">
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-					<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" />
-				</svg>
-				<span className="text-sm">{currentSubtitleLabel}</span>
-				<svg
-					viewBox="0 0 24 24"
-					fill="currentColor"
-					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}>
-					<path d="M7 10l5 5 5-5z" />
-				</svg>
-			</button>
-
-			{isOpen && (
-				<div className="absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
-					<button
-						onClick={() => {
-							onSubtitleChange(null)
-							setIsOpen(false)
-						}}
-						className={cn(
-							"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-							!currentSubtitle && "bg-primary/20 text-primary"
-						)}>
-						Off
-					</button>
-					{subtitles.map((subtitle) => (
-						<button
-							key={subtitle.id}
-							onClick={() => {
-								onSubtitleChange(subtitle.id)
-								setIsOpen(false)
-							}}
-							className={cn(
-								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-								subtitle.id === currentSubtitle && "bg-primary/20 text-primary"
-							)}>
-							{subtitle.label}
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	)
-}
-
-// Playback speed selector
-export const PlaybackSpeedSelector = function PlaybackSpeedSelector({
-	className
-}: {
-	className?: string
-}) {
-	const dispatch = useMediaDispatch()
-	const playbackRate = useMediaSelector((state) => state.playbackRate)
-	const [isOpen, setIsOpen] = React.useState(false)
-
-	const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
-
-	const handleSpeedChange = React.useCallback(
-		(speed: number) => {
-			dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed })
-			setIsOpen(false)
-		},
-		[dispatch]
-	)
-
-	return (
-		<div className={cn("relative", className)}>
-			<button
-				type="button"
-				onClick={() => setIsOpen(!isOpen)}
-				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
-				aria-label="Select playback speed">
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
-					<path d="M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z" />
-				</svg>
-				<span className="text-sm">{playbackRate}x</span>
-				<svg
-					viewBox="0 0 24 24"
-					fill="currentColor"
-					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}>
-					<path d="M7 10l5 5 5-5z" />
-				</svg>
-			</button>
-
-			{isOpen && (
-				<div className="absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
-					{speeds.map((speed) => (
-						<button
-							key={speed}
-							onClick={() => handleSpeedChange(speed)}
-							className={cn(
-								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
-								speed === playbackRate && "bg-primary/20 text-primary"
-							)}>
-							{speed}x
-						</button>
-					))}
-				</div>
-			)}
-		</div>
-	)
-}
-
-// Chapters component
-export const ChaptersPanel = function ChaptersPanel({
-	chapters,
-	onChapterSelect,
-	className
-}: {
-	chapters: Chapter[]
-	onChapterSelect: (chapter: Chapter) => void
-	className?: string
-}) {
-	const currentTime = useMediaSelector((state) => state.currentTime)
-
-	const currentChapter = React.useMemo(() => {
-		return chapters.find(
-			(chapter) => currentTime >= chapter.startTime && currentTime < chapter.endTime
-		)
-	}, [chapters, currentTime])
-
-	return (
-		<div
-			className={cn(
-				"rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm",
-				className
-			)}>
-			<h3 className="mb-3 font-semibold text-white">Chapters</h3>
-			<div className="max-h-64 space-y-2 overflow-y-auto">
-				{chapters.map((chapter) => (
-					<button
-						key={chapter.id}
-						onClick={() => onChapterSelect(chapter)}
-						className={cn(
-							"flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors",
-							"hover:bg-white/10",
-							chapter.id === currentChapter?.id && "border border-primary/30 bg-primary/20"
-						)}>
-						{chapter.thumbnail && (
-							<img
-								src={chapter.thumbnail}
-								alt={chapter.title}
-								className="h-9 w-16 rounded object-cover"
-							/>
-						)}
-						<div className="min-w-0 flex-1">
-							<div className="truncate font-medium text-white">{chapter.title}</div>
-							<div className="text-sm text-white/60">
-								{formatTime(chapter.startTime)} - {formatTime(chapter.endTime)}
-							</div>
-						</div>
-					</button>
-				))}
-			</div>
-		</div>
-	)
-}
-
-// Picture-in-Picture button
-export const PictureInPictureButton = function PictureInPictureButton({
-	className
-}: {
-	className?: string
-}) {
-	const dispatch = useMediaDispatch()
-	const isPictureInPicture = useMediaSelector((state) => state.isPictureInPicture)
-
-	const handleTogglePiP = React.useCallback(() => {
-		dispatch({
-			type: isPictureInPicture ? MediaActionTypes.EXIT_PIP : MediaActionTypes.ENTER_PIP
-		})
-	}, [dispatch, isPictureInPicture])
-
-	return (
-		<button
-			type="button"
-			onClick={handleTogglePiP}
-			className={cn(
-				"flex h-10 w-10 items-center justify-center rounded-full text-white",
-				"transition-colors hover:bg-white/10",
-				className
-			)}
-			aria-label={isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture"}>
-			<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
-				<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" />
-			</svg>
-		</button>
-	)
-}