Previous Track Button

Preview
Code

PrevTrackButton.jsx

"use client";

import { newEvent } from "@/lib/newEvent";
import { PreviousTrackIcon } from "@/registry/react/Icons";
import { usePlayer } from "@/registry/react/PlayerProvider";

export function PrevTrackButton() {
  const player = usePlayer();
  return (
    <button
      type="button"
      aria-label="Previous track"
      onClick={() => {
        player.onEvent(
          newEvent({
            type: "PressedPrevTrack",
            description: "The previous track button was pressed.",
          }),
        );
      }}
    >
      <PreviousTrackIcon size={24} />
    </button>
  );
}

Installation

npx @beyondwords/cli components add prev-track-button

pnpm dlx @beyondwords/cli components add prev-track-button

yarn dlx @beyondwords/cli components add prev-track-button

bunx --bun @beyondwords/cli components add prev-track-button

Usage

import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { PrevTrackButton } from '@/registry/react/PrevTrackButton';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, playlistId: 153102, showUserInterface: false }}>
      <PrevTrackButton />
    </PlayerProvider>
  );
}

On click the button emits a PressedPrevTrack event (built with newEvent) on the surrounding PlayerProvider. It’s intended for playlist sources, where the player moves to the previous track.

Reference


Props	None
Player state read	None
Events emitted	`PressedPrevTrack`
Requires	a `PlayerProvider` ancestor

Getting started

Components

Examples

Installation

Usage

Reference

​Installation

​Usage

​Reference

Installation

Usage

Reference