@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/chunk-VXW7AOGM.js

@@ -0,0 +1,285 @@
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { memo, useInsertionEffect, useMemo, useEffect, useCallback, useRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ProgressBar/ProgressBar.css.ts
+var PROGRESS_BAR_CSS = `.sv-progress-bar{position:relative;width:100%;height:var(--sv-progress-bar-touch-height,24px);display:flex;align-items:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}.sv-progress-bar--disabled{cursor:default;pointer-events:none}.sv-progress-bar__track-wrapper{position:relative;flex:1;display:flex;align-items:center}.sv-progress-bar__track{position:relative;width:100%;height:var(--sv-progress-bar-height,3px);background:var(--sv-progress-bar-track-bg,rgba(255,255,255,.2));border-radius:var(--sv-progress-bar-radius,1.5px);overflow:hidden}.sv-progress-bar:hover .sv-progress-bar__track,.sv-progress-bar--seeking .sv-progress-bar__track{height:var(--sv-progress-bar-height-active,5px)}.sv-progress-bar--seeking .sv-progress-bar__fill,.sv-progress-bar--seeking .sv-progress-bar__handle{transition:none}.sv-progress-bar__buffered{position:absolute;top:0;left:0;height:100%;background:var(--sv-progress-bar-buffered-bg,rgba(255,255,255,.3));border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:transform .3s ease-out}.sv-progress-bar__fill{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--sv-progress-bar-fill-bg,var(--sv-color-accent,#fe2c55));border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:var(--sv-progress-bar-fill-transition,transform .25s linear);will-change:transform}.sv-progress-bar__handle{position:absolute;top:50%;width:var(--sv-progress-bar-handle-size,12px);height:var(--sv-progress-bar-handle-size,12px);left:0;transform:translate(-50%,-50%)scale(0);background:var(--sv-progress-bar-handle-bg,#fff);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .25s linear,transform .15s ease-out}.sv-progress-bar:hover .sv-progress-bar__handle,.sv-progress-bar--seeking .sv-progress-bar__handle{transform:translate(-50%,-50%)scale(1)}.sv-progress-bar__time{display:flex;justify-content:space-between;padding:var(--sv-spacing-xs,4px)0;font-family:var(--sv-font-family,'Urbanist',sans-serif);font-size:var(--sv-font-size-xs,11px);font-variant-numeric:tabular-nums;color:var(--sv-text-secondary,rgba(255,255,255,.7))}.sv-progress-bar__time-current,.sv-progress-bar__time-duration{min-width:2.5em}.sv-progress-bar__time-current{text-align:left}.sv-progress-bar__time-duration{text-align:right}.sv-progress-bar__tooltip{position:absolute;top:0;left:0;transform:translate(-50%,-100%);margin-top:-8px;padding:4px 8px;background:var(--sv-bg-overlay,rgba(0,0,0,.8));border-radius:var(--sv-border-radius-sm,4px);font-family:var(--sv-font-family,'Urbanist',sans-serif);font-size:var(--sv-font-size-xs,11px);font-variant-numeric:tabular-nums;color:var(--sv-text-primary,#fff);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none;z-index:10}.sv-progress-bar:hover .sv-progress-bar__tooltip,.sv-progress-bar--seeking .sv-progress-bar__tooltip{opacity:1;visibility:visible}.sv-progress-bar--minimal{height:auto}.sv-progress-bar--minimal .sv-progress-bar__track{height:var(--sv-progress-bar-height-minimal,2px)}.sv-progress-bar--minimal:hover .sv-progress-bar__track{height:var(--sv-progress-bar-height-minimal,2px)}.sv-progress-bar--minimal .sv-progress-bar__handle{display:none}.sv-progress-bar--auto-hide{transition:opacity .3s ease,visibility .3s ease,transform .3s ease;opacity:1;visibility:visible;transform:translateY(0)}.sv-progress-bar--auto-hide.sv-progress-bar--hidden{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}.sv-progress-bar--auto-hide:hover{opacity:1;visibility:visible;transform:translateY(0)}.sv-progress-bar--auto-hide.sv-progress-bar--seeking{opacity:1;visibility:visible;transform:translateY(0)}@media(prefers-reduced-motion:reduce){.sv-progress-bar__fill,.sv-progress-bar__buffered,.sv-progress-bar__handle,.sv-progress-bar__tooltip{transition:none}}`;
+var CSS_PREFIX = "sv-progress-bar";
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) 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}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function calculateProgress(currentTime, duration) {
+  if (!duration || duration <= 0) return 0;
+  return Math.min(100, Math.max(0, currentTime / duration * 100));
+}
+function calculateTimeFromPosition(clientX, rect, duration) {
+  const x = clientX - rect.left;
+  const percentage = Math.min(1, Math.max(0, x / rect.width));
+  return percentage * duration;
+}
+function useProgressBarRefs({
+  externalFillRef,
+  externalBufferedRef,
+  externalHandleRef,
+  externalCurrentTimeRef,
+  externalDurationRef
+}) {
+  const containerRef = useRef(null);
+  const internalFillRef = useRef(null);
+  const internalBufferedRef = useRef(null);
+  const internalHandleRef = useRef(null);
+  const internalCurrentTimeRef = useRef(null);
+  const internalDurationRef = useRef(null);
+  const tooltipRef = useRef(null);
+  return {
+    containerRef,
+    tooltipRef,
+    fillRef: externalFillRef ?? internalFillRef,
+    bufferedRef: externalBufferedRef ?? internalBufferedRef,
+    handleRef: externalHandleRef ?? internalHandleRef,
+    currentTimeRef: externalCurrentTimeRef ?? internalCurrentTimeRef,
+    durationRef: externalDurationRef ?? internalDurationRef,
+    hasExternalCurrentTimeRef: !!externalCurrentTimeRef,
+    hasExternalDurationRef: !!externalDurationRef
+  };
+}
+function useSeekHandlers({
+  containerRef,
+  duration,
+  isSeekable,
+  onSeek,
+  onSeekStart,
+  onSeekEnd
+}) {
+  const [isSeeking, setIsSeeking] = useState(false);
+  const [hoverTime, setHoverTime] = useState(null);
+  const [hoverPosition, setHoverPosition] = useState(0);
+  const handleSeek = useCallback(
+    (clientX) => {
+      if (!isSeekable || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const time = calculateTimeFromPosition(clientX, rect, duration);
+      onSeek?.(time);
+    },
+    [isSeekable, duration, onSeek, containerRef]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!isSeekable) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (typeof e.currentTarget.setPointerCapture === "function") {
+        e.currentTarget.setPointerCapture(e.pointerId);
+      }
+      setIsSeeking(true);
+      onSeekStart?.();
+      handleSeek(e.clientX);
+    },
+    [isSeekable, onSeekStart, handleSeek]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const time = calculateTimeFromPosition(e.clientX, rect, duration);
+      const position = (e.clientX - rect.left) / rect.width * 100;
+      setHoverTime(time);
+      setHoverPosition(Math.min(100, Math.max(0, position)));
+      if (isSeeking) handleSeek(e.clientX);
+    },
+    [duration, isSeeking, handleSeek, containerRef]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (isSeeking) {
+        if (typeof e.currentTarget.releasePointerCapture === "function") {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+        setIsSeeking(false);
+        onSeekEnd?.();
+      }
+    },
+    [isSeeking, onSeekEnd]
+  );
+  const handlePointerLeave = useCallback(() => {
+    setHoverTime(null);
+    if (isSeeking) {
+      setIsSeeking(false);
+      onSeekEnd?.();
+    }
+  }, [isSeeking, onSeekEnd]);
+  return {
+    isSeeking,
+    hoverTime,
+    hoverPosition,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerLeave
+  };
+}
+function ProgressBarHeadlessBase({
+  currentTime,
+  duration,
+  buffered = 0,
+  seekable = false,
+  className,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  showTime = false,
+  showTooltip,
+  minimal = false,
+  autoHide = true,
+  visible,
+  fillRef: externalFillRef,
+  bufferedRef: externalBufferedRef,
+  handleRef: externalHandleRef,
+  currentTimeRef: externalCurrentTimeRef,
+  durationRef: externalDurationRef
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("progress-bar", PROGRESS_BAR_CSS);
+  }, []);
+  const refs = useProgressBarRefs({
+    externalFillRef,
+    externalBufferedRef,
+    externalHandleRef,
+    externalCurrentTimeRef,
+    externalDurationRef
+  });
+  const progress = useMemo(() => calculateProgress(currentTime, duration), [currentTime, duration]);
+  const bufferedPercent = useMemo(() => Math.min(100, Math.max(0, buffered * 100)), [buffered]);
+  const isSeekable = seekable && !!onSeek && duration > 0;
+  const effectiveShowTooltip = showTooltip ?? isSeekable;
+  const {
+    isSeeking,
+    hoverTime,
+    hoverPosition,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerLeave
+  } = useSeekHandlers({
+    containerRef: refs.containerRef,
+    duration,
+    isSeekable,
+    onSeek,
+    onSeekStart,
+    onSeekEnd
+  });
+  useEffect(() => {
+    if (!refs.hasExternalCurrentTimeRef && refs.currentTimeRef.current) {
+      refs.currentTimeRef.current.textContent = formatTime(currentTime);
+    }
+  }, [currentTime, refs]);
+  useEffect(() => {
+    if (!refs.hasExternalDurationRef && refs.durationRef.current) {
+      refs.durationRef.current.textContent = formatTime(duration);
+    }
+  }, [duration, refs]);
+  const stopBubble = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const isHidden = visible !== void 0 ? !visible : autoHide && !isSeeking && hoverTime === null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx2(
+        CSS_PREFIX,
+        !isSeekable && `${CSS_PREFIX}--disabled`,
+        isSeeking && `${CSS_PREFIX}--seeking`,
+        minimal && `${CSS_PREFIX}--minimal`,
+        autoHide && `${CSS_PREFIX}--auto-hide`,
+        isHidden && `${CSS_PREFIX}--hidden`,
+        className
+      ),
+      onClick: stopBubble,
+      onKeyDown: stopBubble,
+      onPointerDown: stopBubble,
+      onPointerUp: stopBubble,
+      onTouchStart: stopBubble,
+      onTouchEnd: stopBubble,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `${CSS_PREFIX}__track-wrapper`, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: refs.containerRef,
+              className: `${CSS_PREFIX}__track`,
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerLeave: handlePointerLeave,
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              role: isSeekable ? "slider" : "progressbar",
+              "aria-label": "Video progress",
+              "aria-valuemin": 0,
+              "aria-valuemax": duration || 100,
+              "aria-valuenow": currentTime,
+              "aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+              tabIndex: isSeekable ? 0 : -1,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: refs.bufferedRef,
+                    className: `${CSS_PREFIX}__buffered`,
+                    style: { transform: `scaleX(${bufferedPercent / 100})` },
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: refs.fillRef,
+                    className: `${CSS_PREFIX}__fill`,
+                    style: { transform: `scaleX(${progress / 100})` },
+                    "aria-hidden": "true"
+                  }
+                ),
+                isSeekable && !minimal && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: refs.handleRef,
+                    className: `${CSS_PREFIX}__handle`,
+                    style: { left: `${progress}%` },
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          effectiveShowTooltip && hoverTime !== null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: refs.tooltipRef,
+              className: `${CSS_PREFIX}__tooltip`,
+              style: { left: `${hoverPosition}%` },
+              "aria-hidden": "true",
+              children: formatTime(hoverTime)
+            }
+          )
+        ] }),
+        showTime && /* @__PURE__ */ jsxs("div", { className: `${CSS_PREFIX}__time`, children: [
+          /* @__PURE__ */ jsx("span", { ref: refs.currentTimeRef, className: `${CSS_PREFIX}__time-current`, children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsx("span", { ref: refs.durationRef, className: `${CSS_PREFIX}__time-duration`, children: formatTime(duration) })
+        ] })
+      ]
+    }
+  );
+}
+var ProgressBarHeadless = memo(ProgressBarHeadlessBase);
+ProgressBarHeadless.displayName = "ProgressBarHeadless";
+
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime };