react-icons/fi#FiVolume2 TypeScript Examples

The following examples show how to use react-icons/fi#FiVolume2. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Video.tsx    From tobira with Apache License 2.0 4 votes vote down vote up 
Thumbnail: React.FC<ThumbnailProps> = ({
    event,
    active = false,
    ...rest
}) => {
    const { t } = useTranslation();
    const audioOnly = "audioOnly" in event
        ? event.audioOnly
        : event.tracks.every(t => t.resolution == null);

    let inner;
    if (event.thumbnail != null) {
        // We have a proper thumbnail.
        inner = <img
            src={event.thumbnail}
            alt={t("video.thumbnail-for", { video: event.title })}
            width={16}
            height={9}
            css={{ display: "block", width: "100%", height: "auto" }}
        />;
    } else {
        // We have no thumbnail. If the resolution is `null` as well, we are
        // dealing with an audio-only event and show an appropriate icon.
        // Otherwise we use a generic icon.
        const icon = audioOnly ? <FiVolume2 /> : <FiFilm />;

        inner = (
            <div css={{
                display: "flex",
                height: "100%",
                backgroundColor: "var(--grey92)",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 40,
            }}>{icon}</div>
        );
    }

    const overlayBaseCss = {
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        position: "absolute",
        right: 6,
        bottom: 6,
        borderRadius: 4,
        padding: "1px 5px",
        fontSize: 14,
        backgroundColor: "hsla(0, 0%, 0%, 0.75)",
        color: "white",
    } as const;
    let overlay;
    if (event.isLive) {
        // TODO: we might want to have a better "is currently live" detection.
        const created = new Date(event.created);
        const currentlyLive = created < new Date();
        overlay = <div css={{
            ...overlayBaseCss,
            ...currentlyLive ? { backgroundColor: "rgba(200, 0, 0, 0.9)" } : {},
        }}>
            {currentlyLive && <FiRadio css={{ fontSize: 19, strokeWidth: 1.4 }} />}
            {t("video.live")}
        </div>;
    } else {
        overlay = <div css={overlayBaseCss}>{formatDuration(event.duration)}</div>;
    }

    return (
        <div css={{
            position: "relative",
            transition: "0.2s box-shadow",
            overflow: "hidden",
            height: "fit-content",
            borderRadius: 8,
            // TODO: Not supported by Safari 14.1. Maybe used padding trick instead!
            aspectRatio: "16 / 9",
        }} {...rest}>
            {inner}
            {active && <ActiveIndicator />}
            {overlay}
        </div>
    );
}