Podcast Player Screen

import * as React from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, Image, Text, Waveform } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { GlowSpot, Mount, Press, World } from "../shared";

export interface Chapter {
  id: string;
  title: string;
  /** "12:40" start offset. */
  at: string;
  /** Currently playing chapter. */
  current?: boolean;
}

export interface PodcastPlayerScreenProps {
  show?: string;
  episode?: string;
  artworkUrl?: string;
  chapters?: Chapter[];
  position?: number;
  positionLabel?: string;
  durationLabel?: string;
  playing?: boolean;
  onChapterPress?: (id: string) => void;
  onPlayPause?: () => void;
  onBack?: () => void;
}

const DEFAULT_CHAPTERS: Chapter[] = [
  { id: "c1", title: "Why every design system starts with tokens", at: "0:00" },
  { id: "c2", title: "The handoff problem nobody talks about", at: "8:24" },
  { id: "c3", title: "Haptics are UX, not garnish", at: "21:10", current: true },
  { id: "c4", title: "Live Q&A: shipping to three platforms", at: "38:52" },
];

/** Podcast player — artwork, episode transport, chapter list. */
export function PodcastPlayerScreen({
  show = "Interface Notes",
  episode = "47 · Spring-loaded UI, with Renata Vargas",
  artworkUrl = "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=600&h=600&fit=crop&q=70&auto=format",
  chapters = DEFAULT_CHAPTERS,
  position = 46,
  positionLabel = "26:12",
  durationLabel = "54:08",
  playing = true,
  onChapterPress,
  onPlayPause,
  onBack,
}: PodcastPlayerScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [isPlaying, setIsPlaying] = React.useState(playing);
  const [pos, setPos] = React.useState(position);
  const [speed, setSpeed] = React.useState<number>(1);
  React.useEffect(() => setIsPlaying(playing), [playing]);
  React.useEffect(() => setPos(position), [position]);

  return (
    <World primary="#BEF04C">
    <SafeAreaView className="flex-1 bg-[#111114] dark:bg-[#111114]" edges={["top"]}>
      <GlowSpot color="#BEF04C" size={280} className="-top-16 right-[-80px] opacity-35" />
      <GlowSpot color="#8B5CF6" size={220} className="bottom-[25%] left-[-100px] opacity-30" />
      <View className="flex-row items-center gap-2 px-4 pt-2">
        <Button
          variant="ghost"
          size="icon"
          haptic="light"
          onPress={() => onBack?.()}
          accessibilityLabel="Go back"
          className="-ml-2 h-10 w-10"
        >
          <Icon name="chevron-left" size="md" color="#F5F3F8" />
        </Button>
        <Text variant="small" className="text-[#9B94A8]" numberOfLines={1}>
          {show}
        </Text>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {/* Artwork + episode title. */}
        <Mount className="items-center px-8 pt-3">
          <Image
            source={{ uri: artworkUrl }}
            className="aspect-square w-full rounded-3xl bg-muted"
            accessibilityLabel={`${show} artwork`}
          />
          <Text variant="h4" className="mt-4 text-center text-[#F5F3F8]" numberOfLines={2}>
            {episode}
          </Text>
          {/* Episode meta — date + remaining time set expectations. */}
          <Text variant="muted" className="mt-1 text-xs text-[#F5F3F8]/50">
            Sep 20 · 48 min left
          </Text>
        </Mount>

        {/* Scrub + transport. */}
        <Mount delay={60} className="mt-4 px-6">
          <Waveform
            value={pos}
            onValueChange={setPos}
            fillClassName="bg-[#F5F3F8]"
            trackClassName="bg-white/15"
            min={0}
            max={100}
            accessibilityLabel="Episode position"
          />
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="text-[#9B94A8]">
              {positionLabel}
            </Text>
            <Text variant="small" className="text-[#9B94A8]">
              {durationLabel}
            </Text>
          </View>
          <View className="mt-2 flex-row items-center justify-center gap-8">
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityLabel="Back 30 seconds"
              className="h-12 w-12"
            >
              <Icon name="skip-back" size="md" color="#F5F3F8" />
            </Button>
            <Button
              size="icon"
              haptic="medium"
              onPress={() => {
                haptics.medium();
                setIsPlaying((p) => !p);
                onPlayPause?.();
              }}
              accessibilityLabel={isPlaying ? "Pause" : "Play"}
              accessibilityState={{ checked: isPlaying }}
              className="bg-[#BEF04C] h-16 w-16 rounded-full p-0"
            >
              <Icon
                name={isPlaying ? "pause" : "play"}
                size="lg"
                color="#1B1B26"
              />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityLabel="Forward 30 seconds"
              className="h-12 w-12"
            >
              <Icon name="skip-forward" size="md" color="#F5F3F8" />
            </Button>
          </View>

          {/* Speed — Spotify's preset pill row under a big readout. */}
          <View className="mt-4 items-center">
            <Text className="text-2xl font-semibold text-[#F5F3F8]" style={{ fontVariant: ["tabular-nums"] }}>
              {`${speed}×`}
            </Text>
            <View className="mt-2 flex-row gap-1.5">
              {[0.8, 1, 1.25, 1.5, 2].map((v) => (
                <Press
                  key={v}
                  haptic="light"
                  onPress={() => setSpeed(v as typeof speed)}
                  accessibilityRole="button"
                  accessibilityLabel={`Playback speed ${v}x`}
                  className={
                    v === speed
                      ? "rounded-full bg-[#F5F3F8] px-3 py-1.5"
                      : "rounded-full bg-white/10 px-3 py-1.5"
                  }
                >
                  <Text className={v === speed ? "text-xs font-semibold text-[#151118]" : "text-xs font-medium text-[#9B94A8]"}>
                    {v}
                  </Text>
                </Press>
              ))}
            </View>
          </View>
        </Mount>

        {/* Chapters — flat rows on the dark stage, timestamp leading. */}
        <Mount delay={120} className="mt-6 px-6">
          <Text className="pb-2 text-xs font-semibold uppercase tracking-widest text-[#9B94A8]">
            Chapters
          </Text>
          {chapters.map((ch) => (
            <Pressable
              key={ch.id}
              onPress={() => {
                haptics.light();
                onChapterPress?.(ch.id);
              }}
              accessibilityRole="button"
              accessibilityState={{ selected: ch.current }}
              className="flex-row items-center gap-3 border-b border-white/10 py-3"
            >
              <Text variant="small" className="w-10 text-[#9B94A8] tabular-nums">
                {ch.at}
              </Text>
              <Text
                className={`flex-1 text-[15px] ${ch.current ? "font-semibold text-[#BEF04C]" : "text-[#F5F3F8]"}`}
                numberOfLines={1}
              >
                {ch.title}
              </Text>
              {ch.current ? <Icon name="volume-2" size="sm" color="#BEF04C" /> : null}
            </Pressable>
          ))}
        </Mount>
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
PodcastPlayerScreen.displayName = "PodcastPlayerScreen";

Recreate the "Podcast Player Screen" screen in React Native using LumioUI.

Goal: Podcast player with chapters and speed Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add media-podcast-player
```

Or pull just the components: `npx lumioui add button chip icon image list text waveform`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×4

### `chip` — Compact selectable pill with press scale and ink overlay.
- imported but not rendered directly — likely used through a sibling or as a utility

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×5

### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1

### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility

### `text` — Themed type scale from caption to display.
- `<Text>` ×10

### `waveform` — Audio scrubber that renders playback position as a filled amplitude waveform — the podcast and audiobook signature. Scrubbing rides an invisible Slider, so tap-to-seek, drag, per-step haptics, and adjustable accessibility come free.
- `<Waveform>` ×1

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/media/podcast-player.tsx` exporting PodcastPlayerScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, Image, Text, Waveform } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { GlowSpot, Mount, Press, World } from "../shared";

export interface Chapter {
  id: string;
  title: string;
  /** "12:40" start offset. */
  at: string;
  /** Currently playing chapter. */
  current?: boolean;
}

export interface PodcastPlayerScreenProps {
  show?: string;
  episode?: string;
  artworkUrl?: string;
  chapters?: Chapter[];
  position?: number;
  positionLabel?: string;
  durationLabel?: string;
  playing?: boolean;
  onChapterPress?: (id: string) => void;
  onPlayPause?: () => void;
  onBack?: () => void;
}

const DEFAULT_CHAPTERS: Chapter[] = [
  { id: "c1", title: "Why every design system starts with tokens", at: "0:00" },
  { id: "c2", title: "The handoff problem nobody talks about", at: "8:24" },
  { id: "c3", title: "Haptics are UX, not garnish", at: "21:10", current: true },
  { id: "c4", title: "Live Q&A: shipping to three platforms", at: "38:52" },
];

/** Podcast player — artwork, episode transport, chapter list. */
export function PodcastPlayerScreen({
  show = "Interface Notes",
  episode = "47 · Spring-loaded UI, with Renata Vargas",
  artworkUrl = "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=600&h=600&fit=crop&q=70&auto=format",
  chapters = DEFAULT_CHAPTERS,
  position = 46,
  positionLabel = "26:12",
  durationLabel = "54:08",
  playing = true,
  onChapterPress,
  onPlayPause,
  onBack,
}: PodcastPlayerScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [isPlaying, setIsPlaying] = React.useState(playing);
  const [pos, setPos] = React.useState(position);
  const [speed, setSpeed] = React.useState<number>(1);
  React.useEffect(() => setIsPlaying(playing), [playing]);
  React.useEffect(() => setPos(position), [position]);

  return (
    <World primary="#BEF04C">
    <SafeAreaView className="flex-1 bg-[#111114] dark:bg-[#111114]" edges={["top"]}>
      <GlowSpot color="#BEF04C" size={280} className="-top-16 right-[-80px] opacity-35" />
      <GlowSpot color="#8B5CF6" size={220} className="bottom-[25%] left-[-100px] opacity-30" />
      <View className="flex-row items-center gap-2 px-4 pt-2">
        <Button
          variant="ghost"
          size="icon"
          haptic="light"
          onPress={() => onBack?.()}
          accessibilityLabel="Go back"
          className="-ml-2 h-10 w-10"
        >
          <Icon name="chevron-left" size="md" color="#F5F3F8" />
        </Button>
        <Text variant="small" className="text-[#9B94A8]" numberOfLines={1}>
          {show}
        </Text>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {/* Artwork + episode title. */}
        <Mount className="items-center px-8 pt-3">
          <Image
            source={{ uri: artworkUrl }}
            className="aspect-square w-full rounded-3xl bg-muted"
            accessibilityLabel={`${show} artwork`}
          />
          <Text variant="h4" className="mt-4 text-center text-[#F5F3F8]" numberOfLines={2}>
            {episode}
          </Text>
          {/* Episode meta — date + remaining time set expectations. */}
          <Text variant="muted" className="mt-1 text-xs text-[#F5F3F8]/50">
            Sep 20 · 48 min left
          </Text>
        </Mount>

        {/* Scrub + transport. */}
        <Mount delay={60} className="mt-4 px-6">
          <Waveform
            value={pos}
            onValueChange={setPos}
            fillClassName="bg-[#F5F3F8]"
            trackClassName="bg-white/15"
            min={0}
            max={100}
            accessibilityLabel="Episode position"
          />
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="text-[#9B94A8]">
              {positionLabel}
            </Text>
            <Text variant="small" className="text-[#9B94A8]">
              {durationLabel}
            </Text>
          </View>
          <View className="mt-2 flex-row items-center justify-center gap-8">
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityLabel="Back 30 seconds"
              className="h-12 w-12"
            >
              <Icon name="skip-back" size="md" color="#F5F3F8" />
            </Button>
            <Button
              size="icon"
              haptic="medium"
              onPress={() => {
                haptics.medium();
                setIsPlaying((p) => !p);
                onPlayPause?.();
              }}
              accessibilityLabel={isPlaying ? "Pause" : "Play"}
              accessibilityState={{ checked: isPlaying }}
              className="bg-[#BEF04C] h-16 w-16 rounded-full p-0"
            >
              <Icon
                name={isPlaying ? "pause" : "play"}
                size="lg"
                color="#1B1B26"
              />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityLabel="Forward 30 seconds"
              className="h-12 w-12"
            >
              <Icon name="skip-forward" size="md" color="#F5F3F8" />
            </Button>
          </View>

          {/* Speed — Spotify's preset pill row under a big readout. */}
          <View className="mt-4 items-center">
            <Text className="text-2xl font-semibold text-[#F5F3F8]" style={{ fontVariant: ["tabular-nums"] }}>
              {`${speed}×`}
            </Text>
            <View className="mt-2 flex-row gap-1.5">
              {[0.8, 1, 1.25, 1.5, 2].map((v) => (
                <Press
                  key={v}
                  haptic="light"
                  onPress={() => setSpeed(v as typeof speed)}
                  accessibilityRole="button"
                  accessibilityLabel={`Playback speed ${v}x`}
                  className={
                    v === speed
                      ? "rounded-full bg-[#F5F3F8] px-3 py-1.5"
                      : "rounded-full bg-white/10 px-3 py-1.5"
                  }
                >
                  <Text className={v === speed ? "text-xs font-semibold text-[#151118]" : "text-xs font-medium text-[#9B94A8]"}>
                    {v}
                  </Text>
                </Press>
              ))}
            </View>
          </View>
        </Mount>

        {/* Chapters — flat rows on the dark stage, timestamp leading. */}
        <Mount delay={120} className="mt-6 px-6">
          <Text className="pb-2 text-xs font-semibold uppercase tracking-widest text-[#9B94A8]">
            Chapters
          </Text>
          {chapters.map((ch) => (
            <Pressable
              key={ch.id}
              onPress={() => {
                haptics.light();
                onChapterPress?.(ch.id);
              }}
              accessibilityRole="button"
              accessibilityState={{ selected: ch.current }}
              className="flex-row items-center gap-3 border-b border-white/10 py-3"
            >
              <Text variant="small" className="w-10 text-[#9B94A8] tabular-nums">
                {ch.at}
              </Text>
              <Text
                className={`flex-1 text-[15px] ${ch.current ? "font-semibold text-[#BEF04C]" : "text-[#F5F3F8]"}`}
                numberOfLines={1}
              >
                {ch.title}
              </Text>
              {ch.current ? <Icon name="volume-2" size="sm" color="#BEF04C" /> : null}
            </Pressable>
          ))}
        </Mount>
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
PodcastPlayerScreen.displayName = "PodcastPlayerScreen";
```

Screen: https://lumioui.dev/screens/media-podcast-player