Equicord/src/plugins/gameActivityToggle/index.tsx

/*
 * Vencord, a modification for Discord's desktop app
 * Copyright (c) 2023 Vendicated and contributors
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

import { isPluginEnabled } from "@api/PluginManager";
import { definePluginSettings } from "@api/Settings";
import { UserAreaRenderProps } from "@api/UserArea";
import { getUserSettingLazy } from "@api/UserSettings";
import equicordToolbox from "@equicordplugins/equicordToolbox";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { FluxStore } from "@vencord/discord-types";
import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
import { Menu, Popout, useRef, useState, useStateFromStores } from "@webpack/common";
interface ConnectedAccount {
    id: string;
    type: string;
    revoked: boolean;
    showActivity: boolean;
}

interface ConnectedAccountsStore extends FluxStore {
    getAccounts(): ConnectedAccount[];
}

const Button = findComponentByCodeLazy(".GREEN,positionKeyStemOverride:");
const ConnectedAccountsStore = findStoreLazy("ConnectedAccountsStore") as ConnectedAccountsStore;
const ConnectedAccountActions = findByPropsLazy("setShowActivity");

const ShowCurrentGame = getUserSettingLazy<boolean>("status", "showCurrentGame")!;

const settings = definePluginSettings({
    oldIcon: {
        type: OptionType.BOOLEAN,
        description: "Use the old icon style before Discord icon redesign",
        default: false
    },
    location: {
        type: OptionType.SELECT,
        description: "Where to show the game activity toggle button",
        options: [
            { label: "Next to Mute/Deafen", value: "PANEL", default: true },
            { label: "Equicord Toolbox", value: "TOOLBOX" }
        ],
        get hidden() {
            return !isPluginEnabled(equicordToolbox.name);
        }
    }
});

function Icon({ className }: { className?: string; }) {
    const { oldIcon } = settings.use(["oldIcon"]);
    const showCurrentGame = ShowCurrentGame.useSetting();

    const redLinePath = !oldIcon
        ? "M22.7 2.7a1 1 0 0 0-1.4-1.4l-20 20a1 1 0 1 0 1.4 1.4Z"
        : "M23 2.27 21.73 1 1 21.73 2.27 23 23 2.27Z";

    const maskBlackPath = !oldIcon
        ? "M23.27 4.73 19.27 .73 -.27 20.27 3.73 24.27Z"
        : "M23.27 4.54 19.46.73 .73 19.46 4.54 23.27 23.27 4.54Z";

    return (
        <svg className={className} width="20" height="20" viewBox="0 0 24 24">
            <path
                fill={!showCurrentGame && !oldIcon ? "var(--status-danger)" : "currentColor"}
                mask={!showCurrentGame ? "url(#gameActivityMask)" : void 0}
                d="M3.06 20.4q-1.53 0-2.37-1.065T.06 16.74l1.26-9q.27-1.8 1.605-2.97T6.06 3.6h11.88q1.8 0 3.135 1.17t1.605 2.97l1.26 9q.21 1.53-.63 2.595T20.94 20.4q-.63 0-1.17-.225T18.78 19.5l-2.7-2.7H7.92l-2.7 2.7q-.45.45-.99.675t-1.17.225Zm14.94-7.2q.51 0 .855-.345T19.2 12q0-.51-.345-.855T18 10.8q-.51 0-.855.345T16.8 12q0 .51.345 .855T18 13.2Zm-2.4-3.6q.51 0 .855-.345T16.8 8.4q0-.51-.345-.855T15.6 7.2q-.51 0-.855.345T14.4 8.4q0 .51.345 .855T15.6 9.6ZM6.9 13.2h1.8v-2.1h2.1v-1.8h-2.1v-2.1h-1.8v2.1h-2.1v1.8h2.1v2.1Z"
            />
            {!showCurrentGame && <>
                <path fill="var(--status-danger)" d={redLinePath} />
                <mask id="gameActivityMask">
                    <rect fill="white" x="0" y="0" width="24" height="24" />
                    <path fill="black" d={maskBlackPath} />
                </mask>
            </>}
        </svg>
    );
}

function GameActivityToggleButton(props: UserAreaRenderProps) {
    const { location } = settings.use(["location"]);
    const showCurrentGame = ShowCurrentGame.useSetting();

    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);

    const buttonRef = useRef<HTMLButtonElement | null>(null);

    if (location !== "PANEL" && isPluginEnabled(equicordToolbox.name)) return null;

    const buttonProps = {
        tooltipText: showCurrentGame ? "Disable Game Activity" : "Enable Game Activity",
        icon: Icon,
        role: "switch",
        ariaChecked: !showCurrentGame,
        redGlow: !showCurrentGame,
        plated: props?.nameplate != null,
        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)
        return <Button {...buttonProps} />;

    const spotifyAccount = spotifyAccounts[0];

    return (
        <Popout
            position="top"
            align="left"
            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);
                        }}
                    />
                </Menu.Menu>
            )}
        >
            {popoutProps => (
                <Button
                    ref={buttonRef}
                    onContextMenu={popoutProps.onClick}
                    {...buttonProps}
                />
            )}
        </Popout>
    );
}

export default definePlugin({
    name: "GameActivityToggle",
    description: "Adds a button next to the mic and deafen button to toggle game activity. Right click it to toggle Spotify activity.",
    tags: ["Activity", "Shortcuts"],
    authors: [Devs.Nuckyz, Devs.RuukuLada],
    dependencies: ["UserSettingsAPI", "UserAreaAPI"],
    settings,

    userAreaButton: {
        icon: Icon,
        render: GameActivityToggleButton
    },

    toolboxActions() {
        const { location } = settings.use(["location"]);
        const showCurrentGame = ShowCurrentGame.useSetting();

        if (location !== "TOOLBOX") return null;

        return (
            <Menu.MenuCheckboxItem
                id="game-activity-toggle-toolbox"
                label="Enable Game Activity"
                checked={showCurrentGame}
                action={() => ShowCurrentGame.updateSetting(old => !old)}
            />
        );
    },
});