Minimal Player

"use client";

import { CallToAction } from "@/registry/react/blocks/minimal/CallToAction";
import { CurrentTime } from "@/registry/react/blocks/minimal/CurrentTime";
import { PlaybackRateMenu } from "@/registry/react/blocks/minimal/PlaybackRateMenu";
import { PlayerProvider, usePlayerSelector } from "@/registry/react/blocks/minimal/PlayerProvider";
import { PlayPauseButton } from "@/registry/react/blocks/minimal/PlayPauseButton";
import { PrevSecondsButton } from "@/registry/react/blocks/minimal/PrevSecondsButton";

function Bar() {
  const stopped = usePlayerSelector((p) => p.playbackState) === "stopped";
  return (
    <div className="flex w-[536px] items-center gap-3 text-neutral-900 dark:text-neutral-100">
      <PlayPauseButton />
      {stopped ? (
        <CallToAction />
      ) : (
        <>
          <PrevSecondsButton seconds={10} />
          <PlaybackRateMenu />
          <CurrentTime />
        </>
      )}
    </div>
  );
}

export function MinimalPlayer({ projectId, sourceId, ...args }) {
  return (
    <PlayerProvider args={{ projectId, sourceId, showUserInterface: false, ...args }}>
      <Bar />
    </PlayerProvider>
  );
}