@structyl/video-player 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1359 @@
+'use strict';
+
+var react = require('react');
+var lucideReact = require('lucide-react');
+var styled = require('@structyl/styled');
+var jsxRuntime = require('react/jsx-runtime');
+var Hls = require('hls.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Hls__default = /*#__PURE__*/_interopDefault(Hls);
+
+// src/VideoPlayer.tsx
+var ChapterMarkers = ({
+  chapters,
+  duration,
+  currentTime,
+  onSeek
+}) => {
+  if (chapters.length === 0 || duration === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.Tooltip.Provider, { delayDuration: 200, children: chapters.map((chapter) => {
+    const left = chapter.startTime / duration * 100;
+    const isActive = currentTime >= chapter.startTime && currentTime < chapter.endTime;
+    return /* @__PURE__ */ jsxRuntime.jsxs(styled.Tooltip.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(styled.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `absolute -top-px h-[calc(100%+4px)] border-l-2 pointer-events-auto cursor-pointer transition-colors duration-200 z-[1] ${isActive ? "border-primary" : "border-fg/50 hover:border-primary"}`,
+          style: { left: `${left}%` },
+          onClick: (e) => {
+            e.stopPropagation();
+            onSeek(chapter.startTime);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(styled.Tooltip.Content, { side: "top", variant: "dark", children: chapter.title })
+    ] }, chapter.id);
+  }) });
+};
+ChapterMarkers.displayName = "ChapterMarkers";
+var formatTime = (seconds) => {
+  if (isNaN(seconds) || !isFinite(seconds)) return "0:00";
+  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 VideoControls = ({
+  isPlaying,
+  currentTime,
+  duration,
+  volume,
+  isMuted,
+  isFullscreen,
+  isPiP,
+  buffered,
+  subtitlesEnabled,
+  hasSubtitles,
+  hasPlaylist,
+  onPlayPause,
+  onSeek,
+  onVolumeChange,
+  onMuteToggle,
+  onFullscreenToggle,
+  onPiPToggle,
+  onSubtitlesToggle,
+  onPlaylistClick,
+  onNext,
+  onPrevious,
+  chapters,
+  settingsPanel,
+  onThumbnailHover
+}) => {
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  const progressRef = react.useRef(null);
+  const handleProgressClick = (e) => {
+    const rect = progressRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    onSeek((e.clientX - rect.left) / rect.width * duration);
+  };
+  const handleProgressHover = (e) => {
+    const rect = progressRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const pos = (e.clientX - rect.left) / rect.width;
+    onThumbnailHover(true, pos * duration, pos * 100);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-black/70 pt-2 pb-2 px-2 md:pb-2.5 md:px-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 cursor-pointer py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: progressRef,
+        className: "group relative h-1 bg-fg/20 rounded cursor-pointer transition-all duration-150 hover:h-1.5",
+        onClick: handleProgressClick,
+        onMouseMove: handleProgressHover,
+        onMouseLeave: () => onThumbnailHover(false, 0, 0),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ChapterMarkers, { chapters, duration, currentTime, onSeek }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 h-full bg-fg/35 rounded transition-[width] duration-100", style: { width: `${buffered}%` } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 h-full bg-primary rounded transition-[width] duration-100", style: { width: `${progress}%` } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-primary rounded-full shadow-md opacity-0 pointer-events-none transition-opacity duration-200 group-hover:opacity-100",
+              style: { left: `${progress}%` }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 flex-1", children: [
+        hasPlaylist && /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: onPrevious, title: "Previous", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: onPlayPause, title: isPlaying ? "Pause (Space)" : "Play (Space)", className: "text-white/80 hover:text-white hover:bg-white/10", children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, {}) }),
+        hasPlaylist && /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: onNext, title: "Next", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: () => onSeek(Math.max(0, currentTime - 10)), title: "Rewind 10s", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipBack, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: () => onSeek(Math.min(duration, currentTime + 10)), title: "Forward 10s", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipForward, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 group", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: onMuteToggle, title: "Mute (M)", className: "text-white/80 hover:text-white hover:bg-white/10", children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0 overflow-hidden opacity-0 transition-[width,opacity] duration-200 flex items-center sm:group-hover:w-[88px] sm:group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+            styled.Slider,
+            {
+              value: [isMuted ? 0 : Math.round(volume * 100)],
+              onValueChange: (val) => onVolumeChange((val[0] ?? 0) / 100),
+              min: 0,
+              max: 100,
+              step: 1,
+              className: "w-20"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/90 text-[11px] md:text-xs font-medium whitespace-nowrap px-1.5 tabular-nums", children: [
+          formatTime(currentTime),
+          " / ",
+          formatTime(duration)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        hasSubtitles && /* @__PURE__ */ jsxRuntime.jsx(
+          styled.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: onSubtitlesToggle,
+            title: "Subtitles (C)",
+            className: subtitlesEnabled ? "text-primary hover:bg-white/10" : "text-white/80 hover:text-white hover:bg-white/10",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Subtitles, {})
+          }
+        ),
+        hasPlaylist && /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: onPlaylistClick, title: "Playlist", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(styled.DropdownMenu.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(styled.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", title: "Settings", className: "text-white/80 hover:text-white hover:bg-white/10 data-[state=open]:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            styled.DropdownMenu.Content,
+            {
+              side: "top",
+              align: "end",
+              sideOffset: 8,
+              className: "p-0 w-[280px] max-h-[420px] overflow-y-auto bg-popover",
+              children: settingsPanel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styled.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: onPiPToggle,
+            title: "Picture in Picture (P)",
+            className: isPiP ? "text-primary hover:bg-white/10" : "text-white/80 hover:text-white hover:bg-white/10",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PictureInPicture, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon", onClick: onFullscreenToggle, title: "Fullscreen (F)", className: "text-white/80 hover:text-white hover:bg-white/10", children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, {}) })
+      ] })
+    ] })
+  ] });
+};
+VideoControls.displayName = "VideoControls";
+var FILTER_CONFIG = [
+  { key: "brightness", label: "Brightness", min: 0, max: 200, unit: "%" },
+  { key: "contrast", label: "Contrast", min: 0, max: 200, unit: "%" },
+  { key: "saturation", label: "Saturation", min: 0, max: 200, unit: "%" },
+  { key: "hue", label: "Hue", min: 0, max: 360, unit: "\xB0" },
+  { key: "blur", label: "Blur", min: 0, max: 10, unit: "px" },
+  { key: "grayscale", label: "Grayscale", min: 0, max: 100, unit: "%" }
+];
+var VideoFilters = ({ filters, onFilterChange, onReset }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-fg", children: "Video Filters" }),
+    /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "sm", onClick: onReset, leftIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, {}), children: "Reset" })
+  ] }),
+  FILTER_CONFIG.map(({ key, label, min, max, unit }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3.5 last:mb-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg font-medium", children: [
+        filters[key],
+        unit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styled.Slider,
+      {
+        value: [filters[key]],
+        onValueChange: ([v]) => onFilterChange(key, v ?? filters[key]),
+        min,
+        max,
+        step: 1
+      }
+    )
+  ] }, key))
+] });
+VideoFilters.displayName = "VideoFilters";
+var SubtitleUploader = ({ onSubtitleUpload }) => {
+  const fileInputRef = react.useRef(null);
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file && (file.name.endsWith(".srt") || file.name.endsWith(".vtt"))) {
+      onSubtitleUpload(file);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ".srt,.vtt",
+        onChange: handleFileChange,
+        style: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styled.Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "w-full mb-2",
+        leftIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, {}),
+        onClick: () => fileInputRef.current?.click(),
+        children: "Upload Subtitle File"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground", children: "Supports .srt and .vtt formats" })
+  ] });
+};
+SubtitleUploader.displayName = "SubtitleUploader";
+var PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+var VideoSettings = ({
+  playbackRate,
+  subtitleStyle,
+  subtitles,
+  activeSubtitleIndex,
+  filters,
+  qualities,
+  currentQuality,
+  onPlaybackRateChange,
+  onSubtitleStyleChange,
+  onSubtitleTrackChange,
+  onSubtitleUpload,
+  onFilterChange,
+  onResetFilters,
+  onQualityChange
+}) => {
+  const updateSubtitleStyle = (updates) => {
+    onSubtitleStyleChange({ ...subtitleStyle, ...updates });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center px-3 py-2.5 border-b border-border shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-fg", children: "Settings" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.Root, { defaultValue: "subtitles", className: "flex flex-col flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.List, { className: "px-3 py-2 flex-shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "subtitles", children: "Subtitles" }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "filters", children: "Filters" }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "quality", children: "Quality" }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "playback", children: "Playback" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-1 pb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Content, { value: "subtitles", children: /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.Root, { defaultValue: "style", variant: "pills", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.List, { className: "mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "style", children: "Style" }),
+            /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "tracks", children: "Tracks" }),
+            /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Trigger, { value: "upload", children: "Upload" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.Content, { value: "style", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3.5 last:mb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: "Font Size" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg font-medium", children: [
+                  subtitleStyle.fontSize,
+                  "px"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                styled.Slider,
+                {
+                  value: [subtitleStyle.fontSize],
+                  onValueChange: ([v]) => updateSubtitleStyle({ fontSize: v ?? subtitleStyle.fontSize }),
+                  min: 14,
+                  max: 40,
+                  step: 2
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3.5 last:mb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: "Background Opacity" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg font-medium", children: [
+                  Math.round(subtitleStyle.backgroundOpacity * 100),
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                styled.Slider,
+                {
+                  value: [Math.round(subtitleStyle.backgroundOpacity * 100)],
+                  onValueChange: ([v]) => updateSubtitleStyle({ backgroundOpacity: (v ?? 0) / 100 }),
+                  min: 0,
+                  max: 100,
+                  step: 5
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3.5 last:mb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground block mb-1.5", children: "Text Color" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  className: "w-full h-9 rounded-lg border border-border cursor-pointer bg-transparent p-0.5",
+                  value: subtitleStyle.textColor,
+                  onChange: (e) => updateSubtitleStyle({ textColor: e.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3.5 last:mb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground block mb-1.5", children: "Background Color" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  className: "w-full h-9 rounded-lg border border-border cursor-pointer bg-transparent p-0.5",
+                  value: subtitleStyle.backgroundColor,
+                  onChange: (e) => updateSubtitleStyle({ backgroundColor: e.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3.5 last:mb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground block mb-2", children: "Position" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  styled.Button,
+                  {
+                    variant: subtitleStyle.position === "bottom" ? "default" : "outline",
+                    size: "sm",
+                    className: "flex-1",
+                    onClick: () => updateSubtitleStyle({ position: "bottom" }),
+                    children: "Bottom"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  styled.Button,
+                  {
+                    variant: subtitleStyle.position === "top" ? "default" : "outline",
+                    size: "sm",
+                    className: "flex-1",
+                    onClick: () => updateSubtitleStyle({ position: "top" }),
+                    children: "Top"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.Content, { value: "tracks", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              styled.Button,
+              {
+                variant: activeSubtitleIndex === -1 ? "default" : "outline",
+                size: "sm",
+                className: "w-full justify-start mb-1",
+                onClick: () => onSubtitleTrackChange(-1),
+                children: "Off"
+              }
+            ),
+            subtitles.map((track, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              styled.Button,
+              {
+                variant: activeSubtitleIndex === i ? "default" : "outline",
+                size: "sm",
+                className: "w-full justify-start mb-1",
+                onClick: () => onSubtitleTrackChange(i),
+                children: [
+                  track.label,
+                  " ",
+                  track.language && `(${track.language})`
+                ]
+              },
+              track.src
+            ))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Content, { value: "upload", children: /* @__PURE__ */ jsxRuntime.jsx(SubtitleUploader, { onSubtitleUpload }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.Tabs.Content, { value: "filters", children: /* @__PURE__ */ jsxRuntime.jsx(VideoFilters, { filters, onFilterChange, onReset: onResetFilters }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.Content, { value: "quality", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-fg mb-2.5", children: "Video Quality" }),
+          qualities.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              styled.Button,
+              {
+                variant: currentQuality === -1 ? "default" : "outline",
+                size: "sm",
+                className: "w-full justify-start mb-1",
+                onClick: () => onQualityChange(-1),
+                children: "Auto"
+              }
+            ),
+            qualities.map((q, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              styled.Button,
+              {
+                variant: currentQuality === i ? "default" : "outline",
+                size: "sm",
+                className: "w-full justify-start mb-1",
+                onClick: () => onQualityChange(i),
+                children: [
+                  q.label,
+                  " (",
+                  Math.round(q.bitrate / 1e3),
+                  "kbps)"
+                ]
+              },
+              i
+            ))
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Quality selection is only available for HLS/DASH adaptive streaming sources." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(styled.Tabs.Content, { value: "playback", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-fg mb-2.5", children: "Playback Speed" }),
+          PLAYBACK_RATES.map((rate) => /* @__PURE__ */ jsxRuntime.jsx(
+            styled.Button,
+            {
+              variant: playbackRate === rate ? "default" : "outline",
+              size: "sm",
+              className: "w-full justify-start mb-1",
+              onClick: () => onPlaybackRateChange(rate),
+              children: rate === 1 ? "Normal" : `${rate}x`
+            },
+            rate
+          ))
+        ] })
+      ] })
+    ] })
+  ] });
+};
+VideoSettings.displayName = "VideoSettings";
+var useVideoPlayer = ({
+  videoRef,
+  containerRef,
+  autoPlay,
+  muted,
+  onPlay,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  onVolumeChange
+}) => {
+  const [isPlaying, setIsPlaying] = react.useState(false);
+  const [currentTime, setCurrentTime] = react.useState(0);
+  const [duration, setDuration] = react.useState(0);
+  const [volume, setVolume] = react.useState(1);
+  const [isMuted, setIsMuted] = react.useState(muted || false);
+  const [playbackRate, setPlaybackRate] = react.useState(1);
+  const [isFullscreen, setIsFullscreen] = react.useState(false);
+  const [isPiP, setIsPiP] = react.useState(false);
+  const [buffered, setBuffered] = react.useState(0);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (autoPlay) {
+      video.play().catch(console.error);
+    }
+    const handleLoadedMetadata = () => setDuration(video.duration);
+    const handleTimeUpdate = () => {
+      setCurrentTime(video.currentTime);
+      onTimeUpdate?.(video.currentTime);
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+      onPlay?.();
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+      onPause?.();
+    };
+    const handleEnded = () => {
+      setIsPlaying(false);
+      onEnded?.();
+    };
+    const handleVolumeChange2 = () => {
+      setVolume(video.volume);
+      setIsMuted(video.muted);
+      onVolumeChange?.(video.volume);
+    };
+    const handleProgress = () => {
+      if (video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+        setBuffered(bufferedEnd / video.duration * 100);
+      }
+    };
+    const handleEnterpip = () => setIsPiP(true);
+    const handleLeavepip = () => setIsPiP(false);
+    video.addEventListener("loadedmetadata", handleLoadedMetadata);
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("ended", handleEnded);
+    video.addEventListener("volumechange", handleVolumeChange2);
+    video.addEventListener("progress", handleProgress);
+    video.addEventListener("enterpictureinpicture", handleEnterpip);
+    video.addEventListener("leavepictureinpicture", handleLeavepip);
+    return () => {
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("volumechange", handleVolumeChange2);
+      video.removeEventListener("progress", handleProgress);
+      video.removeEventListener("enterpictureinpicture", handleEnterpip);
+      video.removeEventListener("leavepictureinpicture", handleLeavepip);
+    };
+  }, [videoRef, autoPlay, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange]);
+  react.useEffect(() => {
+    const handleFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  const togglePlay = react.useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!video.paused) {
+      video.pause();
+      return;
+    }
+    if (video.networkState === HTMLMediaElement.NETWORK_NO_SOURCE) {
+      video.load();
+    }
+    video.play().catch(console.error);
+  }, [videoRef]);
+  const handleSeek = react.useCallback((time) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = time;
+    setCurrentTime(time);
+  }, [videoRef]);
+  const handleVolumeChange = react.useCallback((newVolume) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.volume = newVolume;
+    setVolume(newVolume);
+    if (newVolume > 0 && isMuted) {
+      video.muted = false;
+      setIsMuted(false);
+    }
+  }, [videoRef, isMuted]);
+  const toggleMute = react.useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = !video.muted;
+    setIsMuted(video.muted);
+  }, [videoRef]);
+  const changePlaybackRate = react.useCallback((rate) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.playbackRate = rate;
+    setPlaybackRate(rate);
+  }, [videoRef]);
+  const toggleFullscreen = react.useCallback(async () => {
+    const container = containerRef.current;
+    if (!container) return;
+    try {
+      if (!document.fullscreenElement) {
+        await container.requestFullscreen();
+      } else {
+        await document.exitFullscreen();
+      }
+    } catch (error) {
+      console.error("Fullscreen error:", error);
+    }
+  }, [containerRef]);
+  const togglePiP = react.useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      } else {
+        await video.requestPictureInPicture();
+      }
+    } catch (error) {
+      console.error("PiP error:", error);
+    }
+  }, [videoRef]);
+  const skipForward = react.useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = Math.min(video.duration, video.currentTime + 10);
+  }, [videoRef]);
+  const skipBackward = react.useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = Math.max(0, video.currentTime - 10);
+  }, [videoRef]);
+  return {
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    playbackRate,
+    isFullscreen,
+    isPiP,
+    buffered,
+    togglePlay,
+    handleSeek,
+    handleVolumeChange,
+    toggleMute,
+    changePlaybackRate,
+    toggleFullscreen,
+    togglePiP,
+    skipForward,
+    skipBackward
+  };
+};
+var toHex2 = (n) => Math.round(n).toString(16).padStart(2, "0");
+var SubtitleDisplay = ({ text, style }) => {
+  if (!text) return null;
+  const bgColor = `${style.backgroundColor}${toHex2(style.backgroundOpacity * 255)}`;
+  const positionClass = style.position === "bottom" ? "bottom-[88px]" : "top-4";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `absolute left-1/2 -translate-x-1/2 max-w-[90%] px-3 py-1.5 rounded-lg text-center pointer-events-none z-20 leading-[1.4] break-words ${positionClass}`,
+      style: {
+        fontSize: style.fontSize,
+        fontFamily: style.fontFamily,
+        color: style.textColor,
+        backgroundColor: bgColor,
+        textShadow: "2px 2px 4px rgba(0,0,0,0.8)"
+      },
+      children: text.split("\n").map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i))
+    }
+  );
+};
+SubtitleDisplay.displayName = "SubtitleDisplay";
+
+// src/subtitleParser.ts
+var toSeconds = (h, m, s, ms) => parseInt(h, 10) * 3600 + parseInt(m, 10) * 60 + parseInt(s, 10) + parseInt(ms, 10) / 1e3;
+var parseSRT = (content) => {
+  const cues = [];
+  const SRT_TIME = /(\d{2}):(\d{2}):(\d{2}),(\d{3})\s*-->\s*(\d{2}):(\d{2}):(\d{2}),(\d{3})/;
+  for (const block of content.trim().split(/\n\s*\n/)) {
+    const lines = block.split("\n");
+    if (lines.length < 3) continue;
+    const timeLine = lines[1];
+    if (!timeLine) continue;
+    const m = timeLine.match(SRT_TIME);
+    if (!m || m.length < 9) continue;
+    const start = toSeconds(m[1] ?? "0", m[2] ?? "0", m[3] ?? "0", m[4] ?? "0");
+    const end = toSeconds(m[5] ?? "0", m[6] ?? "0", m[7] ?? "0", m[8] ?? "0");
+    const text = lines.slice(2).join("\n").trim();
+    cues.push({ start, end, text });
+  }
+  return cues;
+};
+var parseVTT = (content) => {
+  const cues = [];
+  const VTT_TIME = /(\d{2}):(\d{2}):(\d{2})\.(\d{3})\s*-->\s*(\d{2}):(\d{2}):(\d{2})\.(\d{3})/;
+  const lines = content.split("\n");
+  let i = 0;
+  while (i < lines.length && !lines[i]?.includes("-->")) i++;
+  while (i < lines.length) {
+    const line = lines[i]?.trim() ?? "";
+    const m = line.match(VTT_TIME);
+    if (m && m.length >= 9) {
+      const start = toSeconds(m[1] ?? "0", m[2] ?? "0", m[3] ?? "0", m[4] ?? "0");
+      const end = toSeconds(m[5] ?? "0", m[6] ?? "0", m[7] ?? "0", m[8] ?? "0");
+      const textLines = [];
+      i++;
+      while (i < lines.length && lines[i]?.trim() !== "") {
+        const l = lines[i];
+        if (l !== void 0) textLines.push(l.trim());
+        i++;
+      }
+      cues.push({ start, end, text: textLines.join("\n") });
+    }
+    i++;
+  }
+  return cues;
+};
+var loadSubtitleFile = async (url) => {
+  try {
+    const response = await fetch(url);
+    const content = await response.text();
+    if (content.includes("WEBVTT") || url.endsWith(".vtt")) return parseVTT(content);
+    if (url.endsWith(".srt")) return parseSRT(content);
+    if (content.includes("-->")) return content.includes(",") ? parseSRT(content) : parseVTT(content);
+    return [];
+  } catch {
+    return [];
+  }
+};
+var findActiveCue = (cues, currentTime) => cues.find((c) => currentTime >= c.start && currentTime <= c.end) ?? null;
+var DEFAULT_FILTERS = {
+  brightness: 100,
+  contrast: 100,
+  saturation: 100,
+  hue: 0,
+  blur: 0,
+  grayscale: 0
+};
+var useVideoFilters = (videoRef) => {
+  const [filters, setFilters] = react.useState(DEFAULT_FILTERS);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.style.filter = [
+      `brightness(${filters.brightness}%)`,
+      `contrast(${filters.contrast}%)`,
+      `saturate(${filters.saturation}%)`,
+      `hue-rotate(${filters.hue}deg)`,
+      `blur(${filters.blur}px)`,
+      `grayscale(${filters.grayscale}%)`
+    ].join(" ");
+  }, [filters, videoRef]);
+  const updateFilter = (key, value) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+  };
+  const resetFilters = () => setFilters(DEFAULT_FILTERS);
+  return { filters, updateFilter, resetFilters };
+};
+var usePlaylist = (initialItems = []) => {
+  const [playlist, setPlaylist] = react.useState({
+    items: initialItems,
+    currentIndex: 0,
+    shuffle: false,
+    repeat: "none"
+  });
+  const currentItem = playlist.items[playlist.currentIndex] ?? null;
+  const playNext = react.useCallback(() => {
+    setPlaylist((prev) => {
+      if (prev.items.length === 0) return prev;
+      let nextIndex;
+      if (prev.shuffle) {
+        nextIndex = Math.floor(Math.random() * prev.items.length);
+      } else {
+        nextIndex = prev.currentIndex + 1;
+        if (nextIndex >= prev.items.length) {
+          nextIndex = prev.repeat === "all" ? 0 : prev.currentIndex;
+        }
+      }
+      return { ...prev, currentIndex: nextIndex };
+    });
+  }, []);
+  const playPrevious = react.useCallback(() => {
+    setPlaylist((prev) => {
+      if (prev.items.length === 0) return prev;
+      let prevIndex;
+      if (prev.shuffle) {
+        prevIndex = Math.floor(Math.random() * prev.items.length);
+      } else {
+        prevIndex = prev.currentIndex - 1;
+        if (prevIndex < 0) {
+          prevIndex = prev.repeat === "all" ? prev.items.length - 1 : 0;
+        }
+      }
+      return { ...prev, currentIndex: prevIndex };
+    });
+  }, []);
+  const playIndex = react.useCallback((index) => {
+    setPlaylist((prev) => {
+      if (index < 0 || index >= prev.items.length) return prev;
+      return { ...prev, currentIndex: index };
+    });
+  }, []);
+  const toggleShuffle = react.useCallback(() => {
+    setPlaylist((prev) => ({ ...prev, shuffle: !prev.shuffle }));
+  }, []);
+  const toggleRepeat = react.useCallback(() => {
+    setPlaylist((prev) => {
+      const modes = ["none", "one", "all"];
+      const nextMode = modes[(modes.indexOf(prev.repeat) + 1) % modes.length] ?? "none";
+      return { ...prev, repeat: nextMode };
+    });
+  }, []);
+  const addToPlaylist = react.useCallback((item) => {
+    setPlaylist((prev) => ({ ...prev, items: [...prev.items, item] }));
+  }, []);
+  const removeFromPlaylist = react.useCallback((index) => {
+    setPlaylist((prev) => {
+      const newItems = prev.items.filter((_, i) => i !== index);
+      let newIndex = prev.currentIndex;
+      if (index < prev.currentIndex) {
+        newIndex = prev.currentIndex - 1;
+      } else if (index === prev.currentIndex && newItems.length > 0) {
+        newIndex = Math.min(prev.currentIndex, newItems.length - 1);
+      }
+      return { ...prev, items: newItems, currentIndex: Math.max(0, newIndex) };
+    });
+  }, []);
+  return {
+    playlist,
+    currentItem,
+    playNext,
+    playPrevious,
+    playIndex,
+    toggleShuffle,
+    toggleRepeat,
+    addToPlaylist,
+    removeFromPlaylist
+  };
+};
+var useQuality = (videoRef, src) => {
+  const [qualities, setQualities] = react.useState([]);
+  const [currentQuality, setCurrentQuality] = react.useState(-1);
+  const [isHls, setIsHls] = react.useState(false);
+  const hlsRef = react.useRef(null);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return void 0;
+    const isHlsSource = src.endsWith(".m3u8");
+    setIsHls(isHlsSource);
+    if (isHlsSource && Hls__default.default.isSupported()) {
+      const hls = new Hls__default.default({ enableWorker: true, lowLatencyMode: true });
+      hlsRef.current = hls;
+      hls.loadSource(src);
+      hls.attachMedia(video);
+      hls.on(Hls__default.default.Events.MANIFEST_PARSED, () => {
+        setQualities(
+          hls.levels.map((level) => ({
+            height: level.height,
+            width: level.width,
+            bitrate: level.bitrate,
+            label: `${level.height}p`
+          }))
+        );
+      });
+      hls.on(Hls__default.default.Events.LEVEL_SWITCHED, (_, data) => setCurrentQuality(data.level));
+      return () => {
+        hls.destroy();
+        hlsRef.current = null;
+      };
+    } else if (isHlsSource && video.canPlayType("application/vnd.apple.mpegurl")) {
+      setQualities((prev) => prev.length === 1 && prev[0]?.label === "Auto" ? prev : [{ height: 0, width: 0, bitrate: 0, label: "Auto" }]);
+      return void 0;
+    } else {
+      setQualities((prev) => prev.length === 0 ? prev : []);
+      return void 0;
+    }
+  }, [src, videoRef]);
+  const changeQuality = (level) => {
+    if (hlsRef.current) {
+      hlsRef.current.currentLevel = level;
+      setCurrentQuality(level);
+    }
+  };
+  return { qualities, currentQuality, changeQuality, isHls };
+};
+var useChapters = (initialChapters = []) => {
+  const [chapters] = react.useState(initialChapters);
+  const getCurrentChapter = react.useCallback(
+    (currentTime) => chapters.find((c) => currentTime >= c.startTime && currentTime < c.endTime) ?? null,
+    [chapters]
+  );
+  const getChapterAtPosition = react.useCallback(
+    (position, duration) => getCurrentChapter(position / 100 * duration),
+    [getCurrentChapter]
+  );
+  return { chapters, getCurrentChapter, getChapterAtPosition };
+};
+var formatDuration = (seconds) => `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`;
+var PlaylistPanel = ({
+  items,
+  currentIndex,
+  shuffle,
+  repeat,
+  onPlayItem,
+  onRemoveItem,
+  onToggleShuffle,
+  onToggleRepeat,
+  onClose
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 right-0 w-full md:w-[280px] h-full bg-popover border-l border-border z-20 flex flex-col", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2.5 border-b border-border shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[13px] font-semibold text-fg", children: [
+      "Playlist (",
+      items.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        styled.Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: onToggleShuffle,
+          title: "Shuffle",
+          className: shuffle ? "text-primary" : "",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shuffle, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        styled.Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: onToggleRepeat,
+          title: "Repeat",
+          className: repeat !== "none" ? "text-primary" : "",
+          children: repeat === "one" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Repeat1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Repeat, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(styled.Button, { variant: "ghost", size: "icon-sm", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(styled.ScrollArea.Root, { className: "flex-1 overflow-y-auto p-1.5", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex items-center gap-2.5 p-2 rounded-lg cursor-pointer transition-colors duration-150 relative group hover:bg-accent/[0.07] ${index === currentIndex ? "bg-primary/15" : ""}`,
+      onClick: () => onPlayItem(index),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-10 h-10 bg-muted/80 rounded overflow-hidden flex items-center justify-center text-xs text-muted-foreground", children: item.poster ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.poster, alt: item.title, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-fg overflow-hidden text-ellipsis whitespace-nowrap", children: item.title }),
+          item.duration != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-muted-foreground mt-0.5", children: formatDuration(item.duration) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styled.Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            className: "opacity-0 transition-opacity duration-150 group-hover:opacity-100",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemoveItem(index);
+            },
+            title: "Remove",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {})
+          }
+        )
+      ]
+    },
+    item.id
+  )) })
+] });
+PlaylistPanel.displayName = "PlaylistPanel";
+var formatTime2 = (seconds) => `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`;
+var ThumbnailPreview = ({
+  videoRef,
+  time,
+  position
+}) => {
+  const canvasRef = react.useRef(null);
+  const captureRef = react.useRef(null);
+  const [thumbnail, setThumbnail] = react.useState(null);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !canvasRef.current) return;
+    if (!captureRef.current) {
+      captureRef.current = document.createElement("video");
+      captureRef.current.src = video.src;
+      captureRef.current.crossOrigin = "anonymous";
+      captureRef.current.muted = true;
+    }
+    const captureVideo = captureRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    captureVideo.currentTime = time;
+    const handleSeeked = () => {
+      try {
+        canvas.width = 160;
+        canvas.height = 90;
+        ctx.drawImage(captureVideo, 0, 0, 160, 90);
+        setThumbnail(canvas.toDataURL());
+      } catch {
+      }
+    };
+    captureVideo.addEventListener("seeked", handleSeeked);
+    return () => captureVideo.removeEventListener("seeked", handleSeeked);
+  }, [time, videoRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-[calc(100%+8px)] -translate-x-1/2 bg-card border border-border rounded-lg overflow-hidden shadow-lg z-[1001] pointer-events-none", style: { left: `${position}%` }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "hidden" }),
+    thumbnail ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbnail, alt: "Preview", className: "w-[160px] h-auto block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[160px] h-[90px] flex items-center justify-center bg-muted text-[11px] text-muted-foreground", children: "Loading\u2026" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-fg px-2 py-[3px] text-center bg-muted", children: formatTime2(time) })
+  ] });
+};
+ThumbnailPreview.displayName = "ThumbnailPreview";
+function extractYouTubeId(url) {
+  const match = url.match(
+    /(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/
+  );
+  return match?.[1] ?? null;
+}
+var VideoPlayer = ({
+  src,
+  poster,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  className = "",
+  subtitles = [],
+  playlist: initialPlaylist = [],
+  chapters: initialChapters = [],
+  onPlay,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  onVolumeChange
+}) => {
+  const videoRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const [showControls, setShowControls] = react.useState(true);
+  const [showPlaylist, setShowPlaylist] = react.useState(false);
+  const [showThumbnail, setShowThumbnail] = react.useState(false);
+  const [videoError, setVideoError] = react.useState(null);
+  const [thumbnailTime, setThumbnailTime] = react.useState(0);
+  const [thumbnailPosition, setThumbnailPosition] = react.useState(0);
+  const controlsTimeoutRef = react.useRef(void 0);
+  const [subtitleTracks, setSubtitleTracks] = react.useState(/* @__PURE__ */ new Map());
+  const [activeSubtitleIndex, setActiveSubtitleIndex] = react.useState(-1);
+  const [subtitlesEnabled, setSubtitlesEnabled] = react.useState(false);
+  const [currentSubtitleText, setCurrentSubtitleText] = react.useState("");
+  const [subtitleStyle, setSubtitleStyle] = react.useState({
+    fontSize: 20,
+    fontFamily: "Arial, sans-serif",
+    textColor: "#ffffff",
+    backgroundColor: "#000000",
+    backgroundOpacity: 0.75,
+    position: "bottom"
+  });
+  const [availableSubtitles, setAvailableSubtitles] = react.useState(subtitles);
+  const { filters, updateFilter, resetFilters } = useVideoFilters(videoRef);
+  const {
+    playlist,
+    currentItem,
+    playNext,
+    playPrevious,
+    playIndex,
+    toggleShuffle,
+    toggleRepeat,
+    removeFromPlaylist
+  } = usePlaylist(
+    initialPlaylist.length > 0 ? initialPlaylist : [{ id: "1", title: "Current Video", src, poster }]
+  );
+  const currentSrc = currentItem?.src ?? src;
+  const { qualities, currentQuality, changeQuality, isHls } = useQuality(videoRef, currentSrc);
+  const { chapters } = useChapters(initialChapters);
+  const {
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    playbackRate,
+    isFullscreen,
+    isPiP,
+    buffered,
+    togglePlay,
+    handleSeek,
+    handleVolumeChange,
+    toggleMute,
+    changePlaybackRate,
+    toggleFullscreen,
+    togglePiP,
+    skipForward,
+    skipBackward
+  } = useVideoPlayer({
+    videoRef,
+    containerRef,
+    autoPlay,
+    muted,
+    onPlay,
+    onPause,
+    onEnded: () => {
+      onEnded?.();
+      if (playlist.repeat === "one") {
+        videoRef.current?.play();
+      } else if (playlist.items.length > 1) {
+        playNext();
+      }
+    },
+    onTimeUpdate,
+    onVolumeChange
+  });
+  react.useEffect(() => {
+    if (availableSubtitles.length === 0) return;
+    const loadSubtitles = async () => {
+      const tracks = /* @__PURE__ */ new Map();
+      for (const track of availableSubtitles) {
+        const cues = await loadSubtitleFile(track.src);
+        tracks.set(track.src, cues);
+      }
+      setSubtitleTracks(tracks);
+      if (activeSubtitleIndex === -1) {
+        setActiveSubtitleIndex(0);
+        setSubtitlesEnabled(true);
+      }
+    };
+    loadSubtitles();
+  }, [availableSubtitles]);
+  const handleSubtitleUpload = async (file) => {
+    const url = URL.createObjectURL(file);
+    const newTrack = {
+      src: url,
+      label: file.name.replace(/\.(srt|vtt)$/, ""),
+      language: "unknown"
+    };
+    setAvailableSubtitles((prev) => [...prev, newTrack]);
+  };
+  react.useEffect(() => {
+    if (!subtitlesEnabled || activeSubtitleIndex === -1 || availableSubtitles.length === 0) {
+      setCurrentSubtitleText("");
+      return;
+    }
+    const activeTrack = availableSubtitles[activeSubtitleIndex];
+    if (!activeTrack) {
+      setCurrentSubtitleText("");
+      return;
+    }
+    const cues = subtitleTracks.get(activeTrack.src);
+    const activeCue = cues ? findActiveCue(cues, currentTime) : null;
+    setCurrentSubtitleText(activeCue?.text ?? "");
+  }, [currentTime, subtitlesEnabled, activeSubtitleIndex, subtitleTracks, availableSubtitles]);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || isHls) return;
+    setVideoError(null);
+    video.load();
+  }, [currentSrc, isHls]);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const handleError = () => {
+      const code = video.error?.code;
+      if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED || code === MediaError.MEDIA_ERR_NETWORK) {
+        setVideoError("Video not found or unsupported format.");
+      } else if (code) {
+        setVideoError("Failed to load video.");
+      }
+    };
+    video.addEventListener("error", handleError);
+    return () => video.removeEventListener("error", handleError);
+  }, [videoRef]);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !currentItem || isHls) return void 0;
+    if (autoPlay || isPlaying) {
+      const onCanPlay = () => {
+        video.play().catch(console.error);
+      };
+      video.addEventListener("canplay", onCanPlay, { once: true });
+      return () => video.removeEventListener("canplay", onCanPlay);
+    }
+    return void 0;
+  }, [currentItem, isHls]);
+  react.useEffect(() => {
+    const handleMouseMove = () => {
+      setShowControls(true);
+      if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
+      if (isPlaying) {
+        controlsTimeoutRef.current = setTimeout(() => setShowControls(false), 3e3);
+      }
+    };
+    const handleMouseLeave = () => {
+      if (isPlaying) setShowControls(false);
+    };
+    const container = containerRef.current;
+    container?.addEventListener("mousemove", handleMouseMove);
+    container?.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      container?.removeEventListener("mousemove", handleMouseMove);
+      container?.removeEventListener("mouseleave", handleMouseLeave);
+      if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
+    };
+  }, [isPlaying]);
+  react.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      switch (e.key) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          togglePlay();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          skipForward();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          skipBackward();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          handleVolumeChange(Math.min(volume + 0.1, 1));
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          handleVolumeChange(Math.max(volume - 0.1, 0));
+          break;
+        case "m":
+          e.preventDefault();
+          toggleMute();
+          break;
+        case "f":
+          e.preventDefault();
+          toggleFullscreen();
+          break;
+        case "p":
+          e.preventDefault();
+          togglePiP();
+          break;
+        case "c":
+          e.preventDefault();
+          setSubtitlesEnabled((v) => !v);
+          break;
+        case ",":
+          e.preventDefault();
+          if (videoRef.current) videoRef.current.currentTime = Math.max(0, videoRef.current.currentTime - 1 / 30);
+          break;
+        case ".":
+          e.preventDefault();
+          if (videoRef.current) videoRef.current.currentTime = Math.min(duration, videoRef.current.currentTime + 1 / 30);
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [togglePlay, skipForward, skipBackward, volume, handleVolumeChange, toggleMute, toggleFullscreen, togglePiP, duration]);
+  const youtubeId = extractYouTubeId(currentSrc);
+  if (youtubeId) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full aspect-video bg-black overflow-hidden rounded-lg shadow-lg ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        src: `https://www.youtube.com/embed/${youtubeId}?autoplay=${autoPlay ? 1 : 0}&mute=${muted ? 1 : 0}&loop=${loop ? 1 : 0}&rel=0`,
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+        allowFullScreen: true,
+        className: "absolute inset-0 w-full h-full border-0",
+        title: "YouTube video player"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative w-full aspect-video bg-bg overflow-hidden rounded-lg shadow-lg font-sans text-sm text-fg select-none ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "video",
+          {
+            ref: videoRef,
+            src: !isHls ? currentSrc : void 0,
+            poster: poster ?? currentItem?.poster,
+            loop,
+            onClick: togglePlay,
+            className: "w-full h-full object-contain block cursor-pointer"
+          }
+        ),
+        subtitlesEnabled && currentSubtitleText && /* @__PURE__ */ jsxRuntime.jsx(SubtitleDisplay, { text: currentSubtitleText, style: subtitleStyle }),
+        videoError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-bg/90 gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: 1.5, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-fg", children: videoError })
+        ] }) : !isPlaying && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-fg/10 cursor-pointer transition-opacity duration-300", onClick: togglePlay, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[72px] h-[72px] rounded-full bg-primary/90 flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-primary hover:scale-110", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-9 h-9 text-primary-fg fill-current ml-1", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 transition-opacity duration-300${showControls || !isPlaying ? "" : " opacity-0 pointer-events-none"}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            VideoControls,
+            {
+              isPlaying,
+              currentTime,
+              duration,
+              volume,
+              isMuted,
+              playbackRate,
+              isFullscreen,
+              isPiP,
+              buffered,
+              subtitlesEnabled,
+              hasSubtitles: availableSubtitles.length > 0,
+              hasPlaylist: playlist.items.length > 1,
+              chapters,
+              onPlayPause: togglePlay,
+              onSeek: handleSeek,
+              onVolumeChange: handleVolumeChange,
+              onMuteToggle: toggleMute,
+              onPlaybackRateChange: changePlaybackRate,
+              onFullscreenToggle: toggleFullscreen,
+              onPiPToggle: togglePiP,
+              onSubtitlesToggle: () => setSubtitlesEnabled((v) => !v),
+              onPlaylistClick: () => setShowPlaylist((v) => !v),
+              onNext: playNext,
+              onPrevious: playPrevious,
+              settingsPanel: /* @__PURE__ */ jsxRuntime.jsx(
+                VideoSettings,
+                {
+                  playbackRate,
+                  subtitleStyle,
+                  subtitles: availableSubtitles,
+                  activeSubtitleIndex,
+                  filters,
+                  qualities,
+                  currentQuality,
+                  onPlaybackRateChange: changePlaybackRate,
+                  onSubtitleStyleChange: setSubtitleStyle,
+                  onSubtitleTrackChange: setActiveSubtitleIndex,
+                  onSubtitleUpload: handleSubtitleUpload,
+                  onFilterChange: updateFilter,
+                  onResetFilters: resetFilters,
+                  onQualityChange: changeQuality
+                }
+              ),
+              onThumbnailHover: (show, time, position) => {
+                setShowThumbnail(show);
+                setThumbnailTime(time);
+                setThumbnailPosition(position);
+              }
+            }
+          ),
+          showThumbnail && /* @__PURE__ */ jsxRuntime.jsx(
+            ThumbnailPreview,
+            {
+              videoRef,
+              time: thumbnailTime,
+              position: thumbnailPosition,
+              duration
+            }
+          )
+        ] }),
+        showPlaylist && /* @__PURE__ */ jsxRuntime.jsx(
+          PlaylistPanel,
+          {
+            items: playlist.items,
+            currentIndex: playlist.currentIndex,
+            shuffle: playlist.shuffle,
+            repeat: playlist.repeat,
+            onPlayItem: playIndex,
+            onRemoveItem: removeFromPlaylist,
+            onToggleShuffle: toggleShuffle,
+            onToggleRepeat: toggleRepeat,
+            onClose: () => setShowPlaylist(false)
+          }
+        )
+      ]
+    }
+  );
+};
+VideoPlayer.displayName = "VideoPlayer";
+
+exports.VideoPlayer = VideoPlayer;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map