@adecore/ui 0.31.11 → 0.32.0

package/dist/Waveform.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { formatClockDuration } from './format/duration.js';
 import { mergeRefs } from './merge-refs.js';
 import { useMeasuredWidth } from './useMeasuredWidth.js';
 /* About one bar per 3px, each 2px wide; a bar sits at its own time, so it lines up with the marks and the playhead. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BAR_PITCH = 3;
 const BAR_WIDTH = 2;
 /* The height of a silent bar, so silence still reads as a line. */
@@ -14,110 +15,378 @@ const SILENCE = 0.04;
 const PAGE_STEPS = 10;
 /* The loudest sample under each bar, or null for a bar past either end of the audio. */
 const barsOf = (levels, duration, from, to, count) => {
-    if (count <= 0 || levels.length === 0 || duration <= 0 || to <= from) {
-        return [];
+  if (count <= 0 || levels.length === 0 || duration <= 0 || to <= from) {
+    return [];
+  }
+  const perSecond = levels.length / duration;
+  return Array.from({
+    length: count
+  }, (_, i) => {
+    const start = from + (to - from) * i / count;
+    const end = from + (to - from) * (i + 1) / count;
+    if (end <= 0 || start >= duration) {
+      return null;
     }
-    const perSecond = levels.length / duration;
-    return Array.from({ length: count }, (_, i) => {
-        const start = from + ((to - from) * i) / count;
-        const end = from + ((to - from) * (i + 1)) / count;
-        if (end <= 0 || start >= duration) {
-            return null;
-        }
-        const first = Math.max(0, Math.floor(start * perSecond));
-        const last = Math.min(levels.length - 1, Math.max(first, Math.ceil(end * perSecond) - 1));
-        let level = 0;
-        for (let index = first; index <= last; index++) {
-            level = Math.max(level, levels[index] ?? 0);
-        }
-        return Math.min(1, Math.max(SILENCE, level));
-    });
+    const first = Math.max(0, Math.floor(start * perSecond));
+    const last = Math.min(levels.length - 1, Math.max(first, Math.ceil(end * perSecond) - 1));
+    let level = 0;
+    for (let index = first; index <= last; index++) {
+      level = Math.max(level, levels[index] ?? 0);
+    }
+    return Math.min(1, Math.max(SILENCE, level));
+  });
 };
 /* The loudness of a piece of audio over time, played up to the playhead, where a press or a drag seeks. */
-export function Waveform({ levels, duration, range, value, onValueChange, onValueCommitted, step = 1, onKeyDown, marks = [], label, className, ref }) {
-    const { t } = useTranslation('ui');
-    const [measure, width] = useMeasuredWidth();
-    const rootRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
-    const dragged = useRef(0);
-    const [from, to] = range ?? [0, duration];
-    const span = to - from;
-    const count = Math.floor(width / BAR_PITCH);
-    const bars = useMemo(() => barsOf(levels, duration, from, to, count), [levels, duration, from, to, count]);
-    const positionOf = (time) => (span > 0 ? (time - from) / span : 0);
-    const inView = (time) => positionOf(time) >= 0 && positionOf(time) <= 1;
-    const clamp = (time) => Math.min(duration, Math.max(0, time));
-    const seekAt = (e) => {
+export function Waveform(t0) {
+  const $ = _c(93);
+  const {
+    levels,
+    duration,
+    range,
+    value,
+    onValueChange,
+    onValueCommitted,
+    step: t1,
+    onKeyDown,
+    marks: t2,
+    label,
+    className,
+    ref
+  } = t0;
+  const step = t1 === undefined ? 1 : t1;
+  const marks = t2 === undefined ? [] : t2;
+  const {
+    t
+  } = useTranslation("ui");
+  const [measure, width] = useMeasuredWidth();
+  let t3;
+  if ($[0] !== measure || $[1] !== ref) {
+    t3 = mergeRefs(ref, measure);
+    $[0] = measure;
+    $[1] = ref;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const rootRef = t3;
+  const dragged = useRef(0);
+  let t4;
+  if ($[3] !== duration || $[4] !== range) {
+    t4 = range ?? [0, duration];
+    $[3] = duration;
+    $[4] = range;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const [from, to] = t4;
+  const span = to - from;
+  const count = Math.floor(width / BAR_PITCH);
+  let inView;
+  let positionOf;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[6] !== className || $[7] !== count || $[8] !== duration || $[9] !== from || $[10] !== label || $[11] !== levels || $[12] !== onKeyDown || $[13] !== onValueChange || $[14] !== onValueCommitted || $[15] !== rootRef || $[16] !== span || $[17] !== step || $[18] !== t || $[19] !== to || $[20] !== value || $[21] !== width) {
+    const bars = barsOf(levels, duration, from, to, count);
+    let t14;
+    if ($[33] !== from || $[34] !== span) {
+      t14 = time => span > 0 ? (time - from) / span : 0;
+      $[33] = from;
+      $[34] = span;
+      $[35] = t14;
+    } else {
+      t14 = $[35];
+    }
+    positionOf = t14;
+    let t15;
+    if ($[36] !== positionOf) {
+      t15 = time_0 => positionOf(time_0) >= 0 && positionOf(time_0) <= 1;
+      $[36] = positionOf;
+      $[37] = t15;
+    } else {
+      t15 = $[37];
+    }
+    inView = t15;
+    let t16;
+    if ($[38] !== duration) {
+      t16 = time_1 => Math.min(duration, Math.max(0, time_1));
+      $[38] = duration;
+      $[39] = t16;
+    } else {
+      t16 = $[39];
+    }
+    const clamp = t16;
+    let t17;
+    if ($[40] !== clamp || $[41] !== from || $[42] !== onValueChange || $[43] !== span) {
+      t17 = e => {
         const rect = e.currentTarget.getBoundingClientRect();
         if (rect.width > 0) {
-            dragged.current = clamp(from + ((e.clientX - rect.left) / rect.width) * span);
-            onValueChange?.(dragged.current);
+          dragged.current = clamp(from + (e.clientX - rect.left) / rect.width * span);
+          onValueChange?.(dragged.current);
         }
-    };
-    const letGo = (e) => {
-        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-            e.currentTarget.releasePointerCapture(e.pointerId);
-            onValueCommitted?.(dragged.current);
+      };
+      $[40] = clamp;
+      $[41] = from;
+      $[42] = onValueChange;
+      $[43] = span;
+      $[44] = t17;
+    } else {
+      t17 = $[44];
+    }
+    const seekAt = t17;
+    let t18;
+    if ($[45] !== onValueCommitted) {
+      t18 = e_0 => {
+        if (e_0.currentTarget.hasPointerCapture(e_0.pointerId)) {
+          e_0.currentTarget.releasePointerCapture(e_0.pointerId);
+          onValueCommitted?.(dragged.current);
         }
-    };
-    const moveByKey = (e) => {
-        onKeyDown?.(e);
-        if (e.defaultPrevented) {
-            return;
+      };
+      $[45] = onValueCommitted;
+      $[46] = t18;
+    } else {
+      t18 = $[46];
+    }
+    const letGo = t18;
+    let t19;
+    if ($[47] !== clamp || $[48] !== duration || $[49] !== onKeyDown || $[50] !== onValueChange || $[51] !== onValueCommitted || $[52] !== step || $[53] !== value) {
+      t19 = e_1 => {
+        onKeyDown?.(e_1);
+        if (e_1.defaultPrevented) {
+          return;
         }
         const at = value ?? 0;
         const moves = {
-            ArrowLeft: at - step,
-            ArrowDown: at - step,
-            ArrowRight: at + step,
-            ArrowUp: at + step,
-            PageDown: at - step * PAGE_STEPS,
-            PageUp: at + step * PAGE_STEPS,
-            Home: 0,
-            End: duration
+          ArrowLeft: at - step,
+          ArrowDown: at - step,
+          ArrowRight: at + step,
+          ArrowUp: at + step,
+          PageDown: at - step * PAGE_STEPS,
+          PageUp: at + step * PAGE_STEPS,
+          Home: 0,
+          End: duration
         };
-        const next = moves[e.key];
+        const next = moves[e_1.key];
         if (next === undefined) {
-            return;
+          return;
         }
-        // The slider owns these keys; a transport listening higher up would move the playhead a second time.
-        e.preventDefault();
-        e.stopPropagation();
+        e_1.preventDefault();
+        e_1.stopPropagation();
         onValueChange?.(clamp(next));
         onValueCommitted?.(clamp(next));
+      };
+      $[47] = clamp;
+      $[48] = duration;
+      $[49] = onKeyDown;
+      $[50] = onValueChange;
+      $[51] = onValueCommitted;
+      $[52] = step;
+      $[53] = value;
+      $[54] = t19;
+    } else {
+      t19 = $[54];
+    }
+    const moveByKey = t19;
+    let t20;
+    if ($[55] !== duration || $[56] !== letGo || $[57] !== moveByKey || $[58] !== onValueChange || $[59] !== seekAt || $[60] !== t || $[61] !== value) {
+      t20 = onValueChange === undefined ? {
+        role: "img"
+      } : {
+        role: "slider",
+        tabIndex: 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": duration,
+        "aria-valuenow": value ?? 0,
+        "aria-valuetext": t("waveform.position", {
+          time: formatClockDuration((value ?? 0) * 1000),
+          duration: formatClockDuration(duration * 1000)
+        }),
+        onPointerDown: e_2 => {
+          e_2.currentTarget.setPointerCapture(e_2.pointerId);
+          seekAt(e_2);
+        },
+        onPointerMove: e_3 => {
+          if (e_3.currentTarget.hasPointerCapture(e_3.pointerId)) {
+            seekAt(e_3);
+          }
+        },
+        onPointerUp: letGo,
+        onPointerCancel: letGo,
+        onKeyDown: moveByKey
+      };
+      $[55] = duration;
+      $[56] = letGo;
+      $[57] = moveByKey;
+      $[58] = onValueChange;
+      $[59] = seekAt;
+      $[60] = t;
+      $[61] = value;
+      $[62] = t20;
+    } else {
+      t20 = $[62];
+    }
+    const slider = t20;
+    t10 = rootRef;
+    t11 = label;
+    t12 = slider;
+    const t21 = onValueChange !== undefined && "focus-ring cursor-ew-resize touch-none";
+    if ($[63] !== className || $[64] !== t21) {
+      t13 = clsx("relative select-none", t21, className);
+      $[63] = className;
+      $[64] = t21;
+      $[65] = t13;
+    } else {
+      t13 = $[65];
+    }
+    t5 = "absolute inset-0 size-full";
+    t6 = `0 0 ${Math.max(1, width)} 100`;
+    t7 = "none";
+    t8 = true;
+    let t22;
+    if ($[66] !== count || $[67] !== from || $[68] !== span || $[69] !== value || $[70] !== width) {
+      t22 = (level, i) => {
+        if (level === null) {
+          return null;
+        }
+        const center = from + span * (i + 0.5) / count;
+        return /*#__PURE__*/_jsx("rect", {
+          x: Math.round(i * width / count),
+          y: (100 - level * 100) / 2,
+          width: BAR_WIDTH,
+          height: level * 100,
+          className: value !== undefined && center <= value ? "fill-accent" : "fill-text-faint"
+        }, i);
+      };
+      $[66] = count;
+      $[67] = from;
+      $[68] = span;
+      $[69] = value;
+      $[70] = width;
+      $[71] = t22;
+    } else {
+      t22 = $[71];
+    }
+    t9 = bars.map(t22);
+    $[6] = className;
+    $[7] = count;
+    $[8] = duration;
+    $[9] = from;
+    $[10] = label;
+    $[11] = levels;
+    $[12] = onKeyDown;
+    $[13] = onValueChange;
+    $[14] = onValueCommitted;
+    $[15] = rootRef;
+    $[16] = span;
+    $[17] = step;
+    $[18] = t;
+    $[19] = to;
+    $[20] = value;
+    $[21] = width;
+    $[22] = inView;
+    $[23] = positionOf;
+    $[24] = t10;
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t13;
+    $[28] = t5;
+    $[29] = t6;
+    $[30] = t7;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    inView = $[22];
+    positionOf = $[23];
+    t10 = $[24];
+    t11 = $[25];
+    t12 = $[26];
+    t13 = $[27];
+    t5 = $[28];
+    t6 = $[29];
+    t7 = $[30];
+    t8 = $[31];
+    t9 = $[32];
+  }
+  let t14;
+  if ($[72] !== positionOf || $[73] !== width) {
+    t14 = mark => {
+      const x = Math.round(positionOf(mark) * width) + 0.5;
+      return /*#__PURE__*/_jsx("line", {
+        x1: x,
+        x2: x,
+        y1: 0,
+        y2: 100,
+        strokeWidth: 1,
+        vectorEffect: "non-scaling-stroke",
+        className: "stroke-accent opacity-60"
+      }, mark);
     };
-    const slider = onValueChange === undefined
-        ? { role: 'img' }
-        : {
-            role: 'slider',
-            tabIndex: 0,
-            'aria-valuemin': 0,
-            'aria-valuemax': duration,
-            'aria-valuenow': value ?? 0,
-            'aria-valuetext': t('waveform.position', {
-                time: formatClockDuration((value ?? 0) * 1000),
-                duration: formatClockDuration(duration * 1000)
-            }),
-            onPointerDown: (e) => {
-                e.currentTarget.setPointerCapture(e.pointerId);
-                seekAt(e);
-            },
-            onPointerMove: (e) => {
-                if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-                    seekAt(e);
-                }
-            },
-            onPointerUp: letGo,
-            onPointerCancel: letGo,
-            onKeyDown: moveByKey
-        };
-    return (_jsxs("div", { ref: rootRef, "aria-label": label, ...slider, className: clsx('relative select-none', onValueChange !== undefined && 'focus-ring cursor-ew-resize touch-none', className), children: [_jsxs("svg", { className: "absolute inset-0 size-full", viewBox: `0 0 ${Math.max(1, width)} 100`, preserveAspectRatio: "none", "aria-hidden": true, children: [bars.map((level, i) => {
-                        if (level === null) {
-                            return null;
-                        }
-                        const center = from + (span * (i + 0.5)) / count;
-                        return (_jsx("rect", { x: Math.round((i * width) / count), y: (100 - level * 100) / 2, width: BAR_WIDTH, height: level * 100, className: value !== undefined && center <= value ? 'fill-accent' : 'fill-text-faint' }, i));
-                    }), marks.filter(inView).map((mark) => {
-                        const x = Math.round(positionOf(mark) * width) + 0.5;
-                        return (_jsx("line", { x1: x, x2: x, y1: 0, y2: 100, strokeWidth: 1, vectorEffect: "non-scaling-stroke", className: "stroke-accent opacity-60" }, mark));
-                    })] }), value !== undefined && inView(value) && (_jsx("span", { className: "pointer-events-none absolute inset-y-0 w-px bg-accent", style: { left: `${positionOf(value) * 100}%` } }))] }));
-}
+    $[72] = positionOf;
+    $[73] = width;
+    $[74] = t14;
+  } else {
+    t14 = $[74];
+  }
+  const t15 = marks.filter(inView).map(t14);
+  let t16;
+  if ($[75] !== t15 || $[76] !== t5 || $[77] !== t6 || $[78] !== t7 || $[79] !== t8 || $[80] !== t9) {
+    t16 = /*#__PURE__*/_jsxs("svg", {
+      className: t5,
+      viewBox: t6,
+      preserveAspectRatio: t7,
+      "aria-hidden": t8,
+      children: [t9, t15]
+    });
+    $[75] = t15;
+    $[76] = t5;
+    $[77] = t6;
+    $[78] = t7;
+    $[79] = t8;
+    $[80] = t9;
+    $[81] = t16;
+  } else {
+    t16 = $[81];
+  }
+  let t17;
+  if ($[82] !== inView || $[83] !== positionOf || $[84] !== value) {
+    t17 = value !== undefined && inView(value) && /*#__PURE__*/_jsx("span", {
+      className: "pointer-events-none absolute inset-y-0 w-px bg-accent",
+      style: {
+        left: `${positionOf(value) * 100}%`
+      }
+    });
+    $[82] = inView;
+    $[83] = positionOf;
+    $[84] = value;
+    $[85] = t17;
+  } else {
+    t17 = $[85];
+  }
+  let t18;
+  if ($[86] !== t10 || $[87] !== t11 || $[88] !== t12 || $[89] !== t13 || $[90] !== t16 || $[91] !== t17) {
+    t18 = /*#__PURE__*/_jsxs("div", {
+      ref: t10,
+      "aria-label": t11,
+      ...t12,
+      className: t13,
+      children: [t16, t17]
+    });
+    $[86] = t10;
+    $[87] = t11;
+    $[88] = t12;
+    $[89] = t13;
+    $[90] = t16;
+    $[91] = t17;
+    $[92] = t18;
+  } else {
+    t18 = $[92];
+  }
+  return t18;
+}