@therealtinhtute/baroiplayer 1.0.4 → 1.0.6

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
 // Auto-generated TypeScript declarations for @therealtinhtute/baroiplayer
-// Generated on 2025-10-12T09:16:11.234Z
+// Generated on 2025-10-12T09:55:45.696Z
 
 import type { ReactNode, ComponentType } from 'react';
 
@@ -578,12 +578,40 @@ export declare function ModernMediaPlayer(...args: any[]): any;
 // Exports from src/components/simple-video-player.tsx
 export declare function SimpleVideoPlayer(...args: any[]): any;
 
+// Exports from src/components/ui/button.tsx
+export interface ButtonProps {}
+
 // Exports from src/components/ui/enhanced-seek-bar.tsx
 export declare const EnhancedSeekBar: any;
 
 // Exports from src/components/ui/fullscreen-button.tsx
 export declare const FullscreenButton: any;
 
+// Exports from src/components/ui/icons.tsx
+export declare const PlayIcon: any;
+export declare const PauseIcon: any;
+export declare const VolumeIcon: any;
+export declare const Volume1Icon: any;
+export declare const Volume2Icon: any;
+export declare const VolumeXIcon: any;
+export declare const MuteIcon: any;
+export declare const Maximize2Icon: any;
+export declare const Minimize2Icon: any;
+export declare const FullscreenIcon: any;
+export declare const ExitFullscreenIcon: any;
+export declare const Rewind10Icon: any;
+export declare const Forward10Icon: any;
+export declare const SpeedIcon: any;
+export declare const QualityIcon: any;
+export declare const SubtitlesIcon: any;
+export declare const PictureInPictureIcon: any;
+export declare const DownloadIcon: any;
+export declare const ShareIcon: any;
+export declare const LoadingIcon: any;
+export declare const AlertTriangleIcon: any;
+export declare const RefreshCcwIcon: any;
+export declare const RotateCcwIcon: any;
+
 // Exports from src/components/ui/media-resource-preloader.d.ts
 export default any;
 
@@ -597,6 +625,9 @@ export declare const PlayButton: any;
 // Exports from src/components/ui/seek-bar.tsx
 export declare const SeekBar: any;
 
+// Exports from src/components/ui/slider.tsx
+export interface SliderProps {}
+
 // Exports from src/components/ui/time-display.tsx
 export declare const TimeDisplay: any;
 
@@ -1197,6 +1228,12 @@ export declare function useMemoryOptimization(...args: any[]): any;
 export declare function useMediaResourceCleanup(...args: any[]): any;
 export declare function usePerformanceMonitoring(...args: any[]): any;
 
+// Exports from src/hooks/use-mobile.ts
+export declare function useDeviceInfo(...args: any[]): any;
+export declare function useContainerQuery(...args: any[]): any;
+export declare function useMobileOptimizations(...args: any[]): any;
+export declare function useHapticFeedback(...args: any[]): any;
+
 // Exports from src/hooks/use-optimistic-controls.d.ts
 export interface MediaState {}
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@therealtinhtute/baroiplayer",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "./index.js",
   "module": "./index.mjs",
@@ -32,11 +32,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
     }
   }
 }

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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";

package/dist/src/components/media-player-seek.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Slider } from "@rp/ui/components/slider"
+import { Slider } from "../components/ui/slider"
 import React from "react"
 import {
 	MediaActionTypes,

package/dist/src/components/media-player-tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@rp/ui/components/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
 import { useMediaContext } from "../context/media-context";
 export function MediaPlayerTooltip({ children, tooltip, shortcut, delayDuration, sideOffset }) {
     const context = useMediaContext();

package/dist/src/components/media-player-tooltip.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Tooltip, TooltipContent, TooltipTrigger } from "@rp/ui/components/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip"
 import React from "react"
 import { useMediaContext } from "../context/media-context"
 

package/dist/src/components/media-player-volume.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 { Slider } from "@rp/ui/components/slider";
+import { Button } from "../components/ui/button";
+import { Slider } from "../components/ui/slider";
 import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react";
 import React from "react";
 import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";

package/dist/src/components/media-player-volume.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { Button } from "@rp/ui/components/button"
-import { Slider } from "@rp/ui/components/slider"
-import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react"
+import { Button } from "../components/ui/button"
+import { Slider } from "../components/ui/slider"
+import { Volume1Icon, Volume2Icon, VolumeXIcon } from "../components/ui/icons"
 import React from "react"
 import {
 	MediaActionTypes,

package/dist/src/components/react-player-wrapper.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/pixel-art.css";
-import { Button } from "@rp/ui";
-import { DownloadIcon, ExitFullscreenIcon, Forward10Icon, FullscreenIcon, LoadingIcon, MuteIcon, PauseIcon, PictureInPictureIcon, PlayIcon, QualityIcon, Rewind10Icon, ShareIcon, SpeedIcon, SubtitlesIcon, VolumeIcon } from "@rp/ui";
-import { Slider } from "@rp/ui";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@rp/ui";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@rp/ui";
+import { Button } from "../components/ui/button";
+import { DownloadIcon, ExitFullscreenIcon, Forward10Icon, FullscreenIcon, LoadingIcon, MuteIcon, PauseIcon, PictureInPictureIcon, PlayIcon, QualityIcon, Rewind10Icon, ShareIcon, SpeedIcon, SubtitlesIcon, VolumeIcon } from "../components/ui/icons";
+import { Slider } from "../components/ui/slider";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
 import { useState, useRef, useEffect, Suspense, lazy } from "react";
 // Dynamic import for lazy loading
 const ReactPlayer = lazy(() => import("react-player"));

package/dist/src/components/react-player-wrapper.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import "../styles/pixel-art.css"
-import { Button } from "@rp/ui"
+import { Button } from "../components/ui/button"
 import {
 	DownloadIcon,
 	ExitFullscreenIcon,
@@ -21,8 +21,8 @@ import {
 	SpeedIcon,
 	SubtitlesIcon,
 	VolumeIcon
-} from "@rp/ui"
-import { Slider } from "@rp/ui"
+} from "../components/ui/icons"
+import { Slider } from "../components/ui/slider"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -30,8 +30,8 @@ import {
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger
-} from "@rp/ui"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@rp/ui"
+} from "../components/ui/dropdown-menu"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip"
 import React, { useState, useRef, useEffect, useCallback, Suspense, lazy } from "react"
 // Dynamic import for lazy loading
 const ReactPlayer = lazy(() => import("react-player"))

package/dist/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/dist/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
+};