@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/dist/src/components/simple-video-player.tsx

@@ -1,60 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef } from "react"
-import "video.js/dist/video-js.css"
-
-export function SimpleVideoPlayer({ src, type = "video/mp4" }: { src: string; type?: string }) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const playerRef = useRef<any>(null)
-
-  useEffect(() => {
-    const loadPlayer = async () => {
-      if (!videoRef.current || playerRef.current) return
-
-      // Dynamically import video.js
-      const videojs = (await import("video.js")).default
-      
-      // Initialize player
-      const player = videojs(videoRef.current, {
-        controls: true,
-        autoplay: false,
-        preload: 'auto',
-        fluid: true,
-        sources: [{
-          src: src,
-          type: type
-        }]
-      })
-
-      playerRef.current = player
-
-      player.ready(() => {
-        console.log("Player is ready!")
-      })
-    }
-
-    loadPlayer()
-
-    // Cleanup
-    return () => {
-      if (playerRef.current) {
-        playerRef.current.dispose()
-        playerRef.current = null
-      }
-    }
-  }, [src, type])
-
-  return (
-    <div className="w-full">
-      <div data-vjs-player>
-        <video 
-          ref={videoRef} 
-          className="video-js vjs-big-play-centered vjs-default-skin w-full"
-          playsInline
-        />
-      </div>
-    </div>
-  )
-}
-
-SimpleVideoPlayer.displayName = "SimpleVideoPlayer"

package/dist/src/components/ui/button.tsx

@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../lib/utils';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  size?: 'default' | 'sm' | 'lg' | 'icon';
-  asChild?: boolean;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
-    const baseClasses = 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium 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';
-
-    const variants = {
-      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-      ghost: 'hover:bg-accent hover:text-accent-foreground',
-      link: 'text-primary underline-offset-4 hover:underline',
-    };
-
-    const sizes = {
-      default: 'h-10 px-4 py-2',
-      sm: 'h-9 rounded-md px-3',
-      lg: 'h-11 rounded-md px-8',
-      icon: 'h-10 w-10',
-    };
-
-    const Comp = asChild ? 'span' : 'button';
-
-    return (
-      <Comp
-        className={cn(
-          baseClasses,
-          variants[variant],
-          sizes[size],
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Button.displayName = 'Button';
-
-export { Button };

package/dist/src/components/ui/dropdown-menu.tsx

@@ -1,137 +0,0 @@
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
-import { cn } from '../lib/utils';
-
-interface DropdownMenuProps {
-  children: React.ReactNode;
-}
-
-interface DropdownMenuTriggerProps {
-  children: React.ReactNode;
-  asChild?: boolean;
-}
-
-interface DropdownMenuContentProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-interface DropdownMenuItemProps {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: () => void;
-}
-
-interface DropdownMenuLabelProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-interface DropdownMenuSeparatorProps {
-  className?: string;
-}
-
-const DropdownMenu: React.FC<DropdownMenuProps> = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div ref={dropdownRef} className="relative inline-block text-left">
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child as React.ReactElement, { isOpen, setIsOpen });
-        }
-        return child;
-      })}
-    </div>
-  );
-};
-
-const DropdownMenuTrigger: React.FC<DropdownMenuTriggerProps> = ({ children, asChild = false, isOpen, setIsOpen }) => {
-  const handleClick = () => {
-    setIsOpen?.(!isOpen);
-  };
-
-  const TriggerComponent = asChild ? 'div' : 'button';
-
-  return (
-    <TriggerComponent
-      onClick={handleClick}
-      className={cn(
-        'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-        !asChild && 'cursor-pointer'
-      )}
-    >
-      {children}
-    </TriggerComponent>
-  );
-};
-
-const DropdownMenuContent: React.FC<DropdownMenuContentProps> = ({ children, className, isOpen }) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className={cn(
-      'absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
-      className
-    )}>
-      <div className="py-1">
-        {children}
-      </div>
-    </div>
-  );
-};
-
-const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({ children, className, onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-        className
-      )}
-      role="menuitem"
-    >
-      {children}
-    </button>
-  );
-};
-
-const DropdownMenuLabel: React.FC<DropdownMenuLabelProps> = ({ children, className }) => {
-  return (
-    <div className={cn(
-      'px-4 py-2 text-sm font-medium text-gray-700',
-      className
-    )}>
-      {children}
-    </div>
-  );
-};
-
-const DropdownMenuSeparator: React.FC<DropdownMenuSeparatorProps> = ({ className }) => {
-  return (
-    <div className={cn(
-      'border-t border-gray-100 my-1',
-      className
-    )} />
-  );
-};
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator
-};

package/dist/src/components/ui/enhanced-seek-bar.d.ts

@@ -1,3 +0,0 @@
-import type { SeekBarProps } from "../../types/index";
-export declare const EnhancedSeekBar: import("react").ForwardRefExoticComponent<SeekBarProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=enhanced-seek-bar.d.ts.map

package/dist/src/components/ui/enhanced-seek-bar.tsx

@@ -1,235 +0,0 @@
-"use client"
-
-import * as Slider from "@radix-ui/react-slider"
-import * as Tooltip from "@radix-ui/react-tooltip"
-import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react"
-import { formatTime } from "../../lib/format-time"
-import { cn } from "../../lib/utils"
-import type { SeekBarProps } from "../../types/index"
-
-export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
-	({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
-		// React 19 concurrent features
-		const [isPending, startTransition] = useTransition()
-		const [isDragging, setIsDragging] = useState(false)
-		const [previewTime, setPreviewTime] = useState(0)
-		const [isHovering, setIsHovering] = useState(false)
-
-		// Defer non-critical updates for better performance
-		const deferredHovering = useDeferredValue(isHovering)
-		const deferredPreviewTime = useDeferredValue(previewTime)
-
-		// Throttling refs
-		const seekTimeoutRef = useRef<NodeJS.Timeout>()
-		const lastSeekTime = useRef<number>(0)
-		const rafId = useRef<number>()
-
-		// Memoize expensive calculations
-		const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration])
-
-		// Calculate buffered ranges with memoization
-		const bufferedRanges = useMemo(() => {
-			const ranges = []
-			if (buffered && duration > 0) {
-				for (let i = 0; i < buffered.length; i++) {
-					const start = (buffered.start(i) / duration) * 100
-					const end = (buffered.end(i) / duration) * 100
-					ranges.push({ start, end })
-				}
-			}
-			return ranges
-		}, [buffered, duration])
-
-		// Optimized value change handler with throttling and RAF
-		const handleValueChange = useCallback(([value]: number[]) => {
-			const time = ((value ?? 0) / 100) * duration
-
-			setPreviewTime(time)
-
-			// Cancel any pending RAF
-			if (rafId.current) {
-				cancelAnimationFrame(rafId.current)
-			}
-
-			if (isDragging) {
-				// Clear previous timeout
-				if (seekTimeoutRef.current) {
-					clearTimeout(seekTimeoutRef.current)
-				}
-
-				// Use RAF for smooth updates during dragging
-				rafId.current = requestAnimationFrame(() => {
-					const now = performance.now()
-					const timeDiff = now - lastSeekTime.current
-					const timeJump = Math.abs(time - currentTime)
-
-					// Only seek if enough time has passed or if this is a large jump
-					if (timeDiff > 16 || timeJump > 0.5) { // 60fps = 16ms per frame
-						startTransition(() => {
-							onSeek(time)
-						})
-						lastSeekTime.current = now
-					} else {
-						// Defer the seek
-						seekTimeoutRef.current = setTimeout(() => {
-							startTransition(() => {
-								onSeek(time)
-							})
-							lastSeekTime.current = performance.now()
-						}, 16)
-					}
-				})
-			}
-		}, [duration, isDragging, onSeek, currentTime, startTransition])
-
-		const handleValueCommit = useCallback(([value]: number[]) => {
-			const time = ((value ?? 0) / 100) * duration
-
-			// Cancel any pending RAF
-			if (rafId.current) {
-				cancelAnimationFrame(rafId.current)
-			}
-
-			// Clear any pending seeks
-			if (seekTimeoutRef.current) {
-				clearTimeout(seekTimeoutRef.current)
-			}
-
-			startTransition(() => {
-				onSeek(time)
-			})
-			setIsDragging(false)
-		}, [duration, onSeek, startTransition])
-
-		const handlePointerDown = useCallback(() => {
-			setIsDragging(true)
-			lastSeekTime.current = performance.now()
-		}, [])
-
-		// Cleanup on unmount
-		useMemo(() => {
-			return () => {
-				if (rafId.current) {
-					cancelAnimationFrame(rafId.current)
-				}
-				if (seekTimeoutRef.current) {
-					clearTimeout(seekTimeoutRef.current)
-				}
-			}
-		}, [])
-
-		// Memoize tooltip content to prevent re-renders
-		const tooltipContent = useMemo(() => {
-			return (
-				<div className={cn(
-					"rounded bg-black/80 px-2 py-1 text-sm text-white",
-					"fade-in-0 zoom-in-95 animate-in"
-				)}>
-					{formatTime(deferredPreviewTime)}
-				</div>
-			)
-		}, [deferredPreviewTime])
-
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"media-container relative w-full text-[color:var(--media-text)]",
-					"touch-manipulation contain-layout",
-					className
-				)}
-				onMouseEnter={() => setIsHovering(true)}
-				onMouseLeave={() => setIsHovering(false)}>
-				<Tooltip.Provider>
-					<Tooltip.Root>
-						<Tooltip.Trigger asChild>
-							<div className="relative animate-enter">
-								<Slider.Root
-									className={cn(
-										"group relative flex w-full touch-none select-none items-center",
-										"media-md:h-4 media-sm:h-3 media-xs:h-2",
-										"focus-ring cursor-pointer",
-										isPending && "opacity-75"
-									)}
-									value={[progress]}
-									max={100}
-									step={0.1}
-									onValueChange={handleValueChange}
-									onValueCommit={handleValueCommit}
-									onPointerDown={handlePointerDown}
-									aria-label="Seek to position">
-									<Slider.Track
-										className={cn(
-											"relative grow overflow-hidden rounded-full",
-											"bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm",
-											"border border-[color:var(--media-border)]/20",
-											"shadow-inner transition-all duration-300 ease-out",
-											"h-1 group-focus-within:h-1.5 group-hover:h-1.5",
-											"group-hover:bg-[color:var(--media-control-bg)]/60",
-											"group-hover:border-[color:var(--media-border)]/40"
-										)}>
-										{/* Buffered ranges - optimized rendering */}
-										{bufferedRanges.map((range, index) => (
-											<div
-												key={`${range.start}-${range.end}-${index}`}
-												className={cn(
-													"absolute h-full rounded-full transition-all duration-500",
-													"bg-[color:var(--color-media-buffered)] shadow-inner",
-													"opacity-60 group-hover:opacity-80"
-												)}
-												style={{
-													left: `${range.start}%`,
-													width: `${range.end - range.start}%`,
-													willChange: 'width, left'
-												}}
-											/>
-										))}
-
-										{/* Progress range with gradient */}
-										<Slider.Range
-											className={cn(
-												"absolute h-full rounded-full transition-all duration-300",
-												"bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]",
-												"shadow-[color:var(--color-brand-primary)]/20 shadow-lg",
-												"group-hover:shadow-xl",
-												isDragging && "transition-none"
-											)}
-										/>
-									</Slider.Track>
-
-									<Slider.Thumb
-										className={cn(
-											"block size-4 rounded-full border-white/20 bg-white",
-											"shadow-lg hover:shadow-xl",
-											"opacity-0 group-hover:opacity-100",
-											"hover:scale-110 hover:bg-white/95 active:scale-95",
-											"focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50",
-											"focus:ring-offset-2 focus:ring-offset-black/20",
-											"transition-all duration-300 ease-out",
-											isDragging && "scale-110 opacity-100",
-											isPending && "animate-pulse"
-										)}
-										aria-label="Seek"
-									/>
-								</Slider.Root>
-							</div>
-						</Tooltip.Trigger>
-
-						{(isDragging || deferredHovering) && (
-							<Tooltip.Portal>
-								<Tooltip.Content
-									sideOffset={10}
-									className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-									{tooltipContent}
-									<Tooltip.Arrow className="fill-black/80" />
-								</Tooltip.Content>
-							</Tooltip.Portal>
-						)}
-					</Tooltip.Root>
-				</Tooltip.Provider>
-			</div>
-		)
-	}
-)
-
-EnhancedSeekBar.displayName = "EnhancedSeekBar"

package/dist/src/components/ui/fullscreen-button.d.ts

@@ -1,3 +0,0 @@
-import type { FullscreenButtonProps } from "../../types/index";
-export declare const FullscreenButton: import("react").ForwardRefExoticComponent<FullscreenButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=fullscreen-button.d.ts.map

package/dist/src/components/ui/fullscreen-button.tsx

@@ -1,60 +0,0 @@
-"use client"
-
-import * as Tooltip from "@radix-ui/react-tooltip"
-import { Maximize, Minimize } from "lucide-react"
-import { forwardRef } from "react"
-import { cn } from "../../lib/utils"
-import type { FullscreenButtonProps } from "../../types/index"
-
-export const FullscreenButton = forwardRef<HTMLButtonElement, FullscreenButtonProps>(
-	({ isFullscreen, onToggle, disabled = false, size = "lg", className }, ref) => {
-		const Icon = isFullscreen ? Minimize : Maximize
-		const buttonSizes: Record<"md" | "lg" | "xl", string> = {
-			md: "h-11 w-11",
-			lg: "h-12 w-12",
-			xl: "h-14 w-14"
-		}
-		const iconSizes: Record<"md" | "lg" | "xl", string> = {
-			md: "h-5 w-5",
-			lg: "h-6 w-6",
-			xl: "h-7 w-7"
-		}
-
-		return (
-			<Tooltip.Provider>
-				<Tooltip.Root>
-					<Tooltip.Trigger asChild>
-						<button
-							ref={ref}
-							type="button"
-							onClick={onToggle}
-							disabled={disabled}
-							className={cn(
-								"inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95",
-								"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
-								"disabled:cursor-not-allowed disabled:opacity-50",
-								buttonSizes[size],
-								className
-							)}
-							aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}>
-							<Icon className={cn(iconSizes[size])} />
-						</button>
-					</Tooltip.Trigger>
-					<Tooltip.Portal>
-						<Tooltip.Content
-							className={cn(
-								"rounded bg-black/80 px-2 py-1 text-sm text-white",
-								"fade-in-0 zoom-in-95 animate-in"
-							)}
-							sideOffset={5}>
-							{isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-							<Tooltip.Arrow className="fill-black/80" />
-						</Tooltip.Content>
-					</Tooltip.Portal>
-				</Tooltip.Root>
-			</Tooltip.Provider>
-		)
-	}
-)
-
-FullscreenButton.displayName = "FullscreenButton"