@crievo/omni 0.1.2 → 0.1.4

package/studio/web/components/bencho/MagnifyDock.tsx

@@ -0,0 +1,200 @@
+/* A dock whose icons swell toward the cursor, the nearest growing most. Scale falls off with distance from the pointer
+   rather than applying only to the hovered item, which is what stops it reading as a row of buttons that happen to
+   grow. Ported from bencho.dev (MIT). */
+
+import {
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { Bookmark, Folder, House, MagnifyingGlass, User } from "../icons";
+
+type Item = { key: string; label: string; Icon: typeof House };
+
+const DOCK: Item[] = [
+  { key: "home", label: "Início", Icon: House },
+  { key: "search", label: "Buscar", Icon: MagnifyingGlass },
+  { key: "files", label: "Arquivos", Icon: Folder },
+  { key: "saved", label: "Salvos", Icon: Bookmark },
+  { key: "you", label: "Você", Icon: User },
+];
+
+export function MagnifyDock({
+  /* what the glyph under the cursor grows to */
+  magnify = 1.32,
+  /* how many neighbours either side feel it: at 0 the dock is a row of buttons that happen to grow, and no amount of
+     magnification rescues it; higher and it reads as a sheet being pushed up from underneath */
+  spread = 2,
+  /* how far the nearest glyph rises out of the bar */
+  lift = 8,
+  /* the name that appears over whatever is under the cursor */
+  labels = true,
+}: {
+  magnify?: number;
+  spread?: number;
+  lift?: number;
+  labels?: boolean;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+  const [active, setActive] = useState(DOCK[0].key);
+
+  /* The bar reads the pointer, the items do not. A touch is captured to whatever it started on, so per-item enter
+     handlers keep sending every event to the first icon a finger landed on while it slides along the dock. One handler
+     on the bar instead, the index coming from the nearest item centre to the pointer's x: measured rather than derived
+     from the index, because the items are not all the same width once one is magnified, and an arithmetic guess would
+     lag the sweep. */
+  const bar = useRef<HTMLElement | null>(null);
+  const down = useRef(false);
+  /* set when a finger has already chosen on lift, so the click the browser sends afterwards (aimed at the item the
+     touch started on, not the one it ended over) does not undo the choice. A mouse never sets it. */
+  const chose = useRef(false);
+
+  const at = (clientX: number) => {
+    const items = bar.current?.querySelectorAll(".bn-gdock-item");
+    if (!items?.length) return null;
+    let best = 0;
+    let gap = Number.POSITIVE_INFINITY;
+    items.forEach((el, i) => {
+      const b = el.getBoundingClientRect();
+      const d = Math.abs(clientX - (b.left + b.width / 2));
+      if (d < gap) {
+        gap = d;
+        best = i;
+      }
+    });
+    return best;
+  };
+
+  const to = (i: number | null) => setHover(i);
+
+  const track = (e: ReactPointerEvent) => {
+    /* a mouse magnifies on hover; a finger has to be down, or the bar would answer a scroll passing over it */
+    if (e.pointerType !== "mouse" && !down.current) return;
+    to(at(e.clientX));
+  };
+
+  return (
+    <nav
+      className="bn-gdock"
+      aria-label="Dock"
+      ref={bar}
+      /* Capture phase, and no pointer capture: two different things. Each item stops pointerdown propagating, so
+         bubbling handlers here never ran (measured: the magnification sat on item 0 through a full sweep); capture runs
+         top-down, before the child can stop it. What this does not do is setPointerCapture: the touch is already
+         captured to the item it began on, and capturing on the bar as well would retarget the click and take it from
+         the item, breaking the mouse to fix the finger. */
+      onPointerDownCapture={e => {
+        down.current = true;
+        /* disarmed here, not by the click: a finger that lands on one item and lifts over another is a drag, and a
+           browser is entitled to send no click at all, so a flag cleared by the click could stay armed and eat the
+           next real mouse click. Cleared at the start of the next gesture instead. */
+        chose.current = false;
+        to(at(e.clientX));
+      }}
+      onPointerMoveCapture={track}
+      /* with the bar holding the touch the button underneath never gets its click, so the lift is where a finger
+         picks: whichever item it came to rest over. A mouse still clicks the button. */
+      onPointerUpCapture={e => {
+        if (down.current && e.pointerType !== "mouse") {
+          const i = at(e.clientX);
+          if (i !== null) {
+            chose.current = true;
+            if (DOCK[i].key !== active) {
+              setActive(DOCK[i].key);
+            }
+          }
+        }
+        down.current = false;
+        if (e.pointerType !== "mouse") to(null);
+      }}
+      onPointerCancelCapture={() => {
+        down.current = false;
+        to(null);
+      }}
+      onPointerLeave={() => {
+        if (!down.current) to(null);
+      }}
+    >
+      {DOCK.map(({ key, label, Icon }, i) => {
+        const d = hover === null ? 99 : Math.abs(i - hover);
+        /* a raised cosine over the reach: 1 under the cursor, easing to 0 at the edge of the reach and flat zero past
+           it. A curve, so the reach is adjustable without picking every intermediate value by hand. */
+        const f = d > spread ? 0 : (1 + Math.cos((Math.PI * d) / (spread + 1))) / 2;
+        const scale = 1 + (magnify - 1) * f;
+        return (
+          <button
+            key={key}
+            type="button"
+            className="bn-gdock-item"
+            aria-label={label}
+            aria-current={active === key ? "page" : undefined}
+            data-near={d <= 1 ? d : undefined}
+            data-active={active === key}
+            onClick={() => {
+              /* the lift already chose: see `chose` */
+              if (chose.current) return;
+              setActive(key);
+            }}
+            onPointerDown={e => e.stopPropagation()}
+          >
+            {/* the glyph magnifies, not the button: scaling the whole item dragged the dot and the label along with it */}
+            <span className="bn-gdock-glyph" style={{ transform: `translateY(${-lift * f}px) scale(${scale})` }}>
+              <Icon size={20} />
+            </span>
+            <span className="bn-gdock-dot" data-on={active === key} />
+          </button>
+        );
+      })}
+      {labels && <DockTip bar={bar} at={hover} />}
+    </nav>
+  );
+}
+
+/* One tip that travels: not a label per icon blinking on and off, but one pill that slides along to whichever icon is
+   under the pointer and changes width to fit the new word as it goes, both on one short curve. It keeps the last word
+   while it fades, so leaving the dock does not empty it mid-fade. Its place is read off the item it sits over, centre to
+   centre, since a magnified dock does not lay out evenly. */
+function DockTip({ bar, at }: { bar: RefObject<HTMLElement | null>; at: number | null }) {
+  const [last, setLast] = useState(0);
+  const [place, setPlace] = useState<{ x: number; w: number } | null>(null);
+  const word = useRef<HTMLSpanElement>(null);
+  /* the first placing must not slide in from the bar's left edge: until it has been placed once it moves without a
+     transition */
+  const [ready, setReady] = useState(false);
+  if (at !== null && at !== last) setLast(at);
+  /* a child's layout effect runs before the parent's ref is attached, so on mount `bar.current` is still null and the
+     first placing would wait for the next hover change (item 0 would show no tip the first time); this re-runs it once
+     the bar is there */
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  useLayoutEffect(() => {
+    const nav = bar.current;
+    const item = nav?.querySelectorAll<HTMLElement>(".bn-gdock-item")[last];
+    const text = word.current;
+    if (!nav || !item || !text) return;
+    /* offsetLeft is layout, so the glyph's own scale does not skew it */
+    const w = Math.ceil(text.scrollWidth) + 24;
+    setPlace({ x: item.offsetLeft + item.offsetWidth / 2 - w / 2, w });
+  }, [last, bar, mounted]);
+  useLayoutEffect(() => {
+    if (!place || ready) return;
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(id);
+  }, [place, ready]);
+
+  return (
+    <span
+      className="bn-gdock-tip"
+      aria-hidden="true"
+      data-on={at !== null && !!place}
+      data-ready={ready || undefined}
+      style={place ? { width: place.w, transform: `translateX(${place.x}px)` } : undefined}
+    >
+      <span ref={word}>{DOCK[last].label}</span>
+    </span>
+  );
+}

package/studio/web/components/bencho/NowPlaying.tsx

@@ -0,0 +1,403 @@
+/* A now-playing bar that opens into a player and folds back as one object.
+   Ported from bencho.dev (MIT).
+
+   One number is the state: a single tween runs 0 -> 1 and every position, size, radius and type size is read off it.
+   Nothing has a transition of its own, so nothing can arrive early. The cover is the hinge: it travels from a 40px
+   square at the left of the bar to a 64px square beside the words and never crossfades. The width never changes;
+   the card only grows downward and the transport slides from the end of the bar to the middle.
+   Demo data: the track, the cover art and the clock are made up, nothing plays. */
+
+import { useEffect, useRef, useState } from "react";
+import { Heart, SkipBack, SkipForward } from "../icons";
+
+/* how long it takes, as a multiplier on the tuned duration: 0 is 1.6x slower, 100 is 2.5x faster, 50 is exactly 1 */
+const rate = (speed: number) => 1.6 - (speed / 100) * 1.2;
+
+/* a preference, not a live input: read once */
+const stillness = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/* the sleeve: generated art (sunset over two hills), cropped square by `cover` */
+const COVER_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">' +
+  '<defs><linearGradient id="s" x1="0" y1="0" x2="0" y2="1">' +
+  '<stop offset="0" stop-color="#3b2a6b"/><stop offset=".45" stop-color="#d9577a"/><stop offset="1" stop-color="#f6b56a"/>' +
+  "</linearGradient></defs>" +
+  '<rect width="100" height="100" fill="url(#s)"/>' +
+  '<circle cx="64" cy="52" r="15" fill="#ffe3a8"/>' +
+  '<path d="M0 70 C20 56 38 60 56 68 S88 66 100 58 V100 H0Z" fill="#6b2f5c"/>' +
+  '<path d="M0 82 C18 72 40 78 60 82 S86 80 100 74 V100 H0Z" fill="#2a1840"/>' +
+  "</svg>";
+const COVER = `url("data:image/svg+xml,${encodeURIComponent(COVER_SVG)}")`;
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+const mix = (a: number, b: number, t: number) => a + (b - a) * t;
+
+/* Eased, not sprung. A spring past its target takes every derived value along, and the corner would dip under its end
+   value and come back: a wobble, not a bounce. Quart-out lands without ever passing the number. It reads its start
+   from wherever it currently is, so pressing again mid-flight turns the object around. */
+const BASE = 460;
+
+const QUART = (t: number) => 1 - (1 - t) ** 4;
+/* the swell's clock */
+const FLAT = (t: number) => t;
+/* in and out, for the one thing that is a round trip between two shapes */
+const SWING = (t: number) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);
+
+function useTween(to: number, ms: number, instant = false, ease = QUART) {
+  const [at, setAt] = useState(to);
+  const cur = useRef(to);
+  const raf = useRef(0);
+
+  useEffect(() => {
+    if (instant) {
+      cur.current = to;
+      setAt(to);
+      return;
+    }
+    const from = cur.current;
+    if (from === to) return;
+    const t0 = performance.now();
+    const step = (now: number) => {
+      const t = Math.min(1, (now - t0) / ms);
+      cur.current = from + (to - from) * ease(t);
+      setAt(cur.current);
+      raf.current = t < 1 ? requestAnimationFrame(step) : 0;
+    };
+    raf.current = requestAnimationFrame(step);
+    return () => {
+      cancelAnimationFrame(raf.current);
+      raf.current = 0;
+    };
+  }, [to, ms, instant, ease]);
+
+  return at;
+}
+
+/* one width for both states, and the frame's width too */
+const W = 260;
+/* 78 and not 70: the track needs a band of its own at the foot */
+const SHUT = 78;
+
+/* One margin, both states: the object grows, its frame does not move. The sleeve's inset, the rail's inset, where
+   the transport row ends and the room under it all answer to it. */
+const PAD = 10;
+const ART = { s: [40, 64] } as const;
+
+/* Two concentric corners: the box's radius is the sleeve's plus the margin between them, so the curves stay parallel
+   and never pinch. The knob sets the sleeve and the box is derived from it. It stops at 32, where the 64px sleeve
+   becomes a circle; the bar's sleeve scales by the ratio of the two squares so it reaches its own circle at the same
+   setting. */
+const CORNER = 16;
+const CORNER_MAX = 32;
+
+/* The card's stack, measured from the sleeve down. The card's height falls out of the sum. */
+const RAIL_GAP = 22;
+const CLOCK_GAP = 8; /* also .bn-snd-bar's own gap */
+const OPS_GAP = 16;
+const RAIL_H = 3;
+const CLOCK_H = 10;
+const LEAD = 46; /* the play button, opened */
+
+const RAIL_Y = PAD + ART.s[1] + RAIL_GAP;
+const OPS_Y = RAIL_Y + RAIL_H + CLOCK_GAP + CLOCK_H + OPS_GAP + LEAD / 2;
+/* the transport's own bottom, and one more margin under it */
+const OPEN = Math.round(OPS_Y + LEAD / 2 + PAD);
+
+const TOTAL = 214;
+
+/* The play mark is drawn, not swapped. Both marks are the same two quadrilaterals; the difference is where eight
+   points are. The pause is a pair of bars; the play is that pair with the inner edges pulled to the middle and
+   collapsed to a point. Wound the same way in both (top-left, top-right, bottom-right, bottom-left) or the halves
+   would turn inside out on the way across. */
+const PAUSE_L = [6, 4, 10, 4, 10, 20, 6, 20] as const;
+const PLAY_L = [6.5, 4, 13.25, 8, 13.25, 16, 6.5, 20] as const;
+const PAUSE_R = [14, 4, 18, 4, 18, 20, 14, 20] as const;
+const PLAY_R = [13.25, 8, 20, 12, 20, 12, 13.25, 16] as const;
+
+const quad = (a: readonly number[], b: readonly number[], t: number) => {
+  let d = "";
+  for (let i = 0; i < 8; i += 2)
+    d += `${i ? "L" : "M"}${mix(a[i], b[i], t).toFixed(2)} ${mix(a[i + 1], b[i + 1], t).toFixed(2)}`;
+  return `${d}Z`;
+};
+
+function Mark({ playing, size, still }: { playing: boolean; size: number; still: boolean }) {
+  /* 0 is the pause, 1 is the play; eased both ends since it leaves a shape as well as arriving at one */
+  const t = useTween(playing ? 0 : 1, 300, still, SWING);
+
+  /* The goo: zero at both ends and one in the middle, so it is a bulge on the way rather than a difference between
+     the states. The mark squashes across as it stretches up, the halves lean into each other until they touch and the
+     whole thing tips and comes back level. The tilt swaps sign with the direction. */
+  const goo = Math.sin(clamp(t, 0, 1) * Math.PI);
+  const pull = 1.6 * goo;
+  const tip = (playing ? -9 : 9) * goo;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinejoin="round"
+      strokeLinecap="round"
+      style={{
+        transformOrigin: "50% 50%",
+        transform: `rotate(${tip}deg) scale(${1 - 0.13 * goo}, ${1 + 0.11 * goo})`,
+      }}
+    >
+      <path d={quad(PAUSE_L, PLAY_L, t)} transform={`translate(${pull} 0)`} />
+      <path d={quad(PAUSE_R, PLAY_R, t)} transform={`translate(${-pull} 0)`} />
+    </svg>
+  );
+}
+
+/* the heart's box, and the room the words give up for it */
+const LIKE = 30;
+
+const clock = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+
+export function NowPlaying({
+  /* how quickly the shape changes, 0..100: 50 is the tuned 460ms */
+  morph = 50,
+  /* the sleeve's corner on the card, 0..32; the box's corner follows it */
+  corner = CORNER,
+}: {
+  morph?: number;
+  corner?: number;
+} = {}) {
+  const skin = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [going, setGoing] = useState(false);
+  const [liked, setLiked] = useState(false);
+  const [at, setAt] = useState(52);
+  const still = stillness();
+
+  const dur = BASE * rate(clamp(morph, 0, 100));
+
+  /* The sleeve's corner at each end, and the box's from it. The bar's sleeve takes the same fraction of its own side. */
+  const cr = clamp(corner, 0, CORNER_MAX);
+  const artR = [(cr * ART.s[0]) / ART.s[1], cr] as const;
+
+  /* The offset fades in, it is not a constant: at radius zero there is no curve to stay parallel to, so it scales with
+     the slider and reaches its full PAD by the default. Below that both corners converge until they are square
+     together. */
+  const off = PAD * Math.min(1, cr / CORNER);
+  const boxR = [artR[0] + off, artR[1] + off] as const;
+
+  /* 0 shut, 1 open. Tweened once, read everywhere. */
+  const p = useTween(open ? 1 : 0, dur, still);
+
+  /* The swell is a second number so `p` stays monotonic (the sleeve, the box and the margin between them are always
+     in the ratio that makes the corners concentric). What bounces is the whole object, uniformly, so nothing can get
+     out of step. It rides its own linear clock, with the peak pushed late (^1.5 puts it at 0.63) so the object gathers
+     on the way out and releases as it lands. Zero at both ends. On the close only: opening already has its event, the
+     box growing, and a scale on top of it would be a second size change in the same direction. */
+  const u = useTween(open ? 1 : 0, dur, still, FLAT);
+  const swell = Math.sin(Math.PI * clamp(u, 0, 1) ** 1.5);
+  const zoom = open ? 1 : 1 - 0.035 * swell;
+
+  /* Nothing moves until somebody presses play: at rest there is no timer at all. */
+  useEffect(() => {
+    if (!going) return;
+    const id = window.setInterval(() => setAt(s => (s >= TOTAL ? 0 : s + 1)), 1000);
+    return () => window.clearInterval(id);
+  }, [going]);
+
+  /* Outside closes it: only while open, and only for a press that started outside the box. pointerdown and not click,
+     since a press that begins outside and drifts in is still reaching past this component. */
+  useEffect(() => {
+    if (!open) return;
+    const away = (e: PointerEvent) => {
+      /* only a real hand dismisses this: a scripted pointer anywhere on the page would shut it a frame after it opened */
+      if (!e.isTrusted) return;
+      const el = skin.current;
+      if (el && !el.contains(e.target as Node)) setOpen(false);
+    };
+    /* the next tick, or the press that opened it closes it */
+    const id = window.setTimeout(() => document.addEventListener("pointerdown", away), 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener("pointerdown", away);
+    };
+  }, [open]);
+
+  /* at the margin in both states: the sleeve, the words and the transport are one row against the top margin and
+     everything below belongs to the track */
+  const art = { x: PAD, y: PAD, s: mix(ART.s[0], ART.s[1], p) };
+
+  /* everything below is derived, never stored */
+  const h = mix(SHUT, OPEN, p);
+
+  /* The transport exists in both states: shut it is smaller and almost touching, pinned to the right so the play
+     button lands where a thumb goes; open it spreads and the play grows. Placed by the row's centre, because the
+     row's own width changes. */
+  const side = mix(24, 34, p);
+  const lead = mix(30, LEAD, p);
+  const gap = mix(5, 14, p);
+  const opsX = mix(W - PAD - 44, W / 2, p);
+  /* level with the sleeve on the bar, and under the times on the card */
+  const opsY = mix(PAD + ART.s[0] / 2, OPS_Y, p);
+
+  /* the deep half of the morph, for what only exists in the card: held back to the last 40% so it arrives into a
+     shape that has stopped growing */
+  const late = clamp((p - 0.6) / 0.4, 0, 1);
+
+  const flip = () => {
+    setOpen(v => !v);
+  };
+
+  return (
+    <div className="bn-snd" style={{ width: W, height: OPEN }}>
+      <div
+        className="bn-snd-box"
+        ref={skin}
+        data-open={open || undefined}
+        style={{
+          width: W,
+          height: h,
+          borderRadius: mix(boxR[0], boxR[1], p),
+          scale: zoom,
+        }}
+      >
+        {/* the hinge */}
+        <span
+          className="bn-snd-art"
+          aria-hidden="true"
+          style={{
+            backgroundImage: COVER,
+            left: art.x,
+            top: art.y,
+            width: art.s,
+            height: art.s,
+            borderRadius: mix(artR[0], artR[1], p),
+          }}
+        />
+
+        <span
+          className="bn-snd-say"
+          style={{
+            /* beside the sleeve at both ends, level with it and centred by its height */
+            left: mix(PAD + ART.s[0] + 10, PAD + ART.s[1] + 10, p),
+            top: PAD,
+            height: art.s,
+            /* what is left between the sleeve and the row, less the heart on the card */
+            width: mix(94, W - PAD - (PAD + ART.s[1] + 10) - (LIKE + 10), p),
+          }}
+        >
+          <span className="bn-snd-title" style={{ fontSize: mix(13, 15.5, p) }}>
+            Fim de Tarde
+          </span>
+          <span className="bn-snd-by" style={{ fontSize: mix(11, 12, p) }}>
+            Lado B
+          </span>
+        </span>
+
+        {/* The track is on the bar too, along the foot and inset by the same margin as everything else. Only the
+            times belong to the card: they fade with the deep half of the move and the box clips them until then. */}
+        <span
+          className="bn-snd-bar"
+          style={{
+            top: mix(SHUT - PAD - RAIL_H, RAIL_Y, p),
+            left: PAD,
+            width: W - PAD * 2,
+          }}
+        >
+          <span className="bn-snd-rail">
+            <span className="bn-snd-run" style={{ width: `${(at / TOTAL) * 100}%` }} />
+          </span>
+          <span className="bn-snd-clock" style={{ opacity: late }}>
+            <span>{clock(at)}</span>
+            <span>−{clock(TOTAL - at)}</span>
+          </span>
+        </span>
+
+        {/* The one thing you press to change shape. Invisible; the whole bar when shut, the sleeve and the words
+            only when opened, so reaching for the title does not collapse it. Declared before the transport: both
+            are positioned, the later paints on top, and the buttons have to win a press that lands on both. */}
+        <button
+          type="button"
+          className="bn-snd-tap"
+          onClick={flip}
+          aria-expanded={open}
+          aria-label={open ? "Recolher o player" : "Abrir o player"}
+          style={{
+            left: mix(0, PAD, p),
+            top: mix(0, PAD, p),
+            width: mix(W, W - PAD * 2, p),
+            height: mix(SHUT, ART.s[1], p),
+            borderRadius: mix(boxR[0], artR[1], p),
+          }}
+        />
+
+        {/* The heart belongs to the card alone: it rides `late` and takes its hit area with it. After the tap, so a
+            press in the corner reaches the heart rather than closing the player underneath it. */}
+        <button
+          type="button"
+          className="bn-snd-like"
+          data-on={liked || undefined}
+          onClick={() => {
+            setLiked(v => !v);
+          }}
+          aria-label={liked ? "Remover das curtidas" : "Curtir"}
+          aria-pressed={liked}
+          tabIndex={open ? 0 : -1}
+          style={{
+            left: W - PAD - LIKE,
+            top: PAD,
+            width: LIKE,
+            height: LIKE,
+            opacity: late,
+            pointerEvents: late > 0.9 ? "auto" : "none",
+          }}
+        >
+          <Heart size={16} weight={liked ? "fill" : "bold"} />
+        </button>
+
+        <span className="bn-snd-ops" style={{ left: opsX, top: opsY, gap }}>
+          {/* drawn, not filled, unlike the play: the difference in weight says which one is the button */}
+          <button
+            type="button"
+            className="bn-snd-op"
+            style={{ width: side, height: side }}
+            onClick={() => {
+              setAt(0);
+            }}
+            aria-label="Voltar ao início"
+          >
+            <SkipBack size={mix(14, 16, p)} weight="bold" />
+          </button>
+
+          <button
+            type="button"
+            className="bn-snd-op"
+            data-lead
+            style={{ width: lead, height: lead }}
+            onClick={() => {
+              setGoing(v => !v);
+            }}
+            aria-label={going ? "Pausar" : "Tocar"}
+            aria-pressed={going}
+          >
+            <Mark playing={going} size={mix(14, 18, p)} still={still} />
+          </button>
+
+          <button
+            type="button"
+            className="bn-snd-op"
+            style={{ width: side, height: side }}
+            onClick={() => {
+              setAt(0);
+            }}
+            aria-label="Próxima"
+          >
+            <SkipForward size={mix(14, 16, p)} weight="bold" />
+          </button>
+        </span>
+      </div>
+    </div>
+  );
+}