From 9138b541a379cf3250eda35be1ea5795909cf9a0 Mon Sep 17 00:00:00 2001
From: ScarZ <43269183+scarrrr316@users.noreply.github.com>
Date: Tue, 31 Dec 2024 20:20:10 +0800
Subject: [PATCH] UserVoiceShow: Add option to show username
---
src/plugins/userVoiceShow/components.tsx | 30 ++++++++++++++++++++----
src/plugins/userVoiceShow/index.tsx | 16 ++++++++++---
src/plugins/userVoiceShow/style.css | 22 +++++++++++++++--
src/utils/constants.ts | 4 ++++
4 files changed, 62 insertions(+), 10 deletions(-)
diff --git a/src/plugins/userVoiceShow/components.tsx b/src/plugins/userVoiceShow/components.tsx
index e8924f82934..fa283b62621 100644
--- a/src/plugins/userVoiceShow/components.tsx
+++ b/src/plugins/userVoiceShow/components.tsx
@@ -8,8 +8,9 @@ import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { classes } from "@utils/misc";
import { filters, findByCodeLazy, findByPropsLazy, findComponentByCodeLazy, findStoreLazy, mapMangledModuleLazy } from "@webpack";
-import { ChannelRouter, ChannelStore, GuildStore, IconUtils, match, P, PermissionsBits, PermissionStore, React, showToast, Text, Toasts, Tooltip, useMemo, UserStore, useStateFromStores } from "@webpack/common";
+import { ChannelRouter, ChannelStore, GuildStore, IconUtils, match, P, PermissionsBits, PermissionStore, React, RelationshipStore, showToast, Text, Toasts, Tooltip, useMemo, UserStore, useStateFromStores, GuildMemberStore } from "@webpack/common";
import { Channel } from "discord-types/general";
+import { settings } from "./index";
const cl = classNameFactory("vc-uvs-");
@@ -115,15 +116,34 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
{channelIcon}
<Text variant="text-sm/semibold">{channelName}</Text>
</div>
- <div className={cl("vc-members")}>
+ <div className={cl("vc-members-container")}>
{isLocked ? <LockedSpeakerIcon size={18} /> : <SpeakerIcon size={18} />}
- <UserSummaryItem
+ {!settings.store.showUserNames && <UserSummaryItem
users={users}
renderIcon={false}
max={13}
size={18}
- />
- </div>
+ />}
+ {settings.store.showUserNames && (
+ <div className={cl("vc-members")}>
+ {users.map(user => (
+ <div key={user.id} className={cl("vc-member")}>
+ <Avatar src={user.getAvatarURL()} size="SIZE_32" />
+ <Text variant="text-sm/semibold">
+ {(() => {
+ const name = (guild && GuildMemberStore.getNick(guild.id, user.id))
+ || (!guild && RelationshipStore.getNickname(user.id))
+ || (user as any).globalName
+ || user.username;
+ const maxLength = settings.store.maxNameLength;
+ return name.length > maxLength ? name.slice(0, maxLength) + "..." : name;
+ })()}
+ </Text>
+ </div>
+ ))}
+ </div>
+ )}
+ </div >
</>
);
}
diff --git a/src/plugins/userVoiceShow/index.tsx b/src/plugins/userVoiceShow/index.tsx
index e0d5d8abdee..6dcfbf617cf 100644
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@@ -26,7 +26,7 @@ import definePlugin, { OptionType } from "@utils/types";
import { VoiceChannelIndicator } from "./components";
-const settings = definePluginSettings({
+export const settings = definePluginSettings({
showInUserProfileModal: {
type: OptionType.BOOLEAN,
description: "Show a user's Voice Channel indicator in their profile next to the name",
@@ -44,13 +44,23 @@ const settings = definePluginSettings({
description: "Show a user's Voice Channel indicator in messages",
default: true,
restartNeeded: true
- }
+ },
+ showUserNames: {
+ type: OptionType.BOOLEAN,
+ description: "Show user's name in the Voice Channel indicator",
+ default: false,
+ },
+ maxNameLength: {
+ type: OptionType.NUMBER,
+ description: "Set the maximum length for the user's name in the Voice Channel indicator",
+ default: 10,
+ },
});
export default definePlugin({
name: "UserVoiceShow",
description: "Shows an indicator when a user is in a Voice Channel",
- authors: [Devs.Nuckyz, Devs.LordElias],
+ authors: [Devs.Nuckyz, Devs.LordElias, Devs.ScarZ],
dependencies: ["MemberListDecoratorsAPI", "MessageDecorationsAPI"],
settings,
diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css
index d172975b8ee..54128a745c0 100644
--- a/src/plugins/userVoiceShow/style.css
+++ b/src/plugins/userVoiceShow/style.css
@@ -24,7 +24,7 @@
}
.vc-uvs-tooltip-container {
- max-width: 300px;
+ max-width: 350px;
}
.vc-uvs-tooltip-content {
@@ -44,7 +44,25 @@
align-self: center;
}
-.vc-uvs-vc-members {
+.vc-uvs-vc-members-container {
display: flex;
gap: 6px;
}
+
+.vc-uvs-vc-members-container>.vc-uvs-speaker {
+ display: flex;
+ padding-top: 6px;
+ align-items: flex-start
+}
+
+.vc-uvs-vc-members {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.vc-uvs-vc-member {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
\ No newline at end of file
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index e7582591257..ab284422cc6 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -579,6 +579,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
name: "jamesbt365",
id: 158567567487795200n,
},
+ ScarZ: {
+ name: "ScarZ",
+ id: 0n
+ },
} satisfies Record<string, Dev>);
// iife so #__PURE__ works correctly