GameActivityToggle: fix Spotify toggle with multiple accounts (#1306)
* GameActivityToggle: fix Spotify toggle with multiple accounts * change back aria-checked attribute to ariaChecked
This commit is contained in:
parent
d48e3d7bfc
commit
73f2940b30
1 changed files with 19 additions and 15 deletions
|
|
@ -86,8 +86,8 @@ function GameActivityToggleButton(props: UserAreaRenderProps) {
|
|||
|
||||
const connectedAccounts = useStateFromStores([ConnectedAccountsStore], () => ConnectedAccountsStore.getAccounts());
|
||||
const spotifyAccounts = connectedAccounts.filter(account => account.type === "spotify" && !account.revoked);
|
||||
// The update is an API request which takes a bit to update the store, so we have to use our own state to reflect the change immediately
|
||||
const [shareSpotifyActivity, setShareSpotifyActivity] = useState(spotifyAccounts[0]?.showActivity ?? false);
|
||||
// The update is an API request which takes a bit to update the store, so keep local overrides to reflect changes immediately
|
||||
const [spotifyActivityOverrides, setSpotifyActivityOverrides] = useState<Record<string, boolean>>({});
|
||||
|
||||
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
|
|
@ -103,12 +103,9 @@ function GameActivityToggleButton(props: UserAreaRenderProps) {
|
|||
onClick: () => ShowCurrentGame.updateSetting(old => !old)
|
||||
};
|
||||
|
||||
// Only show switch if there's exactly one Spotify account connected. Otherwise it may lead to confusion
|
||||
if (spotifyAccounts.length !== 1)
|
||||
if (spotifyAccounts.length === 0)
|
||||
return <Button {...buttonProps} />;
|
||||
|
||||
const spotifyAccount = spotifyAccounts[0];
|
||||
|
||||
return (
|
||||
<Popout
|
||||
position="top"
|
||||
|
|
@ -116,15 +113,22 @@ function GameActivityToggleButton(props: UserAreaRenderProps) {
|
|||
targetElementRef={buttonRef}
|
||||
renderPopout={({ closePopout }) => (
|
||||
<Menu.Menu navId="vc-gameActivityToggle-menu" onClose={closePopout}>
|
||||
<Menu.MenuCheckboxItem
|
||||
id="vc-toggle-spotify"
|
||||
label="Share Spotify Activity"
|
||||
checked={shareSpotifyActivity}
|
||||
action={async () => {
|
||||
ConnectedAccountActions.setShowActivity(spotifyAccount.type, spotifyAccount.id, !shareSpotifyActivity);
|
||||
setShareSpotifyActivity(!shareSpotifyActivity);
|
||||
}}
|
||||
/>
|
||||
{spotifyAccounts.map(account => {
|
||||
const checked = spotifyActivityOverrides[account.id] ?? account.showActivity;
|
||||
|
||||
return (
|
||||
<Menu.MenuCheckboxItem
|
||||
key={account.id}
|
||||
id={`vc-toggle-spotify-${account.id}`}
|
||||
label={spotifyAccounts.length === 1 ? "Share Spotify Activity" : `Share Spotify Activity (${account.name})`}
|
||||
checked={checked}
|
||||
action={() => {
|
||||
ConnectedAccountActions.setShowActivity(account.type, account.id, !checked);
|
||||
setSpotifyActivityOverrides(current => ({ ...current, [account.id]: !checked }));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Menu.Menu>
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue