AudioPlayer

import { useEffect, useRef, useState } from 'react';
import { AudioPlayer, Button } from '@anicanon/sakuga/ui';

function usePlay(start, len) {
  const [value, setValue] = useState(start);
  const [playing, setPlaying] = useState(false);
  const t = useRef(start);
  useEffect(() => {
    if (!playing) return undefined;
    let raf;
    let last = performance.now();
    function tick(now) {
      t.current = Math.min(len, t.current + (now - last) / 1000);
      last = now;
      setValue(t.current);
      if (t.current >= len) {
        setPlaying(false);
        return;
      }
      raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [playing]);
  return {
    value: value,
    playing: playing,
    onToggle: (on) => {
      if (on && t.current >= len) {
        t.current = 0;
        setValue(0);
      }
      setPlaying(on);
    },
    onSeek: (s) => {
      t.current = s;
      setValue(s);
    },
  };
}

export default function AudioPlayerExample() {
  const a = usePlay(1.6, 4);
  const b = usePlay(0.8, 4);
  const c = usePlay(2.4, 6);
  return (
    <>
      <AudioPlayer
        {...Object.assign(
          {
            title: 'His voice',
            subtitle: 'Cast as Shounen Hero · warm, a little husky',
            duration: 4,
          },
          a,
        )}
      >
        <Button variant="ghost" size="sm" icon="mic">
          Recast
        </Button>
      </AudioPlayer>
      <AudioPlayer
        {...Object.assign({ size: 'sm', duration: 4, seed: 3 }, b)}
      />
      <img
        src="/art/eba-cinema.webp"
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}
      />
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'linear-gradient(0deg,var(--bg-scrim-strong),transparent 85%)',
        }}
      />
      <AudioPlayer
        {...Object.assign(
          {
            variant: 'media',
            title: 'The theme',
            subtitle: 'Over the opening shot',
            duration: 6,
            seed: 5,
          },
          c,
        )}
      />
    </>
  );
}