react-icons/fi#FiFilm TypeScript Examples

ManageNav: React.FC<ManageNavProps> = ({ active }) => {
    const { t } = useTranslation();

    /* eslint-disable react/jsx-key */
    const entries: [NonNullable<ManageNavProps["active"]>, string, ReactElement][] = [
        ["/~manage", t("manage.nav.dashboard"), <HiOutlineTemplate />],
        ["/~manage/videos", t("manage.nav.my-videos"), <FiFilm />],
    ];
    /* eslint-enable react/jsx-key */

    // TODO: we probably want a better style for active items
    const activeStyle = {
        fontWeight: "bold" as const,
    };
    const items = entries.map(([path, label, icon]) => (
        <LinkWithIcon
            key={path}
            to={path}
            iconPos="left"
            active={path === active}
            css={path === active ? activeStyle : {}}
        >
            {icon}
            {label}
        </LinkWithIcon>
    ));

    return <LinkList items={items} />;
}

Menu: React.FC<MenuProps> = ({ close, container }) => {
    const { t } = useTranslation();

    type State = "main" | "language";
    const [state, setState] = useState<State>("main");

    const userState = useUser();
    const user = userState === "none" || userState === "unknown" ? null : userState;

    // Close menu on clicks anywhere outside of it.
    useOnOutsideClick(container, close);

    const items = match(state, {
        main: () => <>
            {/* Login button if the user is NOT logged in */}
            {!user && (
                <MenuItem
                    icon={<FiLogIn />}
                    borderBottom
                    linkTo={CONFIG.auth.loginLink ?? LOGIN_PATH}
                    htmlLink={!!CONFIG.auth.loginLink}
                    css={{
                        color: "var(--nav-color)",
                        [`@media not all and (max-width: ${BREAKPOINT_MEDIUM}px)`]: {
                            display: "none",
                        },
                    }}
                >{t("user.login")}</MenuItem>
            )}

            {user && <>
                {user.canUpload && <MenuItem
                    icon={<FiUpload />}
                    linkTo={"/~upload"}
                    onClick={() => close()}
                >{t("upload.title")}</MenuItem>}
                <MenuItem
                    icon={<FiFilm />}
                    linkTo="/~manage"
                    onClick={() => close()}
                >{t("user.manage-content")}</MenuItem>
            </>}

            <MenuItem icon={<HiOutlineTranslate />} onClick={() => setState("language")}>
                {t("language")}
            </MenuItem>

            {/* Logout button if the user is logged in */}
            {user && <Logout />}
        </>,
        language: () => <>
            <MenuItem icon={<FiChevronLeft />} onClick={() => setState("main")} borderBottom>
                {t("back")}
            </MenuItem>
            <LanguageMenu />
        </>,
    });

    return (
        <ul css={{
            position: "absolute",
            zIndex: 1000,
            top: "100%",
            right: 8,
            marginTop: 8,
            borderRadius: 4,
            border: "1px solid var(--grey80)",
            boxShadow: "1px 1px 5px var(--grey92)",
            backgroundColor: "white",
            minWidth: 200,
            paddingLeft: 0,
            margin: 0,
            overflow: "hidden",
        }}>{items}</ul>
    );
}

AddButtons: React.FC<Props> = ({ index, realm }) => {
    const { t } = useTranslation();

    const { id: realmId } = useFragment(graphql`
        fragment AddButtonsRealmData on Realm {
            id
        }
    `, realm);

    const env = useRelayEnvironment();

    const addBlock = (
        type: string,
        prepareBlock?: (store: RecordSourceProxy, block: RecordProxy) => void,
    ) => {
        commitLocalUpdate(env, store => {
            const realm = store.get(realmId) ?? bug("could not find realm");

            const blocks = [
                ...realm.getLinkedRecords("blocks") ?? bug("realm does not have blocks"),
            ];

            const id = "clNEWBLOCK";
            const block = store.create(id, `${type}Block`);
            prepareBlock?.(store, block);
            block.setValue(true, "editMode");
            block.setValue(id, "id");

            blocks.splice(index, 0, block);

            realm.setLinkedRecords(blocks, "blocks");
        });
    };

    return <ButtonGroup css={{ alignSelf: "center" }}>
        <span
            title={t("manage.realm.content.add")}
            css={{
                color: "white",
                backgroundColor: "var(--grey20)",
            }}
        >
            <FiPlus />
        </span>
        <Button title={t("manage.realm.content.add-title")} onClick={() => addBlock("Title")}>
            <FiType />
        </Button>
        <Button title={t("manage.realm.content.add-text")} onClick={() => addBlock("Text")}>
            <FiAlignLeft />
        </Button>
        <Button
            title={t("manage.realm.content.add-series")}
            onClick={() => addBlock("Series", (_store, block) => {
                block.setValue("NEW_TO_OLD", "order");
                block.setValue(true, "showTitle");
            })}
        >
            <FiGrid />
        </Button>
        <Button
            title={t("manage.realm.content.add-video")}
            onClick={() => addBlock("Video", (_store, block) => {
                block.setValue(true, "showTitle");
            })}
        >
            <FiFilm />
        </Button>
    </ButtonGroup>;
}

Manage: React.FC = () => {
    const { t } = useTranslation();
    const user = useUser();
    if (user === "none" || user === "unknown") {
        return <NotAuthorized />;
    }
    const returnTarget = encodeURIComponent(document.location.href);
    const studioUrl = `${CONFIG.opencast.studioUrl}?return.target=${returnTarget}`;

    return <>
        <Breadcrumbs path={[]} tail={t("manage.management")} />
        <PageTitle title={t("manage.dashboard.title")} />
        <div css={{
            display: "grid",
            width: 950,
            maxWidth: "100%",
            margin: "32px 0",
            gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
            gap: 24,
        }}>
            {user.canUpload && <GridTile link="/~upload">
                <FiUpload />
                <h2>{t("upload.title")}</h2>
                {t("manage.dashboard.upload-tile")}
            </GridTile>}
            {user.canUseStudio && <GridTile link={studioUrl}>
                <FiVideo />
                <h2>{t("manage.dashboard.studio-tile-title")}</h2>
                {t("manage.dashboard.studio-tile-body")}
            </GridTile>}
            <GridTile link="/~manage/videos">
                <FiFilm />
                <h2>{t("manage.my-videos.title")}</h2>
                {t("manage.dashboard.my-videos-tile")}
            </GridTile>
            <GridTile>
                <h2>{t("manage.dashboard.manage-pages-tile-title")}</h2>
                {t("manage.dashboard.manage-pages-tile-body")}
            </GridTile>
        </div>
    </>;
}

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>
    );
}