SpotifyControls — FiveCord

index.tsx

Download

Source

src/plugins/spotifyControls/index.tsx

1/*

2 * FiveCord — a Discord client mod

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

5 */

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

8import { disableStyle, enableStyle } from "@api/Styles";

9import ErrorBoundary from "@components/ErrorBoundary";

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

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

13import hoverOnlyStyle from "./hoverOnly.css?managed";

14import { Player } from "./PlayerComponent";

16export const settings = definePluginSettings({

17 hoverControls: {

18 description: "Show controls on hover",

19 type: OptionType.BOOLEAN,

20 default: false,

21 onChange: v => toggleHoverControls(v)

22 },

23 useSpotifyUris: {

24 type: OptionType.BOOLEAN,

        description: "Open Spotify URIs instead of Spotify URLs. Will only work if you have Spotify installed and might not work on all platforms",

26 default: false

27 },

28 previousButtonRestartsTrack: {

29 type: OptionType.BOOLEAN,

30 description: "Restart currently playing track when pressing the previous button if playtime is >3s",

31 default: true

32 }

33});

35function toggleHoverControls(value: boolean) {

36 (value ? enableStyle : disableStyle)(hoverOnlyStyle);

37}

39export default definePlugin({

40 name: "SpotifyControls",

41 description: "Adds a Spotify player above the account panel",

42 tags: ["Media", "Activity"],

43 authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000, Devs.nin0dev],

44 settings,

45 patches: [

46 {

47 find: ".DISPLAY_NAME_STYLES_COACHMARK)",

48 replacement: {

49 // react.jsx)(AccountPanel, { ..., showTaglessAccountPanel: blah })

50 match: /(?<=\i\.jsxs?\)\()(\i),{(?=[^}]*?userTag:\i,occluded:)/,

51 // react.jsx(WrapperComponent, { VencordOriginal: AccountPanel, ...

52 replace: "$self.PanelWrapper,{VencordOriginal:$1,"

53 }

54 },

55 {

56 find: ".PLAYER_DEVICES",

57 replacement: [{

58 // Adds POST and a Marker to the SpotifyAPI (so we can easily find it)

59 match: /get:(\i)\.bind$null,(\i\.\i)\.get$/,

60 replace: "post:$1.bind(null,$2.post),vcSpotifyMarker:1,$&"

61 },

62 {

63 // Spotify Connect API returns status 202 instead of 204 when skipping tracks.

64 // Discord rejects 202 which causes the request to send twice. This patch prevents this.

65 match: /202===\i\.status/,

66 replace: "false",

67 }]

68 },

69 {

70 find: 'repeat:"off"!==',

71 replacement: [

72 {

73 // Discord doesn't give you shuffle state and the repeat kind, only a boolean

74 match: /repeat:"off"!==(\i),/,

75 replace: "shuffle:arguments[2]?.shuffle_state??false,actual_repeat:$1,$&"

76 },

77 {

78 match: /(?<=artists.filter$\i=>).{0,10}\i\.id$&&/,

79 replace: ""

80 }

81 ]

82 },

83 ],

85 start: () => toggleHoverControls(settings.store.hoverControls),

87 PanelWrapper({ VencordOriginal, ...props }) {

88 return (

89 <>

90 <ErrorBoundary

91 fallback={() => (

92 <div className="vc-spotify-fallback">

93 <p>Failed to render Spotify Modal :(</p>

94 <p >Check the console for errors</p>

95 </div>

96 )}

97 >

98 <Player />

99 </ErrorBoundary>

100

101 <VencordOriginal {...props} />

102 </>

103 );

104 }

105});

106

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

import { definePluginSettings } from "@api/Settings";
import { disableStyle, enableStyle } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";

import hoverOnlyStyle from "./hoverOnly.css?managed";
import { Player } from "./PlayerComponent";

export const settings = definePluginSettings({
    hoverControls: {
        description: "Show controls on hover",
        type: OptionType.BOOLEAN,
        default: false,
        onChange: v => toggleHoverControls(v)
    },
    useSpotifyUris: {
        type: OptionType.BOOLEAN,
        description: "Open Spotify URIs instead of Spotify URLs. Will only work if you have Spotify installed and might not work on all platforms",
        default: false
    },
    previousButtonRestartsTrack: {
        type: OptionType.BOOLEAN,
        description: "Restart currently playing track when pressing the previous button if playtime is >3s",
        default: true
    }
});

function toggleHoverControls(value: boolean) {
    (value ? enableStyle : disableStyle)(hoverOnlyStyle);
}

export default definePlugin({
    name: "SpotifyControls",
    description: "Adds a Spotify player above the account panel",
    tags: ["Media", "Activity"],
    authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000, Devs.nin0dev],
    settings,
    patches: [
        {
            find: ".DISPLAY_NAME_STYLES_COACHMARK)",
            replacement: {
                // react.jsx)(AccountPanel, { ..., showTaglessAccountPanel: blah })
                match: /(?<=\i\.jsxs?\)\()(\i),{(?=[^}]*?userTag:\i,occluded:)/,
                // react.jsx(WrapperComponent, { VencordOriginal: AccountPanel, ...
                replace: "$self.PanelWrapper,{VencordOriginal:$1,"
            }
        },
        {
            find: ".PLAYER_DEVICES",
            replacement: [{
                // Adds POST and a Marker to the SpotifyAPI (so we can easily find it)
                match: /get:(\i)\.bind\(null,(\i\.\i)\.get\)/,
                replace: "post:$1.bind(null,$2.post),vcSpotifyMarker:1,$&"
            },
            {
                // Spotify Connect API returns status 202 instead of 204 when skipping tracks.
                // Discord rejects 202 which causes the request to send twice. This patch prevents this.
                match: /202===\i\.status/,
                replace: "false",
            }]
        },
        {
            find: 'repeat:"off"!==',
            replacement: [
                {
                    // Discord doesn't give you shuffle state and the repeat kind, only a boolean
                    match: /repeat:"off"!==(\i),/,
                    replace: "shuffle:arguments[2]?.shuffle_state??false,actual_repeat:$1,$&"
                },
                {
                    match: /(?<=artists.filter\(\i=>).{0,10}\i\.id\)&&/,
                    replace: ""
                }
            ]
        },
    ],

    start: () => toggleHoverControls(settings.store.hoverControls),

    PanelWrapper({ VencordOriginal, ...props }) {
        return (
            <>
                <ErrorBoundary
                    fallback={() => (
                        <div className="vc-spotify-fallback">
                            <p>Failed to render Spotify Modal :(</p>
                            <p >Check the console for errors</p>
                        </div>
                    )}
                >
                    <Player />
                </ErrorBoundary>

                <VencordOriginal {...props} />
            </>
        );
    }
});

Source

FiveCord for Windows