@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/audio-player.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useKeyboardControls } from "../hooks/use-keyboard-controls";
+import { useMediaPlayer } from "../hooks/use-media-player";
+import { cn } from "../lib/utils";
+export const AudioPlayer = forwardRef(({ src, className, children, keyboardControls = true, showControls = true, customControls = false, ...options }, ref) => {
+    const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+        src,
+        ...options
+    });
+    useKeyboardControls({
+        enabled: keyboardControls,
+        state,
+        controls
+    });
+    const renderSources = () => {
+        if (Array.isArray(src)) {
+            return src.map((source, index) => _jsx("source", { src: source }, index));
+        }
+        return null;
+    };
+    const audioProps = {
+        ref: mediaRef,
+        controls: showControls && !customControls,
+        className: "w-full",
+        ...(Array.isArray(src) ? {} : { src })
+    };
+    return (_jsxs("div", { ref: ref || containerRef, className: cn("relative", "focus-within:outline-none", className), tabIndex: 0, children: [_jsxs("audio", { ...audioProps, children: [Array.isArray(src) && renderSources(), "Your browser does not support the audio element."] }), state.error && (_jsx("div", { className: "mt-2 rounded-md border border-red-300 bg-red-100 p-3", children: _jsxs("div", { className: "text-red-800", children: [_jsx("p", { className: "font-semibold", children: "Error" }), _jsx("p", { className: "text-sm", children: state.error })] }) })), state.isLoading && (_jsx("div", { className: "mt-2 rounded-md border border-gray-300 bg-gray-100 p-3", children: _jsxs("div", { className: "flex items-center space-x-2 text-gray-600", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2" }), _jsx("span", { className: "text-sm", children: "Loading..." })] }) })), customControls && typeof children === "function" && (_jsx("div", { className: "mt-2", children: children({ state, controls }) })), customControls && typeof children !== "function" && _jsx("div", { className: "mt-2", children: children })] }));
+});
+AudioPlayer.displayName = "AudioPlayer";

package/dist/src/components/audio-player.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { forwardRef } from "react"
+import { useKeyboardControls } from "../hooks/use-keyboard-controls"
+import { useMediaPlayer } from "../hooks/use-media-player"
+import { cn } from "../lib/utils"
+import type { AudioPlayerProps } from "../types/index"
+
+export const AudioPlayer = forwardRef<HTMLDivElement, AudioPlayerProps>(
+	(
+		{
+			src,
+			className,
+			children,
+			keyboardControls = true,
+			showControls = true,
+			customControls = false,
+			...options
+		},
+		ref
+	) => {
+		const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+			src,
+			...options
+		})
+
+		useKeyboardControls({
+			enabled: keyboardControls,
+			state,
+			controls
+		})
+
+		const renderSources = () => {
+			if (Array.isArray(src)) {
+				return src.map((source, index) => <source key={index} src={source} />)
+			}
+			return null
+		}
+
+		const audioProps = {
+			ref: mediaRef as React.RefObject<HTMLAudioElement>,
+			controls: showControls && !customControls,
+			className: "w-full",
+			...(Array.isArray(src) ? {} : { src })
+		}
+
+		return (
+			<div
+				ref={ref || containerRef}
+				className={cn("relative", "focus-within:outline-none", className)}
+				tabIndex={0}>
+				<audio {...audioProps}>
+					{Array.isArray(src) && renderSources()}
+					Your browser does not support the audio element.
+				</audio>
+
+				{state.error && (
+					<div className="mt-2 rounded-md border border-red-300 bg-red-100 p-3">
+						<div className="text-red-800">
+							<p className="font-semibold">Error</p>
+							<p className="text-sm">{state.error}</p>
+						</div>
+					</div>
+				)}
+
+				{state.isLoading && (
+					<div className="mt-2 rounded-md border border-gray-300 bg-gray-100 p-3">
+						<div className="flex items-center space-x-2 text-gray-600">
+							<div className="h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2"></div>
+							<span className="text-sm">Loading...</span>
+						</div>
+					</div>
+				)}
+
+				{customControls && typeof children === "function" && (
+					<div className="mt-2">{children({ state, controls })}</div>
+				)}
+
+				{customControls && typeof children !== "function" && <div className="mt-2">{children}</div>}
+			</div>
+		)
+	}
+)
+
+AudioPlayer.displayName = "AudioPlayer"

package/dist/src/components/basic/index.d.ts

@@ -0,0 +1,26 @@
+export { AudioPlayer } from "../audio-player";
+export { MediaPlayer } from "../media-player";
+export { VideoPlayer } from "../video-player";
+export { SimpleVideoPlayer } from "../simple-video-player";
+export { ModernMediaPlayer } from "../react-player-wrapper";
+export type { ModernMediaPlayerProps } from "../react-player-wrapper";
+export { FullscreenButton } from "../ui/fullscreen-button";
+export { PlayButton } from "../ui/play-button";
+export { SeekBar } from "../ui/seek-bar";
+export { TimeDisplay } from "../ui/time-display";
+export { VolumeControl } from "../ui/volume-control";
+export { MediaPlayerAudio } from "../media-player-audio";
+export { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
+export { MediaPlayerError } from "../media-player-error";
+export { MediaPlayerFullscreen } from "../media-player-fullscreen";
+export { MediaPlayerLoading } from "../media-player-loading";
+export { MediaPlayerPlay } from "../media-player-play";
+export { MediaPlayerRoot } from "../media-player-root";
+export { MediaPlayerSeek } from "../media-player-seek";
+export { MediaPlayerTime } from "../media-player-time";
+export { MediaPlayerTooltip } from "../media-player-tooltip";
+export { MediaPlayerVideo } from "../media-player-video";
+export { MediaPlayerVolume } from "../media-player-volume";
+export { BasicVideoPlayer } from "../examples/basic-video-player";
+export { CustomControlsExample } from "../examples/custom-controls-example";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/basic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAC3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/src/components/basic/index.js

@@ -0,0 +1,29 @@
+// Basic Media Player Components
+export { AudioPlayer } from "../audio-player";
+export { MediaPlayer } from "../media-player";
+export { VideoPlayer } from "../video-player";
+export { SimpleVideoPlayer } from "../simple-video-player";
+// Modern React Player
+export { ModernMediaPlayer } from "../react-player-wrapper";
+// Basic UI Components  
+export { FullscreenButton } from "../ui/fullscreen-button";
+export { PlayButton } from "../ui/play-button";
+export { SeekBar } from "../ui/seek-bar";
+export { TimeDisplay } from "../ui/time-display";
+export { VolumeControl } from "../ui/volume-control";
+// DiceUI-style Basic Components
+export { MediaPlayerAudio } from "../media-player-audio";
+export { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
+export { MediaPlayerError } from "../media-player-error";
+export { MediaPlayerFullscreen } from "../media-player-fullscreen";
+export { MediaPlayerLoading } from "../media-player-loading";
+export { MediaPlayerPlay } from "../media-player-play";
+export { MediaPlayerRoot } from "../media-player-root";
+export { MediaPlayerSeek } from "../media-player-seek";
+export { MediaPlayerTime } from "../media-player-time";
+export { MediaPlayerTooltip } from "../media-player-tooltip";
+export { MediaPlayerVideo } from "../media-player-video";
+export { MediaPlayerVolume } from "../media-player-volume";
+// Basic Examples
+export { BasicVideoPlayer } from "../examples/basic-video-player";
+export { CustomControlsExample } from "../examples/custom-controls-example";

package/dist/src/components/basic/index.ts

@@ -0,0 +1,37 @@
+// Basic Media Player Components
+export { AudioPlayer } from "../audio-player";
+export { MediaPlayer } from "../media-player"; 
+export { VideoPlayer } from "../video-player";
+export { SimpleVideoPlayer } from "../simple-video-player";
+
+// Modern React Player
+export { ModernMediaPlayer } from "../react-player-wrapper";
+export type { ModernMediaPlayerProps } from "../react-player-wrapper";
+
+// Basic UI Components  
+export { FullscreenButton } from "../ui/fullscreen-button";
+export { PlayButton } from "../ui/play-button";
+export { SeekBar } from "../ui/seek-bar";
+export { TimeDisplay } from "../ui/time-display";
+export { VolumeControl } from "../ui/volume-control";
+
+// DiceUI-style Basic Components
+export { MediaPlayerAudio } from "../media-player-audio";
+export {
+  MediaPlayerControls,
+  MediaPlayerControlsOverlay
+} from "../media-player-controls";
+export { MediaPlayerError } from "../media-player-error";
+export { MediaPlayerFullscreen } from "../media-player-fullscreen";
+export { MediaPlayerLoading } from "../media-player-loading";
+export { MediaPlayerPlay } from "../media-player-play";
+export { MediaPlayerRoot } from "../media-player-root";
+export { MediaPlayerSeek } from "../media-player-seek";
+export { MediaPlayerTime } from "../media-player-time";
+export { MediaPlayerTooltip } from "../media-player-tooltip";
+export { MediaPlayerVideo } from "../media-player-video";
+export { MediaPlayerVolume } from "../media-player-volume";
+
+// Basic Examples
+export { BasicVideoPlayer } from "../examples/basic-video-player";
+export { CustomControlsExample } from "../examples/custom-controls-example";

package/dist/src/components/enhanced/advanced-features.d.ts

@@ -0,0 +1,45 @@
+export interface Chapter {
+    id: string;
+    title: string;
+    startTime: number;
+    endTime: number;
+    thumbnail?: string;
+}
+export interface QualityLevel {
+    id: string;
+    label: string;
+    width: number;
+    height: number;
+    bitrate?: number;
+}
+export interface Subtitle {
+    id: string;
+    label: string;
+    language: string;
+    src: string;
+    default?: boolean;
+}
+export declare const QualitySelector: ({ qualities, currentQuality, onQualityChange, className }: {
+    qualities: QualityLevel[];
+    currentQuality: string;
+    onQualityChange: (qualityId: string) => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SubtitleSelector: ({ subtitles, currentSubtitle, onSubtitleChange, className }: {
+    subtitles: Subtitle[];
+    currentSubtitle: string | null;
+    onSubtitleChange: (subtitleId: string | null) => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PlaybackSpeedSelector: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChaptersPanel: ({ chapters, onChapterSelect, className }: {
+    chapters: Chapter[];
+    onChapterSelect: (chapter: Chapter) => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PictureInPictureButton: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=advanced-features.d.ts.map

package/dist/src/components/enhanced/advanced-features.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-features.d.ts","sourceRoot":"","sources":["advanced-features.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,OAAO;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB;AAGD,eAAO,MAAM,eAAe,GAA4B,2DAKrD;IACF,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAsDA,CAAA;AAGD,eAAO,MAAM,gBAAgB,GAA6B,6DAKvD;IACF,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CA8DA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,eAEjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAmDA,CAAA;AAGD,eAAO,MAAM,aAAa,GAA0B,0CAIjD;IACF,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAyCA,CAAA;AAGD,eAAO,MAAM,sBAAsB,GAAmC,eAEnE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CA0BA,CAAA"}

package/dist/src/components/enhanced/advanced-features.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+import { formatTime } from "../../lib/format-time";
+// Quality selector component
+export const QualitySelector = function QualitySelector({ qualities, currentQuality, onQualityChange, className }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const currentQualityLabel = React.useMemo(() => {
+        return qualities.find(q => q.id === currentQuality)?.label || "Auto";
+    }, [qualities, currentQuality]);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select quality", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }), _jsx("span", { className: "text-sm", children: currentQualityLabel }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: qualities.map((quality) => (_jsxs("button", { onClick: () => {
+                        onQualityChange(quality.id);
+                        setIsOpen(false);
+                    }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", quality.id === currentQuality && "bg-primary/20 text-primary"), children: [quality.label, quality.bitrate && (_jsxs("span", { className: "ml-2 text-white/60 text-xs", children: ["(", Math.round(quality.bitrate / 1000), "k)"] }))] }, quality.id))) }))] }));
+};
+// Subtitle selector component
+export const SubtitleSelector = function SubtitleSelector({ subtitles, currentSubtitle, onSubtitleChange, className }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const currentSubtitleLabel = React.useMemo(() => {
+        if (!currentSubtitle)
+            return "Off";
+        return subtitles.find(s => s.id === currentSubtitle)?.label || "Off";
+    }, [subtitles, currentSubtitle]);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select subtitles", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }), _jsx("span", { className: "text-sm", children: currentSubtitleLabel }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsxs("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: [_jsx("button", { onClick: () => {
+                            onSubtitleChange(null);
+                            setIsOpen(false);
+                        }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", !currentSubtitle && "bg-primary/20 text-primary"), children: "Off" }), subtitles.map((subtitle) => (_jsx("button", { onClick: () => {
+                            onSubtitleChange(subtitle.id);
+                            setIsOpen(false);
+                        }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", subtitle.id === currentSubtitle && "bg-primary/20 text-primary"), children: subtitle.label }, subtitle.id)))] }))] }));
+};
+// Playback speed selector
+export const PlaybackSpeedSelector = function PlaybackSpeedSelector({ className }) {
+    const dispatch = useMediaDispatch();
+    const playbackRate = useMediaSelector(state => state.playbackRate);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    const handleSpeedChange = React.useCallback((speed) => {
+        dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed });
+        setIsOpen(false);
+    }, [dispatch]);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select playback speed", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z" }) }), _jsxs("span", { className: "text-sm", children: [playbackRate, "x"] }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: speeds.map((speed) => (_jsxs("button", { onClick: () => handleSpeedChange(speed), className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", speed === playbackRate && "bg-primary/20 text-primary"), children: [speed, "x"] }, speed))) }))] }));
+};
+// Chapters component
+export const ChaptersPanel = function ChaptersPanel({ chapters, onChapterSelect, className }) {
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const currentChapter = React.useMemo(() => {
+        return chapters.find(chapter => currentTime >= chapter.startTime && currentTime < chapter.endTime);
+    }, [chapters, currentTime]);
+    return (_jsxs("div", { className: cn("rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm", className), children: [_jsx("h3", { className: "mb-3 font-semibold text-white", children: "Chapters" }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: chapters.map((chapter) => (_jsxs("button", { onClick: () => onChapterSelect(chapter), className: cn("flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors", "hover:bg-white/10", chapter.id === currentChapter?.id && "border border-primary/30 bg-primary/20"), children: [chapter.thumbnail && (_jsx("img", { src: chapter.thumbnail, alt: chapter.title, className: "h-9 w-16 rounded object-cover" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium text-white", children: chapter.title }), _jsxs("div", { className: "text-sm text-white/60", children: [formatTime(chapter.startTime), " - ", formatTime(chapter.endTime)] })] })] }, chapter.id))) })] }));
+};
+// Picture-in-Picture button
+export const PictureInPictureButton = function PictureInPictureButton({ className }) {
+    const dispatch = useMediaDispatch();
+    const isPictureInPicture = useMediaSelector(state => state.isPictureInPicture);
+    const handleTogglePiP = React.useCallback(() => {
+        dispatch({
+            type: isPictureInPicture ? MediaActionTypes.EXIT_PIP : MediaActionTypes.ENTER_PIP
+        });
+    }, [dispatch, isPictureInPicture]);
+    return (_jsx("button", { type: "button", onClick: handleTogglePiP, className: cn("flex h-10 w-10 items-center justify-center rounded-full text-white", "transition-colors hover:bg-white/10", className), "aria-label": isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" }) }) }));
+};

package/dist/src/components/enhanced/advanced-features.tsx

@@ -0,0 +1,316 @@
+"use client"
+
+import React from "react"
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import { cn } from "../../lib/utils"
+import { formatTime } from "../../lib/format-time"
+
+// Types for advanced features
+export interface Chapter {
+	id: string
+	title: string
+	startTime: number
+	endTime: number
+	thumbnail?: string
+}
+
+export interface QualityLevel {
+	id: string
+	label: string
+	width: number
+	height: number
+	bitrate?: number
+}
+
+export interface Subtitle {
+	id: string
+	label: string
+	language: string
+	src: string
+	default?: boolean
+}
+
+// Quality selector component
+export const QualitySelector = function QualitySelector({
+	qualities,
+	currentQuality,
+	onQualityChange,
+	className
+}: {
+	qualities: QualityLevel[]
+	currentQuality: string
+	onQualityChange: (qualityId: string) => void
+	className?: string
+}) {
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const currentQualityLabel = React.useMemo(() => {
+		return qualities.find(q => q.id === currentQuality)?.label || "Auto"
+	}, [qualities, currentQuality])
+
+	return (
+		<div className={cn("relative", className)}>
+			<button
+				type="button"
+				onClick={() => setIsOpen(!isOpen)}
+				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
+				aria-label="Select quality"
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
+					<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+				</svg>
+				<span className="text-sm">{currentQualityLabel}</span>
+				<svg 
+					viewBox="0 0 24 24" 
+					fill="currentColor" 
+					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}
+				>
+					<path d="M7 10l5 5 5-5z"/>
+				</svg>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
+					{qualities.map((quality) => (
+						<button
+							key={quality.id}
+							onClick={() => {
+								onQualityChange(quality.id)
+								setIsOpen(false)
+							}}
+							className={cn(
+								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
+								quality.id === currentQuality && "bg-primary/20 text-primary"
+							)}
+						>
+							{quality.label}
+							{quality.bitrate && (
+								<span className="ml-2 text-white/60 text-xs">
+									({Math.round(quality.bitrate / 1000)}k)
+								</span>
+							)}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// Subtitle selector component
+export const SubtitleSelector = function SubtitleSelector({
+	subtitles,
+	currentSubtitle,
+	onSubtitleChange,
+	className
+}: {
+	subtitles: Subtitle[]
+	currentSubtitle: string | null
+	onSubtitleChange: (subtitleId: string | null) => void
+	className?: string
+}) {
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const currentSubtitleLabel = React.useMemo(() => {
+		if (!currentSubtitle) return "Off"
+		return subtitles.find(s => s.id === currentSubtitle)?.label || "Off"
+	}, [subtitles, currentSubtitle])
+
+	return (
+		<div className={cn("relative", className)}>
+			<button
+				type="button"
+				onClick={() => setIsOpen(!isOpen)}
+				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
+				aria-label="Select subtitles"
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
+					<path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/>
+				</svg>
+				<span className="text-sm">{currentSubtitleLabel}</span>
+				<svg 
+					viewBox="0 0 24 24" 
+					fill="currentColor" 
+					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}
+				>
+					<path d="M7 10l5 5 5-5z"/>
+				</svg>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
+					<button
+						onClick={() => {
+							onSubtitleChange(null)
+							setIsOpen(false)
+						}}
+						className={cn(
+							"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
+							!currentSubtitle && "bg-primary/20 text-primary"
+						)}
+					>
+						Off
+					</button>
+					{subtitles.map((subtitle) => (
+						<button
+							key={subtitle.id}
+							onClick={() => {
+								onSubtitleChange(subtitle.id)
+								setIsOpen(false)
+							}}
+							className={cn(
+								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
+								subtitle.id === currentSubtitle && "bg-primary/20 text-primary"
+							)}
+						>
+							{subtitle.label}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// Playback speed selector
+export const PlaybackSpeedSelector = function PlaybackSpeedSelector({
+	className
+}: {
+	className?: string
+}) {
+	const dispatch = useMediaDispatch()
+	const playbackRate = useMediaSelector(state => state.playbackRate)
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+	const handleSpeedChange = React.useCallback((speed: number) => {
+		dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed })
+		setIsOpen(false)
+	}, [dispatch])
+
+	return (
+		<div className={cn("relative", className)}>
+			<button
+				type="button"
+				onClick={() => setIsOpen(!isOpen)}
+				className="flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70"
+				aria-label="Select playback speed"
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
+					<path d="M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z"/>
+				</svg>
+				<span className="text-sm">{playbackRate}x</span>
+				<svg 
+					viewBox="0 0 24 24" 
+					fill="currentColor" 
+					className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")}
+				>
+					<path d="M7 10l5 5 5-5z"/>
+				</svg>
+			</button>
+
+			{isOpen && (
+				<div className="absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm">
+					{speeds.map((speed) => (
+						<button
+							key={speed}
+							onClick={() => handleSpeedChange(speed)}
+							className={cn(
+								"w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10",
+								speed === playbackRate && "bg-primary/20 text-primary"
+							)}
+						>
+							{speed}x
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// Chapters component
+export const ChaptersPanel = function ChaptersPanel({
+	chapters,
+	onChapterSelect,
+	className
+}: {
+	chapters: Chapter[]
+	onChapterSelect: (chapter: Chapter) => void
+	className?: string
+}) {
+	const currentTime = useMediaSelector(state => state.currentTime)
+
+	const currentChapter = React.useMemo(() => {
+		return chapters.find(chapter => 
+			currentTime >= chapter.startTime && currentTime < chapter.endTime
+		)
+	}, [chapters, currentTime])
+
+	return (
+		<div className={cn("rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm", className)}>
+			<h3 className="mb-3 font-semibold text-white">Chapters</h3>
+			<div className="max-h-64 space-y-2 overflow-y-auto">
+				{chapters.map((chapter) => (
+					<button
+						key={chapter.id}
+						onClick={() => onChapterSelect(chapter)}
+						className={cn(
+							"flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors",
+							"hover:bg-white/10",
+							chapter.id === currentChapter?.id && "border border-primary/30 bg-primary/20"
+						)}
+					>
+						{chapter.thumbnail && (
+							<img
+								src={chapter.thumbnail}
+								alt={chapter.title}
+								className="h-9 w-16 rounded object-cover"
+							/>
+						)}
+						<div className="min-w-0 flex-1">
+							<div className="truncate font-medium text-white">{chapter.title}</div>
+							<div className="text-sm text-white/60">
+								{formatTime(chapter.startTime)} - {formatTime(chapter.endTime)}
+							</div>
+						</div>
+					</button>
+				))}
+			</div>
+		</div>
+	)
+}
+
+// Picture-in-Picture button
+export const PictureInPictureButton = function PictureInPictureButton({
+	className
+}: {
+	className?: string
+}) {
+	const dispatch = useMediaDispatch()
+	const isPictureInPicture = useMediaSelector(state => state.isPictureInPicture)
+
+	const handleTogglePiP = React.useCallback(() => {
+		dispatch({
+			type: isPictureInPicture ? MediaActionTypes.EXIT_PIP : MediaActionTypes.ENTER_PIP
+		})
+	}, [dispatch, isPictureInPicture])
+
+	return (
+		<button
+			type="button"
+			onClick={handleTogglePiP}
+			className={cn(
+				"flex h-10 w-10 items-center justify-center rounded-full text-white",
+				"transition-colors hover:bg-white/10",
+				className
+			)}
+			aria-label={isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture"}
+		>
+			<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
+				<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/>
+			</svg>
+		</button>
+	)
+}