@xhub-short/ui 0.1.0-beta.8 → 1.0.0-beta.18

package/dist/chunk-DR7KR7OT.js

@@ -0,0 +1,103 @@
+import { clsx } from 'clsx';
+import { memo, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/QualityPicker/QualityPickerHeadless.tsx
+
+// src/components/QualityPicker/QualityPicker.css.ts
+var QUALITY_PICKER_CSS = `.sv-quality-picker{--sv-quality-picker-bg:rgba(28,28,30,.95);--sv-quality-picker-text:#fff;--sv-quality-picker-text-secondary:rgba(255,255,255,.6);--sv-quality-picker-selected:#007aff;--sv-quality-picker-item-hover:rgba(255,255,255,.1);--sv-quality-picker-check:#007aff;--sv-quality-picker-badge:rgba(255,255,255,.15);--sv-quality-picker-item-height:48px;--sv-quality-picker-radius:12px;--sv-quality-picker-padding:8px}.sv-quality-picker{padding:var(--sv-quality-picker-padding)}.sv-quality-picker-title{padding:8px 16px;font-size:14px;font-weight:600;color:var(--sv-quality-picker-text-secondary);text-align:center}.sv-quality-picker-options{display:flex;flex-direction:column;gap:2px}.sv-quality-picker-option{display:flex;align-items:center;gap:12px;height:var(--sv-quality-picker-item-height);padding:0 16px;border:0;background:transparent;color:var(--sv-quality-picker-text);font-size:16px;font-weight:normal;cursor:pointer;border-radius:var(--sv-quality-picker-radius);transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.sv-quality-picker-option:hover{background:var(--sv-quality-picker-item-hover)}.sv-quality-picker-option[data-selected="true"]{color:var(--sv-quality-picker-selected);font-weight:500}.sv-quality-picker-option-label{flex:1;display:flex;align-items:center;gap:8px}.sv-quality-picker-option-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;background:var(--sv-quality-picker-badge);border-radius:4px;color:var(--sv-quality-picker-text-secondary)}.sv-quality-picker-option[data-selected="true"] .sv-quality-picker-option-badge{background:var(--sv-quality-picker-selected);color:#fff}.sv-quality-picker-option-check{width:20px;height:20px;color:var(--sv-quality-picker-check);opacity:0;transition:opacity 150ms ease}.sv-quality-picker-option[data-selected="true"] .sv-quality-picker-option-check{opacity:1}.sv-quality-picker-empty{padding:24px 16px;text-align:center;color:var(--sv-quality-picker-text-secondary);font-size:14px}`;
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected || typeof document === "undefined") return;
+  const styleId = "sv-quality-picker-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = QUALITY_PICKER_CSS;
+    document.head.appendChild(style);
+  }
+  cssInjected = true;
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function getQualityBadge(height) {
+  if (height >= 2160) return "4K";
+  if (height >= 1080) return "FHD";
+  if (height >= 720) return "HD";
+  return null;
+}
+function formatQualityLabel(level) {
+  return `${level.height}p`;
+}
+function QualityPickerHeadlessComponent({
+  quality,
+  levels,
+  onQualityChange,
+  title = "Quality",
+  className,
+  onClose,
+  autoClose = true,
+  showAuto = true,
+  autoLabel = "Auto",
+  emptyMessage = "No quality options available"
+}) {
+  useEffect(() => {
+    injectCSS();
+  }, []);
+  const handleSelect = useCallback(
+    (level) => {
+      onQualityChange(level);
+      if (autoClose && onClose) {
+        onClose();
+      }
+    },
+    [onQualityChange, autoClose, onClose]
+  );
+  const sortedLevels = [...levels].sort((a, b) => b.height - a.height);
+  const isEmpty = sortedLevels.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-quality-picker", className), "aria-label": title, children: [
+    title && /* @__PURE__ */ jsx("div", { className: "sv-quality-picker-title", children: title }),
+    isEmpty ? /* @__PURE__ */ jsx("div", { className: "sv-quality-picker-empty", children: emptyMessage }) : /* @__PURE__ */ jsxs("div", { className: "sv-quality-picker-options", children: [
+      showAuto && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "sv-quality-picker-option",
+          "data-selected": quality === -1,
+          onClick: () => handleSelect(-1),
+          "aria-selected": quality === -1,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-label", children: autoLabel }),
+            /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+          ]
+        }
+      ),
+      sortedLevels.map((level, index) => {
+        const isSelected = quality === index;
+        const badge = getQualityBadge(level.height);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "sv-quality-picker-option",
+            "data-selected": isSelected,
+            onClick: () => handleSelect(index),
+            "aria-selected": isSelected,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "sv-quality-picker-option-label", children: [
+                formatQualityLabel(level),
+                badge && /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-badge", children: badge })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "sv-quality-picker-option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+            ]
+          },
+          level.height
+        );
+      })
+    ] })
+  ] });
+}
+var QualityPickerHeadless = memo(QualityPickerHeadlessComponent);
+
+export { QUALITY_PICKER_CSS, QualityPickerHeadless };