@therealtinhtute/baroiplayer 1.0.3 → 1.0.5

package/src/components/ui/button.tsx

@@ -0,0 +1,49 @@
+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/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,137 @@
+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/src/components/ui/icons.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+
+interface IconProps {
+  className?: string;
+  size?: number | string;
+}
+
+// Button Icons
+export const PlayIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="5 3 19 12 5 21 5 3"></polygon>
+  </svg>
+);
+
+export const PauseIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="6" y="4" width="4" height="16"></rect>
+    <rect x="14" y="4" width="4" height="16"></rect>
+  </svg>
+);
+
+export const VolumeIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+  </svg>
+);
+
+export const Volume1Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+  </svg>
+);
+
+export const Volume2Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+    <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
+  </svg>
+);
+
+export const VolumeXIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+    <line x1="23" y1="9" x2="17" y2="15"></line>
+    <line x1="17" y1="9" x2="23" y2="15"></line>
+  </svg>
+);
+
+export const MuteIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <VolumeXIcon className={className} size={size} />
+);
+
+// Fullscreen Icons
+export const Maximize2Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="15 3 21 3 21 9"></polyline>
+    <polyline points="9 21 3 21 3 15"></polyline>
+    <line x1="21" y1="3" x2="14" y2="10"></line>
+    <line x1="3" y1="21" x2="10" y2="14"></line>
+  </svg>
+);
+
+export const Minimize2Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="4 14 10 14 10 20"></polyline>
+    <polyline points="20 10 14 10 14 4"></polyline>
+    <line x1="14" y1="10" x2="21" y2="3"></line>
+    <line x1="3" y1="21" x2="10" y2="14"></line>
+  </svg>
+);
+
+export const FullscreenIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <Maximize2Icon className={className} size={size} />
+);
+
+export const ExitFullscreenIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <Minimize2Icon className={className} size={size} />
+);
+
+// Control Icons
+export const Rewind10Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="1 4 1 10 7 7"></polygon>
+    <polygon points="15 4 15 10 21 7"></polygon>
+    <path d="M7 4a9 9 0 0 1 9 9"></path>
+  </svg>
+);
+
+export const Forward10Icon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polygon points="5 4 5 10 11 7"></polygon>
+    <polygon points="19 4 19 10 13 7"></polygon>
+    <path d="M17 20a9 9 0 0 1-9-9"></path>
+  </svg>
+);
+
+export const SpeedIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M3 12h18"></path>
+    <path d="M3 6h18"></path>
+    <path d="M3 18h18"></path>
+  </svg>
+);
+
+export const QualityIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
+    <path d="M2 17l10 5 10-5"></path>
+    <path d="M2 12l10 5 10-5"></path>
+  </svg>
+);
+
+export const SubtitlesIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect>
+    <line x1="8" y1="10" x2="16" y2="10"></line>
+    <line x1="8" y1="14" x2="12" y2="14"></line>
+  </svg>
+);
+
+export const PictureInPictureIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M8 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path>
+    <rect x="10" y="8" width="8" height="8" rx="1"></rect>
+  </svg>
+);
+
+export const DownloadIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+    <polyline points="7 10 12 15 17 10"></polyline>
+    <line x1="12" y1="15" x2="12" y2="3"></line>
+  </svg>
+);
+
+export const ShareIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="18" cy="5" r="3"></circle>
+    <circle cx="6" cy="12" r="3"></circle>
+    <circle cx="18" cy="19" r="3"></circle>
+    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+  </svg>
+);
+
+export const LoadingIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className + ' animate-spin'} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+);
+
+// Error Icons
+export const AlertTriangleIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+    <line x1="12" y1="9" x2="12" y2="13"></line>
+    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+  </svg>
+);
+
+export const RefreshCcwIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="1 4 1 10 7 10"></polyline>
+    <polyline points="23 20 23 14 17 14"></polyline>
+    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
+  </svg>
+);
+
+export const RotateCcwIcon: React.FC<IconProps> = ({ className = '', size = 16 }) => (
+  <RefreshCcwIcon className={className} size={size} />
+);

package/src/components/ui/slider.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import { cn } from '../lib/utils';
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number[];
+  onValueChange?: (value: number[]) => void;
+}
+
+const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, min = 0, max = 100, step = 1, value = [0], onValueChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = [Number(e.target.value)];
+      onValueChange?.(newValue);
+    };
+
+    return (
+      <div className={cn('relative flex w-full touch-none select-none items-center', className)}>
+        <div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+          <div
+            className="absolute h-full bg-primary"
+            style={{
+              left: '0%',
+              right: `${100 - ((value[0] - min) / (max - min)) * 100}%`
+            }}
+          />
+        </div>
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value[0]}
+          onChange={handleChange}
+          className="absolute h-2 w-full cursor-pointer opacity-0 outline-none"
+          ref={ref}
+          {...props}
+        />
+        <div
+          className="absolute h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+          style={{
+            left: `${((value[0] - min) / (max - min)) * 100}%`,
+            transform: 'translateX(-50%)'
+          }}
+        />
+      </div>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';
+
+export { Slider };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import { cn } from '../lib/utils';
+
+interface TooltipProviderProps {
+  children: React.ReactNode;
+  delayDuration?: number;
+}
+
+const TooltipProvider: React.FC<TooltipProviderProps> = ({ children, delayDuration = 0 }) => {
+  return <>{children}</>;
+};
+
+interface TooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  delayDuration?: number;
+  sideOffset?: number;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ children, content, delayDuration = 0, sideOffset = 0 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.bottom + sideOffset,
+        left: rect.left + rect.width / 2
+      });
+    }
+  };
+
+  const showTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (delayDuration > 0) {
+      timeoutRef.current = setTimeout(() => {
+        setIsOpen(true);
+        updatePosition();
+      }, delayDuration);
+    } else {
+      setIsOpen(true);
+      updatePosition();
+    }
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      window.addEventListener('scroll', updatePosition);
+      window.addEventListener('resize', updatePosition);
+
+      return () => {
+        window.removeEventListener('scroll', updatePosition);
+        window.removeEventListener('resize', updatePosition);
+      };
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <TooltipProvider delayDuration={delayDuration}>
+      <div
+        ref={triggerRef}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
+      >
+        {children}
+      </div>
+
+      {isOpen && (
+        <div
+          className={cn(
+            'fixed z-50 px-3 py-2 text-sm bg-popover text-popover-foreground shadow-md rounded-md border',
+            'max-w-xs break-words pointer-events-none'
+          )}
+          style={{
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            transform: 'translateX(-50%)'
+          }}
+        >
+          {content}
+        </div>
+      )}
+    </TooltipProvider>
+  );
+};
+
+interface TooltipContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TooltipContent: React.FC<TooltipContentProps> = ({ children, className }) => {
+  return <div className={cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md', className)}>
+    {children}
+  </div>;
+};
+
+interface TooltipTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+const TooltipTrigger: React.FC<TooltipTriggerProps> = ({ children, asChild = false }) => {
+  return <>{children}</>;
+};
+
+export { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider };

package/src/hooks/use-enhanced-media-player.ts

@@ -429,16 +429,16 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 
 	// Computed state
 	const computedState = useMemo(() => ({
-		isPlaying: optimisticState?.isPlaying ?? isPlaying,
-		currentTime: optimisticState?.currentTime ?? currentTime,
-		duration: optimisticState?.duration ?? duration,
-		volume: optimisticState?.volume ?? optimisticVolume,
-		isMuted: optimisticState?.isMuted ?? isMuted,
-		isLoading: optimisticState?.isBuffering ?? isLoading,
-		isBuffering: optimisticState?.isBuffering ?? isBuffering,
-		error: optimisticState?.error ?? error,
-		buffered: optimisticState?.buffered ?? buffered,
-		isFullscreen: optimisticState?.isFullscreen ?? isFullscreen,
+		isPlaying: optimisticState?.state?.isPlaying ?? isPlaying,
+		currentTime: optimisticState?.state?.currentTime ?? currentTime,
+		duration: optimisticState?.state?.duration ?? duration,
+		volume: optimisticState?.state?.volume ?? optimisticVolume,
+		isMuted: optimisticState?.state?.isMuted ?? isMuted,
+		isLoading: optimisticState?.state?.isBuffering ?? isLoading,
+		isBuffering: optimisticState?.state?.isBuffering ?? isBuffering,
+		error: optimisticState?.state?.error ?? error,
+		buffered: optimisticState?.state?.buffered ?? buffered,
+		isFullscreen: optimisticState?.state?.isFullscreen ?? isFullscreen,
 		progress: duration > 0 ? currentTime / duration : 0,
 		isTransitioning: isPending || isSeeking,
 		canPlay: !isLoading && !isBuffering && !error
@@ -475,8 +475,8 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 		isTransitioning: isPending || isSeeking,
 
 		// Enhanced features
-		actions: optimisticState?.actions,
-		actionState: optimisticState?.actionState,
+		actions: optimisticState, // The optimisticState object contains all the actions
+		actionState: optimisticState?.state,
 
 		// Optimistic features
 		optimisticState,

package/src/hooks/use-intelligent-preloading.ts

@@ -57,7 +57,13 @@ export const useIntelligentPreloading = (
 		lastInteraction: Date.now(),
 	});
 
-	const networkInfoRef = useRef<NetworkInformation | null>(null);
+	// Network Information API (if available)
+	const networkInfoRef = useRef<{
+		effectiveType?: string;
+		downlink?: number;
+		rtt?: number;
+		saveData?: boolean;
+	} | null>(null);
 	const preloadedItemsRef = useRef<Set<string>>(new Set());
 	const preloadQueueRef = useRef<Array<{ source: MediaSource; priority: number }>>([]);
 
@@ -89,7 +95,7 @@ export const useIntelligentPreloading = (
 
 		const network = networkInfoRef.current;
 		return {
-			type: network.type,
+			type: network.effectiveType || '4g', // Use effectiveType as the primary type indicator
 			downlink: network.downlink || 10,
 			effectiveType: network.effectiveType || '4g',
 			saveData: network.saveData || false,
@@ -156,8 +162,9 @@ export const useIntelligentPreloading = (
 
 		// Additional heuristics
 		if (shouldPreload) {
-			// Prioritize HLS and adaptive streaming
-			if (source.type === 'hls' || source.type === 'm3u8') {
+			// Prioritize HLS and adaptive streaming (check URL extension)
+			const sourceUrl = source.src.toLowerCase();
+			if (sourceUrl.includes('.m3u8') || sourceUrl.includes('hls')) {
 				priority = priority === 'low' ? 'medium' : 'high';
 			}
 
@@ -168,7 +175,8 @@ export const useIntelligentPreloading = (
 			}
 
 			// Consider content type (video gets higher priority than audio)
-			if (source.type === 'mp4' || source.type === 'webm') {
+			if (source.type?.includes('mp4') || source.type?.includes('webm') ||
+				sourceUrl.includes('.mp4') || sourceUrl.includes('.webm')) {
 				priority = priority === 'low' ? 'medium' : priority;
 			}
 		}
@@ -184,23 +192,20 @@ export const useIntelligentPreloading = (
 			link.rel = 'preload';
 			link.href = source.src;
 
-			// Determine the correct 'as' attribute
-			switch (source.type) {
-				case 'hls':
-				case 'm3u8':
-					link.as = 'fetch';
-					break;
-				case 'mp4':
-				case 'webm':
-					link.as = 'video';
-					break;
-				case 'mp3':
-				case 'wav':
-				case 'ogg':
-					link.as = 'audio';
-					break;
-				default:
-					link.as = 'fetch';
+			// Determine the correct 'as' attribute based on URL or MIME type
+			const sourceUrl = source.src.toLowerCase();
+			const mimeType = source.type?.toLowerCase() || '';
+
+			if (sourceUrl.includes('.m3u8') || sourceUrl.includes('hls')) {
+				link.as = 'fetch';
+			} else if (mimeType.includes('mp4') || mimeType.includes('webm') ||
+				sourceUrl.includes('.mp4') || sourceUrl.includes('.webm')) {
+				link.as = 'video';
+			} else if (mimeType.includes('mp3') || mimeType.includes('wav') || mimeType.includes('ogg') ||
+				sourceUrl.includes('.mp3') || sourceUrl.includes('.wav') || sourceUrl.includes('.ogg')) {
+				link.as = 'audio';
+			} else {
+				link.as = 'fetch';
 			}
 
 			link.crossOrigin = 'anonymous';

package/src/hooks/use-media-player.ts

@@ -295,8 +295,6 @@ export function useMediaPlayer(options: UseMediaPlayerOptions) {
 		toggle,
 		seek,
 		setVolume: setVolumeControl,
-		mute,
-		unmute,
 		toggleMute,
 		enterFullscreen,
 		exitFullscreen,