@lightbird/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2247 @@
+"use client";
+import * as React10 from 'react';
+import React10__default, { useMemo, useState, useRef, useEffect, useCallback, Component } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+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, AlertCircle, GripVertical, Tv } 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';
+import { CSS } from '@dnd-kit/utilities';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { exportPlaylist, formatShortcutKey, loadShortcuts, ProgressEstimator, createVideoPlayer, CancellationError, 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, useVideoInfo, useProgressPersistence, useChapters, useKeyboardShortcuts, useMediaSession } from '@lightbird/core/react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Slider = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...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" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React10.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+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(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+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(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+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(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+var RadioGroup = React10.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React10.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+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 PlayerControls = React10__default.memo(function PlayerControls2({
+  isPlaying,
+  progress,
+  duration,
+  volume,
+  isMuted,
+  playbackRate,
+  loop,
+  isFullScreen,
+  filters,
+  zoom,
+  subtitles,
+  activeSubtitle,
+  audioTracks,
+  activeAudioTrack,
+  chapters = [],
+  currentChapter = null,
+  onPlayPause,
+  onSeek,
+  onVolumeChange,
+  onMuteToggle,
+  onPlaybackRateChange,
+  onLoopToggle,
+  onFullScreenToggle,
+  onFrameStep,
+  onScreenshot,
+  onNext,
+  onPrevious,
+  onFiltersChange,
+  onZoomChange,
+  onSubtitleChange,
+  onAudioTrackChange,
+  tracksLoading = false,
+  onSubtitleUpload,
+  onSubtitleRemove,
+  onShowInfo,
+  onOpenShortcuts,
+  onGoToChapter,
+  onTogglePiP,
+  isPiP = false,
+  pipSupported = false
+}) {
+  const formattedProgress = useMemo(() => formatTime(progress), [progress]);
+  const formattedDuration = useMemo(() => formatTime(duration), [duration]);
+  const [chaptersMenuOpen, setChaptersMenuOpen] = useState(false);
+  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", children: [
+      /* @__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))
+    ] }),
+    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,
+                {
+                  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" })
+          ] }) })
+        ] }),
+        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(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__ */ jsx(Slider, { value: [filters.brightness], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, brightness: val }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Label, { children: [
+                "Contrast: ",
+                filters.contrast,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx(Slider, { value: [filters.contrast], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, contrast: val }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Label, { children: [
+                "Saturation: ",
+                filters.saturate,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx(Slider, { value: [filters.saturate], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, saturate: val }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Label, { children: [
+                "Hue: ",
+                filters.hue,
+                "\xB0"
+              ] }),
+              /* @__PURE__ */ jsx(Slider, { value: [filters.hue], max: 360, onValueChange: ([val]) => onFiltersChange({ ...filters, hue: val }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Label, { children: [
+                "Zoom: ",
+                Math.round(zoom * 100),
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx(Slider, { value: [zoom], min: 1, max: 3, step: 0.1, onValueChange: ([val]) => onZoomChange(val) })
+            ] })
+          ] })
+        ] }),
+        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" }) })
+        ] }),
+        /* @__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(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React10.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]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+var Input = React10.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React10.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var SIZE_WIDTHS = {
+  sm: "w-60",
+  md: "w-80",
+  lg: "w-96"
+};
+var NEXT_SIZE = {
+  sm: "md",
+  md: "lg",
+  lg: "sm"
+};
+function formatTime2(seconds) {
+  if (!seconds || !isFinite(seconds)) return "";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+var VIDEO_EXTENSIONS_RE = /\.(mp4|mkv|webm|mov|avi|wmv|flv|m4v)$/i;
+function SortablePlaylistItem({ item, index, isActive, onSelect, onRemove }) {
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: item.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const duration = formatTime2(item.duration ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "flex items-center gap-1 p-1.5 rounded-md text-xs group",
+        "hover:bg-muted transition-colors",
+        isActive ? "bg-primary/20 text-primary-foreground" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...attributes,
+            ...listeners2,
+            className: "shrink-0 cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-0.5",
+            "aria-label": "Drag to reorder",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "w-3 h-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onSelect(index),
+            className: "flex-1 flex items-center gap-1.5 min-w-0 text-left",
+            "aria-label": `Play ${item.name}`,
+            children: [
+              item.type === "video" ? /* @__PURE__ */ jsx(ListVideo, { className: "w-3.5 h-3.5 shrink-0" }) : /* @__PURE__ */ jsx(Tv, { className: "w-3.5 h-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: item.name }),
+              duration && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-auto shrink-0 pl-1", children: duration })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(index);
+            },
+            className: "shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-0.5",
+            "aria-label": "Remove from playlist",
+            children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3 text-muted-foreground hover:text-destructive" })
+          }
+        )
+      ]
+    }
+  );
+}
+var PlaylistPanel = ({
+  playlist,
+  currentVideoIndex,
+  onSelectVideo,
+  onFilesAdded,
+  onFolderFilesAdded,
+  onAddStream,
+  onRemoveItem,
+  onReorder,
+  onImportM3U,
+  isOpen,
+  isPinned,
+  size,
+  onToggle,
+  onTogglePin,
+  onSizeChange
+}) => {
+  const fileInputRef = useRef(null);
+  const folderInputRef = useRef(null);
+  const m3uInputRef = useRef(null);
+  const [streamUrl, setStreamUrl] = useState("");
+  const [sortKey, setSortKey] = useState("");
+  const handleStreamUrlSubmit = (e) => {
+    e.preventDefault();
+    if (streamUrl) {
+      onAddStream(streamUrl);
+      setStreamUrl("");
+    }
+  };
+  const handleFolderSelect = (e) => {
+    const files = Array.from(e.target.files ?? []).filter((f) => VIDEO_EXTENSIONS_RE.test(f.name)).sort((a, b) => a.name.localeCompare(b.name, void 0, { numeric: true }));
+    if (files.length > 0) onFolderFilesAdded(files);
+    e.target.value = "";
+  };
+  const handleM3USelect = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const text = await file.text();
+    const items = parseM3U8(text);
+    if (items.length > 0) onImportM3U(items);
+    e.target.value = "";
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = playlist.findIndex((item) => item.id === active.id);
+    const newIndex = playlist.findIndex((item) => item.id === over.id);
+    if (oldIndex !== -1 && newIndex !== -1) {
+      onReorder(arrayMove(playlist, oldIndex, newIndex));
+    }
+  };
+  const handleSort = (value) => {
+    setSortKey(value);
+    const sorted = [...playlist].sort((a, b) => {
+      switch (value) {
+        case "name-asc":
+          return a.name.localeCompare(b.name, void 0, { numeric: true });
+        case "name-desc":
+          return b.name.localeCompare(a.name, void 0, { numeric: true });
+        case "duration-asc":
+          return (a.duration ?? 0) - (b.duration ?? 0);
+        case "duration-desc":
+          return (b.duration ?? 0) - (a.duration ?? 0);
+        default:
+          return 0;
+      }
+    });
+    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" }) })
+          ] }),
+          /* @__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: "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,
+            {
+              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" }) })
+        ] }),
+        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,
+              onSelect: onSelectVideo,
+              onRemove: onRemoveItem
+            },
+            item.id
+          ))
+        }
+      ) }) }) })
+    ] })
+  ) });
+};
+var playlist_panel_default = PlaylistPanel;
+function VideoOverlay({ isLoading, loadingMessage, processingProgress = 0, eta, throughputMBs, onCancel }) {
+  if (!isLoading && !loadingMessage) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center text-white z-10", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-16 h-16 border-4 border-t-transparent border-primary rounded-full animate-spin" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg max-w-sm text-center", children: loadingMessage || "Processing video..." }),
+    processingProgress > 0 && processingProgress < 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-4 w-64 bg-gray-700 rounded-full h-2", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-primary h-2 rounded-full transition-all duration-300",
+          style: { width: `${Math.round(processingProgress * 100)}%` }
+        }
+      ) }),
+      throughputMBs !== null && throughputMBs !== void 0 && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-white/60", children: [
+        throughputMBs,
+        " MB/s",
+        eta !== null && eta !== void 0 && ` \xB7 ~${eta}s left`
+      ] })
+    ] }),
+    onCancel && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onCancel,
+        className: "mt-3 px-4 py-1.5 text-sm rounded border border-white/30 text-white/80 hover:bg-white/10 transition-colors",
+        children: "Cancel"
+      }
+    )
+  ] });
+}
+function PlayerErrorDisplay({ error, onRetry, onSkip, onDismiss }) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/80 z-10", children: [
+    /* @__PURE__ */ jsx(AlertCircle, { className: "w-12 h-12 text-red-500 mb-4" }),
+    /* @__PURE__ */ jsx("h3", { className: "text-white text-lg font-semibold mb-2", children: "Playback Error" }),
+    /* @__PURE__ */ jsx("p", { className: "text-gray-300 text-sm text-center max-w-xs mb-6", children: error.message }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      error.retryable && onRetry && /* @__PURE__ */ jsx(Button, { onClick: onRetry, variant: "outline", children: "Retry" }),
+      onSkip && /* @__PURE__ */ jsx(Button, { onClick: onSkip, variant: "outline", children: "Skip to Next" }),
+      onDismiss && /* @__PURE__ */ jsx(Button, { onClick: onDismiss, children: "Dismiss" })
+    ] })
+  ] });
+}
+function formatTime3(seconds) {
+  if (isNaN(seconds) || seconds === 0) return "\u2014";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+function formatSize(bytes) {
+  if (!bytes) return "\u2014";
+  if (bytes > 1e9) return `${(bytes / 1e9).toFixed(2)} GB`;
+  if (bytes > 1e6) return `${(bytes / 1e6).toFixed(1)} MB`;
+  return `${(bytes / 1e3).toFixed(0)} KB`;
+}
+function formatBitrate(bps) {
+  if (!bps) return "\u2014";
+  return bps > 1e6 ? `${(bps / 1e6).toFixed(1)} Mbps` : `${(bps / 1e3).toFixed(0)} Kbps`;
+}
+function VideoInfoPanel({ metadata, onClose }) {
+  if (!metadata) return null;
+  const rows = [
+    ["File", metadata.filename ? metadata.filename.split("/").pop() ?? metadata.filename : "\u2014"],
+    ["Size", formatSize(metadata.fileSize)],
+    ["Duration", formatTime3(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"],
+    ["Video Codec", metadata.videoCodec ?? "\u2014"],
+    ["Video Bitrate", formatBitrate(metadata.videoBitrate)],
+    ...metadata.audioTracks.map(
+      (t, i) => [
+        `Audio ${i + 1}`,
+        [
+          t.codec ?? "?",
+          t.channels ? `${t.channels}ch` : null,
+          t.sampleRate ? `${(t.sampleRate / 1e3).toFixed(1)} kHz` : null
+        ].filter(Boolean).join(" \xB7 ")
+      ]
+    )
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-4 z-40 bg-black/85 text-white rounded-lg p-4 text-xs w-72", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: "Video Information" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-muted-foreground hover:text-white",
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { children: rows.map(([label, value]) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-white/10 last:border-0", children: [
+      /* @__PURE__ */ jsx("td", { className: "py-1 pr-3 text-muted-foreground whitespace-nowrap", children: label }),
+      /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono break-all", children: value || "\u2014" })
+    ] }, label)) }) })
+  ] });
+}
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var TOAST_LIMIT = 1;
+var TOAST_REMOVE_DELAY = 1e6;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+var addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId
+    });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast2) => {
+          addToRemoveQueue(toast2.id);
+        });
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? {
+            ...t,
+            open: false
+          } : t
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) {
+        return {
+          ...state,
+          toasts: []
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+};
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+function toast({ ...props }) {
+  const id = genId();
+  const update = (props2) => dispatch({
+    type: "UPDATE_TOAST",
+    toast: { ...props2, id }
+  });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      }
+    }
+  });
+  return {
+    id,
+    dismiss,
+    update
+  };
+}
+function useToast() {
+  const [state, setState] = React10.useState(memoryState);
+  React10.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
+  };
+}
+function ShortcutSettingsDialog({
+  shortcuts,
+  onSave,
+  onClose
+}) {
+  const [editing, setEditing] = useState(shortcuts);
+  const [capturing, setCapturing] = useState(null);
+  const { toast: toast2 } = useToast();
+  useEffect(() => {
+    if (!capturing) return;
+    const handler = (e) => {
+      e.preventDefault();
+      if (e.key === "Escape") {
+        setCapturing(null);
+        return;
+      }
+      const conflict = editing.find(
+        (b) => b.action !== capturing && matchesShortcut(e, {
+          ...b,
+          key: e.key,
+          modifiers: {
+            ctrl: e.ctrlKey,
+            shift: e.shiftKey,
+            alt: e.altKey
+          }
+        })
+      );
+      if (conflict) {
+        toast2({
+          title: `Conflicts with "${conflict.label}"`,
+          variant: "destructive"
+        });
+        return;
+      }
+      setEditing(
+        (prev) => prev.map(
+          (b) => b.action === capturing ? {
+            ...b,
+            key: e.key,
+            modifiers: {
+              ctrl: e.ctrlKey,
+              shift: e.shiftKey,
+              alt: e.altKey
+            }
+          } : b
+        )
+      );
+      setCapturing(null);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [capturing, editing, toast2]);
+  const handleSave = () => {
+    saveShortcuts(editing);
+    onSave(editing);
+    onClose();
+  };
+  const handleReset = () => {
+    setEditing(DEFAULT_SHORTCUTS);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Keyboard Shortcuts" }) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 max-h-96 overflow-y-auto", children: editing.map((binding) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between py-1 px-2 rounded hover:bg-muted",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm", children: binding.label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setCapturing(binding.action),
+              className: `font-mono text-xs px-2 py-1 rounded border ${capturing === binding.action ? "border-primary animate-pulse" : "border-muted-foreground"}`,
+              children: capturing === binding.action ? "Press key..." : formatShortcutKey(binding)
+            }
+          )
+        ]
+      },
+      binding.action
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end mt-4", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleReset, children: "Reset to Defaults" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: "Save" })
+    ] })
+  ] }) });
+}
+function SubtitleOverlay({ videoRef, activeSubtitle }) {
+  const [cueText, setCueText] = useState("");
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || activeSubtitle === "-1") {
+      setCueText("");
+      return;
+    }
+    let cueChangeCleanup = null;
+    function subscribeToTrack() {
+      const trackElements = Array.from(video.querySelectorAll("track"));
+      const targetIdx = trackElements.findIndex(
+        (el) => el.getAttribute("data-id") === activeSubtitle
+      );
+      if (targetIdx === -1) return false;
+      const textTrack = trackElements[targetIdx].track;
+      if (!textTrack) return false;
+      const handleCueChange = () => {
+        const activeCues = textTrack.activeCues;
+        if (!activeCues || activeCues.length === 0) {
+          setCueText("");
+          return;
+        }
+        const texts = [];
+        for (let i = 0; i < activeCues.length; i++) {
+          const cue = activeCues[i];
+          const cleaned = cue.text.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "");
+          texts.push(cleaned);
+        }
+        setCueText(texts.join("\n"));
+      };
+      function seedFromCurrentTime() {
+        const allCues = textTrack.cues;
+        if (!allCues) return;
+        const currentTime = video.currentTime;
+        const texts = [];
+        for (let i = 0; i < allCues.length; i++) {
+          const cue = allCues[i];
+          if (cue.startTime <= currentTime && cue.endTime > currentTime) {
+            texts.push(
+              cue.text.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "")
+            );
+          }
+        }
+        setCueText(texts.join("\n"));
+      }
+      textTrack.addEventListener("cuechange", handleCueChange);
+      const trackEl = trackElements[targetIdx];
+      if (trackEl.readyState === 2) {
+        seedFromCurrentTime();
+      } else {
+        const onLoad = () => {
+          seedFromCurrentTime();
+          trackEl.removeEventListener("load", onLoad);
+        };
+        trackEl.addEventListener("load", onLoad);
+      }
+      cueChangeCleanup = () => {
+        textTrack.removeEventListener("cuechange", handleCueChange);
+        setCueText("");
+      };
+      return true;
+    }
+    if (subscribeToTrack()) {
+      return () => cueChangeCleanup?.();
+    }
+    const observer = new MutationObserver(() => {
+      if (subscribeToTrack()) {
+        observer.disconnect();
+      }
+    });
+    observer.observe(video, { childList: true });
+    return () => {
+      observer.disconnect();
+      cueChangeCleanup?.();
+    };
+  }, [videoRef, activeSubtitle]);
+  if (!cueText) return null;
+  return /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 bottom-4 flex justify-center pointer-events-none z-10 px-8 translate-y-0 group-hover:-translate-y-24 transition-transform duration-300 ease-in-out", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "text-white text-center whitespace-pre-line",
+      style: {
+        fontSize: "2em",
+        lineHeight: "normal",
+        fontWeight: "bolder",
+        fontFamily: "Netflix Sans, Helvetica Neue, Helvetica, Arial, sans-serif",
+        textShadow: "#000000 0px 0px 7px"
+      },
+      children: cueText
+    }
+  ) });
+}
+var MAX_RETRIES = 3;
+var LightBirdPlayer = () => {
+  const videoRef = useRef(null);
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const subtitleInputRef = useRef(null);
+  const playerRef = useRef(null);
+  const subtitleFilesMapRef = useRef(/* @__PURE__ */ new Map());
+  const retryCountRef = useRef(0);
+  const retryTimerRef = useRef(null);
+  const streamStallDetectorRef = useRef(null);
+  const isStreamRef = useRef(false);
+  const { toast: toast2 } = useToast();
+  const playlist = usePlaylist();
+  const playback = useVideoPlayback(videoRef);
+  const filters = useVideoFilters(videoRef);
+  const subtitles = useSubtitles({
+    onError: (msg) => toast2({ title: msg, variant: "destructive" }),
+    onSuccess: (msg) => toast2({ title: msg })
+  });
+  const fullscreen = useFullscreen(containerRef);
+  const pip = usePictureInPicture(videoRef);
+  const { metadata: videoMetadata } = useVideoInfo(videoRef, playlist.currentItem?.file ?? null);
+  useProgressPersistence(videoRef, playlist.currentItem?.name ?? null);
+  const { chapters, currentChapter, goToChapter } = useChapters(videoRef, playerRef);
+  const [shortcuts, setShortcuts] = useState(() => loadShortcuts());
+  const [showShortcutsHelp, setShowShortcutsHelp] = useState(false);
+  const [showShortcutsDialog, setShowShortcutsDialog] = useState(false);
+  const [showInfo, setShowInfo] = useState(false);
+  const progressEstimatorRef = useRef(null);
+  const [audioTracks, setAudioTracks] = useState([]);
+  const [activeAudioTrack, setActiveAudioTrack] = useState("0");
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingMessage, setLoadingMessage] = useState("");
+  const [processingProgress, setProcessingProgress] = useState(0);
+  const [processingEta, setProcessingEta] = useState(null);
+  const [processingThroughput, setProcessingThroughput] = useState(null);
+  const [playerError, setPlayerError] = useState(null);
+  const [cancellableProcessing, setCancellableProcessing] = useState(false);
+  const [mediaThumbnail, setMediaThumbnail] = useState(null);
+  const [tracksLoading, setTracksLoading] = useState(false);
+  const shortcutHandlers = useMemo(() => ({
+    "play-pause": () => playback.togglePlay(),
+    "seek-forward-5": () => {
+      const el = videoRef.current;
+      if (el) playback.seek(el.currentTime + 5);
+    },
+    "seek-backward-5": () => {
+      const el = videoRef.current;
+      if (el) playback.seek(el.currentTime - 5);
+    },
+    "seek-forward-30": () => {
+      const el = videoRef.current;
+      if (el) playback.seek(el.currentTime + 30);
+    },
+    "seek-backward-30": () => {
+      const el = videoRef.current;
+      if (el) playback.seek(el.currentTime - 30);
+    },
+    "volume-up": () => {
+      const el = videoRef.current;
+      if (el) playback.setVolume(Math.min(1, el.volume + 0.05));
+    },
+    "volume-down": () => {
+      const el = videoRef.current;
+      if (el) playback.setVolume(Math.max(0, el.volume - 0.05));
+    },
+    "mute": () => playback.toggleMute(),
+    "fullscreen": () => fullscreen.toggle(),
+    "next-item": () => handleNext(),
+    "prev-item": () => handlePrevious(),
+    "screenshot": () => captureScreenshot(),
+    "show-shortcuts": () => setShowShortcutsHelp((v) => !v),
+    "next-chapter": () => {
+      const el = videoRef.current;
+      if (!el || chapters.length === 0) return;
+      const next = chapters.find((c) => c.startTime > el.currentTime);
+      if (next) el.currentTime = next.startTime;
+    },
+    "prev-chapter": () => {
+      const el = videoRef.current;
+      if (!el || chapters.length === 0) return;
+      const cur = currentChapter;
+      if (!cur) return;
+      if (el.currentTime > cur.startTime + 3) {
+        el.currentTime = cur.startTime;
+      } else {
+        const prev = chapters[cur.index - 1];
+        if (prev) el.currentTime = prev.startTime;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [playback.togglePlay, playback.seek, playback.setVolume, playback.toggleMute, fullscreen.toggle, chapters, currentChapter]);
+  useKeyboardShortcuts(shortcuts, shortcutHandlers);
+  const stopStallDetection = () => {
+    if (streamStallDetectorRef.current) {
+      clearInterval(streamStallDetectorRef.current);
+      streamStallDetectorRef.current = null;
+    }
+  };
+  const startStallDetection = () => {
+    stopStallDetection();
+    let lastTime = -1;
+    streamStallDetectorRef.current = setInterval(() => {
+      const el = videoRef.current;
+      if (!el) return;
+      const current = el.currentTime;
+      if (!el.paused && current === lastTime) {
+        const resumeAt = current;
+        el.load();
+        el.addEventListener(
+          "canplay",
+          () => {
+            el.currentTime = resumeAt;
+            el.play().catch(() => {
+            });
+          },
+          { once: true }
+        );
+      }
+      lastTime = current;
+    }, 5e3);
+  };
+  const clearRetryTimer = () => {
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = null;
+    }
+  };
+  const [playlistOpen, setPlaylistOpen] = useState(true);
+  const [playlistPinned, setPlaylistPinned] = useState(false);
+  const [playlistSize, setPlaylistSize] = useState("md");
+  const wasAutoHiddenRef = useRef(false);
+  const processFile = useCallback(async (file, subtitleFiles = []) => {
+    setIsLoading(true);
+    setLoadingMessage("Initializing player...");
+    setProcessingProgress(0);
+    setPlayerError(null);
+    setTracksLoading(false);
+    progressEstimatorRef.current = new ProgressEstimator(file.size);
+    setProcessingEta(null);
+    setProcessingThroughput(null);
+    retryCountRef.current = 0;
+    isStreamRef.current = false;
+    stopStallDetection();
+    try {
+      playerRef.current?.destroy();
+      subtitles.reset();
+      const player = createVideoPlayer(file, subtitleFiles, (progress) => {
+        progressEstimatorRef.current?.update(progress);
+        const est = progressEstimatorRef.current?.getEstimate();
+        setProcessingProgress(progress);
+        if (progress < 1) {
+          setLoadingMessage(`Processing video\u2026 ${Math.round(progress * 100)}%`);
+          setProcessingEta(est?.etaSeconds ?? null);
+          setProcessingThroughput(est && est.speedMBps > 0 ? est.speedMBps : null);
+        }
+      });
+      playerRef.current = player;
+      setCancellableProcessing(true);
+      try {
+        if (!videoRef.current) throw new Error("Video element not available");
+        setLoadingMessage("Loading video...");
+        await player.initialize(videoRef.current);
+      } finally {
+        setCancellableProcessing(false);
+      }
+      subtitles.initManager(videoRef.current);
+      subtitles.importSubtitles(player.getSubtitles());
+      const newAudioTracks = player.getAudioTracks();
+      setAudioTracks(newAudioTracks);
+      setActiveAudioTrack(newAudioTracks[0]?.id || "0");
+      setIsLoading(false);
+      setLoadingMessage("");
+      setProcessingProgress(0);
+      if (player.tracksReady) {
+        setTracksLoading(true);
+        player.tracksReady.then(() => {
+          if (playerRef.current !== player) {
+            setTracksLoading(false);
+            return;
+          }
+          subtitles.importSubtitles(player.getSubtitles());
+          const updatedTracks = player.getAudioTracks();
+          setAudioTracks(updatedTracks);
+          setActiveAudioTrack(updatedTracks[0]?.id || "0");
+          setTracksLoading(false);
+        }).catch(() => {
+          setTracksLoading(false);
+        });
+      }
+    } catch (error) {
+      if (!(error instanceof CancellationError)) {
+        console.error(error);
+        toast2({
+          title: "Failed to process video",
+          description: "There was an error loading the video file. It might be an unsupported format.",
+          variant: "destructive"
+        });
+      }
+      setIsLoading(false);
+      setLoadingMessage("");
+      setProcessingProgress(0);
+    } finally {
+      progressEstimatorRef.current = null;
+      setProcessingEta(null);
+      setProcessingThroughput(null);
+    }
+  }, [subtitles, toast2]);
+  const handleCancelProcessing = useCallback(() => {
+    playerRef.current?.cancel?.();
+    playerRef.current = null;
+    setCancellableProcessing(false);
+    setIsLoading(false);
+    setLoadingMessage("");
+    setProcessingProgress(0);
+  }, []);
+  const loadVideo = useCallback((index) => {
+    const item = playlist.playlist[index];
+    if (!item) return;
+    playlist.selectItem(index);
+    setPlayerError(null);
+    clearRetryTimer();
+    retryCountRef.current = 0;
+    if (item.type === "stream") {
+      playerRef.current?.destroy();
+      playerRef.current = null;
+      if (videoRef.current) videoRef.current.src = item.url;
+      subtitles.reset();
+      setAudioTracks([]);
+      setActiveAudioTrack("0");
+      isStreamRef.current = true;
+      startStallDetection();
+    } else if (item.file) {
+      isStreamRef.current = false;
+      stopStallDetection();
+      const subs = subtitleFilesMapRef.current.get(item.name) ?? [];
+      processFile(item.file, subs);
+    }
+  }, [playlist.playlist, playlist.selectItem, subtitles, processFile]);
+  const handleSkipToNext = useCallback(() => {
+    setPlayerError(null);
+    clearRetryTimer();
+    if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
+      loadVideo((playlist.currentIndex + 1) % playlist.playlist.length);
+    }
+  }, [playlist.currentIndex, playlist.playlist.length, loadVideo]);
+  const handleRetry = useCallback(() => {
+    setPlayerError(null);
+    clearRetryTimer();
+    retryCountRef.current = 0;
+    if (videoRef.current) {
+      videoRef.current.load();
+    }
+  }, []);
+  const handleDismissError = useCallback(() => {
+    setPlayerError(null);
+    clearRetryTimer();
+  }, []);
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    const onError = () => {
+      const parsed = parseMediaError(el.error ?? null);
+      setPlayerError(parsed);
+      if (parsed.retryable && retryCountRef.current < MAX_RETRIES) {
+        const delay = Math.pow(2, retryCountRef.current) * 1e3;
+        retryTimerRef.current = setTimeout(() => {
+          retryCountRef.current += 1;
+          el.load();
+        }, delay);
+      } else if (!parsed.recoverable) {
+        toast2({ title: "Skipping unplayable file", description: parsed.message });
+        if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
+          loadVideo((playlist.currentIndex + 1) % playlist.playlist.length);
+        }
+      }
+    };
+    el.addEventListener("error", onError);
+    return () => el.removeEventListener("error", onError);
+  }, [playlist.currentIndex, playlist.playlist.length]);
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    const onEnded = () => {
+      if (playback.loop) {
+        el.currentTime = 0;
+        el.play().catch(() => {
+        });
+      } else if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
+        loadVideo((playlist.currentIndex + 1) % playlist.playlist.length);
+      }
+    };
+    el.addEventListener("ended", onEnded);
+    return () => el.removeEventListener("ended", onEnded);
+  }, [playback.loop, playlist.currentIndex, playlist.playlist.length, loadVideo]);
+  useEffect(() => {
+    return () => {
+      playerRef.current?.destroy();
+      clearRetryTimer();
+      stopStallDetection();
+    };
+  }, []);
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el || !playlist.currentItem) {
+      setMediaThumbnail(null);
+      return;
+    }
+    setMediaThumbnail(null);
+    let cancelled = false;
+    const onLoadedData = () => {
+      captureVideoThumbnail(el).then((dataUrl) => {
+        if (!cancelled) setMediaThumbnail(dataUrl);
+      });
+    };
+    el.addEventListener("loadeddata", onLoadedData);
+    return () => {
+      cancelled = true;
+      el.removeEventListener("loadeddata", onLoadedData);
+    };
+  }, [playlist.currentItem]);
+  useEffect(() => {
+    if (playback.isPlaying) {
+      if (!playlistPinned) {
+        setPlaylistOpen((current) => {
+          if (current) wasAutoHiddenRef.current = true;
+          return current ? false : current;
+        });
+      }
+    } else if (wasAutoHiddenRef.current) {
+      setPlaylistOpen(true);
+      wasAutoHiddenRef.current = false;
+    }
+  }, [playback.isPlaying, playlistPinned]);
+  const handleFileChange = async (files) => {
+    const { videoFiles, subtitleFiles } = playlist.parseFiles(files);
+    if (videoFiles.length === 0) return;
+    const validVideoFiles = [];
+    for (const file of videoFiles) {
+      const validation = validateFile(file);
+      if (!validation.valid) {
+        toast2({ title: "Cannot load file", description: validation.reason, variant: "destructive" });
+      } else {
+        validVideoFiles.push(file);
+      }
+    }
+    if (validVideoFiles.length === 0) return;
+    if (subtitleFiles.length > 0) {
+      subtitleFilesMapRef.current.set(validVideoFiles[0].name, subtitleFiles);
+    }
+    const prevLen = playlist.playlist.length;
+    await playlist.addFiles(validVideoFiles);
+    if (playlist.currentIndex === null) {
+      playlist.selectItem(prevLen);
+      await processFile(validVideoFiles[0], subtitleFiles);
+    }
+  };
+  const handleFolderFilesAdded = useCallback(
+    async (files) => {
+      const prevLen = playlist.playlist.length;
+      await playlist.addFiles(files);
+      if (playlist.currentIndex === null && files.length > 0) {
+        const newIndex = prevLen;
+        playlist.selectItem(newIndex);
+        await processFile(files[0]);
+      }
+    },
+    [playlist, processFile]
+  );
+  const handleRemoveItem = useCallback((index) => {
+    playlist.removeItem(index);
+  }, [playlist]);
+  const handleReorder = useCallback(
+    (newPlaylist) => {
+      playlist.reorderItems(newPlaylist);
+    },
+    [playlist]
+  );
+  const handleImportM3U = useCallback(
+    (items) => {
+      items.forEach((item) => {
+        playlist.appendItem({ ...item, id: crypto.randomUUID() });
+      });
+      if (playlist.currentIndex === null && items.length > 0) {
+        const firstStream = items.find((i) => i.type === "stream");
+        if (firstStream && videoRef.current) {
+          playlist.selectItem(0);
+          videoRef.current.src = firstStream.url;
+          subtitles.reset();
+        }
+      }
+    },
+    [playlist, subtitles]
+  );
+  const handleAddStream = useCallback((url, name) => {
+    const newIndex = playlist.playlist.length;
+    const newItem = {
+      id: crypto.randomUUID(),
+      name: name || `Stream ${newIndex + 1}`,
+      url,
+      type: "stream"
+    };
+    playlist.appendItem(newItem);
+    if (playlist.currentIndex === null) {
+      playlist.selectItem(newIndex);
+      if (videoRef.current) videoRef.current.src = url;
+      subtitles.reset();
+      setAudioTracks([]);
+      setActiveAudioTrack("0");
+      isStreamRef.current = true;
+      startStallDetection();
+    }
+  }, [playlist, subtitles]);
+  const handleSubtitleChange = useCallback(async (id) => {
+    subtitles.switchSubtitle(id);
+    if (playerRef.current) {
+      try {
+        await playerRef.current.switchSubtitle(id);
+      } catch (error) {
+        console.error("Player subtitle switch failed:", error);
+      }
+    }
+  }, [subtitles]);
+  const handleAudioTrackChange = useCallback(async (id) => {
+    if (!playerRef.current) return;
+    try {
+      setIsLoading(true);
+      setLoadingMessage("Switching audio track...");
+      await playerRef.current.switchAudioTrack(id);
+      setActiveAudioTrack(id);
+    } catch (error) {
+      console.error("Failed to switch audio track:", error);
+      toast2({ title: "Failed to switch audio track", variant: "destructive" });
+    } finally {
+      setIsLoading(false);
+      setLoadingMessage("");
+    }
+  }, [toast2]);
+  const captureScreenshot = useCallback(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.filter = video.style.filter;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataUrl = canvas.toDataURL("image/png");
+    const a = document.createElement("a");
+    a.href = dataUrl;
+    a.download = `lightbird-screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`;
+    a.click();
+    toast2({ title: "Screenshot Saved" });
+  }, [toast2]);
+  const handleNext = useCallback(() => {
+    if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
+      loadVideo((playlist.currentIndex + 1) % playlist.playlist.length);
+    }
+  }, [playlist.currentIndex, playlist.playlist.length, loadVideo]);
+  const handlePrevious = useCallback(() => {
+    if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
+      loadVideo((playlist.currentIndex - 1 + playlist.playlist.length) % playlist.playlist.length);
+    }
+  }, [playlist.currentIndex, playlist.playlist.length, loadVideo]);
+  const handleSubtitleUpload = useCallback(() => {
+    subtitleInputRef.current?.click();
+  }, []);
+  const handleSelectVideo = useCallback((index) => {
+    loadVideo(index);
+  }, [loadVideo]);
+  const handlePlaylistToggle = () => {
+    wasAutoHiddenRef.current = false;
+    setPlaylistOpen((v) => !v);
+  };
+  const handleMediaPlay = useCallback(() => {
+    const el = videoRef.current;
+    if (el) el.play().catch(() => {
+    });
+  }, []);
+  const handleMediaPause = useCallback(() => {
+    const el = videoRef.current;
+    if (el) el.pause();
+  }, []);
+  const handleMediaSeekForward = useCallback(() => {
+    const el = videoRef.current;
+    if (el) playback.seek(el.currentTime + 10);
+  }, [playback.seek]);
+  const handleMediaSeekBackward = useCallback(() => {
+    const el = videoRef.current;
+    if (el) playback.seek(el.currentTime - 10);
+  }, [playback.seek]);
+  useMediaSession({
+    title: playlist.currentItem?.name ?? null,
+    artwork: mediaThumbnail,
+    onPlay: handleMediaPlay,
+    onPause: handleMediaPause,
+    onNext: handleNext,
+    onPrev: handlePrevious,
+    onSeekForward: handleMediaSeekForward,
+    onSeekBackward: handleMediaSeekBackward
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 w-full h-full", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "flex-1 flex flex-col items-center justify-center bg-black relative group",
+        children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              className: cn("w-full h-full object-contain transition-all duration-300", isLoading && "invisible"),
+              loop: playback.loop,
+              onClick: playback.togglePlay,
+              crossOrigin: "anonymous"
+            }
+          ),
+          /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "hidden" }),
+          /* @__PURE__ */ jsx(SubtitleOverlay, { videoRef, activeSubtitle: subtitles.activeSubtitle }),
+          /* @__PURE__ */ jsx(
+            VideoOverlay,
+            {
+              isLoading,
+              loadingMessage,
+              processingProgress,
+              eta: processingEta,
+              throughputMBs: processingThroughput,
+              onCancel: cancellableProcessing ? handleCancelProcessing : void 0
+            }
+          ),
+          playerError && /* @__PURE__ */ jsx(
+            PlayerErrorDisplay,
+            {
+              error: playerError,
+              onRetry: playerError.retryable ? handleRetry : void 0,
+              onSkip: handleSkipToNext,
+              onDismiss: handleDismissError
+            }
+          ),
+          showInfo && /* @__PURE__ */ jsx(
+            VideoInfoPanel,
+            {
+              metadata: videoMetadata,
+              onClose: () => setShowInfo(false)
+            }
+          ),
+          showShortcutsHelp && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/90 z-50 flex items-center justify-center",
+              onClick: () => setShowShortcutsHelp(false),
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "bg-card rounded-lg p-6 max-w-sm w-full",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx("div", { className: "space-y-1 max-h-80 overflow-y-auto", children: shortcuts.map((b) => {
+                      const mods = [];
+                      if (b.modifiers?.ctrl) mods.push("Ctrl");
+                      if (b.modifiers?.shift) mods.push("Shift");
+                      if (b.modifiers?.alt) mods.push("Alt");
+                      const keyLabel = b.key === " " ? "Space" : b.key;
+                      const formatted = [...mods, keyLabel].join(" + ");
+                      return /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: b.label }),
+                        /* @__PURE__ */ jsx("kbd", { className: "font-mono bg-muted px-1.5 rounded text-xs", children: formatted })
+                      ] }, b.action);
+                    }) }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-4", children: "Press ? or click outside to close" })
+                  ]
+                }
+              )
+            }
+          ),
+          playlist.currentItem && /* @__PURE__ */ jsx(
+            player_controls_default,
+            {
+              isPlaying: playback.isPlaying,
+              progress: playback.progress,
+              duration: playback.duration,
+              volume: playback.volume,
+              isMuted: playback.isMuted,
+              playbackRate: playback.playbackRate,
+              loop: playback.loop,
+              isFullScreen: fullscreen.isFullscreen,
+              filters: filters.filters,
+              zoom: filters.zoom,
+              subtitles: subtitles.subtitles,
+              activeSubtitle: subtitles.activeSubtitle,
+              audioTracks,
+              activeAudioTrack,
+              tracksLoading,
+              onPlayPause: playback.togglePlay,
+              onSeek: playback.seek,
+              onVolumeChange: playback.setVolume,
+              onMuteToggle: playback.toggleMute,
+              onPlaybackRateChange: playback.setPlaybackRate,
+              onLoopToggle: playback.toggleLoop,
+              onFullScreenToggle: fullscreen.toggle,
+              onFrameStep: playback.frameStep,
+              onScreenshot: captureScreenshot,
+              onNext: handleNext,
+              onPrevious: handlePrevious,
+              onFiltersChange: filters.setFilters,
+              onZoomChange: filters.setZoom,
+              onSubtitleChange: handleSubtitleChange,
+              onAudioTrackChange: handleAudioTrackChange,
+              onSubtitleUpload: handleSubtitleUpload,
+              onSubtitleRemove: subtitles.removeSubtitle,
+              onShowInfo: () => setShowInfo((v) => !v),
+              onOpenShortcuts: () => setShowShortcutsDialog(true),
+              chapters,
+              currentChapter,
+              onGoToChapter: goToChapter,
+              onTogglePiP: pip.toggle,
+              isPiP: pip.isPiP,
+              pipSupported: !!pip.isSupported
+            }
+          ),
+          showShortcutsDialog && /* @__PURE__ */ jsx(
+            ShortcutSettingsDialog,
+            {
+              shortcuts,
+              onSave: (updated) => setShortcuts(updated),
+              onClose: () => setShowShortcutsDialog(false)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "file",
+              ref: subtitleInputRef,
+              className: "hidden",
+              multiple: true,
+              accept: ".vtt,.srt,.ass,.ssa",
+              onChange: (e) => {
+                if (e.target.files) subtitles.addSubtitleFiles(Array.from(e.target.files));
+                e.target.value = "";
+              }
+            }
+          ),
+          !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." })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      playlist_panel_default,
+      {
+        playlist: playlist.playlist,
+        currentVideoIndex: playlist.currentIndex,
+        onSelectVideo: handleSelectVideo,
+        onFilesAdded: handleFileChange,
+        onFolderFilesAdded: handleFolderFilesAdded,
+        onAddStream: handleAddStream,
+        onRemoveItem: handleRemoveItem,
+        onReorder: handleReorder,
+        onImportM3U: handleImportM3U,
+        isOpen: playlistOpen,
+        isPinned: playlistPinned,
+        size: playlistSize,
+        onToggle: handlePlaylistToggle,
+        onTogglePin: () => setPlaylistPinned((v) => !v),
+        onSizeChange: setPlaylistSize
+      }
+    )
+  ] });
+};
+var lightbird_player_default = LightBirdPlayer;
+var PlayerErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    console.error("[LightBird] Render error:", error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-screen bg-black text-white", children: /* @__PURE__ */ jsxs("p", { children: [
+        "Something went wrong with the player.",
+        " ",
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "underline hover:text-gray-300",
+            onClick: () => this.setState({ hasError: false }),
+            children: "Try again"
+          }
+        )
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React10.forwardRef(({ className, variant, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitives.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+var ToastClose = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Close,
+  {
+    ref,
+    className: cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+  }
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Description,
+  {
+    ref,
+    className: cn("text-sm opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+function Toaster() {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    toasts.map(function({ id, title, description, action, ...props }) {
+      return /* @__PURE__ */ jsxs(Toast, { ...props, children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+          title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+          description && /* @__PURE__ */ jsx(ToastDescription, { children: description })
+        ] }),
+        action,
+        /* @__PURE__ */ jsx(ToastClose, {})
+      ] }, id);
+    }),
+    /* @__PURE__ */ jsx(ToastViewport, {})
+  ] });
+}
+
+export { lightbird_player_default as LightBirdPlayer, player_controls_default as PlayerControls, PlayerErrorBoundary, PlayerErrorDisplay, playlist_panel_default as PlaylistPanel, ShortcutSettingsDialog, SubtitleOverlay, Toaster, VideoInfoPanel, VideoOverlay };