Audio review

"use client"
import * as React from "react"
import { AudioReview, AudioReviewControls, AudioReviewLane } from "@/components/ui/audio-review"
const DURATION = 43const BARS = 140const people = [  { id: "maya", name: "Maya Okafor", org: "Halcyon Labs", color: "var(--chart-1)", seed: 1.3 },  { id: "daniel", name: "Daniel Reyes", org: "Tidewater Freight", color: "var(--chart-2)", seed: 2.1 },  { id: "priya", name: "Priya Natarajan", org: "Tidewater Freight", color: "var(--chart-3)", seed: 0.7 },]// Who talks when, in seconds.const turns: [string, number, number][] = [  ["maya", 0, 8.6],  ["daniel", 9.2, 18.9],  ["maya", 17.6, 28.2],  ["priya", 28.8, 33.4],  ["daniel", 32.6, 36.4],  ["maya", 37, 42.6],]const overlaps = [  { from: 17.6, to: 18.9, label: "Maya and Daniel at once" },  { from: 32.6, to: 33.4, label: "Priya and Daniel at once" },]
function lane(id: string, seed: number) {  return Array.from({ length: BARS }, (_, i) => {    const t = ((i + 0.5) / BARS) * DURATION    const on = turns.some(([who, from, to]) => who === id && t >= from && t < to)    return on ? 0.3 + 0.6 * Math.abs(Math.sin(i * seed) * Math.cos(i * 0.29)) : 0  })}const lanes = Object.fromEntries(people.map((p) => [p.id, lane(p.id, p.seed)]))
export default function AudioReviewCall() {  const [time, setTime] = React.useState(17.9)  const [playing, setPlaying] = React.useState(false)
  React.useEffect(() => {    if (!playing) return    let last = performance.now()    let frame = requestAnimationFrame(function tick(now) {      setTime((t) => Math.min(t + (now - last) / 1000, DURATION))      last = now      frame = requestAnimationFrame(tick)    })    return () => cancelAnimationFrame(frame)  }, [playing])
  if (playing && time >= DURATION) setPlaying(false)
  return (    <div className="flex w-full max-w-2xl flex-col gap-4 rounded-xl border bg-card p-4 shadow-xs">      <div className="flex flex-col gap-0.5">        <p className="m-0 text-sm font-medium">Call with Tidewater Freight</p>        <p className="m-0 text-[13px] text-muted-foreground">October 14, three voices. Hatched where two people talk at once.</p>      </div>      <AudioReview duration={DURATION} time={time} onSeek={setTime} overlaps={overlaps} label="Call with Tidewater Freight">        {people.map((p) => (          <AudioReviewLane            key={p.id}            label={p.name}            description={p.org}            color={p.color}            values={lanes[p.id]}            speaking={turns.some(([who, from, to]) => who === p.id && time >= from && time < to)}          />        ))}      </AudioReview>      <AudioReviewControls        time={time}        duration={DURATION}        playing={playing}        onPlayingChange={(next) => {          if (next && time >= DURATION) setTime(0)          setPlaying(next)        }}        onSeek={setTime}        className="border-t pt-3"      />    </div>  )}