diff --git a/src/plugins/userVoiceShow/components.tsx b/src/plugins/userVoiceShow/components.tsx index 1eab9111b..2b3b6d3a4 100644 --- a/src/plugins/userVoiceShow/components.tsx +++ b/src/plugins/userVoiceShow/components.tsx @@ -8,7 +8,7 @@ import { classNameFactory } from "@api/Styles"; import ErrorBoundary from "@components/ErrorBoundary"; import { classes } from "@utils/misc"; import { findComponentByCode, findProp, findStore } 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-"); @@ -71,23 +71,18 @@ interface VoiceChannelTooltipProps { function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) { const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id)); + const users = useMemo( () => Object.values(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) { @@ -119,11 +114,14 @@ const clickTimers = {} as Record; 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 ( } tooltipClassName={cl("tooltip-container")} + tooltipContentClassName={cl("tooltip-content")} > {props => isLocked ? diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css index b4cc00631..3e36df217 100644 --- a/src/plugins/userVoiceShow/style.css +++ b/src/plugins/userVoiceShow/style.css @@ -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; }