UserVoiceShow: Fix for simplified profiles

This commit is contained in:
Nuckyz 2024-09-16 14:53:49 -03:00
parent 640d99dcda
commit f12335a371
No known key found for this signature in database
GPG key ID: 440BF8296E1C4AD9
6 changed files with 274 additions and 148 deletions

View file

@ -0,0 +1,7 @@
# User Voice Show
Shows an indicator when a user is in a Voice Channel
![a preview of the indicator in the user profile](https://github.com/user-attachments/assets/48f825e4-fad5-40d7-bb4f-41d5e595aae0)
![a preview of the indicator in the member list](https://github.com/user-attachments/assets/51be081d-7bbb-45c5-8533-d565228e50c1)

View file

@ -0,0 +1,170 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2024 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { classes } from "@utils/misc";
import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, showToast, Text, Toasts, Tooltip, useCallback, useMemo, UserStore, useStateFromStores } from "@webpack/common";
import { Channel } from "discord-types/general";
const cl = classNameFactory("vc-uvs-");
const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChannel");
const VoiceStateStore = findStoreLazy("VoiceStateStore");
const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
size?: number;
}
function SpeakerIcon(props: IconProps) {
props.size ??= 16;
return (
<div
{...props}
role={props.onClick != null ? "button" : undefined}
className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
>
<svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z" />
<path d="M15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z" />
</svg>
</div>
);
}
function LockedSpeakerIcon(props: IconProps) {
props.size ??= 16;
return (
<div
{...props}
role={props.onClick != null ? "button" : undefined}
className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
>
<svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
fill="currentColor"
>
<path fillRule="evenodd" clipRule="evenodd" d="M16 4h.5v-.5a2.5 2.5 0 0 1 5 0V4h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm4-.5V4h-2v-.5a1 1 0 1 1 2 0Z" />
<path d="M11 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1h-.06a1 1 0 0 1-.74-.32L5.92 17H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.92l4.28-4.68a1 1 0 0 1 .74-.32H11ZM20.5 12c-.28 0-.5.22-.52.5a7 7 0 0 1-5.13 6.25c-.48.13-.85.55-.85 1.05v.03c0 .6.52 1.06 1.1.92a9 9 0 0 0 6.89-8.25.48.48 0 0 0-.49-.5h-1ZM16.5 12c-.28 0-.5.23-.54.5a3 3 0 0 1-1.33 2.02c-.35.23-.63.6-.63 1.02v.14c0 .63.59 1.1 1.16.83a5 5 0 0 0 2.82-4.01c.02-.28-.2-.5-.48-.5h-1Z" />
</svg>
</div>
);
}
interface VoiceChannelTooltipProps {
channel: Channel;
}
function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id));
const users = useMemo(
() => Object.values<any>(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]);
return (
<>
{guild != null && (
<div className={cl("guild-name")}>
{guildIcon != null && <img className={cl("guild-icon")} src={guildIcon} alt="" />}
<Text variant="text-sm/bold">{guild.name}</Text>
</div>
)}
<Text variant="text-sm/semibold">{channel.name}</Text>
<div className={cl("vc-members")}>
<SpeakerIcon size={18} />
<UserSummaryItem
users={users}
renderIcon={false}
max={7}
size={18}
/>
</div>
</>
);
}
interface VoiceChannelIndicatorProps {
userId: string;
}
const clickTimers = {} as Record<string, any>;
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) => {
e.preventDefault();
e.stopPropagation();
if (channel == null || channelId == null) return;
if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
showToast("You cannot view the user's Voice Channel", Toasts.Type.FAILURE);
return;
}
clearTimeout(clickTimers[channelId]);
delete clickTimers[channelId];
if (e.detail > 1) {
if (!PermissionStore.can(PermissionsBits.CONNECT, channel)) {
showToast("You cannot join the user's Voice Channel", Toasts.Type.FAILURE);
return;
}
selectVoiceChannel(channelId);
} else {
clickTimers[channelId] = setTimeout(() => {
NavigationRouter.transitionTo(`/channels/${channel.getGuildId() ?? "@me"}/${channelId}`);
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;
return (
<Tooltip
text={<VoiceChannelTooltip channel={channel} />}
tooltipClassName={cl("tooltip-container")}
>
{props =>
isLocked ?
<LockedSpeakerIcon {...props} onClick={onClick} />
: <SpeakerIcon {...props} onClick={onClick} />
}
</Tooltip>
);
}, { noop: true });

View file

@ -1,27 +0,0 @@
.vc-uvs-button>div {
white-space: normal !important;
}
.vc-uvs-button {
width: 100%;
margin: auto;
height: unset;
}
.vc-uvs-header {
color: var(--header-primary);
margin-bottom: 6px;
}
.vc-uvs-modal-margin {
margin: 0 12px;
}
.vc-uvs-modal-margin div {
margin-bottom: 0 !important;
}
.vc-uvs-popout-margin-self>[class^="section"] {
padding-top: 0;
padding-bottom: 12px;
}

View file

@ -1,61 +0,0 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./VoiceChannelSection.css";
import { findByPropsLazy } from "@webpack";
import { Button, Forms, PermissionStore, Toasts } from "@webpack/common";
import { Channel } from "discord-types/general";
const ChannelActions = findByPropsLazy("selectChannel", "selectVoiceChannel");
const CONNECT = 1n << 20n;
interface VoiceChannelFieldProps {
channel: Channel;
label: string;
showHeader: boolean;
}
export const VoiceChannelSection = ({ channel, label, showHeader }: VoiceChannelFieldProps) => (
// @TODO The div is supposed to be a UserPopoutSection
<div>
{showHeader && <Forms.FormTitle className="vc-uvs-header">In a voice channel</Forms.FormTitle>}
<Button
className="vc-uvs-button"
color={Button.Colors.TRANSPARENT}
size={Button.Sizes.SMALL}
onClick={() => {
if (PermissionStore.can(CONNECT, channel))
ChannelActions.selectVoiceChannel(channel.id);
else
Toasts.show({
message: "Insufficient permissions to enter the channel.",
id: "user-voice-show-insufficient-permissions",
type: Toasts.Type.FAILURE,
options: {
position: Toasts.Position.BOTTOM,
}
});
}}
>
{label}
</Button>
</div>
);

View file

@ -16,85 +16,85 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./style.css";
import { addDecorator, removeDecorator } from "@api/MemberListDecorators";
import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findStoreLazy } from "@webpack";
import { ChannelStore, GuildStore, UserStore } from "@webpack/common";
import { User } from "discord-types/general";
import { VoiceChannelSection } from "./components/VoiceChannelSection";
const VoiceStateStore = findStoreLazy("VoiceStateStore");
import { VoiceChannelIndicator } from "./components";
const settings = definePluginSettings({
showInUserProfileModal: {
type: OptionType.BOOLEAN,
description: "Show a user's voice channel in their profile modal",
description: "Show a user's Voice Channel indicator in their profile next to the name",
default: true,
restartNeeded: true
},
showVoiceChannelSectionHeader: {
showInVoiceMemberList: {
type: OptionType.BOOLEAN,
description: 'Whether to show "IN A VOICE CHANNEL" above the join button',
description: "Show a user's Voice Channel indicator in the member and DMs list",
default: true,
restartNeeded: true
}
});
interface UserProps {
user: User;
}
const VoiceChannelField = ErrorBoundary.wrap(({ user }: UserProps) => {
const { channelId } = VoiceStateStore.getVoiceStateForUser(user.id) ?? {};
if (!channelId) return null;
const channel = ChannelStore.getChannel(channelId);
if (!channel) return null;
const guild = GuildStore.getGuild(channel.guild_id);
if (!guild) return null; // When in DM call
const result = `${guild.name} | ${channel.name}`;
return (
<VoiceChannelSection
channel={channel}
label={result}
showHeader={settings.store.showVoiceChannelSectionHeader}
/>
);
});
export default definePlugin({
name: "UserVoiceShow",
description: "Shows whether a User is currently in a voice channel somewhere in their profile",
authors: [Devs.LordElias],
description: "Shows an indicator when a user is in a Voice Channel",
authors: [Devs.LordElias, Devs.Nuckyz],
settings,
patchModal({ user }: UserProps) {
if (!settings.store.showInUserProfileModal)
return null;
return (
<div className="vc-uvs-modal-margin">
<VoiceChannelField user={user} />
</div>
);
},
patchProfilePopout: ({ user }: UserProps) => {
const isSelfUser = user.id === UserStore.getCurrentUser().id;
return (
<div className={isSelfUser ? "vc-uvs-popout-margin-self" : ""}>
<VoiceChannelField user={user} />
</div>
);
},
patches: [
// @TODO Maybe patch UserVoiceShow in simplified profile popout
// @TODO Patch new profile modal
// User Popout, Full Size Profile, Direct Messages Side Profile
{
find: ".Messages.USER_PROFILE_LOAD_ERROR",
replacement: {
match: /(\.fetchError.+?\?)null/,
replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})`
},
predicate: () => settings.store.showInUserProfileModal
},
// To use without the MemberList decorator API
/* // Guild Members List
{
find: ".lostPermission)",
replacement: {
match: /\.lostPermission\).+?(?=avatar:)/,
replace: "$&children:[$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})],"
},
predicate: () => settings.store.showVoiceChannelIndicator
},
// Direct Messages List
{
find: "PrivateChannel.renderAvatar",
replacement: {
match: /\.Messages\.CLOSE_DM.+?}\)(?=])/,
replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
},
predicate: () => settings.store.showVoiceChannelIndicator
}, */
// Friends List
{
find: ".avatar,animate:",
replacement: {
match: /\.subtext,children:.+?}\)\]}\)(?=])/,
replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
},
predicate: () => settings.store.showInVoiceMemberList
}
],
start() {
if (settings.store.showInVoiceMemberList) {
addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
}
},
stop() {
removeDecorator("UserVoiceShow");
},
VoiceChannelIndicator
});

View file

@ -0,0 +1,37 @@
.vc-uvs-speaker {
color: var(--interactive-normal);
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
}
.vc-uvs-clickable {
cursor: pointer;
}
.vc-uvs-clickable:hover {
color: var(--interactive-hover);
}
.vc-uvs-tooltip-container {
max-width: 200px;
}
.vc-uvs-guild-name {
display: flex;
align-items: center;
gap: 8px;
}
.vc-uvs-guild-icon {
border-radius: 100%;
align-self: center;
}
.vc-uvs-vc-members {
display: flex;
margin: 8px 0;
flex-direction: row;
gap: 6px;
}