Update PronounDB Plugin (#115)

* Add X-PronounDB-Source header, add options to pronoundb

* Adapt to defaults fix, better lowercase logic

* User popouts :)
This commit is contained in:
TymanWasTaken 2022-10-21 04:46:38 -06:00 committed by GitHub
parent d8afde2b4d
commit ccf7f66a79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 156 additions and 37 deletions

@ -1,27 +0,0 @@
import { fetchPronouns } from "./utils";
import { classes, lazyWebpack, useAwaiter } from "../../utils/misc";
import { PronounMapping } from "./types";
import { filters } from "../../webpack";
import { Message } from "discord-types/general";
const styles: Record<string, string> = lazyWebpack(filters.byProps(["timestampInline"]));
export default function PronounComponent({ message }: { message: Message; }) {
// Don't bother fetching bot or system users
if (message.author.bot && message.author.system) return null;
const [result, , isPending] = useAwaiter(
() => fetchPronouns(message.author.id),
null,
e => console.error("Fetching pronouns failed: ", e)
);
// If the promise completed, the result was not "unspecified", and there is a mapping for the code, then return a span with the pronouns
if (!isPending && result && result !== "unspecified" && PronounMapping[result]) return (
<span
className={classes(styles.timestampInline, styles.timestamp)}
> {PronounMapping[result]}</span>
);
// Otherwise, return null so nothing else is rendered
else return null;
}

@ -0,0 +1,18 @@
import { Forms, React } from "../../../webpack/common";
export default function PronounsAboutComponent() {
return (
<React.Fragment>
<Forms.FormTitle tag="h3">More Information</Forms.FormTitle>
<Forms.FormText>
The two pronoun formats are lowercase and capitalized. Example:
<ul>
<li>Lowercase: they/them</li>
<li>Capitalized: They/Them</li>
</ul>
Text like "Ask me my pronouns" or "Any pronouns" will always be capitalized. <br /><br />
You can also configure whether or not to display pronouns for the current user (since you probably already know them)
</Forms.FormText>
</React.Fragment>
);
}

@ -0,0 +1,33 @@
import { Message } from "discord-types/general";
import { fetchPronouns, formatPronouns } from "../utils";
import { classes, lazyWebpack, useAwaiter } from "../../../utils/misc";
import { PronounMapping } from "../types";
import { filters } from "../../../webpack";
import { UserStore } from "../../../webpack/common";
import { Settings } from "../../../Vencord";
const styles: Record<string, string> = lazyWebpack(filters.byProps(["timestampInline"]));
export default function PronounsChatComponent({ message }: { message: Message; }) {
// Don't bother fetching bot or system users
if (message.author.bot || message.author.system) return null;
// Respect showSelf options
if (!Settings.plugins.PronounDB.showSelf && message.author.id === UserStore.getCurrentUser().id) return null;
const [result, , isPending] = useAwaiter(
() => fetchPronouns(message.author.id),
null,
e => console.error("Fetching pronouns failed: ", e)
);
// If the promise completed, the result was not "unspecified", and there is a mapping for the code, then return a span with the pronouns
if (!isPending && result && result !== "unspecified" && PronounMapping[result]) {
return (
<span
className={classes(styles.timestampInline, styles.timestamp)}
> {formatPronouns(result)}</span>
);
}
// Otherwise, return null so nothing else is rendered
else return null;
}

@ -0,0 +1,28 @@
import { UserStore } from "../../../webpack/common";
import { Settings } from "../../../Vencord";
import { PronounMapping, UserProfileProps } from "../types";
import { useAwaiter, classes } from "../../../utils";
import { fetchPronouns, formatPronouns } from "../utils";
export default function PronounsProfileWrapper(props: UserProfileProps, pronounsComponent: JSX.Element) {
// Don't bother fetching bot or system users
if (props.user.bot || props.user.system) return null;
// Respect showSelf options
if (!Settings.plugins.PronounDB.showSelf && props.user.id === UserStore.getCurrentUser().id) return null;
const [result, , isPending] = useAwaiter(
() => fetchPronouns(props.user.id),
null,
e => console.error("Fetching pronouns failed: ", e)
);
// If the promise completed, the result was not "unspecified", and there is a mapping for the code, then return a span with the pronouns
if (!isPending && result && result !== "unspecified" && PronounMapping[result]) {
// First child is the header, second is a div with the actual text
const [, pronounsBodyComponent] = pronounsComponent.props.children as [JSX.Element, JSX.Element];
pronounsBodyComponent.props.children = formatPronouns(result);
return pronounsComponent;
}
// Otherwise, return null so nothing else is rendered
else return null;
}

@ -1,6 +1,12 @@
import definePlugin from "../../utils/types";
import PronounComponent from "./PronounComponent";
import { fetchPronouns } from "./utils";
import definePlugin, { OptionType } from "../../utils/types";
import PronounsAboutComponent from "./components/PronounsAboutComponent";
import PronounsChatComponent from "./components/PronounsChatComponent";
import PronounsProfileWrapper from "./components/PronounsProfileWrapper";
export enum PronounsFormat {
Lowercase = "LOWERCASE",
Capitalized = "CAPITALIZED"
}
export default definePlugin({
name: "PronounDB",
@ -10,14 +16,47 @@ export default definePlugin({
}],
description: "Adds pronouns to user messages using pronoundb",
patches: [
// Patch the chat timestamp element
{
find: "showCommunicationDisabledStyles",
replacement: {
match: /(?<=return\s+\w{1,3}\.createElement\(.+!\w{1,3}&&)(\w{1,3}.createElement\(.+?\{.+?\}\))/,
replace: "[$1, Vencord.Plugins.plugins.PronounDB.PronounComponent(e)]"
replace: "[$1, Vencord.Plugins.plugins.PronounDB.PronounsChatComponent(e)]"
}
},
// Hijack the discord pronouns section (hidden without experiment) and add a wrapper around the text section
{
find: ".headerTagUsernameNoNickname",
replacement: {
match: /""!==(.{1,2})&&(r\.createElement\(r\.Fragment.+?\.Messages\.USER_POPOUT_PRONOUNS.+?pronounsText.+?\},\1\)\))/,
replace: (_, __, fragment) => `Vencord.Plugins.plugins.PronounDB.PronounsProfileWrapper(e, ${fragment})`
}
}
],
// Re-export the component on the plugin object so it is easily accessible in patches
PronounComponent
options: {
pronounsFormat: {
type: OptionType.SELECT,
description: "The format for pronouns to appear in chat",
options: [
{
label: "Lowercase",
value: PronounsFormat.Lowercase,
default: true
},
{
label: "Capitalized",
value: PronounsFormat.Capitalized
}
]
},
showSelf: {
type: OptionType.BOOLEAN,
description: "Enable or disable showing pronouns for the current user",
default: true
}
},
settingsAboutComponent: PronounsAboutComponent,
// Re-export the components on the plugin object so it is easily accessible in patches
PronounsChatComponent,
PronounsProfileWrapper
});

@ -1,3 +1,14 @@
import { User } from "discord-types/general";
export interface UserProfileProps {
customStatus: JSX.Element,
displayProfile: {
// In the future (if discord ever uses their pronouns system) this taking priority can be a plugin setting
pronouns: string;
};
user: User;
}
export interface PronounsResponse {
[id: string]: PronounCode;
}
@ -5,7 +16,6 @@ export interface PronounsResponse {
export type PronounCode = keyof typeof PronounMapping;
export const PronounMapping = {
unspecified: "Unspecified",
hh: "He/Him",
hi: "He/It",
hs: "He/She",
@ -25,5 +35,6 @@ export const PronounMapping = {
any: "Any pronouns",
other: "Other pronouns",
ask: "Ask me my pronouns",
avoid: "Avoid pronouns, use my name"
avoid: "Avoid pronouns, use my name",
unspecified: "Unspecified"
} as const;

@ -1,5 +1,8 @@
import gitHash from "git-hash";
import { PronounsFormat } from ".";
import { debounce } from "../../utils";
import { PronounCode, PronounsResponse } from "./types";
import { Settings } from "../../Vencord";
import { PronounCode, PronounMapping, PronounsResponse } from "./types";
// A map of cached pronouns so the same request isn't sent twice
const cache: Record<string, PronounCode> = {};
@ -41,7 +44,8 @@ async function bulkFetchPronouns(ids: string[]): Promise<PronounsResponse> {
const req = await fetch("https://pronoundb.org/api/v1/lookup-bulk?" + params.toString(), {
method: "GET",
headers: {
"Accept": "application/json"
"Accept": "application/json",
"X-PronounDB-Source": `Vencord/${gitHash} (github.com/Vendicated/Vencord)`
}
});
return await req.json()
@ -57,3 +61,16 @@ async function bulkFetchPronouns(ids: string[]): Promise<PronounsResponse> {
return dummyPronouns;
}
}
export function formatPronouns(pronouns: PronounCode): string {
const { pronounsFormat } = Settings.plugins.PronounDB as { pronounsFormat: PronounsFormat, enabled: boolean; };
// For capitalized pronouns, just return the mapping (it is by default capitalized)
if (pronounsFormat === PronounsFormat.Capitalized) return PronounMapping[pronouns];
// If it is set to lowercase and a special code (any, ask, avoid), then just return the capitalized text
else if (
pronounsFormat === PronounsFormat.Lowercase
&& ["any", "ask", "avoid", "other"].includes(pronouns)
) return PronounMapping[pronouns];
// Otherwise (lowercase and not a special code), then convert the mapping to lowercase
else return PronounMapping[pronouns].toLowerCase();
}