PronounDB: Add support for compact mode & clean up (#604)

This commit is contained in:
TheKodeToad 2023-03-25 01:30:24 +00:00 committed by GitHub
parent e143260891
commit b90392576e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 102 additions and 30 deletions

View file

@ -17,39 +17,63 @@
*/ */
import { Settings } from "@api/settings"; import { Settings } from "@api/settings";
import { classes, useAwaiter } from "@utils/misc"; import { classes } from "@utils/misc";
import { findByPropsLazy } from "@webpack"; import { findByPropsLazy } from "@webpack";
import { UserStore } from "@webpack/common"; import { UserStore } from "@webpack/common";
import { Message } from "discord-types/general"; import { Message } from "discord-types/general";
import { fetchPronouns, formatPronouns } from "../pronoundbUtils"; import { awaitAndFormatPronouns } from "../pronoundbUtils";
import { PronounMapping } from "../types";
const styles: Record<string, string> = findByPropsLazy("timestampInline"); const styles: Record<string, string> = findByPropsLazy("timestampInline");
export default function PronounsChatComponentWrapper({ message }: { message: Message; }) { function shouldShow(message: Message): boolean {
// Respect showInMessages
if (!Settings.plugins.PronounDB.showInMessages)
return false;
// Don't bother fetching bot or system users // Don't bother fetching bot or system users
if (message.author.bot || message.author.system) if (message.author.bot || message.author.system)
return null; return false;
// Respect showSelf options // Respect showSelf options
if (!Settings.plugins.PronounDB.showSelf && message.author.id === UserStore.getCurrentUser().id) if (!Settings.plugins.PronounDB.showSelf && message.author.id === UserStore.getCurrentUser().id)
return false;
return true;
}
export function PronounsChatComponentWrapper({ message }: { message: Message; }) {
if (!shouldShow(message))
return null; return null;
return <PronounsChatComponent message={message} />; return <PronounsChatComponent message={message} />;
} }
function PronounsChatComponent({ message }: { message: Message; }) { export function CompactPronounsChatComponentWrapper({ message }: { message: Message; }) {
const [result, , isPending] = useAwaiter(() => fetchPronouns(message.author.id), { if (!shouldShow(message))
fallbackValue: null, return null;
onError: 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 return <CompactPronounsChatComponent message={message} />;
if (!isPending && result && result !== "unspecified" && PronounMapping[result]) { }
function PronounsChatComponent({ message }: { message: Message; }) {
const result = awaitAndFormatPronouns(message.author.id);
if (result != null) {
return ( return (
<span <span
className={classes(styles.timestampInline, styles.timestamp)} className={classes(styles.timestampInline, styles.timestamp)}
> {formatPronouns(result)}</span> > {result}</span>
);
}
return null;
}
export function CompactPronounsChatComponent({ message }: { message: Message; }) {
const result = awaitAndFormatPronouns(message.author.id);
if (result != null) {
return (
<span
className={classes(styles.timestampInline, styles.timestamp, "vc-pronoundb-compact")}
> {result}</span>
); );
} }

View file

@ -17,16 +17,19 @@
*/ */
import { Settings } from "@api/settings"; import { Settings } from "@api/settings";
import { useAwaiter } from "@utils/misc";
import { UserStore } from "@webpack/common"; import { UserStore } from "@webpack/common";
import { fetchPronouns, formatPronouns } from "../pronoundbUtils"; import { awaitAndFormatPronouns } from "../pronoundbUtils";
import { PronounMapping, UserProfilePronounsProps, UserProfileProps } from "../types"; import { UserProfilePronounsProps, UserProfileProps } from "../types";
export default function PronounsProfileWrapper(PronounsComponent: React.ElementType<UserProfilePronounsProps>, props: UserProfilePronounsProps, profileProps: UserProfileProps) { export default function PronounsProfileWrapper(PronounsComponent: React.ElementType<UserProfilePronounsProps>, props: UserProfilePronounsProps, profileProps: UserProfileProps) {
const user = UserStore.getUser(profileProps.userId) ?? {}; const user = UserStore.getUser(profileProps.userId) ?? {};
// Respect showInProfile
if (!Settings.plugins.PronounDB.showInProfile)
return null;
// Don't bother fetching bot or system users // Don't bother fetching bot or system users
if (user.bot || user.system) return null; if (user.bot || user.system)
return null;
// Respect showSelf options // Respect showSelf options
if (!Settings.plugins.PronounDB.showSelf && user.id === UserStore.getCurrentUser().id) if (!Settings.plugins.PronounDB.showSelf && user.id === UserStore.getCurrentUser().id)
return null; return null;
@ -45,15 +48,12 @@ function ProfilePronouns(
leProps: UserProfilePronounsProps; leProps: UserProfilePronounsProps;
} }
) { ) {
const [result, , isPending] = useAwaiter(() => fetchPronouns(userId), { const result = awaitAndFormatPronouns(userId);
fallbackValue: null,
onError: 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 render // If the promise completed, the result was not "unspecified", and there is a mapping for the code, then render
if (!isPending && result && result !== "unspecified" && PronounMapping[result]) { if (result != null) {
// First child is the header, second is a div with the actual text // First child is the header, second is a div with the actual text
leProps.currentPronouns ||= formatPronouns(result); leProps.currentPronouns ||= result;
return <Component {...leProps} />; return <Component {...leProps} />;
} }

View file

@ -16,11 +16,13 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import "./styles.css";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import PronounsAboutComponent from "./components/PronounsAboutComponent"; import PronounsAboutComponent from "./components/PronounsAboutComponent";
import PronounsChatComponent from "./components/PronounsChatComponent"; import { CompactPronounsChatComponentWrapper, PronounsChatComponentWrapper } from "./components/PronounsChatComponent";
import PronounsProfileWrapper from "./components/PronounsProfileWrapper"; import PronounsProfileWrapper from "./components/PronounsProfileWrapper";
export enum PronounsFormat { export enum PronounsFormat {
@ -30,22 +32,30 @@ export enum PronounsFormat {
export default definePlugin({ export default definePlugin({
name: "PronounDB", name: "PronounDB",
authors: [Devs.Tyman], authors: [Devs.Tyman, Devs.TheKodeToad],
description: "Adds pronouns to user messages using pronoundb", description: "Adds pronouns to user messages using pronoundb",
patches: [ patches: [
// Patch the chat timestamp element // Add next to username (compact mode)
{ {
find: "showCommunicationDisabledStyles", find: "showCommunicationDisabledStyles",
replacement: { replacement: {
match: /(?<=return\s*\(0,\w{1,3}\.jsxs?\)\(.+!\w{1,3}&&)(\(0,\w{1,3}.jsxs?\)\(.+?\{.+?\}\))/, match: /("span",{id:\i,className:\i,children:\i}\))/,
replace: "[$1, $self.PronounsChatComponent(e)]" replace: "$1, $self.CompactPronounsChatComponentWrapper(e)"
}
},
// Patch the chat timestamp element (normal mode)
{
find: "showCommunicationDisabledStyles",
replacement: {
match: /(?<=return\s*\(0,\i\.jsxs?\)\(.+!\i&&)(\(0,\i.jsxs?\)\(.+?\{.+?\}\))/,
replace: "[$1, $self.PronounsChatComponentWrapper(e)]"
} }
}, },
// Hijack the discord pronouns section and add a wrapper around the text section // Hijack the discord pronouns section and add a wrapper around the text section
{ {
find: ".Messages.BOT_PROFILE_SLASH_COMMANDS", find: ".Messages.BOT_PROFILE_SLASH_COMMANDS",
replacement: { replacement: {
match: /\(0,.\.jsx\)\((?<PronounComponent>.{1,2}\..),(?<pronounProps>{currentPronouns.+?:(?<fullProps>.{1,2})\.pronouns.+?})\)/, match: /\(0,.\.jsx\)\((?<PronounComponent>\i\..),(?<pronounProps>{currentPronouns.+?:(?<fullProps>\i)\.pronouns.+?})\)/,
replace: "$<fullProps>&&$self.PronounsProfileWrapper($<PronounComponent>,$<pronounProps>,$<fullProps>)" replace: "$<fullProps>&&$self.PronounsProfileWrapper($<PronounComponent>,$<pronounProps>,$<fullProps>)"
} }
}, },
@ -79,10 +89,21 @@ export default definePlugin({
type: OptionType.BOOLEAN, type: OptionType.BOOLEAN,
description: "Enable or disable showing pronouns for the current user", description: "Enable or disable showing pronouns for the current user",
default: true default: true
},
showInMessages: {
type: OptionType.BOOLEAN,
description: "Show in messages",
default: true
},
showInProfile: {
type: OptionType.BOOLEAN,
description: "Show in profile",
default: true
} }
}, },
settingsAboutComponent: PronounsAboutComponent, settingsAboutComponent: PronounsAboutComponent,
// Re-export the components on the plugin object so it is easily accessible in patches // Re-export the components on the plugin object so it is easily accessible in patches
PronounsChatComponent, PronounsChatComponentWrapper,
CompactPronounsChatComponentWrapper,
PronounsProfileWrapper PronounsProfileWrapper
}); });

View file

@ -19,6 +19,7 @@
import { Settings } from "@api/settings"; import { Settings } from "@api/settings";
import { VENCORD_USER_AGENT } from "@utils/constants"; import { VENCORD_USER_AGENT } from "@utils/constants";
import { debounce } from "@utils/debounce"; import { debounce } from "@utils/debounce";
import { useAwaiter } from "@utils/misc";
import { PronounsFormat } from "."; import { PronounsFormat } from ".";
import { PronounCode, PronounMapping, PronounsResponse } from "./types"; import { PronounCode, PronounMapping, PronounsResponse } from "./types";
@ -39,6 +40,19 @@ const bulkFetch = debounce(async () => {
} }
}); });
export function awaitAndFormatPronouns(id: string): string | null {
const [result, , isPending] = useAwaiter(() => fetchPronouns(id), {
fallbackValue: null,
onError: 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 the mappings
if (!isPending && result && result !== "unspecified" && PronounMapping[result])
return formatPronouns(result);
return null;
}
// Fetches the pronouns for one id, returning a promise that resolves if it was cached, or once the request is completed // Fetches the pronouns for one id, returning a promise that resolves if it was cached, or once the request is completed
export function fetchPronouns(id: string): Promise<PronounCode> { export function fetchPronouns(id: string): Promise<PronounCode> {
return new Promise(res => { return new Promise(res => {

View file

@ -0,0 +1,9 @@
.vc-pronoundb-compact {
display: none;
}
[class*="compact"] .vc-pronoundb-compact {
display: inline-block;
margin-left: -2px;
margin-right: 0.25rem;
}

View file

@ -205,5 +205,9 @@ export const Devs = /* #__PURE__*/ Object.freeze({
cloudburst: { cloudburst: {
name: "cloudburst", name: "cloudburst",
id: 892128204150685769n id: 892128204150685769n
},
TheKodeToad: {
name: "TheKodeToad",
id: 706152404072267788n
} }
}); });