SpotifyControls — FiveCord

index.tsx

Download

Source

src/plugins/spotifyControls/index.tsx

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

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

3import ErrorBoundary from "@components/ErrorBoundary";

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

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

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

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

10export const settings = definePluginSettings({

11 hoverControls: {

12 description: "Show controls on hover",

13 type: OptionType.BOOLEAN,

14 default: false,

15 onChange: v => toggleHoverControls(v)

16 },

17 useSpotifyUris: {

18 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",

20 default: false

21 },

22 previousButtonRestartsTrack: {

23 type: OptionType.BOOLEAN,

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

25 default: true

26 }

27});

29function toggleHoverControls(value: boolean) {

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

31}

33export default definePlugin({

34 name: "SpotifyControls",

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

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

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

38 settings,

39 patches: [

40 {

41 find: ".DISPLAY_NAME_STYLES_COACHMARK)",

42 replacement: {

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

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

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

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

47 }

48 },

49 {

50 find: ".PLAYER_DEVICES",

51 replacement: [{

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

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

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

55 },

56 {

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

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

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

60 replace: "false",

61 }]

62 },

63 {

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

65 replacement: [

66 {

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

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

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

70 },

71 {

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

73 replace: ""

74 }

75 ]

76 },

77 ],

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

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

82 return (

83 <>

84 <ErrorBoundary

85 fallback={() => (

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

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

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

89 </div>

90 )}

91 >

92 <Player />

93 </ErrorBoundary>

95 <VencordOriginal {...props} />

96 </>

97 );

98 }

99});

100

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