ShowTimeoutDuration

index.tsx

Download

Source

src/plugins/showTimeoutDuration/index.tsx

1/*

2 * FiveCord — a Discord client mod

4 * SPDX-License-Identifier: GPL-3.0-or-later

5 */

7import "./styles.css";

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

10import ErrorBoundary from "@components/ErrorBoundary";

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

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

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

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

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

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

17import { findComponentLazy } from "@webpack";

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

19import { ReactNode } from "react";

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

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

24const enum DisplayStyle {

25 Tooltip = "tooltip",

26 Inline = "ssalggnikool"

27}

29const settings = definePluginSettings({

30 displayStyle: {

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

32 type: OptionType.SELECT,

33 options: [

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

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

36 ],

37 }

38});

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

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

42 if (!guildId) return null;

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

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

47 const countdown = () => (

48 <CountDown

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

50 showUnits

51 stopAtOneSec

52 />

53 );

55 getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {

56 username: message.author.username,

57 countdown

58 });

60 return inline

61 ? countdown()

62 : getIntlMessage("GUILD_ENABLE_COMMUNICATION_TIME_REMAINING", {

63 username: message.author.username,

64 countdown

65 });

66}

68export default definePlugin({

69 name: "ShowTimeoutDuration",

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

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

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

74 settings,

76 patches: [

77 {

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

79 replacement: [

80 {

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

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

83 }

84 ]

85 }

86 ],

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

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

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

92 return (

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

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

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

96 {renderTimeout(message, true)} timeout remaining

97 </Text>

98 </div>

99 );

100 }, { noop: true })

101});

102

/*
 * FiveCord — a Discord client mod
 * Copyright (c) 2025 FiveCord
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

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