revite/src/components/common/ChannelIcon.tsx

44 lines
1.6 KiB
TypeScript
Raw Normal View History

2021-06-19 07:34:53 -04:00
import { useContext } from "preact/hooks";
import { Channels } from "revolt.js/dist/api/objects";
2021-06-23 08:52:16 -04:00
import { Hash, Volume2 } from "@styled-icons/feather";
2021-06-19 10:29:04 -04:00
import { ImageIconBase, IconBaseProps } from "./IconBase";
2021-06-19 07:34:53 -04:00
import { AppContext } from "../../context/revoltjs/RevoltClient";
2021-06-23 08:52:16 -04:00
interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel> {
2021-06-19 07:34:53 -04:00
isServerChannel?: boolean;
}
import fallback from './assets/group.png';
2021-06-19 10:29:04 -04:00
export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
2021-06-19 13:46:05 -04:00
const client = useContext(AppContext);
2021-06-19 07:34:53 -04:00
2021-06-19 10:29:04 -04:00
const { size, target, attachment, isServerChannel: server, animate, children, as, ...imgProps } = props;
2021-06-19 07:34:53 -04:00
const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
2021-06-23 08:52:16 -04:00
const isServerChannel = server || (target && (target.channel_type === 'TextChannel' || target.channel_type === 'VoiceChannel'));
2021-06-19 07:34:53 -04:00
if (typeof iconURL === 'undefined') {
if (isServerChannel) {
2021-06-23 08:52:16 -04:00
if (target?.channel_type === 'VoiceChannel') {
return (
<Volume2 size={size} />
)
} else {
return (
<Hash size={size} />
)
}
2021-06-19 07:34:53 -04:00
}
}
return (
2021-06-19 10:29:04 -04:00
// ! fixme: replace fallback with <picture /> + <source />
<ImageIconBase {...imgProps}
2021-06-19 07:34:53 -04:00
width={size}
height={size}
aria-hidden="true"
2021-06-19 10:29:04 -04:00
square={isServerChannel}
src={iconURL ?? fallback} />
2021-06-19 07:34:53 -04:00
);
}