@structyl/video-player 1.0.0 → 1.0.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 your-lib contributors
+Copyright (c) 2026 Mohammed Irfanul Alam Tanveer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -119,7 +119,7 @@ The single exported component. Props:
 
 ## Part of structyl
 
-This package is part of [structyl](https://github.com/imirfanul/structyl) — the React UI library with structure. Full documentation lives at [structyl.dev](https://structyl.dev).
+This package is part of [structyl](https://github.com/imirfanul/structyl) — the React UI library with structure. Full documentation lives at [www.structyl.com](https://www.structyl.com).
 
 ## License
 

package/dist/index.cjs

@@ -108,8 +108,8 @@ var VideoControls = ({
         ]
       }
     ) }),
-    /* @__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: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", style: { flexWrap: "wrap", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", style: { minWidth: 0, flexWrap: "wrap" }, 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, {}) }),
@@ -156,7 +156,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
             }
           )
@@ -269,7 +269,7 @@ var VideoSettings = ({
   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.jsxs(styled.Tabs.List, { scrollable: true, 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" }),
@@ -1237,22 +1237,30 @@ var VideoPlayer = ({
   }, [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",
+    return /* @__PURE__ */ jsxRuntime.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__ */ 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}`,
+      style: { aspectRatio: "16 / 9" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "video",