chrisandClaude Opus 5.5
804493aee0
ListenBrainz accounts are MusicBrainz accounts, so its sign-up link goes to MusicBrainz. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
||
import { mutate } from 'swr';
|
||
import { SERVICE_LABELS } from '@musicshare/shared';
|
||
import { SignInError, openSignupPage, signInWithService } from '@/lib/connect';
|
||
import { Button } from '../ui';
|
||
import { ErrorText, SetupActions, SetupHeader, type SetupProps } from './common';
|
||
|
||
type Provider = 'plex' | 'lastfm';
|
||
|
||
/**
|
||
* Sign in to Plex, or to Last.fm for apps that can send plays there.
|
||
* (Spotify has its own SpotifySetup: via Last.fm or ListenBrainz.)
|
||
*/
|
||
export function ServiceSignInSetup({
|
||
service,
|
||
appName,
|
||
onDone,
|
||
skipLabel,
|
||
}: SetupProps & { service: Provider; appName?: string }) {
|
||
const [done, setDone] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const run = async () => {
|
||
setBusy(true);
|
||
setError(null);
|
||
try {
|
||
if ((await signInWithService(service)) === 'connected') {
|
||
await mutate('/connections');
|
||
setDone(true);
|
||
}
|
||
} catch (err) {
|
||
setError(err instanceof SignInError ? err.message : `Couldn't connect ${SERVICE_LABELS[service]}. Try again.`);
|
||
}
|
||
setBusy(false);
|
||
};
|
||
|
||
if (done) {
|
||
return (
|
||
<>
|
||
<SetupHeader
|
||
title="You're all set"
|
||
subtitle={`Play something on ${appName ?? SERVICE_LABELS[service]} and your friends will see it.`}
|
||
/>
|
||
<SetupActions primary="Continue" onPrimary={onDone} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (service === 'lastfm') {
|
||
return (
|
||
<>
|
||
<SetupHeader
|
||
title="Connect Last.fm"
|
||
subtitle={`${appName ?? 'Your app'} doesn’t let other iPhone apps see what’s playing. If it can send plays to Last.fm (TIDAL can, in its settings), sign in to Last.fm and we’ll share them.`}
|
||
/>
|
||
<ErrorText>{error}</ErrorText>
|
||
<SetupActions primary="Sign in with Last.fm" loading={busy} onPrimary={run} onSkip={onDone} skipLabel={skipLabel} />
|
||
<Button small title="New to Last.fm? Create an account" onPress={() => openSignupPage('lastfm')} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<SetupHeader title="Share what you’re playing" subtitle={`Sign in to ${SERVICE_LABELS[service]} and your friends see what you play.`} />
|
||
<ErrorText>{error}</ErrorText>
|
||
<SetupActions primary={`Connect ${SERVICE_LABELS[service]}`} loading={busy} onPrimary={run} onSkip={onDone} skipLabel={skipLabel} />
|
||
</>
|
||
);
|
||
}
|