TypingIndicator: Add an option to show user avatars (#2319)
Co-authored-by: Vendicated <vendicated@riseup.net>
This commit is contained in:
parent
ae01e88e13
commit
26f3618c2c
|
@ -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,13 +98,26 @@ 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))}
|
||||||
|
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} />
|
<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: [
|
||||||
|
|
18
src/plugins/typingIndicator/style.css
Normal file
18
src/plugins/typingIndicator/style.css
Normal 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;
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue