@fanvue/ui 3.16.0 → 3.18.0

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.16.0",
+  "version": "3.18.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",