@therealtinhtute/baroiplayer 1.0.0

package/src/hooks/useVideoPlayer.ts

@@ -0,0 +1,232 @@
+import { useState, useRef, useCallback, useEffect } from "react"
+
+export interface BufferedRange {
+	start: number
+	end: number
+	percentage: number
+}
+
+export interface VideoState {
+	isPlaying: boolean
+	currentTime: number
+	duration: number
+	volume: number
+	isMuted: boolean
+	isFullscreen: boolean
+	isLoading: boolean
+	isSeeking: boolean
+	isBuffering: boolean
+	bufferedRanges: BufferedRange[]
+}
+
+export interface VideoControls {
+	togglePlay: () => void
+	seekForward: (seconds?: number) => void
+	seekBackward: (seconds?: number) => void
+	toggleMute: () => void
+	setVolume: (volume: number) => void
+	toggleFullscreen: () => void
+	seekTo: (time: number) => void
+}
+
+export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | null>) {
+	const videoRef = useRef<HTMLVideoElement>(null)
+	const [state, setState] = useState<VideoState>({
+		isPlaying: false,
+		currentTime: 0,
+		duration: 0,
+		volume: 1,
+		isMuted: false,
+		isFullscreen: false,
+		isLoading: true,
+		isSeeking: false,
+		isBuffering: false,
+		bufferedRanges: []
+	})
+
+	useEffect(() => {
+		const video = videoRef.current
+		if (!video) return
+
+		const handleTimeUpdate = () => {
+			setState(prev => ({ ...prev, currentTime: video.currentTime }))
+		}
+
+		const handleLoadedMetadata = () => {
+			setState(prev => ({ ...prev, duration: video.duration }))
+		}
+
+		const handlePlay = () => {
+			setState(prev => ({ ...prev, isPlaying: true, isBuffering: false }))
+		}
+
+		const handlePause = () => {
+			setState(prev => ({ ...prev, isPlaying: false }))
+		}
+
+		const handleVolumeChange = () => {
+			setState(prev => ({
+				...prev,
+				volume: video.volume,
+				isMuted: video.muted
+			}))
+		}
+
+		// Loading state handlers
+		const handleLoadStart = () => {
+			setState(prev => ({ ...prev, isLoading: true }))
+		}
+
+		const handleLoadedData = () => {
+			setState(prev => ({ ...prev, isLoading: false }))
+		}
+
+		// Seeking state handlers
+		const handleSeeking = () => {
+			setState(prev => ({ ...prev, isSeeking: true }))
+		}
+
+		const handleSeeked = () => {
+			setState(prev => ({ ...prev, isSeeking: false }))
+		}
+
+		// Buffering state handlers
+		const handleWaiting = () => {
+			setState(prev => ({ ...prev, isBuffering: true }))
+		}
+
+		const handlePlaying = () => {
+			setState(prev => ({ ...prev, isBuffering: false, isLoading: false }))
+		}
+
+		const handleCanPlay = () => {
+			setState(prev => ({ ...prev, isLoading: false, isBuffering: false }))
+		}
+
+		// Progress handler for buffered ranges
+		const handleProgress = () => {
+			if (!video.buffered || video.buffered.length === 0 || video.duration === 0) {
+				setState(prev => ({ ...prev, bufferedRanges: [] }))
+				return
+			}
+
+			const ranges: BufferedRange[] = []
+			for (let i = 0; i < video.buffered.length; i++) {
+				const start = video.buffered.start(i)
+				const end = video.buffered.end(i)
+				ranges.push({
+					start,
+					end,
+					percentage: ((end - start) / video.duration) * 100
+				})
+			}
+			setState(prev => ({ ...prev, bufferedRanges: ranges }))
+		}
+
+		video.addEventListener("timeupdate", handleTimeUpdate)
+		video.addEventListener("loadedmetadata", handleLoadedMetadata)
+		video.addEventListener("play", handlePlay)
+		video.addEventListener("pause", handlePause)
+		video.addEventListener("volumechange", handleVolumeChange)
+		video.addEventListener("loadstart", handleLoadStart)
+		video.addEventListener("loadeddata", handleLoadedData)
+		video.addEventListener("seeking", handleSeeking)
+		video.addEventListener("seeked", handleSeeked)
+		video.addEventListener("waiting", handleWaiting)
+		video.addEventListener("playing", handlePlaying)
+		video.addEventListener("canplay", handleCanPlay)
+		video.addEventListener("progress", handleProgress)
+
+		return () => {
+			video.removeEventListener("timeupdate", handleTimeUpdate)
+			video.removeEventListener("loadedmetadata", handleLoadedMetadata)
+			video.removeEventListener("play", handlePlay)
+			video.removeEventListener("pause", handlePause)
+			video.removeEventListener("volumechange", handleVolumeChange)
+			video.removeEventListener("loadstart", handleLoadStart)
+			video.removeEventListener("loadeddata", handleLoadedData)
+			video.removeEventListener("seeking", handleSeeking)
+			video.removeEventListener("seeked", handleSeeked)
+			video.removeEventListener("waiting", handleWaiting)
+			video.removeEventListener("playing", handlePlaying)
+			video.removeEventListener("canplay", handleCanPlay)
+			video.removeEventListener("progress", handleProgress)
+		}
+	}, [])
+
+	const togglePlay = () => {
+    		const video = videoRef.current
+    		if (!video) return
+
+    		if (state.isPlaying) {
+    			video.pause()
+    		} else {
+    			video.play()
+    		}
+    	}
+
+	const seekForward = (seconds = 10) => {
+    		const video = videoRef.current
+    		if (!video) return
+    		video.currentTime = Math.min(state.duration, video.currentTime + seconds)
+    	}
+
+	const seekBackward = (seconds = 10) => {
+    		const video = videoRef.current
+    		if (!video) return
+    		video.currentTime = Math.max(0, video.currentTime - seconds)
+    	}
+
+	const toggleMute = () => {
+    		const video = videoRef.current
+    		if (!video) return
+    		video.muted = !state.isMuted
+    	}
+
+	const setVolume = (volume: number) => {
+    		const video = videoRef.current
+    		if (!video) return
+    		video.volume = volume
+    		if (volume > 0 && state.isMuted) {
+    			video.muted = false
+    		}
+    	}
+
+	const toggleFullscreen = () => {
+    		const container = containerRef.current
+    		if (!container) return
+
+    		if (!state.isFullscreen) {
+    			if (container.requestFullscreen) {
+    				container.requestFullscreen()
+    			}
+    		} else {
+    			if (document.exitFullscreen) {
+    				document.exitFullscreen()
+    			}
+    		}
+    		setState(prev => ({ ...prev, isFullscreen: !prev.isFullscreen }))
+    	}
+
+	const seekTo = (time: number) => {
+    		const video = videoRef.current
+    		if (!video || state.duration === 0) return
+    		video.currentTime = Math.max(0, Math.min(state.duration, time))
+    	}
+
+	const controls: VideoControls = {
+		togglePlay,
+		seekForward,
+		seekBackward,
+		toggleMute,
+		setVolume,
+		toggleFullscreen,
+		seekTo
+	}
+
+	return {
+		videoRef,
+		state,
+		controls
+	}
+}

package/src/icons/components/FullscreenIcon.tsx

@@ -0,0 +1,37 @@
+import type { IconProps } from '../types'
+import { useIconTheme, useCustomIcon } from '../provider'
+
+export function FullscreenIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('fullscreen')
+  
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+    </svg>
+  )
+}

package/src/icons/components/SettingsIcon.tsx

@@ -0,0 +1,38 @@
+import type { IconProps } from '../types'
+import { useIconTheme, useCustomIcon } from '../provider'
+
+export function SettingsIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('settings')
+  
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="3" />
+      <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m10.5-4A1.5 1.5 0 0 1 15 12a1.5 1.5 0 0 1-3.5 0 1.5 1.5 0 0 1 3.5 0Z" />
+    </svg>
+  )
+}

package/src/icons/components/animated/LoadingIcon.tsx

@@ -0,0 +1,43 @@
+import type { IconProps } from '../../types'
+import { useIconTheme, useCustomIcon } from '../../provider'
+
+export function LoadingIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('loading')
+  
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={`animate-spin ${className || ''}`}
+      aria-hidden="true"
+      {...rest}
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="4"
+        strokeOpacity="0.25"
+      />
+      <path
+        fill={color}
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  )
+}

package/src/icons/components/animated/PlayPauseIcon.tsx

@@ -0,0 +1,50 @@
+import type { IconProps } from '../../types'
+import { useIconTheme } from '../../provider'
+
+interface PlayPauseIconProps extends IconProps {
+  isPlaying: boolean
+}
+
+export function PlayPauseIcon({ isPlaying, className = '', ...props }: PlayPauseIconProps) {
+  const theme = useIconTheme()
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      {/* Play icon */}
+      <g
+        className={`origin-center transition-all duration-300 ${isPlaying ? "scale-75 opacity-0" : "scale-100 opacity-100"}
+        `}
+      >
+        <polygon points="5 3 19 12 5 21 5 3" />
+      </g>
+      
+      {/* Pause icon */}
+      <g
+        className={`origin-center transition-all duration-300 ${isPlaying ? "scale-100 opacity-100" : "scale-75 opacity-0"}
+        `}
+      >
+        <rect x="6" y="4" width="4" height="16" />
+        <rect x="14" y="4" width="4" height="16" />
+      </g>
+    </svg>
+  )
+}

package/src/icons/components/media/PauseIcon.tsx

@@ -0,0 +1,39 @@
+import type { IconProps } from '../../types'
+import { useIconTheme, useCustomIcon } from '../../provider'
+
+export function PauseIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('pause')
+  
+  // If there's a custom icon, use it
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      <rect x="6" y="4" width="4" height="16" />
+      <rect x="14" y="4" width="4" height="16" />
+    </svg>
+  )
+}

package/src/icons/components/media/PlayIcon.tsx

@@ -0,0 +1,38 @@
+import type { IconProps } from '../../types'
+import { useIconTheme, useCustomIcon } from '../../provider'
+
+export function PlayIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('play')
+  
+  // If there's a custom icon, use it
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      <polygon points="5 3 19 12 5 21 5 3" />
+    </svg>
+  )
+}

package/src/icons/components/volume/VolumeIcon.tsx

@@ -0,0 +1,39 @@
+import type { IconProps } from '../../types'
+import { useIconTheme, useCustomIcon } from '../../provider'
+
+export function VolumeIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('volume')
+  
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+      <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+      <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+    </svg>
+  )
+}

package/src/icons/components/volume/VolumeOffIcon.tsx

@@ -0,0 +1,39 @@
+import type { IconProps } from '../../types'
+import { useIconTheme, useCustomIcon } from '../../provider'
+
+export function VolumeOffIcon(props: IconProps) {
+  const theme = useIconTheme()
+  const customIcon = useCustomIcon('volume-off')
+  
+  if (customIcon) {
+    return customIcon(props)
+  }
+  
+  const {
+    size = theme.size,
+    color = theme.color,
+    strokeWidth = theme.strokeWidth,
+    className = theme.className,
+    ...rest
+  } = props
+  
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      {...rest}
+    >
+      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+      <line x1="23" y1="9" x2="17" y2="15" />
+      <line x1="17" y1="9" x2="23" y2="15" />
+    </svg>
+  )
+}

package/src/icons/index.ts

@@ -0,0 +1,56 @@
+// Export types
+export type { IconProps, IconTheme, IconName, IconComponent, IconSet } from './types'
+
+// Export provider and hooks
+export { IconProvider, useIconTheme, useIcon, useCustomIcon } from './provider'
+
+// Export media icons
+export { PlayIcon } from './components/media/PlayIcon'
+export { PauseIcon } from './components/media/PauseIcon'
+
+// Export volume icons  
+export { VolumeIcon } from './components/volume/VolumeIcon'
+export { VolumeOffIcon } from './components/volume/VolumeOffIcon'
+
+// Export animated icons
+export { LoadingIcon } from './components/animated/LoadingIcon'
+export { PlayPauseIcon } from './components/animated/PlayPauseIcon'
+
+// Export other icons
+export { SettingsIcon } from './components/SettingsIcon'
+export { FullscreenIcon } from './components/FullscreenIcon'
+
+// Create a complete icon map for dynamic usage
+import { PlayIcon } from './components/media/PlayIcon'
+import { PauseIcon } from './components/media/PauseIcon'
+import { VolumeIcon } from './components/volume/VolumeIcon'
+import { VolumeOffIcon } from './components/volume/VolumeOffIcon'
+import { LoadingIcon } from './components/animated/LoadingIcon'
+import { SettingsIcon } from './components/SettingsIcon'
+import { FullscreenIcon } from './components/FullscreenIcon'
+
+export const Icons = {
+  PlayIcon,
+  PauseIcon,
+  VolumeIcon,
+  VolumeOffIcon,
+  LoadingIcon,
+  SettingsIcon,
+  FullscreenIcon
+}
+
+// Utility function to get icon by name
+export function getIcon(name: string) {
+  const iconMap: Record<string, keyof typeof Icons> = {
+    'play': 'PlayIcon',
+    'pause': 'PauseIcon',
+    'volume': 'VolumeIcon',
+    'volume-off': 'VolumeOffIcon',
+    'loading': 'LoadingIcon',
+    'settings': 'SettingsIcon',
+    'fullscreen': 'FullscreenIcon'
+  }
+  
+  const iconKey = iconMap[name]
+  return iconKey ? Icons[iconKey] : null
+}

package/src/icons/provider.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { IconTheme, IconSet, IconName, IconComponent } from './types'
+
+interface IconContextValue {
+  theme: IconTheme
+  icons: Partial<IconSet>
+}
+
+const IconContext = createContext<IconContextValue | null>(null)
+
+interface IconProviderProps {
+  children: ReactNode
+  theme?: IconTheme
+  icons?: Partial<IconSet>
+}
+
+export function IconProvider({
+  children,
+  theme = {},
+  icons = {}
+}: IconProviderProps) {
+  const value: IconContextValue = {
+    theme: {
+      size: 24,
+      color: 'currentColor',
+      strokeWidth: 2,
+      ...theme
+    },
+    icons
+  }
+  
+  return (
+    <IconContext.Provider value={value}>
+      {children}
+    </IconContext.Provider>
+  )
+}
+
+export function useIconTheme(): IconTheme {
+  const context = useContext(IconContext)
+  return context?.theme ?? {
+    size: 24,
+    color: 'currentColor',
+    strokeWidth: 2
+  }
+}
+
+export function useIcon(name: IconName): IconComponent | null {
+  const context = useContext(IconContext)
+  const customIcon = context?.icons?.[name]
+  
+  if (customIcon) {
+    return customIcon
+  }
+  
+  // If no custom icon found, we'll need to import the default one
+  // This will be handled by the individual icon components
+  return null
+}
+
+export function useCustomIcon(name: IconName): IconComponent | null {
+  const context = useContext(IconContext)
+  return context?.icons?.[name] || null
+}