UserVoiceShow: Improve icon in User Profile Modal V2

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

View file

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

View file

@ -60,7 +60,7 @@ export default definePlugin({
find: "#{intl::USER_PROFILE_LOAD_ERROR}",
replacement: {
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
},

View file

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