@therealtinhtute/baroiplayer 1.0.4 → 1.0.6

package/dist/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/dist/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/dist/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/dist/src/hooks/use-mobile.ts

@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+
+interface DeviceInfo {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  userAgent: string;
+  screenWidth: number;
+  screenHeight: number;
+}
+
+export function useDeviceInfo(): DeviceInfo {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>(() => {
+    if (typeof window === 'undefined') {
+      return {
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true,
+        userAgent: '',
+        screenWidth: 1920,
+        screenHeight: 1080
+      };
+    }
+
+    const userAgent = navigator.userAgent;
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+
+    const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) && screenWidth < 768;
+    const isTablet = /iPad|Android/i.test(userAgent) && screenWidth >= 768 && screenWidth < 1024;
+    const isDesktop = !isMobile && !isTablet;
+
+    return {
+      isMobile,
+      isTablet,
+      isDesktop,
+      userAgent,
+      screenWidth,
+      screenHeight
+    };
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      const userAgent = navigator.userAgent;
+      const screenWidth = window.innerWidth;
+      const screenHeight = window.innerHeight;
+
+      const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) && screenWidth < 768;
+      const isTablet = /iPad|Android/i.test(userAgent) && screenWidth >= 768 && screenWidth < 1024;
+      const isDesktop = !isMobile && !isTablet;
+
+      setDeviceInfo({
+        isMobile,
+        isTablet,
+        isDesktop,
+        userAgent,
+        screenWidth,
+        screenHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return deviceInfo;
+}
+
+export function useContainerQuery(): boolean {
+  const [isSmall, setIsSmall] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const checkSize = () => {
+      setIsSmall(window.innerWidth < 640);
+    };
+
+    checkSize();
+    window.addEventListener('resize', checkSize);
+    return () => window.removeEventListener('resize', checkSize);
+  }, []);
+
+  return isSmall;
+}
+
+export function useMobileOptimizations() {
+  const deviceInfo = useDeviceInfo();
+  const [isTouch, setIsTouch] = useState(false);
+
+  useEffect(() => {
+    setIsTouch('ontouchstart' in window || navigator.maxTouchPoints > 0);
+  }, []);
+
+  return {
+    ...deviceInfo,
+    isTouch,
+    preferReducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches
+  };
+}
+
+export function useHapticFeedback() {
+  const deviceInfo = useDeviceInfo();
+
+  const triggerHaptic = (type: 'light' | 'medium' | 'heavy' = 'light') => {
+    if (!deviceInfo.isMobile || !('vibrate' in navigator)) return;
+
+    const patterns = {
+      light: [10],
+      medium: [20],
+      heavy: [50]
+    };
+
+    navigator.vibrate(patterns[type]);
+  };
+
+  return {
+    triggerHaptic,
+    supported: deviceInfo.isMobile && 'vibrate' in navigator
+  };
+}

package/dist/src/hooks/use-touch-gestures.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from "react";
-import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile";
+import { useDeviceInfo, useHapticFeedback } from "./use-mobile";
 // Default configuration
 const defaultConfig = {
     enabledGestures: ['tap', 'double-tap', 'long-press', 'swipe-left', 'swipe-right', 'swipe-up', 'swipe-down', 'pinch-in', 'pinch-out'],

package/dist/src/hooks/use-touch-gestures.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile"
+import { useDeviceInfo, useHapticFeedback } from "./use-mobile"
 
 // Gesture types
 export type GestureType = 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@therealtinhtute/baroiplayer",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"private": false,
 	"type": "module",
 	"description": "A customizable media player component library for React",
@@ -84,11 +84,31 @@
 	"peerDependencies": {
 		"react": ">=18.0.0",
 		"react-dom": ">=18.0.0",
-		"tailwindcss": ">=4.0.0"
+		"tailwindcss": ">=4.0.0",
+		"video.js": ">=7.0.0",
+		"hls.js": ">=1.0.0",
+		"@videojs/http-streaming": ">=2.0.0",
+		"videojs-contrib-quality-levels": ">=2.0.0",
+		"videojs-hls-quality-selector": ">=2.0.0"
 	},
 	"peerDependenciesMeta": {
 		"tailwindcss": {
 			"optional": true
+		},
+		"video.js": {
+			"optional": true
+		},
+		"hls.js": {
+			"optional": true
+		},
+		"@videojs/http-streaming": {
+			"optional": true
+		},
+		"videojs-contrib-quality-levels": {
+			"optional": true
+		},
+		"videojs-hls-quality-selector": {
+			"optional": true
 		}
 	},
 	"keywords": [

package/src/components/media-player-controls.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { useMediaSelector } from "../context/media-context";
-import { useDeviceInfo, useContainerQuery } from "@rp/ui/hooks/use-mobile";
+import { useDeviceInfo, useContainerQuery } from "../hooks/use-mobile";
 import { cn } from "../lib/utils";
 export function MediaPlayerControls({ children, className, asChild = false, variant, adaptiveLayout = true, ...props }) {
     const isFullscreen = useMediaSelector((state) => state.isFullscreen);

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

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { useMediaSelector } from "../context/media-context"
-import { useDeviceInfo, useContainerQuery } from "@rp/ui/hooks/use-mobile"
+import { useDeviceInfo, useContainerQuery } from "../hooks/use-mobile"
 import { cn } from "../lib/utils"
 
 export interface MediaPlayerControlsProps {

package/src/components/media-player-error.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@rp/ui/components/button";
-import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "lucide-react";
+import { Button } from "../components/ui/button";
+import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "../components/ui/icons";
 import React from "react";
 import { useMediaContext, useMediaSelector } from "../context/media-context";
 import { cn } from "../lib/utils";

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

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "@rp/ui/components/button"
-import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "lucide-react"
+import { Button } from "../components/ui/button"
+import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "../components/ui/icons"
 import React from "react"
 import { useMediaContext, useMediaSelector } from "../context/media-context"
 import { cn } from "../lib/utils"

package/src/components/media-player-fullscreen.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@rp/ui/components/button";
-import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { Button } from "../components/ui/button";
+import { Maximize2Icon, Minimize2Icon } from "../components/ui/icons";
 import React from "react";
 import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
 import { MediaPlayerTooltip } from "./media-player-tooltip";

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

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "@rp/ui/components/button"
-import { Maximize2Icon, Minimize2Icon } from "lucide-react"
+import { Button } from "../components/ui/button"
+import { Maximize2Icon, Minimize2Icon } from "../components/ui/icons"
 import React from "react"
 import {
 	MediaActionTypes,

package/src/components/media-player-play.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@rp/ui/components/button";
-import { PauseIcon, PlayIcon } from "lucide-react";
+import { Button } from "../components/ui/button";
+import { PauseIcon, PlayIcon } from "../components/ui/icons";
 import React from "react";
 import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
 import { MediaPlayerTooltip } from "./media-player-tooltip";

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

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "@rp/ui/components/button"
-import { PauseIcon, PlayIcon } from "lucide-react"
+import { Button } from "../components/ui/button"
+import { PauseIcon, PlayIcon } from "../components/ui/icons"
 import React from "react"
 import {
 	MediaActionTypes,

package/src/components/media-player-root.js

@@ -4,7 +4,7 @@ import React from "react";
 import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
 import { MediaProvider } from "../context/media-provider";
 import { useMediaGestures } from "../hooks/use-touch-gestures";
-import { useMobileOptimizations, useDeviceInfo } from "@rp/ui/hooks/use-mobile";
+import { useMobileOptimizations, useDeviceInfo } from "../hooks/use-mobile";
 import { cn } from "../lib/utils";
 // Utility function to compose refs
 function composeRefs(...refs) {

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

@@ -9,7 +9,7 @@ import {
 } from "../context/media-context"
 import { MediaProvider } from "../context/media-provider"
 import { useMediaGestures } from "../hooks/use-touch-gestures"
-import { useMobileOptimizations, useDeviceInfo } from "@rp/ui/hooks/use-mobile"
+import { useMobileOptimizations, useDeviceInfo } from "../hooks/use-mobile"
 import { cn } from "../lib/utils"
 
 // Utility function to compose refs

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Slider } from "@rp/ui/components/slider";
+import { Slider } from "../components/ui/slider";
 import React from "react";
 import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
 import { formatTime } from "../lib/format-time";