UserVoiceShow: Add option to show username

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 >
         </>
     );
 }

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,
 

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;
+}

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