diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/plugins/platformIndicators.tsx | 33 |
1 files changed, 15 insertions, 18 deletions
diff --git a/src/plugins/platformIndicators.tsx b/src/plugins/platformIndicators.tsx index f3de128..eec0447 100644 --- a/src/plugins/platformIndicators.tsx +++ b/src/plugins/platformIndicators.tsx @@ -22,18 +22,15 @@ import { addDecoration, removeDecoration } from "@api/MessageDecorations"; import { Settings } from "@api/settings"; import ErrorBoundary from "@components/ErrorBoundary"; import { Devs } from "@utils/constants"; -import { classes } from "@utils/misc"; import definePlugin, { OptionType } from "@utils/types"; -import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack"; +import { findByCodeLazy, findStoreLazy } from "@webpack"; import { PresenceStore, Tooltip, UserStore } from "@webpack/common"; import { User } from "discord-types/general"; const SessionsStore = findStoreLazy("SessionsStore"); -const RoleIconClasses = findLazy(m => m.roleIcon && m.clickable && !m.alt); -const RoleIconClasses2 = findByPropsLazy("roleIcon", "alt"); function Icon(path: string, viewBox = "0 0 24 24") { - return ({ color, tooltip }: { color: string; tooltip: string; }) => ( + return ({ color, tooltip, wantMargin }: { color: string; tooltip: string; wantMargin: boolean; }) => ( <Tooltip text={tooltip} > {(tooltipProps: any) => ( <svg @@ -42,7 +39,12 @@ function Icon(path: string, viewBox = "0 0 24 24") { width="20" viewBox={viewBox} fill={color} - className={classes(RoleIconClasses.roleIcon, RoleIconClasses.clickable, RoleIconClasses2.roleIcon)} + style={{ + marginLeft: wantMargin ? 4 : 0, + verticalAlign: "top", + position: "relative", + top: 1, + }} > <path d={path} /> </svg> @@ -61,16 +63,16 @@ type Platform = keyof typeof Icons; const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE"); -const PlatformIcon = ({ platform, status }: { platform: Platform, status: string; }) => { +const PlatformIcon = ({ platform, status, wantMargin }: { platform: Platform, status: string; wantMargin: boolean; }) => { const tooltip = platform[0].toUpperCase() + platform.slice(1); const Icon = Icons[platform] ?? Icons.desktop; - return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} />; + return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} wantMargin={wantMargin} />; }; const getStatus = (id: string): Record<Platform, string> => PresenceStore.getState()?.clientStatuses?.[id]; -const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user: User; inline?: boolean; marginLeft?: string; }) => { +const PlatformIndicator = ({ user, wantMargin = true }: { user: User; wantMargin?: boolean; }) => { if (!user || user.bot) return null; if (user.id === UserStore.getCurrentUser().id) { @@ -103,26 +105,21 @@ const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user: key={platform} platform={platform as Platform} status={status} + wantMargin={wantMargin} /> )); if (!icons.length) return null; return ( - <span - className="vc-platform-indicator" - style={{ - marginLeft, - gap: "4px" - }} - > + <span className="vc-platform-indicator"> {icons} </span> ); }; const badge: ProfileBadge = { - component: p => <PlatformIndicator {...p} marginLeft="" />, + component: p => <PlatformIndicator {...p} wantMargin={false} />, position: BadgePosition.START, shouldShow: userInfo => !!Object.keys(getStatus(userInfo.user.id) ?? {}).length, key: "indicator" @@ -147,7 +144,7 @@ const indicatorLocations = { description: "Inside messages", onEnable: () => addDecoration("platform-indicator", props => <ErrorBoundary noop> - <PlatformIndicator user={props.message?.author} inline /> + <PlatformIndicator user={props.message?.author} /> </ErrorBoundary> ), onDisable: () => removeDecoration("platform-indicator") |