Home / Components / mini-player

Mini PlayeriOS

Spotify-style collapsed audio bar that morphs into the full player — shared-element artwork grow, progress hairline, transport controls

$ npx lumioui add mini-player

import { MiniPlayer } from "@/components/ui/mini-player/mini-player";

Props9

track	MiniPlayerTrack
playing?	boolean	Playing state (controlled).
onToggle?	() => void
onSkipBack?	() => void	Skip back/forward — hide the buttons when unset.
onSkipForward?	() => void
expanded?	boolean	Expanded state (controlled). Default collapsed.
onExpandChange?	(expanded: boolean) => void
onDismiss?	() => void	Dismiss the whole player (X button on the collapsed bar).
className?	string

Mini Playerplayer.tsx

mini-player/variants/player.tsx open

Spotify-style collapsed audio bar that morphs into the full player — shared-element artwork grow, progress hairline, transport controls

import { MiniPlayerInFeed } from "@/components/ui/mini-player/variants/player";

export function Example() {
  return (
    <MiniPlayerInFeed />
  );
}

import * as React from "react";
import { View } from "react-native";
import { MiniPlayer } from "../mini-player";
import { Ambient, Glass, Icon, Text } from "@lumioui/ui";

/** MiniPlayerInFeed — the bar parked under a queue card; tap to morph open. */
export function MiniPlayerInFeed() {
  const [playing, setPlaying] = React.useState(true);
  const [expanded, setExpanded] = React.useState(false);
  return (
    <View className="relative w-full overflow-hidden rounded-3xl">
      <Ambient seed="mini-player-player" />
      <View className="w-full gap-3 p-4">
        <Glass interactive curvature="edge" className="w-full gap-2 rounded-2xl p-4">
          <View className="flex-row items-center gap-2">
            <Icon name="music" size="sm" color="primary" />
            <Text variant="small" className="font-semibold">Up next — Lisbon Mix</Text>
          </View>
          {["Saudade Nights · Amália Tribute", "Tram Bells · Field Recording", "Alfama After Dark · DJ Rocha"].map((t) => (
            <Glass interactive key={t} curvature="edge" className="flex-row items-center justify-between rounded-lg px-3 py-2">
              <Text variant="small">{t}</Text>
              <Icon name="play" size="sm" color="mutedForeground" />
            </Glass>
          ))}
        </Glass>

        <MiniPlayer
          track={{
            title: "Midnight at the Kiyomizu",
            artist: "Osaka Transit — Kyoto Tapes",
            art: { uri: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=600&h=600&fit=crop&q=70&auto=format" },
            position: 0.42,
          }}
          playing={playing}
          onToggle={() => setPlaying((p) => !p)}
          onSkipBack={() => {}}
          onSkipForward={() => {}}
          expanded={expanded}
          onExpandChange={setExpanded}
        />
      </View>
    </View>
  );
}