TypingIndicator: Add an option to show user avatars (#2319)

Co-authored-by: Vendicated <vendicated@riseup.net>
This commit is contained in:
Sqaaakoi 2024-04-09 12:41:48 +12:00 committed by GitHub
parent ae01e88e13
commit 26f3618c2c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 59 additions and 7 deletions

View file

@ -16,20 +16,28 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./style.css";
import { definePluginSettings, Settings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { findExportedComponentLazy, findStoreLazy } from "@webpack";
import { findComponentByCodeLazy, findExportedComponentLazy, findStoreLazy } from "@webpack";
import { ChannelStore, GuildMemberStore, i18n, RelationshipStore, SelectedChannelStore, Tooltip, UserStore, useStateFromStores } from "@webpack/common";
import { buildSeveralUsers } from "../typingTweaks";
const ThreeDots = findExportedComponentLazy("Dots", "AnimatedDots");
const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
const TypingStore = findStoreLazy("TypingStore");
const UserGuildSettingsStore = findStoreLazy("UserGuildSettingsStore");
const enum IndicatorMode {
Dots = 1 << 0,
Avatars = 1 << 1
}
function getDisplayName(guildId: string, userId: string) {
const user = UserStore.getUser(userId);
return GuildMemberStore.getNick(guildId, userId) ?? (user as any).globalName ?? user.username;
@ -90,11 +98,24 @@ function TypingIndicator({ channelId }: { channelId: string; }) {
return (
<Tooltip text={tooltipText!}>
{props => (
<div
{...props}
style={{ marginLeft: 6, height: 16, display: "flex", alignItems: "center", zIndex: 0, cursor: "pointer" }}
>
<ThreeDots dotRadius={3} themed={true} />
<div className="vc-typing-indicator" {...props}>
{((settings.store.indicatorMode & IndicatorMode.Avatars) === IndicatorMode.Avatars) && (
<UserSummaryItem
users={typingUsersArray.map(id => UserStore.getUser(id))}
guildId={guildId}
renderIcon={false}
max={3}
showDefaultAvatarsForNullUsers
showUserPopout
size={16}
className="vc-typing-indicator-avatars"
/>
)}
{((settings.store.indicatorMode & IndicatorMode.Dots) === IndicatorMode.Dots) && (
<div className="vc-typing-indicator-dots">
<ThreeDots dotRadius={3} themed={true} />
</div>
)}
</div>
)}
</Tooltip>
@ -119,13 +140,22 @@ const settings = definePluginSettings({
type: OptionType.BOOLEAN,
description: "Whether to show the typing indicator for blocked users.",
default: false
},
indicatorMode: {
type: OptionType.SELECT,
description: "How should the indicator be displayed?",
options: [
{ label: "Avatars and animated dots", value: IndicatorMode.Dots | IndicatorMode.Avatars, default: true },
{ label: "Animated dots", value: IndicatorMode.Dots },
{ label: "Avatars", value: IndicatorMode.Avatars },
],
}
});
export default definePlugin({
name: "TypingIndicator",
description: "Adds an indicator if someone is typing on a channel.",
authors: [Devs.Nuckyz, Devs.fawn],
authors: [Devs.Nuckyz, Devs.fawn, Devs.Sqaaakoi],
settings,
patches: [

View file

@ -0,0 +1,18 @@
.vc-typing-indicator {
display: flex;
align-items: center;
height: 20px;
}
.vc-typing-indicator-avatars {
margin-left: 6px;
}
.vc-typing-indicator-dots {
margin-left: 6px;
height: 16px;
display: flex;
align-items: center;
z-index: 0;
cursor: pointer;
}

View file

@ -426,6 +426,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
name: "newwares",
id: 421405303951851520n
},
Sqaaakoi: {
name: "Sqaaakoi",
id: 259558259491340288n
},
Byron: {
name: "byeoon",
id: 1167275288036655133n