revite/src/components/common/ChannelIcon.tsx

import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
import { Channels } from "revolt.js/dist/api/objects";

import { useContext } from "preact/hooks";

import { AppContext } from "../../context/revoltjs/RevoltClient";

import { ImageIconBase, IconBaseProps } from "./IconBase";
import fallback from "./assets/group.png";

interface Props
    extends IconBaseProps<
        Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel
    > {
    isServerChannel?: boolean;
}

export default function ChannelIcon(
    props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
) {
    const client = useContext(AppContext);

    const {
        size,
        target,
        attachment,
        isServerChannel: server,
        animate,
        children,
        as,
        ...imgProps
    } = props;
    const iconURL = client.generateFileURL(
        target?.icon ?? attachment,
        { max_side: 256 },
        animate,
    );
    const isServerChannel =
        server ||
        (target &&
            (target.channel_type === "TextChannel" ||
                target.channel_type === "VoiceChannel"));

    if (typeof iconURL === "undefined") {
        if (isServerChannel) {
            if (target?.channel_type === "VoiceChannel") {
                return <VolumeFull size={size} />;
            } else {
                return <Hash size={size} />;
            }
        }
    }

    return (
        // ! fixme: replace fallback with <picture /> + <source />
        <ImageIconBase
            {...imgProps}
            width={size}
            height={size}
            loading="lazy"
            aria-hidden="true"
            square={isServerChannel}
            src={iconURL ?? fallback}
        />
    );
}