@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/media-player-seek.tsx

@@ -1,168 +0,0 @@
-"use client"
-
-import { Slider } from "@rp/ui/components/slider"
-import React from "react"
-import {
-	MediaActionTypes,
-	useMediaContext,
-	useMediaDispatch,
-	useMediaSelector
-} from "../context/media-context"
-import { formatTime } from "../lib/format-time"
-import { cn } from "../lib/utils"
-
-export interface MediaPlayerSeekProps {
-	className?: string
-	disabled?: boolean
-	withTime?: boolean
-	withoutTooltip?: boolean
-	tooltipTimeVariant?: "current" | "remaining" | "duration"
-	asChild?: boolean
-	children?: React.ReactNode
-}
-
-export function MediaPlayerSeek({
-	className,
-	disabled = false,
-	withTime = true,
-	withoutTooltip = false,
-	tooltipTimeVariant = "current",
-	asChild = false,
-	children,
-	...props
-}: MediaPlayerSeekProps) {
-	const context = useMediaContext()
-	const dispatch = useMediaDispatch()
-
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const duration = useMediaSelector((state) => state.duration)
-	const buffered = useMediaSelector((state) => state.buffered)
-	const isDisabled = disabled || useMediaSelector((state) => state.error !== null)
-
-	const [isDragging, setIsDragging] = React.useState(false)
-	const [previewTime, setPreviewTime] = React.useState<number | null>(null)
-
-	const seekableStart = 0
-	const seekableEnd = duration || 0
-	const progress = seekableEnd > 0 ? (currentTime / seekableEnd) * 100 : 0
-
-	// Calculate buffered ranges
-	const bufferedRanges = React.useMemo(() => {
-		if (!buffered || !seekableEnd) return []
-
-		const ranges: Array<{ start: number; end: number }> = []
-		for (let i = 0; i < buffered.length; i++) {
-			const start = (buffered.start(i) / seekableEnd) * 100
-			const end = (buffered.end(i) / seekableEnd) * 100
-			ranges.push({ start, end })
-		}
-		return ranges
-	}, [buffered, seekableEnd])
-
-	const handleValueChange = React.useCallback(
-		(values: number[]) => {
-			const time = values[0] || 0
-			setPreviewTime(time)
-
-			if (isDragging) {
-				dispatch({
-					type: MediaActionTypes.SEEK,
-					detail: time
-				})
-			}
-		},
-		[dispatch, isDragging]
-	)
-
-	const handleValueCommit = React.useCallback(
-		(values: number[]) => {
-			const time = values[0]
-			setIsDragging(false)
-			setPreviewTime(null)
-
-			dispatch({
-				type: MediaActionTypes.SEEK,
-				detail: time
-			})
-		},
-		[dispatch]
-	)
-
-	const handlePointerDown = React.useCallback(() => {
-		setIsDragging(true)
-	}, [])
-
-	const getTooltipTime = React.useCallback(
-		(time: number) => {
-			switch (tooltipTimeVariant) {
-				case "remaining":
-					return formatTime(Math.max(0, seekableEnd - time))
-				case "duration":
-					return formatTime(seekableEnd)
-				default:
-					return formatTime(time)
-			}
-		},
-		[tooltipTimeVariant, seekableEnd]
-	)
-
-	const sliderProps = {
-		"aria-controls": context.mediaId,
-		"aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
-		"data-slot": "media-player-seek",
-		disabled: isDisabled,
-		min: seekableStart,
-		max: seekableEnd,
-		step: 0.1,
-		value: [previewTime ?? currentTime],
-		onValueChange: handleValueChange,
-		onValueCommit: handleValueCommit,
-		onPointerDown: handlePointerDown,
-		className: cn(
-			"relative flex w-full touch-none select-none items-center",
-			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			className
-		),
-		...props
-	}
-
-	const sliderContent = (
-		<>
-			{/* Track */}
-			<div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-				{/* Buffered ranges */}
-				{bufferedRanges.map((range, index) => (
-					<div
-						key={index}
-						className="absolute h-full bg-secondary/60"
-						style={{
-							left: `${range.start}%`,
-							width: `${range.end - range.start}%`
-						}}
-					/>
-				))}
-
-				{/* Progress */}
-				<div className="h-full bg-primary transition-all" style={{ width: `${progress}%` }} />
-			</div>
-
-			{/* Thumb */}
-			<div
-				className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-				style={{
-					transform: `translateX(-50%)`,
-					left: `${progress}%`
-				}}
-			/>
-		</>
-	)
-
-	if (asChild) {
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(child, sliderProps as any, sliderContent)
-	}
-
-	return <Slider {...sliderProps}>{sliderContent}</Slider>
-}
-
-MediaPlayerSeek.displayName = "MediaPlayerSeek"

package/src/components/media-player-time.tsx

@@ -1,99 +0,0 @@
-"use client"
-
-import React from "react"
-import { useMediaContext, useMediaSelector } from "../context/media-context"
-import { formatTime } from "../lib/format-time"
-import { cn } from "../lib/utils"
-
-export interface MediaPlayerTimeProps {
-	variant?: "current" | "duration" | "remaining" | "current-duration"
-	className?: string
-	asChild?: boolean
-	children?: React.ReactNode
-}
-
-export function MediaPlayerTime({
-	variant = "current-duration",
-	className,
-	asChild = false,
-	children,
-	...props
-}: MediaPlayerTimeProps) {
-	const context = useMediaContext()
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const duration = useMediaSelector((state) => state.duration)
-
-	const times = React.useMemo(() => {
-		if (variant === "remaining") {
-			return {
-				remaining: formatTime(Math.max(0, duration - currentTime))
-			}
-		}
-
-		if (variant === "duration") {
-			return {
-				duration: formatTime(duration)
-			}
-		}
-
-		if (variant === "current") {
-			return {
-				current: formatTime(currentTime)
-			}
-		}
-
-		return {
-			current: formatTime(currentTime),
-			duration: formatTime(duration)
-		}
-	}, [variant, currentTime, duration])
-
-	const timeProps = {
-		"data-slot": "media-player-time",
-		"data-variant": variant,
-		dir: context.dir,
-		className: cn("text-sm text-foreground/80 tabular-nums", className),
-		...props
-	}
-
-	if (variant !== "current-duration") {
-		const content = times[variant as keyof typeof times]
-
-		if (asChild) {
-			const child = React.Children.only(children) as React.ReactElement
-			return React.cloneElement(child, timeProps as any, content)
-		}
-
-		return <time {...timeProps}>{content}</time>
-	}
-
-	const content = (
-		<>
-			<time>{times.current}</time>
-			<span className="text-foreground/60">/</span>
-			<time>{times.duration}</time>
-		</>
-	)
-
-	if (asChild) {
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(
-			child,
-			{
-				...timeProps,
-				className: cn("flex items-center gap-1 text-foreground/80 text-sm", className)
-			} as any,
-			content
-		)
-	}
-
-	return (
-		<div
-			{...timeProps}
-			className={cn("flex items-center gap-1 text-foreground/80 text-sm", className)}>
-			{content}
-		</div>
-	)
-}
-
-MediaPlayerTime.displayName = "MediaPlayerTime"

package/src/components/media-player-tooltip.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import { Tooltip, TooltipContent, TooltipTrigger } from "@rp/ui/components/tooltip"
-import React from "react"
-import { useMediaContext } from "../context/media-context"
-
-export interface MediaPlayerTooltipProps {
-	children: React.ReactNode
-	tooltip?: string
-	shortcut?: string | string[]
-	delayDuration?: number
-	sideOffset?: number
-}
-
-export function MediaPlayerTooltip({
-	children,
-	tooltip,
-	shortcut,
-	delayDuration,
-	sideOffset
-}: MediaPlayerTooltipProps) {
-	const context = useMediaContext()
-
-	if (context.withoutTooltip || !tooltip) {
-		return <>{children}</>
-	}
-
-	const tooltipDelayDuration = delayDuration ?? context.tooltipDelayDuration
-	const tooltipSideOffset = sideOffset ?? context.tooltipSideOffset
-
-	return (
-		<Tooltip delayDuration={tooltipDelayDuration}>
-			<TooltipTrigger asChild>{children}</TooltipTrigger>
-			<TooltipContent sideOffset={tooltipSideOffset} className="flex items-center gap-2 text-sm">
-				<span>{tooltip}</span>
-				{shortcut && (
-					<div className="flex items-center gap-1">
-						{Array.isArray(shortcut) ? (
-							shortcut.map((key, index) => (
-								<kbd
-									key={index}
-									className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100">
-									{key}
-								</kbd>
-							))
-						) : (
-							<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100">
-								{shortcut}
-							</kbd>
-						)}
-					</div>
-				)}
-			</TooltipContent>
-		</Tooltip>
-	)
-}
-
-MediaPlayerTooltip.displayName = "MediaPlayerTooltip"

package/src/components/media-player-video.tsx

@@ -1,54 +0,0 @@
-"use client"
-
-import React from "react"
-import { useMediaContext } from "../context/media-context"
-
-// Utility function to compose refs
-function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
-	return (node: T | null) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") {
-				ref(node)
-			} else if (ref) {
-				;(ref as React.MutableRefObject<T | null>).current = node
-			}
-		})
-	}
-}
-
-export interface MediaPlayerVideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
-	asChild?: boolean
-}
-
-export function MediaPlayerVideo({
-	asChild = false,
-	className,
-	children,
-	...props
-}: MediaPlayerVideoProps) {
-	const context = useMediaContext()
-
-	// Create a ref that will be composed with the context mediaRef when mounted
-	const combinedRef = React.useMemo(
-		() => composeRefs(context.mediaRef),
-		[context.mediaRef]
-	)
-
-	if (asChild) {
-		// When asChild is true, clone the child element and add our props
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(child, {
-			...props,
-			ref: combinedRef,
-			"data-slot": "media-player-video"
-		} as any)
-	}
-
-	return (
-		<video ref={combinedRef} data-slot="media-player-video" className={className} {...props}>
-			{children}
-		</video>
-	)
-}
-
-MediaPlayerVideo.displayName = "MediaPlayerVideo"

package/src/components/media-player-volume.tsx

@@ -1,155 +0,0 @@
-"use client"
-
-import { Button } from "@rp/ui/components/button"
-import { Slider } from "@rp/ui/components/slider"
-import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react"
-import React from "react"
-import {
-	MediaActionTypes,
-	useMediaContext,
-	useMediaDispatch,
-	useMediaSelector
-} from "../context/media-context"
-import { cn } from "../lib/utils"
-import { MediaPlayerTooltip } from "./media-player-tooltip"
-
-export interface MediaPlayerVolumeProps {
-	className?: string
-	disabled?: boolean
-	asChild?: boolean
-	expandable?: boolean
-	children?: React.ReactNode
-}
-
-export function MediaPlayerVolume({
-	className,
-	disabled = false,
-	asChild = false,
-	expandable = true,
-	children,
-	...props
-}: MediaPlayerVolumeProps) {
-	const context = useMediaContext()
-	const dispatch = useMediaDispatch()
-
-	const volume = useMediaSelector((state) => state.volume)
-	const isMuted = useMediaSelector((state) => state.isMuted)
-	const isDisabled = disabled || useMediaSelector((state) => state.error !== null)
-
-	// Determine volume level for icon
-	const volumeLevel = React.useMemo(() => {
-		if (isMuted || volume === 0) return 0
-		if (volume < 0.5) return 1
-		return 2
-	}, [volume, isMuted])
-
-	const handleMuteToggle = React.useCallback(() => {
-		dispatch({
-			type: MediaActionTypes.TOGGLE_MUTE
-		})
-	}, [dispatch])
-
-	const handleVolumeChange = React.useCallback(
-		(values: number[]) => {
-			const newVolume = values[0]
-			dispatch({
-				type: MediaActionTypes.SET_VOLUME,
-				detail: newVolume
-			})
-		},
-		[dispatch]
-	)
-
-	const handleVolumeCommit = React.useCallback(
-		(values: number[]) => {
-			const newVolume = values[0]
-			dispatch({
-				type: MediaActionTypes.SET_VOLUME,
-				detail: newVolume
-			})
-		},
-		[dispatch]
-	)
-
-	const VolumeIcon = volumeLevel === 0 ? VolumeXIcon : volumeLevel === 1 ? Volume1Icon : Volume2Icon
-
-	const containerProps = {
-		"data-disabled": isDisabled ? "" : undefined,
-		"data-slot": "media-player-volume",
-		className: cn(
-			"group flex items-center",
-			expandable ? "gap-2 transition-all duration-200 hover:gap-3" : "gap-2",
-			className
-		),
-		...props
-	}
-
-	const buttonProps = {
-		type: "button" as const,
-		"aria-controls": context.mediaId,
-		"aria-label": isMuted ? "Unmute" : "Mute",
-		"aria-pressed": isMuted,
-		"data-slot": "media-player-volume-button",
-		"data-state": isMuted ? "muted" : "unmuted",
-		variant: "ghost" as const,
-		size: "icon" as const,
-		className: "size-8 shrink-0",
-		disabled: isDisabled,
-		onClick: handleMuteToggle
-	}
-
-	const sliderProps = {
-		"aria-controls": context.mediaId,
-		"aria-valuetext": `Volume ${Math.round(volume * 100)}%`,
-		"data-slot": "media-player-volume-slider",
-		min: 0,
-		max: 1,
-		step: 0.01,
-		value: [isMuted ? 0 : volume],
-		onValueChange: handleVolumeChange,
-		onValueCommit: handleVolumeCommit,
-		disabled: isDisabled,
-		className: cn(
-			"relative flex touch-none select-none items-center",
-			expandable
-				? "w-0 opacity-0 transition-all duration-200 group-hover:w-20 group-hover:opacity-100"
-				: "w-20",
-			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-		)
-	}
-
-	const content = (
-		<div {...containerProps}>
-			<MediaPlayerTooltip tooltip={isMuted ? "Unmute" : "Mute"} shortcut="M">
-				<Button {...buttonProps}>
-					<VolumeIcon className="size-4" />
-				</Button>
-			</MediaPlayerTooltip>
-
-			<Slider {...sliderProps}>
-				<div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-					<div
-						className="h-full bg-primary transition-all"
-						style={{ width: `${(isMuted ? 0 : volume) * 100}%` }}
-					/>
-				</div>
-				<div
-					className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-					style={{
-						transform: `translateX(-50%)`,
-						left: `${(isMuted ? 0 : volume) * 100}%`
-					}}
-				/>
-			</Slider>
-		</div>
-	)
-
-	if (asChild) {
-		const child = React.Children.only(children) as React.ReactElement
-		return React.cloneElement(child, containerProps as any, content)
-	}
-
-	return content
-}
-
-MediaPlayerVolume.displayName = "MediaPlayerVolume"