@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/ui/slider.tsx

@@ -0,0 +1,68 @@
+/* Slider: the same as tdc's (src/components/ui/slider.tsx, the channels one), over
+   @radix-ui/react-slider. Every range in the studio is this, never <input type="range">.
+
+   The look comes from CSS (.tdc-slider in styles/components/ui/slider.css), keyed on `data-variant`:
+   - `line`: the thin rule;
+   - `fill`: the tall track where the fill is the value and the text (`label`) lives inside.
+     It is channels' shape and that of every volume, gain and position control here.
+   `markValue` draws a dashed line at a reference value (0 dB, 100 %), and
+   `snapToMark` snaps the drag to it when close. */
+
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type ReactNode } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+type SliderVariant = "line" | "fill";
+
+interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  variant?: SliderVariant;
+  /* text inside the track, in the `fill` variant: the value or a state */
+  label?: ReactNode;
+  /* value (on the min/max scale) where to draw the dashed line */
+  markValue?: number;
+  /* snaps the thumb to markValue when the drag gets close */
+  snapToMark?: boolean;
+}
+
+export const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  ({ className, variant = "line", label, markValue, snapToMark, min = 0, max = 100, onValueChange, ...props }, ref) => {
+    const markPercent = markValue !== undefined ? ((markValue - min) / (max - min)) * 100 : null;
+
+    const handleValueChange = (values: number[]) => {
+      if (!snapToMark || markValue === undefined) {
+        onValueChange?.(values);
+        return;
+      }
+      const snapThreshold = (max - min) * 0.03;
+      onValueChange?.(values.map(value => (Math.abs(value - markValue) <= snapThreshold ? markValue : value)));
+    };
+
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        data-slot="slider"
+        data-variant={variant}
+        min={min}
+        max={max}
+        onValueChange={onValueChange ? handleValueChange : undefined}
+        className={className ? `tdc-slider ${className}` : "tdc-slider"}
+        {...props}
+      >
+        <SliderPrimitive.Track data-slot="slider-track">
+          <SliderPrimitive.Range data-slot="slider-range" />
+          {markPercent !== null && <span aria-hidden data-slot="slider-mark" style={{ left: `${markPercent}%` }} />}
+        </SliderPrimitive.Track>
+        {/* one Thumb per value: Radix needs one per `value`/`defaultValue` entry */}
+        {(props.value ?? props.defaultValue ?? [min]).map((_, index) => (
+          <SliderPrimitive.Thumb key={index} data-slot="slider-thumb" />
+        ))}
+        {/* after the thumbs: the label is pointer-events none, and on top a thumb at zero does not cover it */}
+        {label !== undefined && (
+          <span aria-hidden data-slot="slider-label">
+            {label}
+          </span>
+        )}
+      </SliderPrimitive.Root>
+    );
+  },
+);
+Slider.displayName = SliderPrimitive.Root.displayName;

package/studio/web/components/ui/switch.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cx } from "./cx";
+
+export const Switch = forwardRef<
+  ElementRef<typeof SwitchPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root ref={ref} data-slot="switch" className={cx("ui-switch", className)} {...props}>
+    <SwitchPrimitive.Thumb className="ui-switch-thumb" />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = "Switch";

package/studio/web/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+/* shadcn's Tooltip over Radix. The bubble is drawn in a portal, in the page (not the browser's `title`),
+   so no panel with `overflow: hidden` clips it, and it flips to keep inside the screen. The look comes from
+   CSS (.ui-tooltip-* in styles/components/ui/tooltip.css).
+
+   `Tip` is the short form: <Tip label="Enviar"><button>…</button></Tip>. The tooltip is instant (no delay).
+   A disabled button does not get pointer events, so it shows none: give the label to an enabled one. */
+
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type ReactElement, type ReactNode } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cx } from "./cx";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export function Tooltip({ delayDuration = 0, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={delayDuration}>
+      <TooltipPrimitive.Root {...props} />
+    </TooltipPrimitive.Provider>
+  );
+}
+
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, collisionPadding = 8, children, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      collisionPadding={collisionPadding}
+      className={cx("ui-tooltip-content", className)}
+      {...props}
+    >
+      {children}
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = "TooltipContent";
+
+export function Tip({
+  label,
+  side = "top",
+  children,
+}: {
+  label: ReactNode;
+  side?: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>["side"];
+  /* one element that takes a ref and the pointer events: a button */
+  children: ReactElement;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side}>{label}</TooltipContent>
+    </Tooltip>
+  );
+}

package/studio/web/hooks/useAccounts.ts

@@ -0,0 +1,27 @@
+/* The connected publishing accounts (`publish.mjs status --json`). `reload(true)` asks the
+   platforms again (?refresh). A failed request comes back as { error }. */
+
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useState } from "react";
+import { api, errorText, read } from "../lib/api";
+import { queryClient, queryKeys } from "../lib/query-client";
+import type { PlatformAccounts } from "../types/api";
+
+const fetchAccounts = async (refresh: boolean): Promise<PlatformAccounts> => {
+  try {
+    return await read(api.publish.accounts.$get({ query: refresh ? { refresh: "" } : {} }));
+  } catch (e) {
+    return { error: errorText(e) };
+  }
+};
+
+export function useAccounts() {
+  const q = useQuery({ queryKey: queryKeys.accounts, queryFn: () => fetchAccounts(false) });
+  const [refreshing, setRefreshing] = useState(false);
+  const reload = useCallback(async (refresh = false) => {
+    setRefreshing(true);
+    queryClient.setQueryData(queryKeys.accounts, await fetchAccounts(refresh));
+    setRefreshing(false);
+  }, []);
+  return { accounts: q.data ?? null, loading: q.isFetching || refreshing, reload };
+}

package/studio/web/hooks/useAdmin.ts

@@ -0,0 +1,12 @@
+import { api } from "../lib/api";
+import { queryKeys } from "../lib/query-client";
+import type { AdminInfo } from "../types/api";
+import { useLiveQuery } from "./useLiveQuery";
+
+/* Who is looking at the studio and, for the admin, Omni's settings for every user (the admin panel).
+   The "agent" event rereads it when the admin changes something. */
+export function useAdmin() {
+  const { data, error, reload } = useLiveQuery(queryKeys.admin, () => api.admin.$get());
+  const info: AdminInfo | null = data;
+  return { info, isAdmin: !!info?.admin, error, reload };
+}

package/studio/web/hooks/useAnalytics.ts

@@ -0,0 +1,21 @@
+/* The SSE "analytics" notice arrives when the metrics, a Reel's analysis, the account snapshot
+   or channel/ (playbook and analyses) change. */
+
+import { api, enc } from "../lib/api";
+import { queryKeys } from "../lib/query-client";
+import type { Analytics, ReelDetail } from "../types/api";
+import { useLiveQuery } from "./useLiveQuery";
+
+export function useAnalytics() {
+  const { data, error, reload } = useLiveQuery(queryKeys.analytics, () => api.analytics.$get());
+  const analytics: Analytics | null = data;
+  return { data: analytics, error, reload };
+}
+
+export function useReel(slug: string) {
+  const { data, error, reload } = useLiveQuery(queryKeys.reel(slug), () =>
+    api.analytics.reels[":slug"].$get({ param: { slug: enc(slug) } }),
+  );
+  const reel: ReelDetail | null = data;
+  return { reel, error, reload };
+}

package/studio/web/hooks/useAvatarAudioReactive.ts

@@ -0,0 +1,87 @@
+/* Avatar that reacts to the voice. While a voice plays, the orb gets its levels (low, mid, high and the
+   whole spectrum, read from the analyser every frame): the ring of light wakes up and the flow speeds
+   up. The color never changes. With `size` the avatar also breathes with the sound wave: "up" grows
+   a little with the level (the agent speaks, and the orb reacts too), "down" only shrinks a little
+   (the agent listens: the orb itself does not react to the user's voice); without it the avatar keeps
+   its size and the orb reacts. Elements that are not avatars (the carousel's buttons) keep the old
+   behavior: they grow and shrink with the volume. The animation touches the DOM directly, without
+   re-rendering the screen. */
+
+import { useEffect, useRef, type RefObject } from "react";
+import { analyserLevels, breathScale, setOrbLevels } from "../lib/orb";
+
+export function useAvatarAudioReactive(
+  active: boolean,
+  root: RefObject<HTMLElement | null>,
+  analyser: RefObject<AnalyserNode | null>,
+  targets: (root: HTMLElement) => (SVGElement | HTMLElement)[],
+  size?: "up" | "down",
+) {
+  const targetsRef = useRef(targets);
+  targetsRef.current = targets;
+  const sizeRef = useRef(size);
+  sizeRef.current = size;
+  useEffect(() => {
+    if (!active || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    let raf = 0,
+      level = 0,
+      bytes: Uint8Array<ArrayBuffer> | null = null,
+      lastAnalyser: AnalyserNode | null = null,
+      last: (SVGElement | HTMLElement)[] = [];
+    /* a non-avatar element: speed of its animations and scale; 1 and 1 leave it as it was */
+    const apply = (els: (SVGElement | HTMLElement)[], rate: number, scale: number) =>
+      els.forEach(el => {
+        el.getAnimations({ subtree: true }).forEach(a => {
+          a.playbackRate = rate;
+        });
+        el.style.transform = scale === 1 ? "" : `scale(${scale.toFixed(3)})`;
+      });
+    const isAvatar = (el: Element) => el instanceof HTMLCanvasElement && el.classList.contains("voice-avatar");
+    const step = () => {
+      const an = analyser.current;
+      if (an && an !== lastAnalyser) {
+        lastAnalyser = an;
+        bytes = new Uint8Array(an.frequencyBinCount);
+      }
+      const levels = an && bytes ? analyserLevels(an, bytes) : null;
+      level += ((levels?.all ?? 0) * 3 - level) * ((levels?.all ?? 0) * 3 > level ? 0.65 : 0.22);
+      const current = root.current ? targetsRef.current(root.current) : [];
+      const gone = last.filter(e => !current.includes(e));
+      gone.filter(isAvatar).forEach(e => {
+        setOrbLevels(e, null);
+        e.style.transform = "";
+      });
+      apply(
+        gone.filter(e => !isAvatar(e)),
+        1,
+        1,
+      );
+      const wave = Math.min(1, level);
+      const direction = sizeRef.current;
+      current.filter(isAvatar).forEach(e => {
+        setOrbLevels(e, direction === "down" ? null : levels);
+        e.style.transform = direction ? `scale(${breathScale(direction, wave).toFixed(3)})` : "";
+      });
+      apply(
+        current.filter(e => !isAvatar(e)),
+        2.5 + Math.min(1, level) * 8,
+        0.94 + Math.min(1, level) * 0.2,
+      );
+      last = current;
+      raf = requestAnimationFrame(step);
+    };
+    raf = requestAnimationFrame(step);
+    return () => {
+      cancelAnimationFrame(raf);
+      last.filter(isAvatar).forEach(e => {
+        setOrbLevels(e, null);
+        e.style.transform = "";
+      });
+      apply(
+        last.filter(e => !isAvatar(e)),
+        1,
+        1,
+      );
+    };
+  }, [active]);
+}

package/studio/web/hooks/useBrowserConnect.ts

@@ -0,0 +1,48 @@
+/* The browser login of YouTube and TikTok (BrowserConnect): opens in Dia, in the default
+   browser, or only makes the link to paste. The server answers with the link and keeps waiting
+   for the login to come back; while waiting, this asks for the end every 2 s. */
+
+import { useEffect, useState } from "react";
+import { api, read, send, type ActionResult } from "../lib/api";
+import { type Connection, connectionResult } from "../lib/publish-settings";
+
+export function useBrowserConnect(platform: "youtube" | "tiktok", onConnect: () => void) {
+  const [asking, setAsking] = useState<string | null>(null);
+  const [result, setResult] = useState<ActionResult>(null);
+  const [connection, setConnection] = useState<Connection>(null);
+  const [copied, setCopied] = useState(false);
+  const waiting = connection?.state === "waiting";
+
+  useEffect(() => {
+    if (!waiting) return;
+    const t = setInterval(async () => {
+      const c: Connection = await read(api.settings.publish.connect.$get({ query: { platform } })).catch(() => null);
+      if (!c || c.state === "waiting") return;
+      setConnection(c);
+      setResult(connectionResult(c));
+      if (c.state === "ok") onConnect();
+    }, 2000);
+    return () => clearInterval(t);
+  }, [waiting]);
+
+  const ask = async (mode: "dia" | "default" | "link") => {
+    setAsking(mode);
+    setResult(null);
+    setCopied(false);
+    const r = await send(api.settings.publish.connect.$post({ json: { platform, mode } }));
+    setAsking(null);
+    setResult(r);
+    setConnection(r?.ok && r.url ? { state: "waiting", url: r.url, output: "", at: Date.now() } : null);
+  };
+  const copy = async () => {
+    if (!connection?.url) return;
+    try {
+      await navigator.clipboard.writeText(connection.url);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return { asking, result, connection, copied, waiting, ask, copy };
+}

package/studio/web/hooks/useClonePlan.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+import { api, read } from "../lib/api";
+
+/* whether the account allows cloning through the API (only Cartesia blocks it, on the free plan):
+   the error Cartesia would give, or null when it can or it isn't known yet (api/services/clone.ts: getClonePlan) */
+export function useClonePlan(): { cartesia: string | null } {
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    read(api.settings.clone.plan.$get())
+      .then(r => setError(r.cartesia && !r.cartesia.ok ? (r.cartesia.error ?? null) : null))
+      .catch(() => {});
+  }, []);
+  return { cartesia: error };
+}

package/studio/web/hooks/useConnected.ts

@@ -0,0 +1,7 @@
+import { useSyncExternalStore } from "react";
+import { isConnected, subscribeConnection } from "../lib/sse";
+
+/* whether the SSE stream is connected */
+export function useConnected() {
+  return useSyncExternalStore(subscribeConnection, isConnected);
+}

package/studio/web/hooks/useLiveQuery.ts

@@ -0,0 +1,29 @@
+/* useQuery with the studio's old return shape: data or null while loading, the error as text,
+   and reload. Every data hook is built on it: `request` is a typed client call (lib/api), null
+   while there is nothing to ask for. */
+
+import { useQuery, type QueryKey } from "@tanstack/react-query";
+import { useCallback } from "react";
+import type { ClientResponse } from "hono/client";
+import { errorText, read, type OkJson } from "../lib/api";
+
+export function useLiveQuery<R extends ClientResponse<unknown, number, "json" | "text" | "redirect">>(
+  key: QueryKey,
+  request: (() => Promise<R>) | null,
+) {
+  const q = useQuery({
+    queryKey: key,
+    queryFn: () => read(request!()),
+    enabled: !!request,
+  });
+  const { refetch } = q;
+  const reload = useCallback(() => {
+    void refetch();
+  }, [refetch]);
+  return {
+    data: (q.data ?? null) as OkJson<R> | null,
+    error: q.error ? errorText(q.error) : null,
+    reload,
+    isFetching: q.isFetching,
+  };
+}

package/studio/web/hooks/useMenuCollapsed.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+export const MENU_STORAGE_KEY = "omnivideo.menu-collapsed";
+
+/* menu collapsed (icons only), remembered in this browser; Ctrl/Cmd + B collapses and expands */
+export function useMenuCollapsed() {
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem(MENU_STORAGE_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(MENU_STORAGE_KEY, collapsed ? "1" : "0");
+    } catch {
+      /* no storage: lasts this visit only */
+    }
+  }, [collapsed]);
+  useEffect(() => {
+    const key = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || e.shiftKey || e.altKey) return;
+      if ((e.target as HTMLElement).closest("input, textarea, select, [contenteditable]")) return;
+      e.preventDefault();
+      setCollapsed(c => !c);
+    };
+    addEventListener("keydown", key);
+    return () => removeEventListener("keydown", key);
+  }, []);
+  return [collapsed, () => setCollapsed(c => !c)] as const;
+}

package/studio/web/hooks/useMicDevices.ts

@@ -0,0 +1,53 @@
+/* The microphones the browser has, and the one Omni listens with (saved in the browser; the audio code
+   reads it through openMic in lib/mic-device). The names only come after a microphone permission, so
+   opening the list asks for it once, and only if the names are blank. */
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  loadMicChoice,
+  type MicDevice,
+  micDevices,
+  needsPermission,
+  saveMicChoice,
+  stillThere,
+  SYSTEM_MIC,
+} from "../lib/mic-device";
+
+export function useMicDevices() {
+  const [devices, setDevices] = useState<MicDevice[]>([]);
+  const [choice, setChoice] = useState<string>(() => loadMicChoice() ?? SYSTEM_MIC);
+
+  const refresh = useCallback(async (askPermission = false) => {
+    if (!navigator.mediaDevices?.enumerateDevices) return;
+    let all = await navigator.mediaDevices.enumerateDevices();
+    if (askPermission && needsPermission(all)) {
+      try {
+        const s = await navigator.mediaDevices.getUserMedia({ audio: true });
+        s.getTracks().forEach(t => t.stop());
+        all = await navigator.mediaDevices.enumerateDevices();
+      } catch {
+        /* refused: the list stays numbered; Omni asks again when it needs the microphone */
+      }
+    }
+    const list = micDevices(all);
+    setDevices(list);
+    /* a chosen microphone that was unplugged goes back to the system's; without ids (no permission) we
+       can't tell, and the saved choice is kept */
+    if (list.length) setChoice(c => stillThere(c, list));
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+    const md = navigator.mediaDevices;
+    const onChange = () => void refresh();
+    md?.addEventListener?.("devicechange", onChange);
+    return () => md?.removeEventListener?.("devicechange", onChange);
+  }, [refresh]);
+
+  const choose = useCallback((id: string) => {
+    setChoice(id);
+    saveMicChoice(id);
+  }, []);
+
+  return { devices, choice, choose, refresh };
+}