+ togglePin(np)}
+ />
+ ))}
+
+ );
+}
+
+function Landing() {
+ return (
+ Friends listening
+ {!me?.preferredService && ( ++ Pick your streaming service in Settings so songs open in the right app. +
+ )} + {feed?.length === 0 && ( +Nothing yet. Follow some friends and their music will show up here live.
+ )} + {feed?.map((np) => ( +See what your friends are playing.
++ Connect Spotify, Last.fm, ListenBrainz and more. When a friend on Apple Music is playing something you like, + one tap opens it in your app. +
+
+
+ Create account
+
+
+ Log in
+
+
+
+
+ );
+}
+
+function ProfileForm({ me }: { me: MeDTO }) {
+ const { mutate } = useMe();
+ const [saved, setSaved] = useState(false);
+ const [error, setError] = useStateSettings
+Music services
+Connect where you listen. Your friends see what you're playing in real time.
+ {error &&{error}
} +
+ {(['spotify', 'plex'] as const).map((p) => (
+
+
+
+ ))}
+
+
+ {SERVICE_LABELS[p]}
+
+ {byProvider.get(p)?.status === 'active' ? (
+
+ ) : (
+
+ )}
+ {status(p) ?? (p === 'plex' && Music you play from your Plex servers)}
+
+
+
+ {(['lastfm', 'listenbrainz'] as const).map((p) => (
+
+ Jellyfin
+
+ {byProvider.get('jellyfin')?.status === 'active' && (
+
+ )}
+ {status('jellyfin') ?? Sign in to your Jellyfin server. Your password isn't stored.}
+
+
+ ))}
+
+
+ {SERVICE_LABELS[p]}
+
+ {byProvider.has(p) ? (
+
+ ) : (
+
+ )}
+
+ {status(p) ?? (
+
+ {p === 'lastfm'
+ ? 'Works with anything that scrobbles: YouTube Music, Tidal, Deezer, SoundCloud…'
+ : 'Open-source scrobbling'}
+
+ )}
+
+
+
+
+ Apple Music
+
+ Coming with the iOS app
+
+
+ );
+}
+
+function FeaturedPicker() {
+ const { me } = useMe();
+ const [q, setQ] = useState('');
+ const [selected, setSelected] = useStateInstant updates
+{WEBHOOK_HELP[connection.provider]}
+
+
+ {connection.webhookUrl}
+
+ Featured song
+Pin a song to your profile, with an optional note about why.
+ {selected ? ( +
+ {selected.artworkUrl && 
}
+
+ ) : (
+ <>
+ setQ(e.target.value)} />
+ {results && (
+
+
+
+ {selected.title}
+ {selected.artist}
+ -
+ {results.map((r) => (
+
- + + + ))} +