@fanvue/ui 3.15.0 → 3.17.0

package/dist/utils/useAudioPlayback.mjs

@@ -0,0 +1,106 @@
+"use client";
+import * as React from "react";
+function useAudioPlayback({
+  src,
+  duration,
+  playing: controlledPlaying,
+  defaultPlaying = false,
+  onPlay,
+  onPause,
+  onEnded
+}) {
+  const audioRef = React.useRef(null);
+  const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);
+  const isControlled = controlledPlaying !== void 0;
+  const isPlaying = isControlled ? controlledPlaying : internalPlaying;
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [mediaDuration, setMediaDuration] = React.useState(void 0);
+  const seekingRef = React.useRef(false);
+  const displayDuration = mediaDuration ?? duration;
+  const hasStarted = isPlaying || currentTime > 0;
+  const playingRef = React.useRef(isPlaying);
+  playingRef.current = isPlaying;
+  const isControlledRef = React.useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const onPauseRef = React.useRef(onPause);
+  onPauseRef.current = onPause;
+  const isFirstSrcRenderRef = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstSrcRenderRef.current) {
+      isFirstSrcRenderRef.current = false;
+      return;
+    }
+    setCurrentTime(0);
+    setMediaDuration(void 0);
+    if (playingRef.current) {
+      if (!isControlledRef.current) setInternalPlaying(false);
+      onPauseRef.current?.();
+    }
+  }, [src]);
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      audio.play().catch(() => {
+        if (!isControlled) setInternalPlaying(false);
+        onPauseRef.current?.();
+      });
+    } else {
+      audio.pause();
+    }
+  }, [isPlaying, isControlled]);
+  const toggle = React.useCallback(() => {
+    const next = !playingRef.current;
+    if (!isControlledRef.current) setInternalPlaying(next);
+    if (next) onPlay?.();
+    else onPause?.();
+  }, [onPlay, onPause]);
+  const seekTo = React.useCallback(
+    (time) => {
+      if (displayDuration === void 0) return;
+      const clamped = Math.min(Math.max(time, 0), displayDuration);
+      setCurrentTime(clamped);
+      const audio = audioRef.current;
+      if (audio) audio.currentTime = clamped;
+    },
+    [displayDuration]
+  );
+  const setSeeking = React.useCallback((seeking) => {
+    seekingRef.current = seeking;
+  }, []);
+  const progress = displayDuration && displayDuration > 0 ? Math.min(Math.max(currentTime / displayDuration, 0), 1) : 0;
+  const audioHandlers = React.useMemo(
+    () => ({
+      onLoadedMetadata: (event) => {
+        const nativeDuration = event.currentTarget.duration;
+        setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : void 0);
+      },
+      onTimeUpdate: (event) => {
+        if (seekingRef.current) return;
+        setCurrentTime(event.currentTarget.currentTime);
+      },
+      onEnded: () => {
+        setCurrentTime(0);
+        if (!isControlledRef.current) setInternalPlaying(false);
+        onEnded?.();
+      }
+    }),
+    [onEnded]
+  );
+  return {
+    audioRef,
+    isPlaying,
+    toggle,
+    currentTime,
+    displayDuration,
+    progress,
+    hasStarted,
+    seekTo,
+    setSeeking,
+    audioHandlers
+  };
+}
+export {
+  useAudioPlayback
+};
+//# sourceMappingURL=useAudioPlayback.mjs.map

package/dist/utils/useAudioPlayback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioPlayback.mjs","sources":["../../src/utils/useAudioPlayback.ts"],"sourcesContent":["import * as React from \"react\";\n\n/** Options for {@link useAudioPlayback}. */\nexport interface UseAudioPlaybackOptions {\n  /** URL of the audio to play. When absent, the hook stays idle (no media element attached). */\n  src?: string;\n  /** Fallback total duration (seconds) used until the media's own metadata loads. */\n  duration?: number;\n  /** Whether playback is active (controlled). */\n  playing?: boolean;\n  /** Initial playing state (uncontrolled). @default false */\n  defaultPlaying?: boolean;\n  /** Called when playback starts (via the toggle). */\n  onPlay?: () => void;\n  /** Called when playback pauses (via the toggle, a failed play(), or a src swap). */\n  onPause?: () => void;\n  /** Called when playback reaches the end of the media. */\n  onEnded?: () => void;\n}\n\n/** Handlers to spread onto the backing `<audio>` element. */\nexport interface AudioElementHandlers {\n  onLoadedMetadata: (event: React.SyntheticEvent<HTMLAudioElement>) => void;\n  onTimeUpdate: (event: React.SyntheticEvent<HTMLAudioElement>) => void;\n  onEnded: () => void;\n}\n\n/** Result of {@link useAudioPlayback}. */\nexport interface UseAudioPlaybackResult {\n  /** Attach to the backing `<audio>` element. */\n  audioRef: React.RefObject<HTMLAudioElement | null>;\n  /** Current play/pause state (respects controlled `playing`). */\n  isPlaying: boolean;\n  /** Toggle play/pause, firing `onPlay`/`onPause`. */\n  toggle: () => void;\n  /** Current playback position in seconds. */\n  currentTime: number;\n  /** Media duration once known, else the `duration` fallback. */\n  displayDuration: number | undefined;\n  /** Playback progress, 0–1. */\n  progress: number;\n  /** Whether playback has begun (playing or scrubbed past 0). */\n  hasStarted: boolean;\n  /** Seek to a time in seconds (clamped to the duration). */\n  seekTo: (time: number) => void;\n  /** Suppress `timeupdate`-driven position updates while a manual scrub is in progress. */\n  setSeeking: (seeking: boolean) => void;\n  /** Handlers to spread onto the `<audio>` element. */\n  audioHandlers: AudioElementHandlers;\n}\n\n/**\n * Drives a single `<audio>` element: controlled/uncontrolled play/pause, live\n * position + duration, seeking, and src-swap resets. Extracted from\n * {@link AudioPlayer} so waveform players (e.g. {@link VoiceNote}) can share the\n * same playback engine without duplicating the effect wiring.\n */\nexport function useAudioPlayback({\n  src,\n  duration,\n  playing: controlledPlaying,\n  defaultPlaying = false,\n  onPlay,\n  onPause,\n  onEnded,\n}: UseAudioPlaybackOptions): UseAudioPlaybackResult {\n  const audioRef = React.useRef<HTMLAudioElement>(null);\n\n  const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);\n  const isControlled = controlledPlaying !== undefined;\n  const isPlaying = isControlled ? controlledPlaying : internalPlaying;\n\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [mediaDuration, setMediaDuration] = React.useState<number | undefined>(undefined);\n  const seekingRef = React.useRef(false);\n\n  const displayDuration = mediaDuration ?? duration;\n  const hasStarted = isPlaying || currentTime > 0;\n\n  // Latest-value refs so the src-change effect can react to a src swap without\n  // re-running whenever playing/isControlled/onPause change.\n  const playingRef = React.useRef(isPlaying);\n  playingRef.current = isPlaying;\n  const isControlledRef = React.useRef(isControlled);\n  isControlledRef.current = isControlled;\n  const onPauseRef = React.useRef(onPause);\n  onPauseRef.current = onPause;\n\n  // Reset transient playback state on source change; skip the initial mount and,\n  // if playback was active, stop it (the browser drops playback on a src swap).\n  const isFirstSrcRenderRef = React.useRef(true);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally keyed on src to reset transient state on a source swap\n  React.useEffect(() => {\n    if (isFirstSrcRenderRef.current) {\n      isFirstSrcRenderRef.current = false;\n      return;\n    }\n    setCurrentTime(0);\n    setMediaDuration(undefined);\n    if (playingRef.current) {\n      if (!isControlledRef.current) setInternalPlaying(false);\n      onPauseRef.current?.();\n    }\n  }, [src]);\n\n  // Sync the controlled/uncontrolled playing state to the media element.\n  React.useEffect(() => {\n    const audio = audioRef.current;\n    if (!audio) return;\n    if (isPlaying) {\n      audio.play().catch(() => {\n        if (!isControlled) setInternalPlaying(false);\n        onPauseRef.current?.();\n      });\n    } else {\n      audio.pause();\n    }\n  }, [isPlaying, isControlled]);\n\n  const toggle = React.useCallback(() => {\n    const next = !playingRef.current;\n    if (!isControlledRef.current) setInternalPlaying(next);\n    if (next) onPlay?.();\n    else onPause?.();\n  }, [onPlay, onPause]);\n\n  const seekTo = React.useCallback(\n    (time: number) => {\n      if (displayDuration === undefined) return;\n      const clamped = Math.min(Math.max(time, 0), displayDuration);\n      setCurrentTime(clamped);\n      const audio = audioRef.current;\n      if (audio) audio.currentTime = clamped;\n    },\n    [displayDuration],\n  );\n\n  const setSeeking = React.useCallback((seeking: boolean) => {\n    seekingRef.current = seeking;\n  }, []);\n\n  const progress =\n    displayDuration && displayDuration > 0\n      ? Math.min(Math.max(currentTime / displayDuration, 0), 1)\n      : 0;\n\n  const audioHandlers = React.useMemo<AudioElementHandlers>(\n    () => ({\n      onLoadedMetadata: (event) => {\n        const nativeDuration = event.currentTarget.duration;\n        setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : undefined);\n      },\n      onTimeUpdate: (event) => {\n        if (seekingRef.current) return;\n        setCurrentTime(event.currentTarget.currentTime);\n      },\n      onEnded: () => {\n        setCurrentTime(0);\n        if (!isControlledRef.current) setInternalPlaying(false);\n        onEnded?.();\n      },\n    }),\n    [onEnded],\n  );\n\n  return {\n    audioRef,\n    isPlaying,\n    toggle,\n    currentTime,\n    displayDuration,\n    progress,\n    hasStarted,\n    seekTo,\n    setSeeking,\n    audioHandlers,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/utils/useFittedBarCount.mjs

@@ -0,0 +1,25 @@
+"use client";
+import * as React from "react";
+function useFittedBarCount(trackRef, { barWidthPx, gapPx, fallback }) {
+  const [barCount, setBarCount] = React.useState(fallback);
+  React.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const updateFromWidth = (width) => {
+      if (width <= 0) return;
+      setBarCount(Math.max(1, Math.floor((width + gapPx) / (barWidthPx + gapPx))));
+    };
+    updateFromWidth(track.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) updateFromWidth(entry.contentRect.width);
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, [trackRef, barWidthPx, gapPx]);
+  return barCount;
+}
+export {
+  useFittedBarCount
+};
+//# sourceMappingURL=useFittedBarCount.mjs.map

package/dist/utils/useFittedBarCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFittedBarCount.mjs","sources":["../../src/utils/useFittedBarCount.ts"],"sourcesContent":["import * as React from \"react\";\n\n/** Options for {@link useFittedBarCount}. */\nexport interface UseFittedBarCountOptions {\n  /** Rendered width of a single bar, in pixels. */\n  barWidthPx: number;\n  /** Gap between bars, in pixels. */\n  gapPx: number;\n  /** Bar count used before the track is measured (SSR, jsdom, or zero-width layout). */\n  fallback: number;\n}\n\n/**\n * Measures a waveform track and returns how many fixed-width bars fit across it,\n * updating on resize. Lets callers resample their peaks to the *visible* bar\n * count so overflow bars aren't rendered (and, crucially, aren't counted when\n * computing playback progress).\n */\nexport function useFittedBarCount(\n  trackRef: React.RefObject<HTMLElement | null>,\n  { barWidthPx, gapPx, fallback }: UseFittedBarCountOptions,\n): number {\n  const [barCount, setBarCount] = React.useState(fallback);\n\n  React.useEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const updateFromWidth = (width: number) => {\n      if (width <= 0) return;\n      setBarCount(Math.max(1, Math.floor((width + gapPx) / (barWidthPx + gapPx))));\n    };\n\n    updateFromWidth(track.getBoundingClientRect().width);\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) updateFromWidth(entry.contentRect.width);\n    });\n    observer.observe(track);\n    return () => observer.disconnect();\n  }, [trackRef, barWidthPx, gapPx]);\n\n  return barCount;\n}\n"],"names":[],"mappings":";;AAkBO,SAAS,kBACd,UACA,EAAE,YAAY,OAAO,YACb;AACR,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,QAAQ;AAEvD,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AAEZ,UAAM,kBAAkB,CAAC,UAAkB;AACzC,UAAI,SAAS,EAAG;AAChB,kBAAY,KAAK,IAAI,GAAG,KAAK,OAAO,QAAQ,UAAU,aAAa,MAAM,CAAC,CAAC;AAAA,IAC7E;AAEA,oBAAgB,MAAM,sBAAA,EAAwB,KAAK;AAEnD,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC/C,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,MAAO,iBAAgB,MAAM,YAAY,KAAK;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,KAAK;AACtB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,UAAU,YAAY,KAAK,CAAC;AAEhC,SAAO;AACT;"}

package/dist/utils/useWaveformPeaks.mjs

@@ -0,0 +1,31 @@
+"use client";
+import * as React from "react";
+import { RAW_PEAK_COUNT, generateFallbackPeaks, decodeAudioPeaks } from "./audioWaveform.mjs";
+function useWaveformPeaks(src, count = RAW_PEAK_COUNT) {
+  const [peaks, setPeaks] = React.useState(
+    () => src ? generateFallbackPeaks(src, count) : []
+  );
+  React.useEffect(() => {
+    if (!src) {
+      setPeaks([]);
+      return;
+    }
+    setPeaks(generateFallbackPeaks(src, count));
+    let cancelled = false;
+    const abortController = new AbortController();
+    decodeAudioPeaks(src, abortController.signal).then((decoded) => {
+      if (!cancelled) setPeaks(decoded);
+    }).catch(() => {
+      if (!cancelled) setPeaks(generateFallbackPeaks(src, count));
+    });
+    return () => {
+      cancelled = true;
+      abortController.abort();
+    };
+  }, [src, count]);
+  return peaks;
+}
+export {
+  useWaveformPeaks
+};
+//# sourceMappingURL=useWaveformPeaks.mjs.map

package/dist/utils/useWaveformPeaks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWaveformPeaks.mjs","sources":["../../src/utils/useWaveformPeaks.ts"],"sourcesContent":["import * as React from \"react\";\nimport { decodeAudioPeaks, generateFallbackPeaks, RAW_PEAK_COUNT } from \"./audioWaveform\";\n\n/**\n * Decodes `src` into waveform peak amplitudes (0–1). Seeds a deterministic\n * fallback immediately (stable across renders/SSR) and swaps in the real\n * decoded peaks once WebAudio resolves, falling back again on any failure.\n * Returns an empty array when `src` is absent.\n */\nexport function useWaveformPeaks(\n  src: string | undefined,\n  count: number = RAW_PEAK_COUNT,\n): number[] {\n  const [peaks, setPeaks] = React.useState<number[]>(() =>\n    src ? generateFallbackPeaks(src, count) : [],\n  );\n\n  React.useEffect(() => {\n    if (!src) {\n      setPeaks([]);\n      return;\n    }\n\n    setPeaks(generateFallbackPeaks(src, count));\n\n    let cancelled = false;\n    const abortController = new AbortController();\n    decodeAudioPeaks(src, abortController.signal)\n      .then((decoded) => {\n        if (!cancelled) setPeaks(decoded);\n      })\n      .catch(() => {\n        if (!cancelled) setPeaks(generateFallbackPeaks(src, count));\n      });\n\n    return () => {\n      cancelled = true;\n      abortController.abort();\n    };\n  }, [src, count]);\n\n  return peaks;\n}\n"],"names":[],"mappings":";;;AASO,SAAS,iBACd,KACA,QAAgB,gBACN;AACV,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM;AAAA,IAAmB,MACjD,MAAM,sBAAsB,KAAK,KAAK,IAAI,CAAA;AAAA,EAAC;AAG7C,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAK;AACR,eAAS,CAAA,CAAE;AACX;AAAA,IACF;AAEA,aAAS,sBAAsB,KAAK,KAAK,CAAC;AAE1C,QAAI,YAAY;AAChB,UAAM,kBAAkB,IAAI,gBAAA;AAC5B,qBAAiB,KAAK,gBAAgB,MAAM,EACzC,KAAK,CAAC,YAAY;AACjB,UAAI,CAAC,UAAW,UAAS,OAAO;AAAA,IAClC,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,UAAS,sBAAsB,KAAK,KAAK,CAAC;AAAA,IAC5D,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AACZ,sBAAgB,MAAA;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,SAAO;AACT;"}

package/dist/utils/useWaveformSeek.mjs

@@ -0,0 +1,83 @@
+"use client";
+import * as React from "react";
+import { formatTime } from "./audioWaveform.mjs";
+const SEEK_STEP_SECONDS = 1;
+const SEEK_STEP_LARGE_SECONDS = 5;
+const STEP_BY_KEY = {
+  ArrowRight: SEEK_STEP_SECONDS,
+  ArrowUp: SEEK_STEP_SECONDS,
+  ArrowLeft: -SEEK_STEP_SECONDS,
+  ArrowDown: -SEEK_STEP_SECONDS,
+  PageUp: SEEK_STEP_LARGE_SECONDS,
+  PageDown: -SEEK_STEP_LARGE_SECONDS
+};
+function useWaveformSeek({
+  trackRef,
+  displayDuration,
+  currentTime,
+  seekTo,
+  setSeeking,
+  label = "Seek"
+}) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const seekFromClientX = React.useCallback(
+    (clientX) => {
+      const track = trackRef.current;
+      if (!track || displayDuration === void 0) return;
+      const rect = track.getBoundingClientRect();
+      if (rect.width <= 0) return;
+      const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+      seekTo(fraction * displayDuration);
+    },
+    [trackRef, displayDuration, seekTo]
+  );
+  React.useEffect(() => {
+    if (!isDragging) return;
+    const handleMove = (event) => seekFromClientX(event.clientX);
+    const handleUp = () => {
+      setIsDragging(false);
+      setSeeking(false);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+    return () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+  }, [isDragging, seekFromClientX, setSeeking]);
+  const onPointerDown = (event) => {
+    seekFromClientX(event.clientX);
+    setSeeking(true);
+    setIsDragging(true);
+  };
+  const onKeyDown = (event) => {
+    if (displayDuration === void 0) return;
+    const delta = STEP_BY_KEY[event.key];
+    if (delta !== void 0) {
+      event.preventDefault();
+      seekTo(currentTime + delta);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      seekTo(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      seekTo(displayDuration);
+    }
+  };
+  return {
+    role: "slider",
+    tabIndex: 0,
+    "aria-label": label,
+    "aria-orientation": "horizontal",
+    "aria-valuemin": 0,
+    "aria-valuemax": displayDuration,
+    "aria-valuenow": Math.round(currentTime),
+    "aria-valuetext": displayDuration !== void 0 ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}` : void 0,
+    onPointerDown,
+    onKeyDown
+  };
+}
+export {
+  useWaveformSeek
+};
+//# sourceMappingURL=useWaveformSeek.mjs.map

package/dist/utils/useWaveformSeek.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWaveformSeek.mjs","sources":["../../src/utils/useWaveformSeek.ts"],"sourcesContent":["import * as React from \"react\";\nimport { formatTime } from \"./audioWaveform\";\n\n/** Seconds moved per Arrow key press while seeking. */\nconst SEEK_STEP_SECONDS = 1;\n/** Seconds moved per Page Up/Down press while seeking. */\nconst SEEK_STEP_LARGE_SECONDS = 5;\n\n/** Signed seek delta (seconds) for each stepping key. */\nconst STEP_BY_KEY: Record<string, number | undefined> = {\n  ArrowRight: SEEK_STEP_SECONDS,\n  ArrowUp: SEEK_STEP_SECONDS,\n  ArrowLeft: -SEEK_STEP_SECONDS,\n  ArrowDown: -SEEK_STEP_SECONDS,\n  PageUp: SEEK_STEP_LARGE_SECONDS,\n  PageDown: -SEEK_STEP_LARGE_SECONDS,\n};\n\n/** Options for {@link useWaveformSeek}. */\nexport interface UseWaveformSeekOptions {\n  /** Ref to the seekable track element (its width maps pointer position → time). */\n  trackRef: React.RefObject<HTMLElement | null>;\n  /** Total duration in seconds, or `undefined` until known. */\n  displayDuration: number | undefined;\n  /** Current playback position in seconds. */\n  currentTime: number;\n  /** Seek to a time in seconds. */\n  seekTo: (time: number) => void;\n  /** Suppress position updates while a manual scrub is in progress. */\n  setSeeking: (seeking: boolean) => void;\n  /** Accessible name for the slider. @default \"Seek\" */\n  label?: string;\n}\n\n/** ARIA + event props to spread onto the seekable track element. */\nexport interface WaveformSeekProps {\n  role: \"slider\";\n  tabIndex: 0;\n  \"aria-label\": string;\n  \"aria-orientation\": \"horizontal\";\n  \"aria-valuemin\": 0;\n  \"aria-valuemax\": number | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuetext\": string | undefined;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\n/**\n * Turns a waveform track into a keyboard- and pointer-seekable slider. Handles\n * click/drag position math (via window listeners so drags can leave the element)\n * and Arrow/Page/Home/End stepping, and returns ARIA slider props to spread onto\n * the track. Shared by waveform players so seek behaviour isn't reimplemented.\n */\nexport function useWaveformSeek({\n  trackRef,\n  displayDuration,\n  currentTime,\n  seekTo,\n  setSeeking,\n  label = \"Seek\",\n}: UseWaveformSeekOptions): WaveformSeekProps {\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const seekFromClientX = React.useCallback(\n    (clientX: number) => {\n      const track = trackRef.current;\n      if (!track || displayDuration === undefined) return;\n      const rect = track.getBoundingClientRect();\n      if (rect.width <= 0) return;\n      const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);\n      seekTo(fraction * displayDuration);\n    },\n    [trackRef, displayDuration, seekTo],\n  );\n\n  React.useEffect(() => {\n    if (!isDragging) return;\n    const handleMove = (event: PointerEvent) => seekFromClientX(event.clientX);\n    const handleUp = () => {\n      setIsDragging(false);\n      setSeeking(false);\n    };\n    window.addEventListener(\"pointermove\", handleMove);\n    window.addEventListener(\"pointerup\", handleUp);\n    return () => {\n      window.removeEventListener(\"pointermove\", handleMove);\n      window.removeEventListener(\"pointerup\", handleUp);\n    };\n  }, [isDragging, seekFromClientX, setSeeking]);\n\n  const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    seekFromClientX(event.clientX);\n    setSeeking(true);\n    setIsDragging(true);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (displayDuration === undefined) return;\n    const delta = STEP_BY_KEY[event.key];\n    if (delta !== undefined) {\n      event.preventDefault();\n      seekTo(currentTime + delta);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      seekTo(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      seekTo(displayDuration);\n    }\n  };\n\n  return {\n    role: \"slider\",\n    tabIndex: 0,\n    \"aria-label\": label,\n    \"aria-orientation\": \"horizontal\",\n    \"aria-valuemin\": 0,\n    \"aria-valuemax\": displayDuration,\n    \"aria-valuenow\": Math.round(currentTime),\n    \"aria-valuetext\":\n      displayDuration !== undefined\n        ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}`\n        : undefined,\n    onPointerDown,\n    onKeyDown,\n  };\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,oBAAoB;AAE1B,MAAM,0BAA0B;AAGhC,MAAM,cAAkD;AAAA,EACtD,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW,CAAC;AAAA,EACZ,WAAW,CAAC;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU,CAAC;AACb;AAsCO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAA8C;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAExD,QAAM,kBAAkB,MAAM;AAAA,IAC5B,CAAC,YAAoB;AACnB,YAAM,QAAQ,SAAS;AACvB,UAAI,CAAC,SAAS,oBAAoB,OAAW;AAC7C,YAAM,OAAO,MAAM,sBAAA;AACnB,UAAI,KAAK,SAAS,EAAG;AACrB,YAAM,WAAW,KAAK,IAAI,KAAK,KAAK,UAAU,KAAK,QAAQ,KAAK,OAAO,CAAC,GAAG,CAAC;AAC5E,aAAO,WAAW,eAAe;AAAA,IACnC;AAAA,IACA,CAAC,UAAU,iBAAiB,MAAM;AAAA,EAAA;AAGpC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,WAAY;AACjB,UAAM,aAAa,CAAC,UAAwB,gBAAgB,MAAM,OAAO;AACzE,UAAM,WAAW,MAAM;AACrB,oBAAc,KAAK;AACnB,iBAAW,KAAK;AAAA,IAClB;AACA,WAAO,iBAAiB,eAAe,UAAU;AACjD,WAAO,iBAAiB,aAAa,QAAQ;AAC7C,WAAO,MAAM;AACX,aAAO,oBAAoB,eAAe,UAAU;AACpD,aAAO,oBAAoB,aAAa,QAAQ;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,UAAU,CAAC;AAE5C,QAAM,gBAAgB,CAAC,UAA2C;AAChE,oBAAgB,MAAM,OAAO;AAC7B,eAAW,IAAI;AACf,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,YAAY,CAAC,UAA4C;AAC7D,QAAI,oBAAoB,OAAW;AACnC,UAAM,QAAQ,YAAY,MAAM,GAAG;AACnC,QAAI,UAAU,QAAW;AACvB,YAAM,eAAA;AACN,aAAO,cAAc,KAAK;AAAA,IAC5B,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAA;AACN,aAAO,CAAC;AAAA,IACV,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAA;AACN,aAAO,eAAe;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB,KAAK,MAAM,WAAW;AAAA,IACvC,kBACE,oBAAoB,SAChB,GAAG,WAAW,WAAW,CAAC,OAAO,WAAW,eAAe,CAAC,KAC5D;AAAA,IACN;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",