Function ViewPlugin

frontend/src/pages/plugins/[pluginId]/ViewPlugin.tsx:17–90

()

import { pluginToFiles } from "../../../components/ScriptEditor";

export function ViewPlugin() {
    const session = useSession()
    let { value: plugin } = useFetchedDataBehindGuard(pluginContext);
    if (!plugin) {
        throw new Error("plugin value was null")
    }

    const bannerImage = plugin.images.find(v => v.kind === "Banner")
    const showcaseImages = plugin.images.filter(v => v.kind === "Showcase")

    return <Container>
        <Paper sx={{ marginTop: 1 }}>

            {bannerImage && <img
                alt="plugin uploaded banner"
                src={pluginImageUrl(plugin.id, bannerImage.image_id)}
                style={{
                    width: "100%",
                    maxHeight: "194px",
                    objectFit: "cover",
                }}
            />}
            <Box sx={{ padding: 2 }}>

                <Stack direction={"row"} alignItems={"center"} spacing={1}>
                    <PluginIcon plugin={plugin} />
                    <Typography variant="h4">{plugin.name}</Typography>
                    <Chip label={`${plugin.installed_guilds ?? "?"} Server` + (plugin.installed_guilds !== 1 ? "s" : "")} color="primary" variant="outlined" icon={<TimelineIcon />} />
                </Stack>

                <Stack direction={"row"} alignItems="center" spacing={1} mt={1} mb={1}>
                    <Avatar alt={plugin.author?.username} sx={{ width: 32, height: 32 }} src={userAvatarUrl(plugin.author!, 64)} />
                    <Typography>{plugin.author?.username}</Typography>
                    {plugin.author?.is_bl_staff ? <Chip label="Staff" size="small" variant="outlined" /> : null}
                </Stack>

                <Divider />

                <Typography mb={2} mt={2}>{plugin.short_description}</Typography>
                {plugin.author?.is_bl_staff ? null : <Alert severity="warning">This plugin is from a community member, you should only add plugins from people you trust.</Alert>}

                <AddPluginToServerButton plugin={plugin} />

                <ReactMarkdown>{plugin.long_description}</ReactMarkdown>

                <Divider />

                <Box display={"flex"} alignItems={"center"}>
                    <Typography>{plugin.published_version_updated_at &&
                        <>updated <DisplayRelativeDateTime dt={plugin.published_version_updated_at} /></>
                    }</Typography>
                    {session.user?.id === plugin.author_id ? <BlLink to={`/user/plugins/${plugin.id}/`}>Edit</BlLink> : null}
                    <BlLink to={`/plugins/${plugin.id}/source`}>View source</BlLink>
                </Box>

                <Divider />
                {showcaseImages.length > 0
                    ? <>