GameActivityToggle

index.tsx

Download

Source

src/plugins/gameActivityToggle/index.tsx

1/*

2 * FiveCord — a Discord client mod

4 * SPDX-License-Identifier: GPL-3.0-or-later

5 */

7import { isPluginEnabled } from "@api/PluginManager";

8import { definePluginSettings } from "@api/Settings";

9import { getUserSettingLazy } from "@api/UserSettings";

10import ErrorBoundary from "@components/ErrorBoundary";

11import VencordToolboxPlugin from "@plugins/vencordToolbox";

12import { BRAND_NAME } from "@utils/branding";

13import { Devs } from "@utils/constants";

14import definePlugin, { OptionType } from "@utils/types";

15import { findComponentByCodeLazy } from "@webpack";

16import { Menu } from "@webpack/common";

18import managedStyle from "./style.css?managed";

20const Button = findComponentByCodeLazy(".GREEN,positionKeyStemOverride:");

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

24const settings = definePluginSettings({

25 oldIcon: {

26 type: OptionType.BOOLEAN,

27 description: "Use the old icon style before Discord icon redesign",

28 default: false

29 },

30 location: {

31 type: OptionType.SELECT,

32 description: "Where to show the game activity toggle button",

33 options: [

34 { label: "Next to Mute/Deafen", value: "PANEL", default: true },

35 { label: `${BRAND_NAME} Toolbox`, value: "TOOLBOX" }

36 ],

37 get hidden() {

38 return !isPluginEnabled(VencordToolboxPlugin.name);

39 }

40 }

41});

43function Icon() {

44 const { oldIcon } = settings.use(["oldIcon"]);

45 const showCurrentGame = ShowCurrentGame.useSetting();

48 const redLinePath = !oldIcon

49 ? "M22.7 2.7a1 1 0 0 0-1.4-1.4l-20 20a1 1 0 1 0 1.4 1.4Z"

50 : "M23 2.27 21.73 1 1 21.73 2.27 23 23 2.27Z";

52 const maskBlackPath = !oldIcon

53 ? "M23.27 4.73 19.27 .73 -.27 20.27 3.73 24.27Z"

54 : "M23.27 4.54 19.46.73 .73 19.46 4.54 23.27 23.27 4.54Z";

56 return (

57 <svg width="20" height="20" viewBox="0 0 24 24">

58 <path

59 fill={!showCurrentGame && !oldIcon ? "var(--status-danger)" : "currentColor"}

60 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"

62 />

63 {!showCurrentGame && <>

64 <path fill="var(--status-danger)" d={redLinePath} />

65 <mask id="gameActivityMask">

66 <rect fill="white" x="0" y="0" width="24" height="24" />

67 <path fill="black" d={maskBlackPath} />

68 </mask>

69 </>}

70 </svg>

71 );

72}

74function GameActivityToggleButton(props: { nameplate?: any; }) {

75 const { location } = settings.use(["location"]);

76 const showCurrentGame = ShowCurrentGame.useSetting();

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

80 return (

81 <Button

82 tooltipText={showCurrentGame ? "Disable Game Activity" : "Enable Game Activity"}

83 icon={Icon}

84 role="switch"

85 aria-checked={!showCurrentGame}

86 redGlow={!showCurrentGame}

87 plated={props?.nameplate != null}

88 onClick={() => ShowCurrentGame.updateSetting(old => !old)}

89 />

90 );

91}

93export default definePlugin({

94 name: "GameActivityToggle",

95 description: "Adds a button next to the mic and deafen button to toggle game activity.",

96 tags: ["Activity", "Shortcuts"],

97 authors: [Devs.Nuckyz, Devs.RuukuLada],

98 dependencies: ["UserSettingsAPI"],

99 settings,

100

101 managedStyle,

102

103 patches: [

104 {

105 find: ".DISPLAY_NAME_STYLES_COACHMARK)",

106 replacement: {

107 match: /children:\[(?=.{0,25}?accountContainerRef)/,

108 replace: "children:[$self.GameActivityToggleButton(arguments[0]),"

109 }

110 }

111 ],

112

113 toolboxActions() {

114 const { location } = settings.use(["location"]);

115 const showCurrentGame = ShowCurrentGame.useSetting();

116

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

118

119 return (

120 <Menu.MenuCheckboxItem

121 id="game-activity-toggle-toolbox"

122 label="Enable Game Activity"

123 checked={showCurrentGame}

124 action={() => ShowCurrentGame.updateSetting(old => !old)}

125 />

126 );

127 },

128

129 GameActivityToggleButton: ErrorBoundary.wrap(GameActivityToggleButton, { noop: true }),

130});

131

/*
 * FiveCord — a Discord client mod
 * Copyright (c) 2025 FiveCord
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

import { isPluginEnabled } from "@api/PluginManager";
import { definePluginSettings } from "@api/Settings";
import { getUserSettingLazy } from "@api/UserSettings";
import ErrorBoundary from "@components/ErrorBoundary";
import VencordToolboxPlugin from "@plugins/vencordToolbox";
import { BRAND_NAME } from "@utils/branding";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findComponentByCodeLazy } from "@webpack";
import { Menu } from "@webpack/common";

import managedStyle from "./style.css?managed";

const Button = findComponentByCodeLazy(".GREEN,positionKeyStemOverride:");

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: `${BRAND_NAME} Toolbox`, value: "TOOLBOX" }
        ],
        get hidden() {
            return !isPluginEnabled(VencordToolboxPlugin.name);
        }
    }
});

function Icon() {
    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 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: { nameplate?: any; }) {
    const { location } = settings.use(["location"]);
    const showCurrentGame = ShowCurrentGame.useSetting();

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

    return (
        <Button
            tooltipText={showCurrentGame ? "Disable Game Activity" : "Enable Game Activity"}
            icon={Icon}
            role="switch"
            aria-checked={!showCurrentGame}
            redGlow={!showCurrentGame}
            plated={props?.nameplate != null}
            onClick={() => ShowCurrentGame.updateSetting(old => !old)}
        />
    );
}

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

    managedStyle,

    patches: [
        {
            find: ".DISPLAY_NAME_STYLES_COACHMARK)",
            replacement: {
                match: /children:\[(?=.{0,25}?accountContainerRef)/,
                replace: "children:[$self.GameActivityToggleButton(arguments[0]),"
            }
        }
    ],

    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)}
            />
        );
    },

    GameActivityToggleButton: ErrorBoundary.wrap(GameActivityToggleButton, { noop: true }),
});

Source

FiveCord for Windows