abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 09:25:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Run prettier on all files.

Browse Source
This commit is contained in:
Paul
2021-07-05 11:23:23 +01:00
parent 56058c1e75
commit 7bd33d8d34
181 changed files with 18084 additions and 13521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/components/common/user/UserIcon.tsx
View File

@@ -1,93 +1,104 @@
import { User } from "revolt.js";
import { useContext } from "preact/hooks";
import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { User } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme";
import IconBase, { IconBaseProps } from "../IconBase";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png";
type VoiceStatus = "muted";
interface Props extends IconBaseProps<User> {
mask?: string;
status?: boolean;
voice?: VoiceStatus;
mask?: string;
status?: boolean;
voice?: VoiceStatus;
}
export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext);
const theme = useContext(ThemeContext);
return (
user?.online &&
user?.status?.presence !== Users.Presence.Invisible
? user?.status?.presence === Users.Presence.Idle
? theme["status-away"]
: user?.status?.presence ===
Users.Presence.Busy
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"]
);
return user?.online && user?.status?.presence !== Users.Presence.Invisible
? user?.status?.presence === Users.Presence.Idle
? theme["status-away"]
: user?.status?.presence === Users.Presence.Busy
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"];
}
const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
width: 10px;
height: 10px;
border-radius: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
svg {
stroke: white;
}
svg {
stroke: white;
}
${ props => props.status === 'muted' && css`
background: var(--error);
` }
${(props) =>
props.status === "muted" &&
css`
background: var(--error);
`}
`;
import fallback from '../assets/user.png';
export default function UserIcon(
props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
) {
const client = useContext(AppContext);
export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
const client = useContext(AppContext);
const {
target,
attachment,
size,
voice,
status,
animate,
mask,
children,
as,
...svgProps
} = props;
const iconURL =
client.generateFileURL(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
const { target, attachment, size, voice, status, animate, mask, children, as, ...svgProps } = props;
const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
return (
<IconBase {...svgProps}
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject x="0" y="0" width="32" height="32" mask={mask ?? (status ? "url(#user)" : undefined)}>
{
<img src={iconURL}
draggable={false} />
}
</foreignObject>
{props.status && (
<circle
cx="27"
cy="27"
r="5"
fill={useStatusColour(target)}
/>
)}
{props.voice && (
<foreignObject
x="22"
y="22"
width="10"
height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicrophoneOff size={6} />}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
return (
<IconBase
{...svgProps}
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject
x="0"
y="0"
width="32"
height="32"
mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={iconURL} draggable={false} />}
</foreignObject>
{props.status && (
<circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
)}
{props.voice && (
<foreignObject x="22" y="22" width="10" height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicrophoneOff size={6} />}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
}