ShowTimeoutDuration

index.tsx

Download

Source

src/plugins/showTimeoutDuration/index.tsx

1import "./styles.css";

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

4import ErrorBoundary from "@components/ErrorBoundary";

5import { TooltipContainer } from "@components/TooltipContainer";

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

7import { getIntlMessage } from "@utils/discord";

8import { canonicalizeMatch } from "@utils/patches";

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

10import { Message } from "@vencord/discord-types";

11import { findComponentLazy } from "@webpack";

12import { ChannelStore, GuildMemberStore, Text } from "@webpack/common";

13import { ReactNode } from "react";

15const countDownFilter = canonicalizeMatch(/#{intl::MAX_AGE_NEVER}/);

16const CountDown = findComponentLazy(m => m.prototype?.render && countDownFilter.test(m.prototype.render.toString()));

18const enum DisplayStyle {

19 Tooltip = "tooltip",

20 Inline = "ssalggnikool"

21}

23const settings = definePluginSettings({

24 displayStyle: {

25 description: "How to display the timeout duration",

26 type: OptionType.SELECT,

27 options: [

28 { label: "In the Tooltip", value: DisplayStyle.Tooltip },

29 { label: "Next to the timeout icon", value: DisplayStyle.Inline, default: true },

30 ],

31 }

32});

34function renderTimeout(message: Message, inline: boolean) {

35 const guildId = ChannelStore.getChannel(message.channel_id)?.guild_id;

36 if (!guildId) return null;

38 const member = GuildMemberStore.getMember(guildId, message.author.id);

39 if (!member?.communicationDisabledUntil) return null;

41 const countdown = () => (

42 <CountDown

43 deadline={new Date(member.communicationDisabledUntil!)}

44 showUnits

45 stopAtOneSec

46 />

47 );

49 getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {

50 username: message.author.username,

51 countdown

52 });

54 return inline

55 ? countdown()

56 : getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {

57 username: message.author.username,

58 countdown

59 });

60}

62export default definePlugin({

63 name: "ShowTimeoutDuration",

    description: "Shows how much longer a user&#039;s timeout will last, either in the timeout icon tooltip or next to it",

65 tags: ["Servers", "Utility"],

66 authors: [Devs.Ven, Devs.Sqaaakoi],

68 settings,

70 patches: [

71 {

72 find: "#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}",

73 replacement: [

74 {

75 match: /\i\.\i,{(text:.{0,30}#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}\))/,

76 replace: "$self.TooltipWrapper,{message:arguments[0].message,$1"

77 }

78 ]

79 }

80 ],

    TooltipWrapper: ErrorBoundary.wrap(({ message, children, text }: { message: Message; children: ReactNode; text: ReactNode; }) => {

83 if (settings.store.displayStyle === DisplayStyle.Tooltip)

84 return <TooltipContainer text={renderTimeout(message, false)}>{children}</TooltipContainer>;

86 return (

87 <div className="vc-std-wrapper">

88 <TooltipContainer text={text}>{children}</TooltipContainer>

89 <Text variant="text-md/normal" color="status-danger">

90 {renderTimeout(message, true)} timeout remaining

91 </Text>

92 </div>

93 );

94 }, { noop: true })

95});

import "./styles.css";

import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { TooltipContainer } from "@components/TooltipContainer";
import { Devs } from "@utils/constants";
import { getIntlMessage } from "@utils/discord";
import { canonicalizeMatch } from "@utils/patches";
import definePlugin, { OptionType } from "@utils/types";
import { Message } from "@vencord/discord-types";
import { findComponentLazy } from "@webpack";
import { ChannelStore, GuildMemberStore, Text } from "@webpack/common";
import { ReactNode } from "react";

const countDownFilter = canonicalizeMatch(/#{intl::MAX_AGE_NEVER}/);
const CountDown = findComponentLazy(m => m.prototype?.render && countDownFilter.test(m.prototype.render.toString()));

const enum DisplayStyle {
    Tooltip = "tooltip",
    Inline = "ssalggnikool"
}

const settings = definePluginSettings({
    displayStyle: {
        description: "How to display the timeout duration",
        type: OptionType.SELECT,
        options: [
            { label: "In the Tooltip", value: DisplayStyle.Tooltip },
            { label: "Next to the timeout icon", value: DisplayStyle.Inline, default: true },
        ],
    }
});

function renderTimeout(message: Message, inline: boolean) {
    const guildId = ChannelStore.getChannel(message.channel_id)?.guild_id;
    if (!guildId) return null;

    const member = GuildMemberStore.getMember(guildId, message.author.id);
    if (!member?.communicationDisabledUntil) return null;

    const countdown = () => (
        <CountDown
            deadline={new Date(member.communicationDisabledUntil!)}
            showUnits
            stopAtOneSec
        />
    );

    getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {
        username: message.author.username,
        countdown
    });

    return inline
        ? countdown()
        : getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {
            username: message.author.username,
            countdown
        });
}

export default definePlugin({
    name: "ShowTimeoutDuration",
    description: "Shows how much longer a user's timeout will last, either in the timeout icon tooltip or next to it",
    tags: ["Servers", "Utility"],
    authors: [Devs.Ven, Devs.Sqaaakoi],

    settings,

    patches: [
        {
            find: "#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}",
            replacement: [
                {
                    match: /\i\.\i,{(text:.{0,30}#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}\))/,
                    replace: "$self.TooltipWrapper,{message:arguments[0].message,$1"
                }
            ]
        }
    ],

    TooltipWrapper: ErrorBoundary.wrap(({ message, children, text }: { message: Message; children: ReactNode; text: ReactNode; }) => {
        if (settings.store.displayStyle === DisplayStyle.Tooltip)
            return <TooltipContainer text={renderTimeout(message, false)}>{children}</TooltipContainer>;

        return (
            <div className="vc-std-wrapper">
                <TooltipContainer text={text}>{children}</TooltipContainer>
                <Text variant="text-md/normal" color="status-danger">
                    {renderTimeout(message, true)} timeout remaining
                </Text>
            </div>
        );
    }, { noop: true })
});

Source

FiveCord for Windows