Playlist Player

Preview
Code

PlaylistPlayer.jsx

import { CallToAction } from "@/registry/react/blocks/playlist/CallToAction";
import { Duration } from "@/registry/react/blocks/playlist/Duration";
import { NextTrackButton } from "@/registry/react/blocks/playlist/NextTrackButton";
import { PlaybackControls } from "@/registry/react/blocks/playlist/PlaybackControls";
import { PlaybackRateButton } from "@/registry/react/blocks/playlist/PlaybackRateButton";
import { PlayerInfo } from "@/registry/react/blocks/playlist/PlayerInfo";
import { PlayerProvider } from "@/registry/react/blocks/playlist/PlayerProvider";
import { Playlist, PlaylistProvider, PlaylistToggleButton } from "@/registry/react/blocks/playlist/Playlist";
import { PlayPauseButton } from "@/registry/react/blocks/playlist/PlayPauseButton";
import { PrevTrackButton } from "@/registry/react/blocks/playlist/PrevTrackButton";
import { ProgressBar } from "@/registry/react/blocks/playlist/ProgressBar";
import { TimeIndicator } from "@/registry/react/blocks/playlist/TimeIndicator";

export function PlaylistPlayer({ projectId, playlistId, ...args }) {
  return (
    <PlayerProvider args={{ projectId, playlistId, showUserInterface: false, ...args }}>
      <PlaylistProvider>
        <div className="w-[536px] space-y-4">
          <div className="flex h-12 flex-row items-center gap-2 rounded-[25px] bg-[#F5F5F5] p-1 pr-4">
            <PlayPauseButton />
            <PlayerInfo>
              <CallToAction />
              <Duration />
            </PlayerInfo>
            <PlaybackControls>
              <PlaybackRateButton />
              <PrevTrackButton />
              <NextTrackButton />
              <TimeIndicator />
              <ProgressBar />
            </PlaybackControls>
            <PlaylistToggleButton />
          </div>
          <Playlist />
        </div>
      </PlaylistProvider>
    </PlayerProvider>
  );
}

Installation

npx @beyondwords/cli components add playlist-player

pnpm dlx @beyondwords/cli components add playlist-player

yarn dlx @beyondwords/cli components add playlist-player

bunx --bun @beyondwords/cli components add playlist-player

Usage

import { PlaylistPlayer } from '@/registry/react/blocks/playlist/PlaylistPlayer';

export function Player() {
  return <PlaylistPlayer projectId={9504} playlistId={153102} />;
}

PlaylistPlayer is a drop-in layout for a playlist. It wraps its own PlayerProvider, so you pass projectId and a playlistId instead of a single sourceId. It pairs a control bar with a toggleable Playlist of the playlist’s items. The control bar includes play/pause, a call to action and duration, playback rate, previous/next track, a time indicator, a progress bar, and a button that shows or hides the playlist.

Getting started

Components

Examples

Installation

Usage

​Installation

​Usage

Installation

Usage