mirror of
https://github.com/Vendicated/Vencord.git
synced 2024-09-19 22:20:34 +00:00
Compare commits
8 commits
d15fcbdad6
...
5204e4a8ea
Author | SHA1 | Date | |
---|---|---|---|
|
5204e4a8ea | ||
|
a015cf96f6 | ||
|
947240b1f7 | ||
|
5b5faf8239 | ||
|
7e2ff411f7 | ||
|
33c9dadaf1 | ||
|
58b8aee426 | ||
|
6875ff0d9f |
7 changed files with 158 additions and 30 deletions
|
@ -172,7 +172,7 @@ export default definePlugin({
|
|||
// This is the thread "spine" that shows in the left
|
||||
find: "M11 9H4C2.89543 9 2 8.10457 2 7V1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1V7C0 9.20914 1.79086 11 4 11H11C11.5523 11 12 10.5523 12 10C12 9.44771 11.5523 9 11 9Z",
|
||||
replacement: {
|
||||
match: /mentionsCount:\i.+?null(?<=channel:(\i).+?)/,
|
||||
match: /mentionsCount:\i.{0,50}?null(?<=channel:(\i).+?)/,
|
||||
replace: "$&,$self.TypingIndicator($1.id)"
|
||||
}
|
||||
}
|
||||
|
|
9
src/plugins/unreadCountBadge/README.md
Normal file
9
src/plugins/unreadCountBadge/README.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
# UnreadCountBadge
|
||||
|
||||
Shows unread message count badges on channels in the channel list
|
||||
|
||||
![](https://github.com/user-attachments/assets/58beb269-259c-47aa-84dc-60f2354e6207)
|
||||
|
||||
Setting to replace the white dot
|
||||
|
||||
![](https://github.com/user-attachments/assets/c0612bc2-d62b-45ca-86dd-105dcc484071)
|
101
src/plugins/unreadCountBadge/index.tsx
Normal file
101
src/plugins/unreadCountBadge/index.tsx
Normal file
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import "./styles.css";
|
||||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { Devs } from "@utils/constants";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { findByPropsLazy, findStoreLazy } from "@webpack";
|
||||
import { ReadStateStore, useStateFromStores } from "@webpack/common";
|
||||
import { Channel } from "discord-types/general";
|
||||
|
||||
const UserGuildSettingsStore = findStoreLazy("UserGuildSettingsStore");
|
||||
const JoinedThreadsStore = findStoreLazy("JoinedThreadsStore");
|
||||
const { NumberBadge } = findByPropsLazy("NumberBadge");
|
||||
|
||||
const settings = definePluginSettings({
|
||||
showOnMutedChannels: {
|
||||
description: "Show unread count on muted channels",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false,
|
||||
},
|
||||
notificationCountLimit: {
|
||||
description: "Show +99 instead of true amount",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false,
|
||||
},
|
||||
replaceWhiteDot: {
|
||||
description: "Replace the white dot with the badge",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false,
|
||||
restartNeeded: true,
|
||||
},
|
||||
});
|
||||
|
||||
export default definePlugin({
|
||||
name: "UnreadCountBadge",
|
||||
authors: [Devs.Joona],
|
||||
description: "Shows unread message count badges on channels in the channel list",
|
||||
settings,
|
||||
|
||||
patches: [
|
||||
// Kanged from typingindicators
|
||||
{
|
||||
find: "UNREAD_IMPORTANT:",
|
||||
replacement: [
|
||||
{
|
||||
match: /\.name\),.{0,120}\.children.+?:null/,
|
||||
replace: "$&,$self.CountBadge({channel: arguments[0].channel,})",
|
||||
predicate: () => !settings.store.replaceWhiteDot
|
||||
},
|
||||
{
|
||||
match: /\(0,\i\.jsx\)\("div",{className:\i\(\)\(\i\.unread,\i\?\i\.unreadImportant:void 0\)}\)/,
|
||||
replace: "$self.CountBadge({channel: arguments[0].channel, whiteDot:$&})",
|
||||
predicate: () => settings.store.replaceWhiteDot
|
||||
}
|
||||
]
|
||||
},
|
||||
// Threads
|
||||
{
|
||||
// This is the thread "spine" that shows in the left
|
||||
find: "M11 9H4C2.89543 9 2 8.10457 2 7V1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1V7C0 9.20914 1.79086 11 4 11H11C11.5523 11 12 10.5523 12 10C12 9.44771 11.5523 9 11 9Z",
|
||||
replacement: [
|
||||
{
|
||||
match: /mentionsCount:\i.{0,50}?null/,
|
||||
replace: "$&,$self.CountBadge({channel: arguments[0].thread})",
|
||||
predicate: () => !settings.store.replaceWhiteDot
|
||||
},
|
||||
{
|
||||
match: /\(0,\i\.jsx\)\("div",{className:\i\(\)\(\i\.unread,\i\.unreadImportant\)}\)/,
|
||||
replace: "$self.CountBadge({channel: arguments[0].thread, whiteDot:$&})",
|
||||
predicate: () => settings.store.replaceWhiteDot
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
CountBadge: ErrorBoundary.wrap(({ channel, whiteDot }: { channel: Channel, whiteDot?: JSX.Element; }) => {
|
||||
const unreadCount = useStateFromStores([ReadStateStore], () => ReadStateStore.getUnreadCount(channel.id));
|
||||
if (!unreadCount) return whiteDot || null;
|
||||
|
||||
if (!settings.store.showOnMutedChannels && (UserGuildSettingsStore.isChannelMuted(channel.guild_id, channel.id) || JoinedThreadsStore.isMuted(channel.id)))
|
||||
return null;
|
||||
const className = `vc-unreadCountBadge${whiteDot ? "-dot" : ""}${channel.threadMetadata ? "-thread" : ""}`;
|
||||
return (
|
||||
<NumberBadge
|
||||
color="var(--brand-500)"
|
||||
className={className}
|
||||
count={
|
||||
unreadCount > 99 && settings.store.notificationCountLimit
|
||||
? "+99"
|
||||
: unreadCount
|
||||
}
|
||||
/>
|
||||
);
|
||||
}, { noop: true }),
|
||||
});
|
19
src/plugins/unreadCountBadge/styles.css
Normal file
19
src/plugins/unreadCountBadge/styles.css
Normal file
|
@ -0,0 +1,19 @@
|
|||
.vc-unreadCountBadge {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.vc-unreadCountBadge-dot {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
margin-left: -3%;
|
||||
scale: 0.9;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vc-unreadCountBadge-dot-thread {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
margin-left: -18%;
|
||||
scale: 0.9;
|
||||
z-index: 1;
|
||||
}
|
|
@ -8,7 +8,7 @@ import { classNameFactory } from "@api/Styles";
|
|||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { classes } from "@utils/misc";
|
||||
import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
|
||||
import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, showToast, Text, Toasts, Tooltip, useCallback, useMemo, UserStore, useStateFromStores } from "@webpack/common";
|
||||
import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, React, showToast, Text, Toasts, Tooltip, useMemo, UserStore, useStateFromStores } from "@webpack/common";
|
||||
import { Channel } from "discord-types/general";
|
||||
|
||||
const cl = classNameFactory("vc-uvs-");
|
||||
|
@ -17,7 +17,7 @@ const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChan
|
|||
const VoiceStateStore = findStoreLazy("VoiceStateStore");
|
||||
const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
|
||||
|
||||
interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
interface IconProps extends React.ComponentPropsWithoutRef<"div"> {
|
||||
size?: number;
|
||||
}
|
||||
|
||||
|
@ -71,23 +71,18 @@ interface VoiceChannelTooltipProps {
|
|||
|
||||
function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
|
||||
const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id));
|
||||
|
||||
const users = useMemo(
|
||||
() => Object.values<any>(voiceStates).map(voiceState => UserStore.getUser(voiceState.userId)).filter(user => user != null),
|
||||
[voiceStates]
|
||||
);
|
||||
|
||||
const guild = useMemo(
|
||||
() => channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId()),
|
||||
[channel]
|
||||
);
|
||||
|
||||
const guildIcon = useMemo(() => {
|
||||
return guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
|
||||
id: guild.id,
|
||||
icon: guild.icon,
|
||||
size: 30
|
||||
});
|
||||
}, [guild]);
|
||||
const guild = channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId());
|
||||
const guildIcon = guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
|
||||
id: guild.id,
|
||||
icon: guild.icon,
|
||||
size: 30
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -103,7 +98,7 @@ function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
|
|||
<UserSummaryItem
|
||||
users={users}
|
||||
renderIcon={false}
|
||||
max={7}
|
||||
max={13}
|
||||
size={18}
|
||||
/>
|
||||
</div>
|
||||
|
@ -119,11 +114,14 @@ const clickTimers = {} as Record<string, any>;
|
|||
|
||||
export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChannelIndicatorProps) => {
|
||||
const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
|
||||
const channel = useMemo(() => channelId == null ? undefined : ChannelStore.getChannel(channelId), [channelId]);
|
||||
|
||||
const onClick = useCallback((e: React.MouseEvent) => {
|
||||
const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
|
||||
if (channel == null) return null;
|
||||
|
||||
function onClick(e: React.MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (channel == null || channelId == null) return;
|
||||
|
||||
if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
|
||||
|
@ -147,18 +145,15 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChanne
|
|||
delete clickTimers[channelId];
|
||||
}, 250);
|
||||
}
|
||||
}, [channelId]);
|
||||
}
|
||||
|
||||
const isLocked = useMemo(() => {
|
||||
return !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
|
||||
}, [channelId]);
|
||||
|
||||
if (channel == null) return null;
|
||||
const isLocked = !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
text={<VoiceChannelTooltip channel={channel} />}
|
||||
tooltipClassName={cl("tooltip-container")}
|
||||
tooltipContentClassName={cl("tooltip-content")}
|
||||
>
|
||||
{props =>
|
||||
isLocked ?
|
||||
|
|
|
@ -32,7 +32,7 @@ const settings = definePluginSettings({
|
|||
default: true,
|
||||
restartNeeded: true
|
||||
},
|
||||
showInVoiceMemberList: {
|
||||
showInMemberList: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Show a user's Voice Channel indicator in the member and DMs list",
|
||||
default: true,
|
||||
|
@ -82,12 +82,12 @@ export default definePlugin({
|
|||
match: /\.subtext,children:.+?}\)\]}\)(?=])/,
|
||||
replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
|
||||
},
|
||||
predicate: () => settings.store.showInVoiceMemberList
|
||||
predicate: () => settings.store.showInMemberList
|
||||
}
|
||||
],
|
||||
|
||||
start() {
|
||||
if (settings.store.showInVoiceMemberList) {
|
||||
if (settings.store.showInMemberList) {
|
||||
addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -15,7 +15,13 @@
|
|||
}
|
||||
|
||||
.vc-uvs-tooltip-container {
|
||||
max-width: 200px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.vc-uvs-tooltip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vc-uvs-guild-name {
|
||||
|
@ -31,7 +37,5 @@
|
|||
|
||||
.vc-uvs-vc-members {
|
||||
display: flex;
|
||||
margin: 8px 0;
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue