@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/dist/src/hooks/useVideoPlayer.ts

@@ -1,232 +0,0 @@
-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/dist/src/icons/components/FullscreenIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../types';
-export declare function FullscreenIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=FullscreenIcon.d.ts.map

package/dist/src/icons/components/FullscreenIcon.tsx

@@ -1,37 +0,0 @@
-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/dist/src/icons/components/SettingsIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../types';
-export declare function SettingsIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=SettingsIcon.d.ts.map

package/dist/src/icons/components/SettingsIcon.tsx

@@ -1,38 +0,0 @@
-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/dist/src/icons/components/animated/LoadingIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../../types';
-export declare function LoadingIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=LoadingIcon.d.ts.map

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

@@ -1,43 +0,0 @@
-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/dist/src/icons/components/animated/PlayPauseIcon.d.ts

@@ -1,7 +0,0 @@
-import type { IconProps } from '../../types';
-interface PlayPauseIconProps extends IconProps {
-    isPlaying: boolean;
-}
-export declare function PlayPauseIcon({ isPlaying, className, ...props }: PlayPauseIconProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=PlayPauseIcon.d.ts.map

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

@@ -1,50 +0,0 @@
-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/dist/src/icons/components/media/PauseIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../../types';
-export declare function PauseIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=PauseIcon.d.ts.map

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

@@ -1,39 +0,0 @@
-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/dist/src/icons/components/media/PlayIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../../types';
-export declare function PlayIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=PlayIcon.d.ts.map

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

@@ -1,38 +0,0 @@
-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/dist/src/icons/components/volume/VolumeIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../../types';
-export declare function VolumeIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=VolumeIcon.d.ts.map

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

@@ -1,39 +0,0 @@
-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/dist/src/icons/components/volume/VolumeOffIcon.d.ts

@@ -1,3 +0,0 @@
-import type { IconProps } from '../../types';
-export declare function VolumeOffIcon(props: IconProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").ReactNode> | null | undefined;
-//# sourceMappingURL=VolumeOffIcon.d.ts.map

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

@@ -1,39 +0,0 @@
-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/dist/src/icons/index.d.ts

@@ -1,28 +0,0 @@
-export type { IconProps, IconTheme, IconName, IconComponent, IconSet } from './types';
-export { IconProvider, useIconTheme, useIcon, useCustomIcon } from './provider';
-export { PlayIcon } from './components/media/PlayIcon';
-export { PauseIcon } from './components/media/PauseIcon';
-export { VolumeIcon } from './components/volume/VolumeIcon';
-export { VolumeOffIcon } from './components/volume/VolumeOffIcon';
-export { LoadingIcon } from './components/animated/LoadingIcon';
-export { PlayPauseIcon } from './components/animated/PlayPauseIcon';
-export { SettingsIcon } from './components/SettingsIcon';
-export { FullscreenIcon } from './components/FullscreenIcon';
-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 declare const Icons: {
-    PlayIcon: typeof PlayIcon;
-    PauseIcon: typeof PauseIcon;
-    VolumeIcon: typeof VolumeIcon;
-    VolumeOffIcon: typeof VolumeOffIcon;
-    LoadingIcon: typeof LoadingIcon;
-    SettingsIcon: typeof SettingsIcon;
-    FullscreenIcon: typeof FullscreenIcon;
-};
-export declare function getIcon(name: string): typeof PlayIcon | null;
-//# sourceMappingURL=index.d.ts.map