dorkbutt/vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

UserVoiceShow: Improve icon in User Profile Modal V2

Browse source
This commit is contained in:
Nuckyz 2025-07-16 20:23:06 -03:00
parent d0869c41cd
commit cdda1224ff
No known key found for this signature in database
GPG key ID: 440BF8296E1C4AD9
3 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/plugins/userVoiceShow/components.tsx
View file

@ -27,6 +27,7 @@ const ActionButtonClasses = findByPropsLazy("actionButton", "highlight");
interface IconProps extends React.ComponentPropsWithoutRef<"div"> { interface IconProps extends React.ComponentPropsWithoutRef<"div"> {
size?: number; size?: number;
iconClassName?: string;
} }
function SpeakerIcon(props: IconProps) { function SpeakerIcon(props: IconProps) {
@ -39,6 +40,7 @@ function SpeakerIcon(props: IconProps) {
className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined, props.className)} className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined, props.className)}
> >
<svg <svg
className={props.iconClassName}
width={props.size} width={props.size}
height={props.size} height={props.size}
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -129,13 +131,14 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
export interface VoiceChannelIndicatorProps { export interface VoiceChannelIndicatorProps {
userId: string; userId: string;
isProfile?: boolean;
isActionButton?: boolean; isActionButton?: boolean;
shouldHighlight?: boolean; shouldHighlight?: boolean;
} }
const clickTimers = {} as Record<string, any>; const clickTimers = {} as Record<string, any>;
export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => { export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isProfile, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined); const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId); const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
@ -179,8 +182,9 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isActionButto
{props => { {props => {
const iconProps: IconProps = { const iconProps: IconProps = {
...props, ...props,
className: classes(isActionButton && ActionButtonClasses.actionButton, shouldHighlight && ActionButtonClasses.highlight), className: classes(isActionButton && ActionButtonClasses.actionButton, isActionButton && shouldHighlight && ActionButtonClasses.highlight),
size: isActionButton ? 20 : undefined, iconClassName: classes(isProfile && cl("profile-speaker")),
size: isActionButton ? 20 : 16,
onClick onClick
}; };

2
src/plugins/userVoiceShow/index.tsx
View file

@ -60,7 +60,7 @@ export default definePlugin({
find: "#{intl::USER_PROFILE_LOAD_ERROR}", find: "#{intl::USER_PROFILE_LOAD_ERROR}",
replacement: { replacement: {
match: /(\.fetchError.+?\?)null/, match: /(\.fetchError.+?\?)null/,
replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})` replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId,isProfile:true})`
}, },
predicate: () => settings.store.showInUserProfileModal predicate: () => settings.store.showInUserProfileModal
}, },

5
src/plugins/userVoiceShow/style.css
View file

@ -13,6 +13,11 @@
color: var(--interactive-hover); color: var(--interactive-hover);
} }
.vc-uvs-profile-speaker {
width: var(--custom-nickname-icon-size);
height: var(--custom-nickname-icon-size);
}
.vc-uvs-tooltip-container { .vc-uvs-tooltip-container {
max-width: 300px; max-width: 300px;
} }