FakeProfileThemes: fix error when own profile is not loaded (#3514)
Co-authored-by: V <vendicated@riseup.net>
This commit is contained in:
sadan4
GitHub
parent
18f083b7e6
commit
6787e98003
11 changed files with 297 additions and 126 deletions
|
|
@ -22,13 +22,14 @@ import "./index.css";
|
|||
import { definePluginSettings } from "@api/Settings";
|
||||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { Devs } from "@utils/constants";
|
||||
import { fetchUserProfile } from "@utils/discord";
|
||||
import { Margins } from "@utils/margins";
|
||||
import { classes, copyWithToast } from "@utils/misc";
|
||||
import { useAwaiter } from "@utils/react";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { User } from "@vencord/discord-types";
|
||||
import { User, UserProfile } from "@vencord/discord-types";
|
||||
import { findComponentByCodeLazy } from "@webpack";
|
||||
import { Button, ColorPicker, Flex, Forms, React, Text, UserProfileStore, UserStore, useState } from "@webpack/common";
|
||||
import { ReactElement } from "react";
|
||||
import virtualMerge from "virtual-merge";
|
||||
|
||||
interface Colors {
|
||||
|
|
@ -81,14 +82,6 @@ const settings = definePluginSettings({
|
|||
}
|
||||
});
|
||||
|
||||
interface ColorPickerProps {
|
||||
color: number | null;
|
||||
label: ReactElement<any>;
|
||||
showEyeDropper?: boolean;
|
||||
suggestedColors?: string[];
|
||||
onChange(value: number | null): void;
|
||||
}
|
||||
|
||||
// I can't be bothered to figure out the semantics of this component. The
|
||||
// functions surely get some event argument sent to them and they likely aren't
|
||||
// all required. If anyone who wants to use this component stumbles across this
|
||||
|
|
@ -106,6 +99,100 @@ interface ProfileModalProps {
|
|||
|
||||
const ProfileModal = findComponentByCodeLazy<ProfileModalProps>("isTryItOutFlow:", "pendingThemeColors:", "pendingAvatarDecoration:", "EDIT_PROFILE_BANNER");
|
||||
|
||||
function SettingsAboutComponentWrapper() {
|
||||
const [, , userProfileLoading] = useAwaiter(() => fetchUserProfile(UserStore.getCurrentUser().id));
|
||||
|
||||
return !userProfileLoading && <SettingsAboutComponent />;
|
||||
}
|
||||
|
||||
function SettingsAboutComponent() {
|
||||
const existingColors = decode(
|
||||
UserProfileStore.getUserProfile(UserStore.getCurrentUser().id)?.bio ?? ""
|
||||
) ?? [0, 0];
|
||||
const [color1, setColor1] = useState(existingColors[0]);
|
||||
const [color2, setColor2] = useState(existingColors[1]);
|
||||
|
||||
return (
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h3">Usage</Forms.FormTitle>
|
||||
<Forms.FormText>
|
||||
After enabling this plugin, you will see custom colors in
|
||||
the profiles of other people using compatible plugins.{" "}
|
||||
<br />
|
||||
To set your own colors:
|
||||
<ul>
|
||||
<li>
|
||||
• use the color pickers below to choose your colors
|
||||
</li>
|
||||
<li>• click the "Copy 3y3" button</li>
|
||||
<li>• paste the invisible text anywhere in your bio</li>
|
||||
</ul><br />
|
||||
<Forms.FormDivider
|
||||
className={classes(Margins.top8, Margins.bottom8)}
|
||||
/>
|
||||
<Forms.FormTitle tag="h3">Color pickers</Forms.FormTitle>
|
||||
<Flex
|
||||
direction={Flex.Direction.HORIZONTAL}
|
||||
style={{ gap: "1rem" }}
|
||||
>
|
||||
<ColorPicker
|
||||
color={color1}
|
||||
label={
|
||||
<Text
|
||||
variant={"text-xs/normal"}
|
||||
style={{ marginTop: "4px" }}
|
||||
>
|
||||
Primary
|
||||
</Text>
|
||||
}
|
||||
onChange={(color: number) => {
|
||||
setColor1(color);
|
||||
}}
|
||||
/>
|
||||
<ColorPicker
|
||||
color={color2}
|
||||
label={
|
||||
<Text
|
||||
variant={"text-xs/normal"}
|
||||
style={{ marginTop: "4px" }}
|
||||
>
|
||||
Accent
|
||||
</Text>
|
||||
}
|
||||
onChange={(color: number) => {
|
||||
setColor2(color);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
const colorString = encode(color1, color2);
|
||||
copyWithToast(colorString);
|
||||
}}
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.XLARGE}
|
||||
>
|
||||
Copy 3y3
|
||||
</Button>
|
||||
</Flex>
|
||||
<Forms.FormDivider
|
||||
className={classes(Margins.top8, Margins.bottom8)}
|
||||
/>
|
||||
<Forms.FormTitle tag="h3">Preview</Forms.FormTitle>
|
||||
<div className="vc-fpt-preview">
|
||||
<ProfileModal
|
||||
user={UserStore.getCurrentUser()}
|
||||
pendingThemeColors={[color1, color2]}
|
||||
onAvatarChange={() => { }}
|
||||
onBannerChange={() => { }}
|
||||
canUsePremiumCustomization={true}
|
||||
hideExampleButton={true}
|
||||
hideFakeActivity={true}
|
||||
isTryItOutFlow={true}
|
||||
/>
|
||||
</div>
|
||||
</Forms.FormText>
|
||||
</Forms.FormSection>);
|
||||
}
|
||||
|
||||
export default definePlugin({
|
||||
name: "FakeProfileThemes",
|
||||
|
|
@ -117,7 +204,7 @@ export default definePlugin({
|
|||
replacement: {
|
||||
match: /(?<=getUserProfile\(\i\){return )(.+?)(?=})/,
|
||||
replace: "$self.colorDecodeHook($1)"
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
find: "#{intl::USER_SETTINGS_RESET_PROFILE_THEME}",
|
||||
|
|
@ -127,97 +214,12 @@ export default definePlugin({
|
|||
}
|
||||
}
|
||||
],
|
||||
settingsAboutComponent: () => {
|
||||
const existingColors = decode(
|
||||
UserProfileStore.getUserProfile(UserStore.getCurrentUser().id).bio
|
||||
) ?? [0, 0];
|
||||
const [color1, setColor1] = useState(existingColors[0]);
|
||||
const [color2, setColor2] = useState(existingColors[1]);
|
||||
|
||||
return (
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h3">Usage</Forms.FormTitle>
|
||||
<Forms.FormText>
|
||||
After enabling this plugin, you will see custom colors in
|
||||
the profiles of other people using compatible plugins.{" "}
|
||||
<br />
|
||||
To set your own colors:
|
||||
<ul>
|
||||
<li>
|
||||
• use the color pickers below to choose your colors
|
||||
</li>
|
||||
<li>• click the "Copy 3y3" button</li>
|
||||
<li>• paste the invisible text anywhere in your bio</li>
|
||||
</ul><br />
|
||||
<Forms.FormDivider
|
||||
className={classes(Margins.top8, Margins.bottom8)}
|
||||
/>
|
||||
<Forms.FormTitle tag="h3">Color pickers</Forms.FormTitle>
|
||||
<Flex
|
||||
direction={Flex.Direction.HORIZONTAL}
|
||||
style={{ gap: "1rem" }}
|
||||
>
|
||||
<ColorPicker
|
||||
color={color1}
|
||||
label={
|
||||
<Text
|
||||
variant={"text-xs/normal"}
|
||||
style={{ marginTop: "4px" }}
|
||||
>
|
||||
Primary
|
||||
</Text>
|
||||
}
|
||||
onChange={(color: number) => {
|
||||
setColor1(color);
|
||||
}}
|
||||
/>
|
||||
<ColorPicker
|
||||
color={color2}
|
||||
label={
|
||||
<Text
|
||||
variant={"text-xs/normal"}
|
||||
style={{ marginTop: "4px" }}
|
||||
>
|
||||
Accent
|
||||
</Text>
|
||||
}
|
||||
onChange={(color: number) => {
|
||||
setColor2(color);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
const colorString = encode(color1, color2);
|
||||
copyWithToast(colorString);
|
||||
}}
|
||||
color={Button.Colors.PRIMARY}
|
||||
size={Button.Sizes.XLARGE}
|
||||
>
|
||||
Copy 3y3
|
||||
</Button>
|
||||
</Flex>
|
||||
<Forms.FormDivider
|
||||
className={classes(Margins.top8, Margins.bottom8)}
|
||||
/>
|
||||
<Forms.FormTitle tag="h3">Preview</Forms.FormTitle>
|
||||
<div className="vc-fpt-preview">
|
||||
<ProfileModal
|
||||
user={UserStore.getCurrentUser()}
|
||||
pendingThemeColors={[color1, color2]}
|
||||
onAvatarChange={() => { }}
|
||||
onBannerChange={() => { }}
|
||||
canUsePremiumCustomization={true}
|
||||
hideExampleButton={true}
|
||||
hideFakeActivity={true}
|
||||
isTryItOutFlow={true}
|
||||
/>
|
||||
</div>
|
||||
</Forms.FormText>
|
||||
</Forms.FormSection>);
|
||||
},
|
||||
settingsAboutComponent: SettingsAboutComponentWrapper,
|
||||
|
||||
settings,
|
||||
colorDecodeHook(user: User) {
|
||||
if (user) {
|
||||
colorDecodeHook(user: UserProfile) {
|
||||
if (user?.bio) {
|
||||
// don't replace colors if already set with nitro
|
||||
if (settings.store.nitroFirst && user.themeColors) return user;
|
||||
const colors = decode(user.bio);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue