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