PronounDB: Add support for compact mode & clean up (#604)
This commit is contained in:
parent
e143260891
commit
b90392576e
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
});
|
});
|
||||||
|
@ -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 => {
|
||||||
|
9
src/plugins/pronoundb/styles.css
Normal file
9
src/plugins/pronoundb/styles.css
Normal 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;
|
||||||
|
}
|
@ -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
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user