@ephia/dova-sdk 1.0.0

package/src/ui/recorder/StandardIntensityVisualizer.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useReducer, useRef } from "react";
+
+/** Fenêtre d'échantillonnage (ms) : moyenne du niveau vocal puis ajout d'une barre. */
+export const INTENSITY_SAMPLE_MS = 300;
+
+const BAR_WIDTH_PX = 3;
+const BAR_GAP_PX = 2;
+const MIN_BAR_HEIGHT_RATIO = 0.1;
+
+export type StandardIntensityVisualizerProps = {
+  enabled: boolean;
+  /** Niveau instantané 0..1 (alimenté par le micro, ~33 ms). */
+  level: number;
+};
+
+function clamp01(value: number): number {
+  return Math.max(0, Math.min(1, value));
+}
+
+function barHeightRatio(level: number): number {
+  const v = clamp01(level);
+  return MIN_BAR_HEIGHT_RATIO + v * (1 - MIN_BAR_HEIGHT_RATIO);
+}
+
+function barStepPx(): number {
+  return BAR_WIDTH_PX + BAR_GAP_PX;
+}
+
+function scrollSpeedPxPerSec(): number {
+  return barStepPx() / (INTENSITY_SAMPLE_MS / 1000);
+}
+
+/**
+ * Historique de barres : une barre toutes les INTENSITY_SAMPLE_MS (moyenne),
+ * défilement continu vers la gauche, fondu sur les bords du cadre.
+ */
+export function StandardIntensityVisualizer({ enabled, level }: StandardIntensityVisualizerProps) {
+  const rectRef = useRef<HTMLSpanElement>(null);
+  const trackRef = useRef<HTMLSpanElement>(null);
+  const bucketRef = useRef({ sum: 0, count: 0 });
+  const scrollOffsetRef = useRef(0);
+  const barsRef = useRef<number[]>([]);
+  const maxBarsRef = useRef(48);
+  const [barRevision, bumpBars] = useReducer((n: number) => n + 1, 0);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const v = clamp01(level);
+    bucketRef.current.sum += v;
+    bucketRef.current.count += 1;
+  }, [enabled, level]);
+
+  useLayoutEffect(() => {
+    const rect = rectRef.current;
+    if (!rect) return;
+    const updateMax = () => {
+      const w = rect.clientWidth;
+      if (w > 0) {
+        maxBarsRef.current = Math.max(12, Math.ceil(w / barStepPx()) + 4);
+      }
+    };
+    updateMax();
+    const ro = new ResizeObserver(updateMax);
+    ro.observe(rect);
+    return () => ro.disconnect();
+  }, [enabled]);
+
+  useEffect(() => {
+    if (!enabled) {
+      barsRef.current = [];
+      bucketRef.current = { sum: 0, count: 0 };
+      scrollOffsetRef.current = 0;
+      if (trackRef.current) trackRef.current.style.transform = "translateX(0)";
+      return;
+    }
+
+    let rafId = 0;
+    let lastTs = performance.now();
+
+    const consumeBucket = (): number => {
+      const { sum, count } = bucketRef.current;
+      bucketRef.current = { sum: 0, count: 0 };
+      return count > 0 ? sum / count : 0;
+    };
+
+    const pushBar = () => {
+      const avg = consumeBucket();
+      const next = [...barsRef.current, avg];
+      const max = maxBarsRef.current;
+      barsRef.current = next.length > max ? next.slice(-max) : next;
+      bumpBars();
+    };
+
+    const tick = (now: number) => {
+      const track = trackRef.current;
+      if (!track) {
+        rafId = requestAnimationFrame(tick);
+        return;
+      }
+
+      const dt = Math.min(0.05, (now - lastTs) / 1000);
+      lastTs = now;
+      const step = barStepPx();
+
+      scrollOffsetRef.current += scrollSpeedPxPerSec() * dt;
+      while (scrollOffsetRef.current >= step) {
+        scrollOffsetRef.current -= step;
+        pushBar();
+      }
+
+      track.style.transform = `translate3d(${-scrollOffsetRef.current}px, 0, 0)`;
+      rafId = requestAnimationFrame(tick);
+    };
+
+    rafId = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(rafId);
+      barsRef.current = [];
+      bucketRef.current = { sum: 0, count: 0 };
+      scrollOffsetRef.current = 0;
+      if (trackRef.current) trackRef.current.style.transform = "translateX(0)";
+    };
+  }, [enabled]);
+
+  if (!enabled) return null;
+
+  const bars = barsRef.current;
+
+  return (
+    <span className="ephia-transcribe-standard-placeholder" data-ephia-ui="standard-intensity" aria-hidden>
+      <span ref={rectRef} className="ephia-transcribe-standard-placeholder__rect">
+        <span className="ephia-transcribe-standard-placeholder__viewport">
+          <span ref={trackRef} className="ephia-transcribe-standard-placeholder__track">
+            {bars.map((barLevel, index) => (
+              <span
+                key={`${barRevision}-${index}`}
+                className="ephia-transcribe-standard-placeholder__history-bar"
+                style={{ height: `${barHeightRatio(barLevel) * 100}%` }}
+              />
+            ))}
+          </span>
+        </span>
+      </span>
+    </span>
+  );
+}

package/src/ui/recorder/appearance.ts

@@ -0,0 +1,9 @@
+/** Border radius presets for {@link EphiaFloatingButton}. */
+export type EphiaFloatingButtonBorderRadius = "sm" | "md" | "lg" | "full";
+
+export const EPHIA_FLOATING_BUTTON_RADIUS_CSS: Record<EphiaFloatingButtonBorderRadius, string> = {
+  sm: "0.375rem",
+  md: "0.625rem",
+  lg: "1rem",
+  full: "9999px",
+};

package/src/ui/recorder/index.ts

@@ -0,0 +1,8 @@
+export { EphiaFloatingButton } from "./EphiaFloatingButton";
+export type {
+  EphiaFloatingButtonProps,
+  EphiaFloatingButtonPosition,
+  EphiaFloatingButtonTheme,
+  EphiaFloatingButtonSize,
+  EphiaFloatingButtonBorderRadius,
+} from "./EphiaFloatingButton";