"use client" import { Artwork } from "macbetter/artwork" import { Button } from "macbetter/button" import { List, ListRow, ListRowAccessory, ListRowTitle, ListSection } from "macbetter/list" import { Menu, MenuContent, MenuItem, MenuItemIcon, MenuTrigger } from "macbetter/menu" import { NavigationBar, NavigationBarTrailing, NavigationStack } from "macbetter/navigation-bar" import { Sidebar, SidebarItem, SidebarSection } from "macbetter/sidebar" import { Slider } from "macbetter/slider" import { TabBar, TabBarItem, TabBarList, TabBarPanel } from "macbetter/tab-bar" import { toast } from "macbetter/toast" import { Toolbar, ToolbarSearchField, ToolbarSpacer, ToolbarTitle, ToolbarToggle } from "macbetter/toolbar" import { Window, WindowBody, WindowSidebar, WindowTitlebar, WindowTrafficLights } from "macbetter/window" import { AirplayIcon, ClockIcon, DiscIcon, DownloadIcon, EllipsisIcon, FastForwardIcon, HeartIcon, HouseIcon, LayoutGridIcon, ListMusicIcon, ListOrderedIcon, ListPlusIcon, MessageSquareQuoteIcon, MicVocalIcon, MusicIcon, PauseIcon, PlayIcon, RadioIcon, RepeatIcon, RewindIcon, SearchIcon, ShareIcon, ShuffleIcon, SquareLibraryIcon, UserRoundIcon, Volume1Icon, Volume2Icon, } from "lucide-react" import * as React from "react" import { ScreenSheet } from "../screen-sheet" import { ExampleShell, MacFrame, Phone, useStage } from "../shell" import { albums, playlists, time, type Album } from "./data" import "./music.css" /* ── Playback ──────────────────────────────────────────────────── */ function usePlayer() { const [album, setAlbum] = React.useState(albums[0]) const [index, setIndex] = React.useState(1) const [position, setPosition] = React.useState(74) const [playing, setPlaying] = React.useState(false) const [volume, setVolume] = React.useState(64) const [shuffle, setShuffle] = React.useState(false) const [repeat, setRepeat] = React.useState(false) const track = album.tracks[index] const next = React.useCallback(() => { setIndex((i) => (i + 1) % album.tracks.length) setPosition(0) }, [album]) const previous = () => { if (position > 3) return setPosition(0) setIndex((i) => (i - 1 + album.tracks.length) % album.tracks.length) setPosition(0) } React.useEffect(() => { if (!playing) return const timer = window.setInterval(() => { setPosition((p) => { if (p + 1 >= track.length) { window.setTimeout(next, 0) return p } return p + 1 }) }, 1000) return () => window.clearInterval(timer) }, [playing, track.length, next]) const play = (target: Album, at = 0) => { setAlbum(target) setIndex(at) setPosition(0) setPlaying(true) } return { album, track, index, position, setPosition, playing, toggle: () => setPlaying((p) => !p), next, previous, play, volume, setVolume, shuffle, setShuffle, repeat, setRepeat, } } type Player = ReturnType function Cover({ album, size, radius, className, animated, }: { album: Album size?: number radius?: number className?: string animated?: boolean }) { return ( ) } function PlayGlyph({ playing }: { playing: boolean }) { return playing ? : } /* ── Now playing (iPhone) ──────────────────────────────────────── */ function NowPlaying({ player, onClose }: { player: Player; onClose: () => void }) { const { album, track } = player return (

{track.title}

{album.artist} — {album.title}

toast(action === "love" ? "Loved" : action === "queue" ? "Added to Up Next" : "Link copied")}> Love Play Last Share Song…

player.setPosition(v as number)} thumbLabel="Playback position" format={(v: number) => `${time(v)} of ${time(track.length)}`} />

{time(player.position)} −{time(track.length - player.position)}

) } /* ── iPhone ────────────────────────────────────────────────────── */ const libraryRows = [ { label: "Playlists", icon: ListMusicIcon }, { label: "Artists", icon: MicVocalIcon }, { label: "Albums", icon: SquareLibraryIcon }, { label: "Songs", icon: MusicIcon }, { label: "Downloaded", icon: DownloadIcon }, ] function PhoneLibrary({ player }: { player: Player }) { return ( {libraryRows.map((row) => ( {}}> {row.label} ))}

Playlists

{playlists.map((playlist) => ( ))}

Recently Added

{albums.map((album) => ( ))}

) } function MiniPlayer({ player, onOpen }: { player: Player; onOpen: () => void }) { return (

) } const tabs = [ { value: "home", label: "Home", icon: }, { value: "new", label: "New", icon: }, { value: "radio", label: "Radio", icon: }, { value: "library", label: "Library", icon: }, { value: "search", label: "Search", icon: }, ] function PhoneMusic({ player }: { player: Player }) { const [open, setOpen] = React.useState(false) return (

{tabs.map((tab) => ( {tab.value === "library" ? ( ) : (

{albums.slice(tab.value.length % 3, 8).map((album) => ( ))}

)} ))} setOpen(true)} /> {tabs.map((tab) => ( {tab.label} ))} setOpen(false)} />

) } /* ── macOS ─────────────────────────────────────────────────────── */ function MacMusic({ player }: { player: Player }) { const [place, setPlace] = React.useState("Recently Added") const [query, setQuery] = React.useState("") const [view, setView] = React.useState(true) const shown = albums.filter((a) => `${a.title} ${a.artist} ${a.genre}`.toLowerCase().includes(query.trim().toLowerCase())) const { album, track } = player return ( {[ { name: "Home", icon: HouseIcon }, { name: "New", icon: LayoutGridIcon }, { name: "Radio", icon: RadioIcon }, ].map((item) => ( } current={place === item.name} onClick={() => setPlace(item.name)}> {item.name} ))} {[ { name: "Recently Added", icon: ClockIcon }, { name: "Artists", icon: UserRoundIcon }, { name: "Albums", icon: DiscIcon }, { name: "Songs", icon: MusicIcon }, ].map((item) => ( } current={place === item.name} onClick={() => setPlace(item.name)}> {item.name} ))} {playlists.map((playlist) => ( } current={place === playlist.name} onClick={() => setPlace(playlist.name)} > {playlist.name} ))} {place} setQuery(e.currentTarget.value)} />

{shown.length ? (

{shown.map((item) => { const current = item.id === album.id return (

{item.title} {item.artist}

) })}

) : (

No results Nothing in your library matches “{query}”.

)}

{track.title} {album.artist} — {album.title}

{time(player.position)} player.setPosition(v as number)} thumbLabel="Playback position" format={(v: number) => `${time(v)} of ${time(track.length)}`} /> −{time(track.length - player.position)}

) } function MusicApp() { const player = usePlayer() const { platform } = useStage() return platform === "ios" ? : } function MusicExample() { return ( ) } export { MusicApp, MusicExample }