@lightbird/ui 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React10 from 'react';
-import React10__default, { useMemo, useState, useRef, useEffect, useCallback, Component } from 'react';
+import * as React11 from 'react';
+import React11__default, { useRef, useState, useMemo, useEffect, useCallback, Component } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -10,7 +10,8 @@ import { cva } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { Circle, SkipBack, Pause, Play, SkipForward, VolumeX, Volume2, Rewind, FastForward, AudioLines, Loader2, Subtitles, Plus, X, List, Settings2, Info, Keyboard, Camera, RotateCcw, PictureInPicture2, Minimize, Maximize, ChevronDown, ChevronUp, Check, ChevronLeft, ListVideo, Download, Upload, Pin, PinOff, Minimize2, Maximize2, ChevronRight, FilePlus, FolderOpen, Link, Link2, Globe, AlertCircle, GripVertical, Tv, Sun } from 'lucide-react';
+import { useSmoothProgress, usePlaylist, useVideoPlayback, useVideoFilters, useSubtitles, useFullscreen, usePictureInPicture, useSeekPreview, useABLoop, useTouchGestures, useVideoInfo, useProgressPersistence, useChapters, useMagnet, useKeyboardShortcuts, useMediaSession } from '@lightbird/core/react';
+import { Circle, SkipBack, Pause, Play, SkipForward, VolumeX, Volume2, AudioLines, Loader2, Subtitles, Plus, X, Settings2, PictureInPicture2, Camera, Info, Keyboard, List, Minimize, Maximize, ChevronDown, ChevronUp, Check, ChevronLeft, ListVideo, Download, Upload, Pin, PinOff, Minimize2, Maximize2, ChevronRight, FilePlus, FolderOpen, Link, Link2, Globe, AlertCircle, Film, GripVertical, Tv, FastForward, Rewind, Sun } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { DndContext, closestCenter } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
@@ -19,7 +20,6 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { exportPlaylist, formatShortcutKey, FLAG_MAGNET_LINK, loadShortcuts, ProgressEstimator, createVideoPlayer, CancellationError, hasAcceptedDisclaimer, acceptDisclaimer, initFeatureFlags, parseMediaError, captureVideoThumbnail, validateFile, parseM3U8, matchesShortcut, saveShortcuts, DEFAULT_SHORTCUTS } from '@lightbird/core';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { usePlaylist, useVideoPlayback, useVideoFilters, useSubtitles, useFullscreen, usePictureInPicture, useSeekPreview, useABLoop, useTouchGestures, useVideoInfo, useProgressPersistence, useChapters, useMagnet, useKeyboardShortcuts, useMediaSession } from '@lightbird/core/react';
 import { useBooleanFlagValue, OpenFeatureProvider } from '@openfeature/react-sdk';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as ToastPrimitives from '@radix-ui/react-toast';
@@ -27,7 +27,7 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var Slider = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+var Slider = React11.forwardRef(({ className, trackClassName, rangeClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
     ref,
@@ -37,8 +37,33 @@ var Slider = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background 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" })
+      /* @__PURE__ */ jsx(
+        SliderPrimitive.Track,
+        {
+          className: cn(
+            "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary transition-all duration-150 ease-out",
+            trackClassName
+          ),
+          children: /* @__PURE__ */ jsx(
+            SliderPrimitive.Range,
+            {
+              className: cn(
+                "absolute h-full bg-primary transition-[box-shadow] duration-150",
+                rangeClassName
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SliderPrimitive.Thumb,
+        {
+          className: cn(
+            "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-[transform,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+            thumbClassName
+          )
+        }
+      )
     ]
   }
 ));
@@ -68,7 +93,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React10.forwardRef(
+var Button = React11.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -84,7 +109,7 @@ var Button = React10.forwardRef(
 Button.displayName = "Button";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React11.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -101,7 +126,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -117,7 +142,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -126,7 +151,164 @@ var Label = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var RadioGroup = React10.forwardRef(({ className, ...props }, ref) => {
+var formatTime = (time) => {
+  if (isNaN(time)) return "00:00";
+  const date = /* @__PURE__ */ new Date(0);
+  date.setSeconds(time);
+  const timeString = date.toISOString().substr(11, 8);
+  return timeString.startsWith("00:") ? timeString.substr(3) : timeString;
+};
+var SeekBar = React11__default.memo(function SeekBar2({
+  progress,
+  duration,
+  isPlaying,
+  onSeek,
+  videoRef,
+  chapters = [],
+  abLoop = { pointA: null, pointB: null, isLooping: false },
+  onSeekHover,
+  seekPreviewThumbnail = null
+}) {
+  const noopRef = useRef(null);
+  const smooth = useSmoothProgress(videoRef ?? noopRef, {
+    isPlaying: !!videoRef && isPlaying,
+    fallback: progress
+  });
+  const displayProgress = videoRef ? smooth : progress;
+  const [seekHover, setSeekHover] = useState(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isScrubbing, setIsScrubbing] = useState(false);
+  const active = isHovering || isScrubbing;
+  const handleSeekHover = (e) => {
+    if (duration <= 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const time = ratio * duration;
+    setSeekHover({ ratio, time });
+    onSeekHover?.(time);
+  };
+  const handleSeekLeave = () => {
+    setSeekHover(null);
+    setIsHovering(false);
+    onSeekHover?.(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative w-full py-2",
+      "data-testid": "seek-bar",
+      "data-scrubbing": isScrubbing || void 0,
+      "data-hover": isHovering || void 0,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseMove: handleSeekHover,
+      onMouseLeave: handleSeekLeave,
+      children: [
+        seekHover && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "seek-preview",
+            className: "absolute bottom-full mb-3 -translate-x-1/2 pointer-events-none flex flex-col items-center z-20",
+            style: { left: `${seekHover.ratio * 100}%` },
+            children: [
+              seekPreviewThumbnail ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: seekPreviewThumbnail,
+                  alt: "",
+                  className: "w-40 h-[90px] rounded border border-white/20 bg-black object-cover shadow-lg"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-40 h-[90px] rounded border border-white/20 bg-black/80 shadow-lg" }),
+              /* @__PURE__ */ jsx("span", { className: "mt-1 rounded bg-black/80 px-1.5 py-0.5 font-mono text-xs text-white", children: formatTime(seekHover.time) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            value: [displayProgress],
+            max: duration || 0,
+            step: 0.05,
+            onValueChange: ([val]) => onSeek(val),
+            onPointerDown: () => setIsScrubbing(true),
+            onPointerUp: () => setIsScrubbing(false),
+            onLostPointerCapture: () => setIsScrubbing(false),
+            className: "w-full",
+            trackClassName: cn(
+              "rounded-none transition-all duration-150 ease-out",
+              active ? "h-1.5" : "h-[3px]"
+            ),
+            rangeClassName: cn(
+              "rounded-none",
+              active && "shadow-[0_0_6px_hsl(var(--primary)/0.6)]"
+            ),
+            thumbClassName: cn(
+              "h-3 w-3 border transition-[transform,opacity] duration-150",
+              active ? "scale-100 opacity-100" : "scale-0 opacity-0",
+              isScrubbing && "scale-125"
+            )
+          }
+        ),
+        chapters.length > 0 && duration > 0 && chapters.slice(1).map((chapter) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "chapter-tick",
+              style: {
+                position: "absolute",
+                left: `${chapter.startTime / duration * 100}%`,
+                top: "50%",
+                width: "2px",
+                height: active ? "10px" : "6px",
+                background: "white",
+                opacity: 0.55,
+                pointerEvents: "none",
+                transform: "translate(-1px, -50%)",
+                transition: "height 150ms ease-out"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("p", { children: [
+            chapter.title,
+            " \u2014 ",
+            formatTime(chapter.startTime)
+          ] }) })
+        ] }, chapter.index)),
+        duration > 0 && abLoop.pointA !== null && abLoop.pointB !== null && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "ab-loop-region",
+            className: cn(
+              "pointer-events-none absolute top-1/2 -translate-y-1/2 bg-primary/40 transition-[height] duration-150",
+              active ? "h-1.5" : "h-[3px]"
+            ),
+            style: {
+              left: `${abLoop.pointA / duration * 100}%`,
+              width: `${(abLoop.pointB - abLoop.pointA) / duration * 100}%`
+            }
+          }
+        ),
+        duration > 0 && abLoop.pointA !== null && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "ab-marker-a",
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 h-4 w-0.5 -translate-x-1/2 bg-primary",
+            style: { left: `${abLoop.pointA / duration * 100}%` }
+          }
+        ),
+        duration > 0 && abLoop.pointB !== null && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "ab-marker-b",
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 h-4 w-0.5 -translate-x-1/2 bg-primary",
+            style: { left: `${abLoop.pointB / duration * 100}%` }
+          }
+        )
+      ]
+    }
+  );
+});
+var RadioGroup = React11.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -137,7 +319,7 @@ var RadioGroup = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React10.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React11.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -152,14 +334,14 @@ var RadioGroupItem = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-var formatTime = (time) => {
+var formatTime2 = (time) => {
   if (isNaN(time)) return "00:00";
   const date = /* @__PURE__ */ new Date(0);
   date.setSeconds(time);
   const timeString = date.toISOString().substr(11, 8);
   return timeString.startsWith("00:") ? timeString.substr(3) : timeString;
 };
-var PlayerControls = React10__default.memo(function PlayerControls2({
+var PlayerControls = React11__default.memo(function PlayerControls2({
   isPlaying,
   progress,
   duration,
@@ -203,355 +385,260 @@ var PlayerControls = React10__default.memo(function PlayerControls2({
   onSeekHover,
   seekPreviewThumbnail = null,
   abLoop = { pointA: null, pointB: null, isLooping: false },
-  onABLoopCycle
+  onABLoopCycle,
+  videoRef,
+  isDisabled = false
 }) {
-  const formattedProgress = useMemo(() => formatTime(progress), [progress]);
-  const formattedDuration = useMemo(() => formatTime(duration), [duration]);
+  const formattedProgress = useMemo(() => formatTime2(progress), [progress]);
+  const formattedDuration = useMemo(() => formatTime2(duration), [duration]);
   const [chaptersMenuOpen, setChaptersMenuOpen] = useState(false);
-  const [seekHover, setSeekHover] = useState(null);
-  const handleSeekHover = (e) => {
-    if (duration <= 0) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    if (rect.width <= 0) return;
-    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const time = ratio * duration;
-    setSeekHover({ ratio, time });
-    onSeekHover?.(time);
-  };
-  const handleSeekLeave = () => {
-    setSeekHover(null);
-    onSeekHover?.(null);
-  };
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-in-out flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative w-full",
-        "data-testid": "seek-bar",
-        onMouseMove: handleSeekHover,
-        onMouseLeave: handleSeekLeave,
-        children: [
-          seekHover && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-testid": "seek-preview",
-              className: "absolute bottom-full mb-3 -translate-x-1/2 pointer-events-none flex flex-col items-center z-20",
-              style: { left: `${seekHover.ratio * 100}%` },
-              children: [
-                seekPreviewThumbnail ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: seekPreviewThumbnail,
-                    alt: "",
-                    className: "w-40 h-[90px] rounded border border-white/20 bg-black object-cover shadow-lg"
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: "w-40 h-[90px] rounded border border-white/20 bg-black/80 shadow-lg" }),
-                /* @__PURE__ */ jsx("span", { className: "mt-1 rounded bg-black/80 px-1.5 py-0.5 font-mono text-xs text-white", children: formatTime(seekHover.time) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Slider,
-            {
-              value: [progress],
-              max: duration,
-              step: 1,
-              onValueChange: ([val]) => onSeek(val),
-              className: "w-full h-2"
-            }
-          ),
-          chapters.length > 0 && duration > 0 && chapters.slice(1).map((chapter) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-testid": "chapter-tick",
-                style: {
-                  position: "absolute",
-                  left: `${chapter.startTime / duration * 100}%`,
-                  top: 0,
-                  width: "2px",
-                  height: "100%",
-                  background: "white",
-                  opacity: 0.5,
-                  pointerEvents: "none",
-                  transform: "translateX(-1px)"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("p", { children: [
-              chapter.title,
-              " \u2014 ",
-              formatTime(chapter.startTime)
-            ] }) })
-          ] }, chapter.index)),
-          duration > 0 && abLoop.pointA !== null && abLoop.pointB !== null && /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "ab-loop-region",
-              className: "pointer-events-none absolute top-0 h-full bg-primary/30",
-              style: {
-                left: `${abLoop.pointA / duration * 100}%`,
-                width: `${(abLoop.pointB - abLoop.pointA) / duration * 100}%`
-              }
-            }
-          ),
-          duration > 0 && abLoop.pointA !== null && /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "ab-marker-a",
-              className: "pointer-events-none absolute top-0 h-full w-0.5 -translate-x-1/2 bg-primary",
-              style: { left: `${abLoop.pointA / duration * 100}%` }
-            }
-          ),
-          duration > 0 && abLoop.pointB !== null && /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "ab-marker-b",
-              className: "pointer-events-none absolute top-0 h-full w-0.5 -translate-x-1/2 bg-primary",
-              style: { left: `${abLoop.pointB / duration * 100}%` }
-            }
-          )
-        ]
-      }
-    ),
-    currentChapter && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: currentChapter.title }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onPrevious, children: /* @__PURE__ */ jsx(SkipBack, {}) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Previous (N)" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onPlayPause, children: isPlaying ? /* @__PURE__ */ jsx(Pause, {}) : /* @__PURE__ */ jsx(Play, {}) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("p", { children: [
-            isPlaying ? "Pause" : "Play",
-            " (Space)"
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onNext, children: /* @__PURE__ */ jsx(SkipForward, {}) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Next (P)" }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onMuteToggle, children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, {}) : /* @__PURE__ */ jsx(Volume2, {}) }) }),
-            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Mute (M)" }) })
-          ] }),
-          /* @__PURE__ */ jsx(Slider, { value: [isMuted ? 0 : volume], max: 1, step: 0.05, onValueChange: ([val]) => onVolumeChange(val), className: "w-24" })
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm", children: [
-          formattedProgress,
-          " / ",
-          formattedDuration
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: () => onFrameStep("backward"), children: /* @__PURE__ */ jsx(Rewind, { size: 18 }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Frame Backward" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: () => onFrameStep("forward"), children: /* @__PURE__ */ jsx(FastForward, { size: 18 }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Frame Forward" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Popover, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "font-mono w-16", children: [
-            playbackRate,
-            "x"
-          ] }) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "w-40", children: /* @__PURE__ */ jsx(RadioGroup, { value: String(playbackRate), onValueChange: (val) => onPlaybackRateChange(Number(val)), children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4].map((rate) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsx(RadioGroupItem, { value: String(rate), id: `rate-${rate}` }),
-            /* @__PURE__ */ jsxs(Label, { htmlFor: `rate-${rate}`, children: [
-              rate,
-              "x"
-            ] })
-          ] }, rate)) }) })
-        ] }),
-        audioTracks.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "relative", children: [
-            /* @__PURE__ */ jsx(AudioLines, {}),
-            tracksLoading && /* @__PURE__ */ jsx(Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" })
-          ] }) }),
-          /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsx(RadioGroup, { value: activeAudioTrack, onValueChange: onAudioTrackChange, children: audioTracks.map((track) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsx(RadioGroupItem, { value: track.id, id: `audio-${track.id}` }),
-            /* @__PURE__ */ jsx(Label, { htmlFor: `audio-${track.id}`, children: track.name })
-          ] }, track.id)) }) }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Popover, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "relative", children: [
-            /* @__PURE__ */ jsx(Subtitles, {}),
-            tracksLoading ? /* @__PURE__ */ jsx(Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" }) : activeSubtitle !== "-1" && /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 block h-2 w-2 rounded-full bg-primary ring-2 ring-background" })
-          ] }) }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: "Subtitles" }),
-              /* @__PURE__ */ jsxs(
-                Button,
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": isDisabled || void 0,
+      className: cn(
+        "absolute bottom-0 left-0 right-0 px-4 pb-3 pt-10 flex flex-col gap-1.5",
+        "bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300 ease-in-out",
+        isDisabled ? "opacity-60 pointer-events-none" : "opacity-0 group-hover:opacity-100"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          SeekBar,
+          {
+            progress,
+            duration,
+            isPlaying,
+            onSeek,
+            videoRef,
+            chapters,
+            abLoop,
+            onSeekHover,
+            seekPreviewThumbnail
+          }
+        ),
+        currentChapter && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground -mt-0.5", children: currentChapter.title }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onPrevious, children: /* @__PURE__ */ jsx(SkipBack, {}) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Previous (N)" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onPlayPause, children: isPlaying ? /* @__PURE__ */ jsx(Pause, {}) : /* @__PURE__ */ jsx(Play, {}) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("p", { children: [
+                isPlaying ? "Pause" : "Play",
+                " (Space)"
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onNext, children: /* @__PURE__ */ jsx(SkipForward, {}) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Next (P)" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-1", children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onMuteToggle, children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, {}) : /* @__PURE__ */ jsx(Volume2, {}) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Mute (M)" }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Slider,
                 {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: onSubtitleUpload,
-                  className: "h-7 px-2",
-                  children: [
-                    /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
-                    "Add"
-                  ]
+                  value: [isMuted ? 0 : volume],
+                  max: 1,
+                  step: 0.05,
+                  onValueChange: ([val]) => onVolumeChange(val),
+                  "aria-label": "Volume",
+                  className: "w-24",
+                  trackClassName: "h-[3px]",
+                  thumbClassName: "h-3 w-3 border"
                 }
               )
             ] }),
-            subtitles.length > 0 ? /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsxs(RadioGroup, { value: activeSubtitle, onValueChange: onSubtitleChange, children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-                /* @__PURE__ */ jsx(RadioGroupItem, { value: "-1", id: "sub-off" }),
-                /* @__PURE__ */ jsx(Label, { htmlFor: "sub-off", children: "Off" })
-              ] }),
-              subtitles.map((sub) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 flex-1", children: [
-                  /* @__PURE__ */ jsx(RadioGroupItem, { value: sub.id, id: `sub-${sub.id}` }),
-                  /* @__PURE__ */ jsx(Label, { htmlFor: `sub-${sub.id}`, className: "truncate", children: sub.name })
-                ] }),
-                sub.type === "external" && onSubtitleRemove && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    onClick: () => onSubtitleRemove(sub.id),
-                    className: "h-6 w-6 p-0",
-                    children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-                  }
-                )
-              ] }, sub.id))
-            ] }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-2", children: "No subtitles available" })
-          ] }) })
-        ] }),
-        chapters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: chaptersMenuOpen, onOpenChange: setChaptersMenuOpen, children: [
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Chapters", children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) }) }) }),
-            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Chapters" }) })
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs tabular-nums ml-2 text-white/90", children: [
+              formattedProgress,
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
+                "/ ",
+                formattedDuration
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-0", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col max-h-64 overflow-y-auto", children: chapters.map((chapter) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: cn(
-                "flex items-center justify-between px-4 py-2 text-sm hover:bg-accent transition-colors text-left",
-                currentChapter?.index === chapter.index && "bg-accent font-medium"
-              ),
-              onClick: () => {
-                onGoToChapter?.(chapter.index);
-                setChaptersMenuOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: chapter.title }),
-                /* @__PURE__ */ jsx("span", { className: "ml-4 font-mono text-xs text-muted-foreground shrink-0", children: formatTime(chapter.startTime) })
-              ]
-            },
-            chapter.index
-          )) }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Popover, { children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(Settings2, {}) }) }),
-          /* @__PURE__ */ jsxs(PopoverContent, { className: "w-64 space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs(Label, { children: [
-                "Brightness: ",
-                filters.brightness,
-                "%"
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            audioTracks.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "relative", "aria-label": "Audio track", children: [
+                  /* @__PURE__ */ jsx(AudioLines, {}),
+                  tracksLoading && /* @__PURE__ */ jsx(Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" })
+                ] }) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Audio track" }) })
               ] }),
-              /* @__PURE__ */ jsx(Slider, { value: [filters.brightness], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, brightness: val }) })
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-56", children: /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsx(RadioGroup, { value: activeAudioTrack, onValueChange: onAudioTrackChange, children: audioTracks.map((track) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsx(RadioGroupItem, { value: track.id, id: `audio-${track.id}` }),
+                /* @__PURE__ */ jsx(Label, { htmlFor: `audio-${track.id}`, children: track.name })
+              ] }, track.id)) }) }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs(Label, { children: [
-                "Contrast: ",
-                filters.contrast,
-                "%"
+            /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "relative", "aria-label": "Subtitles", children: [
+                  /* @__PURE__ */ jsx(Subtitles, {}),
+                  tracksLoading ? /* @__PURE__ */ jsx(Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" }) : activeSubtitle !== "-1" && /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 block h-2 w-2 rounded-full bg-primary ring-2 ring-background" })
+                ] }) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Subtitles" }) })
               ] }),
-              /* @__PURE__ */ jsx(Slider, { value: [filters.contrast], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, contrast: val }) })
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: "Subtitles" }),
+                  onSubtitleUpload && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onSubtitleUpload, className: "h-7 px-2", children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
+                    "Add"
+                  ] })
+                ] }),
+                subtitles.length > 0 ? /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsxs(RadioGroup, { value: activeSubtitle, onValueChange: onSubtitleChange, children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(RadioGroupItem, { value: "-1", id: "sub-off" }),
+                    /* @__PURE__ */ jsx(Label, { htmlFor: "sub-off", children: "Off" })
+                  ] }),
+                  subtitles.map((sub) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 flex-1", children: [
+                      /* @__PURE__ */ jsx(RadioGroupItem, { value: sub.id, id: `sub-${sub.id}` }),
+                      /* @__PURE__ */ jsx(Label, { htmlFor: `sub-${sub.id}`, className: "truncate", children: sub.name })
+                    ] }),
+                    sub.type === "external" && onSubtitleRemove && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSubtitleRemove(sub.id), className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+                  ] }, sub.id))
+                ] }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-2", children: "No subtitles available" })
+              ] }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs(Label, { children: [
-                "Saturation: ",
-                filters.saturate,
-                "%"
+            /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "font-mono w-12 h-9 px-2 text-xs", children: [
+                  playbackRate,
+                  "x"
+                ] }) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Playback speed" }) })
               ] }),
-              /* @__PURE__ */ jsx(Slider, { value: [filters.saturate], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, saturate: val }) })
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-40", children: /* @__PURE__ */ jsx(RadioGroup, { value: String(playbackRate), onValueChange: (val) => onPlaybackRateChange(Number(val)), children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4].map((rate) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsx(RadioGroupItem, { value: String(rate), id: `rate-${rate}` }),
+                /* @__PURE__ */ jsxs(Label, { htmlFor: `rate-${rate}`, children: [
+                  rate,
+                  "x"
+                ] })
+              ] }, rate)) }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs(Label, { children: [
-                "Hue: ",
-                filters.hue,
-                "\xB0"
+            /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Settings", children: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Settings" }) })
               ] }),
-              /* @__PURE__ */ jsx(Slider, { value: [filters.hue], max: 360, onValueChange: ([val]) => onFiltersChange({ ...filters, hue: val }) })
+              /* @__PURE__ */ jsxs(PopoverContent, { className: "w-72 p-2 space-y-1", align: "end", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  pipSupported && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: onTogglePiP,
+                      "aria-label": isPiP ? "Exit picture-in-picture" : "Enter picture-in-picture",
+                      className: cn(
+                        "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left",
+                        isPiP && "text-primary"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(PictureInPicture2, { className: "h-4 w-4" }),
+                        "Picture-in-Picture"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("button", { onClick: onScreenshot, className: "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [
+                    /* @__PURE__ */ jsx(Camera, { className: "h-4 w-4" }),
+                    "Screenshot"
+                  ] }),
+                  onShowInfo && /* @__PURE__ */ jsxs("button", { onClick: onShowInfo, className: "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [
+                    /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+                    "Video information"
+                  ] }),
+                  onOpenShortcuts && /* @__PURE__ */ jsxs("button", { onClick: onOpenShortcuts, className: "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [
+                    /* @__PURE__ */ jsx(Keyboard, { className: "h-4 w-4" }),
+                    "Keyboard shortcuts"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 pt-2 space-y-2 px-1", children: [
+                  /* @__PURE__ */ jsx(Label, { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Display" }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Brightness: ",
+                      filters.brightness,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx(Slider, { value: [filters.brightness], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, brightness: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Contrast: ",
+                      filters.contrast,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx(Slider, { value: [filters.contrast], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, contrast: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Saturation: ",
+                      filters.saturate,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx(Slider, { value: [filters.saturate], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, saturate: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Hue: ",
+                      filters.hue,
+                      "\xB0"
+                    ] }),
+                    /* @__PURE__ */ jsx(Slider, { value: [filters.hue], max: 360, onValueChange: ([val]) => onFiltersChange({ ...filters, hue: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Zoom: ",
+                      Math.round(zoom * 100),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx(Slider, { value: [zoom], min: 1, max: 3, step: 0.1, onValueChange: ([val]) => onZoomChange(val), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs(Label, { children: [
-                "Zoom: ",
-                Math.round(zoom * 100),
-                "%"
+            chapters.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: chaptersMenuOpen, onOpenChange: setChaptersMenuOpen, children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Chapters", children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }) }) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Chapters" }) })
               ] }),
-              /* @__PURE__ */ jsx(Slider, { value: [zoom], min: 1, max: 3, step: 0.1, onValueChange: ([val]) => onZoomChange(val) })
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col max-h-64 overflow-y-auto", children: chapters.map((chapter) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: cn(
+                    "flex items-center justify-between px-4 py-2 text-sm hover:bg-accent transition-colors text-left",
+                    currentChapter?.index === chapter.index && "bg-accent font-medium"
+                  ),
+                  onClick: () => {
+                    onGoToChapter?.(chapter.index);
+                    setChaptersMenuOpen(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: chapter.title }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-4 font-mono text-xs text-muted-foreground shrink-0", children: formatTime2(chapter.startTime) })
+                  ]
+                },
+                chapter.index
+              )) }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onFullScreenToggle, children: isFullScreen ? /* @__PURE__ */ jsx(Minimize, {}) : /* @__PURE__ */ jsx(Maximize, {}) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Fullscreen (F)" }) })
             ] })
           ] })
-        ] }),
-        onShowInfo && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onShowInfo, children: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Video Information" }) })
-        ] }),
-        onOpenShortcuts && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onOpenShortcuts, children: /* @__PURE__ */ jsx(Keyboard, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Keyboard Shortcuts" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onScreenshot, children: /* @__PURE__ */ jsx(Camera, {}) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Screenshot" }) })
-        ] }),
-        onABLoopCycle && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              onClick: onABLoopCycle,
-              "aria-label": "A-B loop",
-              "data-testid": "ab-loop-button",
-              "data-active": abLoop.isLooping,
-              className: cn("font-mono text-xs font-bold", abLoop.isLooping && "text-primary"),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: cn(abLoop.pointA !== null && "text-primary"), children: "A" }),
-                /* @__PURE__ */ jsx("span", { className: "opacity-50", children: "-" }),
-                /* @__PURE__ */ jsx("span", { className: cn(abLoop.pointB !== null && "text-primary"), children: "B" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: abLoop.pointA === null ? "Set loop start (A)" : abLoop.pointB === null ? "Set loop end (B)" : "Clear A-B loop" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onLoopToggle, "data-active": loop, className: "data-[active=true]:text-primary", children: /* @__PURE__ */ jsx(RotateCcw, {}) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Loop" }) })
-        ] }),
-        pipSupported && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              onClick: onTogglePiP,
-              "aria-label": isPiP ? "Exit picture-in-picture" : "Enter picture-in-picture",
-              className: isPiP ? "text-primary" : "",
-              children: /* @__PURE__ */ jsx(PictureInPicture2, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: isPiP ? "Exit picture-in-picture" : "Enter picture-in-picture" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onFullScreenToggle, children: isFullScreen ? /* @__PURE__ */ jsx(Minimize, {}) : /* @__PURE__ */ jsx(Maximize, {}) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Fullscreen (F)" }) })
         ] })
-      ] })
-    ] })
-  ] }) });
+      ]
+    }
+  ) });
 });
 var player_controls_default = PlayerControls;
-var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -565,23 +652,23 @@ var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
     orientation,
     className: cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-[1px]",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/55 active:bg-muted-foreground/75 transition-colors" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-var Input = React10.forwardRef(
+var Input = React11.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -600,7 +687,7 @@ var Input = React10.forwardRef(
 Input.displayName = "Input";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -616,7 +703,7 @@ var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -629,7 +716,7 @@ var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -642,7 +729,7 @@ var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React10.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React11.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -670,7 +757,7 @@ var SelectContent = React10.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -679,7 +766,7 @@ var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -695,7 +782,7 @@ var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -714,7 +801,7 @@ var NEXT_SIZE = {
   md: "lg",
   lg: "sm"
 };
-function formatTime2(seconds) {
+function formatTime3(seconds) {
   if (!seconds || !isFinite(seconds)) return "";
   const h = Math.floor(seconds / 3600);
   const m = Math.floor(seconds % 3600 / 60);
@@ -743,7 +830,7 @@ function SortablePlaylistItem({ item, index, isActive, downloadReady, onSelect,
     transition,
     opacity: isDragging ? 0.5 : 1
   };
-  const duration = formatTime2(item.duration ?? 0);
+  const duration = formatTime3(item.duration ?? 0);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -897,296 +984,306 @@ var PlaylistPanel = ({
     });
     onReorder(sorted);
   };
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: !isOpen ? (
-    /* ── Collapsed drawer strip ── */
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center w-11 h-full bg-card border-l border-border shrink-0", children: [
-      /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-9 w-9 mt-2 shrink-0",
-            onClick: onToggle,
-            "aria-label": "Expand Playlist",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(TooltipContent, { side: "left", children: /* @__PURE__ */ jsx("p", { children: "Expand Playlist" }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none",
-          style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
-          children: "Playlist"
-        }
-      ) }),
-      playlist.length > 0 && /* @__PURE__ */ jsx("span", { className: "mb-3 text-[10px] font-bold text-primary bg-primary/10 rounded-full w-6 h-6 flex items-center justify-center shrink-0", children: playlist.length > 99 ? "99+" : playlist.length })
-    ] })
-  ) : (
-    /* ── Full panel ── */
-    /* @__PURE__ */ jsxs("div", { className: cn("h-full flex flex-col bg-card border-l border-border shrink-0 transition-[width] duration-200", SIZE_WIDTHS[size]), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-          /* @__PURE__ */ jsx(ListVideo, { className: "h-4 w-4 text-primary shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm truncate", children: "Playlist" }),
-          playlist.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground bg-muted rounded-full px-1.5 py-0.5 shrink-0 leading-none", children: playlist.length })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
-          playlist.length > 0 && /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-7 w-7",
-                onClick: () => exportPlaylist(playlist),
-                "aria-label": "Export Playlist",
-                children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Export as M3U8" }) })
-          ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-7 w-7",
-                onClick: () => m3uInputRef.current?.click(),
-                "aria-label": "Import Playlist",
-                children: /* @__PURE__ */ jsx(Upload, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Import M3U/M3U8" }) })
-          ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: cn("h-7 w-7", isPinned && "text-primary bg-primary/10"),
-                onClick: onTogglePin,
-                "aria-label": isPinned ? "Unpin Playlist" : "Pin Playlist",
-                children: isPinned ? /* @__PURE__ */ jsx(Pin, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(PinOff, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: isPinned ? "Unpin (allow auto-hide on play)" : "Pin (keep open while playing)" }) })
-          ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-7 w-7",
-                onClick: () => onSizeChange(NEXT_SIZE[size]),
-                "aria-label": "Resize Playlist",
-                children: size === "lg" ? /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: size === "lg" ? "Make smaller" : "Make larger" }) })
-          ] }),
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "h-full flex flex-col bg-card border-l border-border shrink-0 overflow-hidden",
+        "transition-[width] duration-300 ease-in-out motion-reduce:transition-none",
+        isOpen ? SIZE_WIDTHS[size] : "w-11"
+      ),
+      children: !isOpen ? (
+        /* ── Collapsed drawer strip ── */
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center w-11 h-full shrink-0", children: [
           /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "ghost",
                 size: "icon",
-                className: "h-7 w-7",
+                className: "h-9 w-9 mt-2 shrink-0",
                 onClick: onToggle,
-                "aria-label": "Collapse Playlist",
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+                "aria-label": "Expand Playlist",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
               }
             ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Collapse" }) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2 border-b border-border shrink-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsxs(Button, { onClick: () => fileInputRef.current?.click(), className: "flex-1 h-8 text-xs", children: [
-            /* @__PURE__ */ jsx(FilePlus, { className: "mr-1.5 h-3.5 w-3.5" }),
-            " Add Files"
+            /* @__PURE__ */ jsx(TooltipContent, { side: "left", children: /* @__PURE__ */ jsx("p", { children: "Expand Playlist" }) })
           ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "icon",
-                className: "h-8 w-8 shrink-0",
-                onClick: () => folderInputRef.current?.click(),
-                "aria-label": "Open Folder",
-                children: /* @__PURE__ */ jsx(FolderOpen, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Open Folder" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "file",
-            ref: fileInputRef,
-            className: "hidden",
-            multiple: true,
-            accept: "video/*,.mkv,.avi,.mov,.wmv,.flv,.webm,.vtt,.srt",
-            onChange: (e) => e.target.files && onFilesAdded(e.target.files)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "file",
-            ref: folderInputRef,
-            className: "hidden",
-            multiple: true,
-            accept: "video/*",
-            webkitdirectory: "",
-            onChange: handleFolderSelect
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "file",
-            ref: m3uInputRef,
-            className: "hidden",
-            accept: ".m3u,.m3u8",
-            onChange: handleM3USelect
-          }
-        ),
-        /* @__PURE__ */ jsxs("form", { onSubmit: handleStreamUrlSubmit, className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsx(
-            Input,
+          /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
+            "span",
             {
-              type: "url",
-              placeholder: "Enter stream URL",
-              value: streamUrl,
-              onChange: (e) => setStreamUrl(e.target.value),
-              className: "h-8 text-xs"
+              className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none",
+              style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
+              children: "Playlist"
             }
-          ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", size: "icon", variant: "secondary", className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5" }) }),
-          showMagnet && /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
+          ) }),
+          playlist.length > 0 && /* @__PURE__ */ jsx("span", { className: "mb-3 text-[10px] font-bold text-primary bg-primary/10 rounded-full w-6 h-6 flex items-center justify-center shrink-0", children: playlist.length > 99 ? "99+" : playlist.length })
+        ] })
+      ) : (
+        /* ── Full panel ── */
+        /* @__PURE__ */ jsxs("div", { className: cn("h-full flex flex-col shrink-0 transition-[width] duration-200", SIZE_WIDTHS[size]), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx(ListVideo, { className: "h-4 w-4 text-primary shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm truncate", children: "Playlist" }),
+              playlist.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground bg-muted rounded-full px-1.5 py-0.5 shrink-0 leading-none", children: playlist.length })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+              playlist.length > 0 && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: () => exportPlaylist(playlist),
+                    "aria-label": "Export Playlist",
+                    children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Export as M3U8" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: () => m3uInputRef.current?.click(),
+                    "aria-label": "Import Playlist",
+                    children: /* @__PURE__ */ jsx(Upload, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Import M3U/M3U8" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn("h-7 w-7", isPinned && "text-primary bg-primary/10"),
+                    onClick: onTogglePin,
+                    "aria-label": isPinned ? "Unpin Playlist" : "Pin Playlist",
+                    children: isPinned ? /* @__PURE__ */ jsx(Pin, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(PinOff, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: isPinned ? "Unpin (allow auto-hide on play)" : "Pin (keep open while playing)" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: () => onSizeChange(NEXT_SIZE[size]),
+                    "aria-label": "Resize Playlist",
+                    children: size === "lg" ? /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: size === "lg" ? "Make smaller" : "Make larger" }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: onToggle,
+                    "aria-label": "Collapse Playlist",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Collapse" }) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsxs(Button, { onClick: () => fileInputRef.current?.click(), className: "flex-1 h-8 text-xs", children: [
+                /* @__PURE__ */ jsx(FilePlus, { className: "mr-1.5 h-3.5 w-3.5" }),
+                " Add Files"
+              ] }),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "icon",
+                    className: "h-8 w-8 shrink-0",
+                    onClick: () => folderInputRef.current?.click(),
+                    "aria-label": "Open Folder",
+                    children: /* @__PURE__ */ jsx(FolderOpen, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Open Folder" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
               {
-                type: "button",
-                size: "icon",
-                variant: showMagnetInput ? "default" : "outline",
-                className: "h-8 w-8 shrink-0",
-                onClick: () => {
-                  setShowMagnetInput((v) => !v);
-                  setMagnetError(null);
-                },
-                "aria-label": "Add magnet link",
-                children: /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" })
+                type: "file",
+                ref: fileInputRef,
+                className: "hidden",
+                multiple: true,
+                accept: "video/*,.mkv,.avi,.mov,.wmv,.flv,.webm,.vtt,.srt",
+                onChange: (e) => e.target.files && onFilesAdded(e.target.files)
               }
-            ) }),
-            /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Add Magnet Link" }) })
-          ] })
-        ] }),
-        showMagnet && showMagnetInput && /* @__PURE__ */ jsxs("form", { onSubmit: handleMagnetSubmit, className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            ),
             /* @__PURE__ */ jsx(
-              Input,
+              "input",
               {
-                placeholder: "magnet:?xt=urn:btih:\u2026",
-                value: magnetUri,
-                onChange: (e) => {
-                  setMagnetUri(e.target.value);
-                  setMagnetError(null);
-                },
-                className: "h-8 text-xs font-mono",
-                disabled: torrentStatus.status === "loading-metadata"
+                type: "file",
+                ref: folderInputRef,
+                className: "hidden",
+                multiple: true,
+                accept: "video/*",
+                webkitdirectory: "",
+                onChange: handleFolderSelect
               }
             ),
             /* @__PURE__ */ jsx(
-              Button,
+              "input",
               {
-                type: "submit",
-                size: "icon",
-                variant: "default",
-                className: "h-8 w-8 shrink-0",
-                disabled: !magnetUri.trim() || torrentStatus.status === "loading-metadata",
-                "aria-label": "Load magnet link",
-                children: torrentStatus.status === "loading-metadata" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" })
+                type: "file",
+                ref: m3uInputRef,
+                className: "hidden",
+                accept: ".m3u,.m3u8",
+                onChange: handleM3USelect
               }
-            )
-          ] }),
-          torrentStatus.status === "loading-metadata" && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
-            "Fetching torrent info\u2026"
+            ),
+            /* @__PURE__ */ jsxs("form", { onSubmit: handleStreamUrlSubmit, className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "url",
+                  placeholder: "Enter stream URL",
+                  value: streamUrl,
+                  onChange: (e) => setStreamUrl(e.target.value),
+                  className: "h-8 text-xs"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "icon", variant: "secondary", className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5" }) }),
+              showMagnet && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: showMagnetInput ? "default" : "outline",
+                    className: "h-8 w-8 shrink-0",
+                    onClick: () => {
+                      setShowMagnetInput((v) => !v);
+                      setMagnetError(null);
+                    },
+                    "aria-label": "Add magnet link",
+                    children: /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: "Add Magnet Link" }) })
+              ] })
+            ] }),
+            showMagnet && showMagnetInput && /* @__PURE__ */ jsxs("form", { onSubmit: handleMagnetSubmit, className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "magnet:?xt=urn:btih:\u2026",
+                    value: magnetUri,
+                    onChange: (e) => {
+                      setMagnetUri(e.target.value);
+                      setMagnetError(null);
+                    },
+                    className: "h-8 text-xs font-mono",
+                    disabled: torrentStatus.status === "loading-metadata"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "icon",
+                    variant: "default",
+                    className: "h-8 w-8 shrink-0",
+                    disabled: !magnetUri.trim() || torrentStatus.status === "loading-metadata",
+                    "aria-label": "Load magnet link",
+                    children: torrentStatus.status === "loading-metadata" ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] }),
+              torrentStatus.status === "loading-metadata" && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+                "Fetching torrent info\u2026"
+              ] }),
+              magnetError && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-destructive flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 shrink-0" }),
+                magnetError
+              ] })
+            ] }),
+            showMagnet && torrentStatus.status === "ready" && (torrentStatus.progress >= 1 ? /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-emerald-500 flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Download, { className: "h-3 w-3 shrink-0" }),
+              "Download ready \u2014 hover a file to save it"
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "bg-emerald-500 h-1 rounded-full transition-all duration-500",
+                  style: { width: `${Math.round(torrentStatus.progress * 100)}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "\u2193 ",
+                  formatBytes(torrentStatus.downloadSpeed),
+                  "/s \xB7 ",
+                  torrentStatus.numPeers,
+                  " peer",
+                  torrentStatus.numPeers !== 1 ? "s" : ""
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  Math.round(torrentStatus.progress * 100),
+                  "%"
+                ] })
+              ] })
+            ] })),
+            playlist.length > 1 && /* @__PURE__ */ jsxs(Select, { value: sortKey, onValueChange: handleSort, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 text-xs", "aria-label": "Sort playlist", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by\u2026" }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "name-asc", children: "Name A\u2013Z" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "name-desc", children: "Name Z\u2013A" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "duration-asc", children: "Shortest first" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "duration-desc", children: "Longest first" })
+              ] })
+            ] })
           ] }),
-          magnetError && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-destructive flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 shrink-0" }),
-            magnetError
-          ] })
-        ] }),
-        showMagnet && torrentStatus.status === "ready" && (torrentStatus.progress >= 1 ? /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-emerald-500 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Download, { className: "h-3 w-3 shrink-0" }),
-          "Download ready \u2014 hover a file to save it"
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-            "div",
+          /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2 space-y-0.5", children: playlist.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center text-xs text-muted-foreground py-10 px-2", children: [
+            /* @__PURE__ */ jsx("p", { children: "Your playlist is empty." }),
+            /* @__PURE__ */ jsx("p", { children: "Add files or a stream URL to get started." })
+          ] }) : /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+            SortableContext,
             {
-              className: "bg-emerald-500 h-1 rounded-full transition-all duration-500",
-              style: { width: `${Math.round(torrentStatus.progress * 100)}%` }
+              items: playlist.map((i) => i.id),
+              strategy: verticalListSortingStrategy,
+              children: playlist.map((item, index) => /* @__PURE__ */ jsx(
+                SortablePlaylistItem,
+                {
+                  item,
+                  index,
+                  isActive: index === currentVideoIndex,
+                  downloadReady: item.source === "torrent" && torrentStatus.progress >= 1,
+                  onSelect: onSelectVideo,
+                  onRemove: onRemoveItem
+                },
+                item.id
+              ))
             }
-          ) }),
-          /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "\u2193 ",
-              formatBytes(torrentStatus.downloadSpeed),
-              "/s \xB7 ",
-              torrentStatus.numPeers,
-              " peer",
-              torrentStatus.numPeers !== 1 ? "s" : ""
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              Math.round(torrentStatus.progress * 100),
-              "%"
-            ] })
-          ] })
-        ] })),
-        playlist.length > 1 && /* @__PURE__ */ jsxs(Select, { value: sortKey, onValueChange: handleSort, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 text-xs", "aria-label": "Sort playlist", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by\u2026" }) }),
-          /* @__PURE__ */ jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsx(SelectItem, { value: "name-asc", children: "Name A\u2013Z" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "name-desc", children: "Name Z\u2013A" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "duration-asc", children: "Shortest first" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "duration-desc", children: "Longest first" })
-          ] })
+          ) }) }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2 space-y-0.5", children: playlist.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center text-xs text-muted-foreground py-10 px-2", children: [
-        /* @__PURE__ */ jsx("p", { children: "Your playlist is empty." }),
-        /* @__PURE__ */ jsx("p", { children: "Add files or a stream URL to get started." })
-      ] }) : /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
-        SortableContext,
-        {
-          items: playlist.map((i) => i.id),
-          strategy: verticalListSortingStrategy,
-          children: playlist.map((item, index) => /* @__PURE__ */ jsx(
-            SortablePlaylistItem,
-            {
-              item,
-              index,
-              isActive: index === currentVideoIndex,
-              downloadReady: item.source === "torrent" && torrentStatus.progress >= 1,
-              onSelect: onSelectVideo,
-              onRemove: onRemoveItem
-            },
-            item.id
-          ))
-        }
-      ) }) }) })
-    ] })
+      )
+    }
   ) });
 };
 var playlist_panel_default = PlaylistPanel;
@@ -1279,7 +1376,7 @@ function PlayerErrorDisplay({ error, onRetry, onSkip, onDismiss }) {
     ] })
   ] });
 }
-function formatTime3(seconds) {
+function formatTime4(seconds) {
   if (isNaN(seconds) || seconds === 0) return "\u2014";
   const h = Math.floor(seconds / 3600);
   const m = Math.floor(seconds % 3600 / 60);
@@ -1302,7 +1399,7 @@ function VideoInfoPanel({ metadata, onClose }) {
   const rows = [
     ["File", metadata.filename ? metadata.filename.split("/").pop() ?? metadata.filename : "\u2014"],
     ["Size", formatSize(metadata.fileSize)],
-    ["Duration", formatTime3(metadata.duration)],
+    ["Duration", formatTime4(metadata.duration)],
     ["Container", metadata.container || "\u2014"],
     ["Resolution", metadata.width && metadata.height ? `${metadata.width} \xD7 ${metadata.height}` : "\u2014"],
     ["Frame Rate", metadata.frameRate ? `${metadata.frameRate} fps` : "\u2014"],
@@ -1340,7 +1437,7 @@ function VideoInfoPanel({ metadata, onClose }) {
 }
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1352,7 +1449,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -1388,7 +1485,7 @@ var DialogHeader = ({
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -1400,7 +1497,7 @@ var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -1509,8 +1606,8 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React10.useState(memoryState);
-  React10.useEffect(() => {
+  const [state, setState] = React11.useState(memoryState);
+  React11.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -1706,7 +1803,7 @@ function SubtitleOverlay({ videoRef, activeSubtitle }) {
 }
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -1718,7 +1815,7 @@ var AlertDialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -1761,7 +1858,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -1770,7 +1867,7 @@ var AlertDialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -1779,7 +1876,7 @@ var AlertDialogDescription = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -1788,7 +1885,7 @@ var AlertDialogAction = React10.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -1857,6 +1954,8 @@ var LightBirdPlayer = () => {
   const [cancellableProcessing, setCancellableProcessing] = useState(false);
   const [mediaThumbnail, setMediaThumbnail] = useState(null);
   const [tracksLoading, setTracksLoading] = useState(false);
+  const abLoopCycleRef = useRef(() => {
+  });
   const shortcutHandlers = useMemo(() => ({
     "play-pause": () => playback.togglePlay(),
     "seek-forward-5": () => {
@@ -1906,9 +2005,13 @@ var LightBirdPlayer = () => {
         const prev = chapters[cur.index - 1];
         if (prev) el.currentTime = prev.startTime;
       }
-    }
+    },
+    "frame-step-forward": () => playback.frameStep("forward"),
+    "frame-step-backward": () => playback.frameStep("backward"),
+    "loop-toggle": () => playback.toggleLoop(),
+    "ab-loop-cycle": () => abLoopCycleRef.current()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [playback.togglePlay, playback.seek, playback.setVolume, playback.toggleMute, fullscreen.toggle, chapters, currentChapter]);
+  }), [playback.togglePlay, playback.seek, playback.setVolume, playback.toggleMute, playback.frameStep, playback.toggleLoop, fullscreen.toggle, chapters, currentChapter]);
   useKeyboardShortcuts(shortcuts, shortcutHandlers);
   const stopStallDetection = () => {
     if (streamStallDetectorRef.current) {
@@ -2311,6 +2414,9 @@ var LightBirdPlayer = () => {
     else if (abLoop.pointB === null) abLoop.setPointB();
     else abLoop.clear();
   }, [abLoop.pointA, abLoop.pointB, abLoop.setPointA, abLoop.setPointB, abLoop.clear]);
+  useEffect(() => {
+    abLoopCycleRef.current = handleABLoopCycle;
+  }, [handleABLoopCycle]);
   const abLoopState = useMemo(
     () => ({ pointA: abLoop.pointA, pointB: abLoop.pointB, isLooping: abLoop.isLooping }),
     [abLoop.pointA, abLoop.pointB, abLoop.isLooping]
@@ -2439,9 +2545,11 @@ var LightBirdPlayer = () => {
               )
             }
           ),
-          playlist.currentItem && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             player_controls_default,
             {
+              isDisabled: !playlist.currentItem,
+              videoRef,
               isPlaying: playback.isPlaying,
               progress: playback.progress,
               duration: playback.duration,
@@ -2510,9 +2618,17 @@ var LightBirdPlayer = () => {
               }
             }
           ),
-          !playlist.currentItem && !isLoading && !loadingMessage && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "LightBird Player" }),
-            /* @__PURE__ */ jsx("p", { children: "Add a local file or stream to begin." })
+          !playlist.currentItem && !isLoading && !loadingMessage && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center max-w-sm", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "flex h-16 w-16 items-center justify-center rounded-full bg-accent/10 ring-1 ring-accent/30",
+                children: /* @__PURE__ */ jsx(Film, { className: "h-7 w-7", style: { color: "hsl(var(--accent))" } })
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mt-5 text-lg font-medium text-foreground", children: "No video loaded" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Drop files anywhere, or pick a source from the playlist panel." })
           ] }) })
         ]
       }
@@ -2595,7 +2711,7 @@ var PlayerErrorBoundary = class extends Component {
   }
 };
 var ToastProvider = ToastPrimitives.Provider;
-var ToastViewport = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastViewport = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Viewport,
   {
     ref,
@@ -2621,7 +2737,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React10.forwardRef(({ className, variant, ...props }, ref) => {
+var Toast = React11.forwardRef(({ className, variant, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
     {
@@ -2632,7 +2748,7 @@ var Toast = React10.forwardRef(({ className, variant, ...props }, ref) => {
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-var ToastAction = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Action,
   {
     ref,
@@ -2644,7 +2760,7 @@ var ToastAction = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastClose = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Close,
   {
     ref,
@@ -2658,7 +2774,7 @@ var ToastClose = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-var ToastTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Title,
   {
     ref,
@@ -2667,7 +2783,7 @@ var ToastTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Description,
   {
     ref,