player comps

[malerba118]

Adds player components

player-components-oss.mov

<PlayerProvider />
<PlayerButton />
<PlayerTime />
<PlayerProgress />
<PlayerDuration />

const player: Player = usePlayer(): 
// Time is separate from usePlayer so that calling usePlayer doesn't cause host component to re-render 120 times/sec.
const currentTime = usePlayerTime()

interface Player {
  ref: RefObject<HTMLAudioElement | null>;
  activeItem: PlayerItem | null;
  duration: number | undefined;
  error: MediaError | null;
  isPlaying: boolean;
  isBuffering: boolean;
  isItemActive: (id: string | number | null) => boolean;
  setActiveItem: (item: PlayerItem | null) => Promise<void>;
  play: (item?: PlayerItem | null) => Promise<void>;
  pause: () => void;
  seek: (time: number) => void;
}

Caveats -

• I had to rewrite state mgmt logic from mobx to react hooks. As a result, logic is not super well tested.
• Depends on radix slider and also Button component
• No streaming support atm 😢
• I think we should add a waveform variant in future, maybe something like <PlayerProgress variant="waveform" /> and then useWaveform + <Waveform src={url} sampleRate={30} />
• I left out forward refs for brevity but usually good to add forward ref to any sort of reusable component library

[vercel]

@malerba118 is attempting to deploy a commit to the ElevenLabs team on Vercel, but is not a member of this team. To resolve this issue, you can:

• Make your repository public. Collaboration is free for open source and public repositories.
• Add @malerba118 as a member. A Pro subscription is required to access Vercel's collaborative features.
  • If you're the owner of the team, click here and add @malerba118 as a member.
  • If you're the user who initiated this build request, click here to request access.
  • If you're already a member of the ElevenLabs team, make sure that your Vercel account is connected to your GitHub account.

To read more about collaboration on Vercel, click here.