@structyl/video-player 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -102,8 +102,8 @@ var VideoControls = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 flex-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", style: { flexWrap: "wrap", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", style: { minWidth: 0, flexWrap: "wrap" }, children: [
         hasPlaylist && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onPrevious, title: "Previous", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
         /* @__PURE__ */ jsx(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__ */ jsx(Pause, {}) : /* @__PURE__ */ jsx(Play, {}) }),
         hasPlaylist && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onNext, title: "Next", className: "text-white/80 hover:text-white hover:bg-white/10", children: /* @__PURE__ */ jsx(ChevronRight, {}) }),
@@ -150,7 +150,7 @@ var VideoControls = ({
               side: "top",
               align: "end",
               sideOffset: 8,
-              className: "p-0 w-[280px] max-h-[420px] overflow-y-auto bg-popover",
+              className: "p-0 w-[min(320px,calc(100vw-1rem))] max-h-[min(70dvh,420px)] overflow-y-auto bg-popover",
               children: settingsPanel
             }
           )
@@ -263,7 +263,7 @@ var VideoSettings = ({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 py-2.5 border-b border-border shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-fg", children: "Settings" }) }),
     /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "subtitles", className: "flex flex-col flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs(Tabs.List, { className: "px-3 py-2 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { scrollable: true, className: "px-3 py-2 flex-shrink-0", children: [
         /* @__PURE__ */ jsx(Tabs.Trigger, { value: "subtitles", children: "Subtitles" }),
         /* @__PURE__ */ jsx(Tabs.Trigger, { value: "filters", children: "Filters" }),
         /* @__PURE__ */ jsx(Tabs.Trigger, { value: "quality", children: "Quality" }),
@@ -1231,22 +1231,30 @@ var VideoPlayer = ({
   }, [togglePlay, skipForward, skipBackward, volume, handleVolumeChange, toggleMute, toggleFullscreen, togglePiP, duration]);
   const youtubeId = extractYouTubeId(currentSrc);
   if (youtubeId) {
-    return /* @__PURE__ */ jsx("div", { className: `relative w-full aspect-video bg-black overflow-hidden rounded-lg shadow-lg ${className}`, children: /* @__PURE__ */ jsx(
-      "iframe",
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        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"
+        className: `relative w-full overflow-hidden rounded-lg shadow-lg ${className}`,
+        style: { aspectRatio: "16 / 9", backgroundColor: "#000" },
+        children: /* @__PURE__ */ 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__ */ 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}`,
+      style: { aspectRatio: "16 / 9" },
       children: [
         /* @__PURE__ */ jsx(
           "video",