SpotifyNowPlaying

Now-playing line with scroll-flip transitions and optional polling.

Usage

svelte

<script lang="ts">
  import { SpotifyNowPlaying } from "@milandekruijf/ui/svelte";

  const nowPlaying = {
    playing: true,
    title: "Cornfield Chase",
    artist: "Hans Zimmer",
    url: "https://open.spotify.com",
  };
</script>

<SpotifyNowPlaying {nowPlaying} pollUrl="/api/spotify/now-playing" />

Examples

Now playing

Not playing

<script lang="ts">
  import { SpotifyNowPlaying } from "@milandekruijf/ui/svelte";

  const nowPlaying = {
    playing: true,
    title: "Cornfield Chase",
    artist: "Hans Zimmer",
    url: "#",
  };
</script>

<SpotifyNowPlaying {nowPlaying} profileUrl="#" pollUrl={null} />

Props

Prop	Type	Default	Description
nowPlaying	`NowPlaying`	—	Initial track as `{ playing, title, artist, url }` or `null` for the idle state.
pollUrl?	`string \| null`	null	Endpoint polled for fresh data; skipped when null.
profileUrl?	`string`	"https://open.spotify.com"	Where the idle state links to.
formatLabel?	`(np: NowPlaying) => string`	—	Localized accessible label for a given state; defaults to an English label.
class?	`string`	—	Extra classes merged on the root.