Vojtech Simetka
f4013142af
* chore: upload flow uses metadata object and has preview * chore: remove SwarmFile * feat: upload metadata and file preview * feat: add metadata and preview on download * fix: package the meta and preview files * fix: upload websites that are inside a folder (#296) * fix: upload websites that are inside a folder * docs: few comments to clarify what is going on * refactor: decrease local variables and fix state order to detect websites properly Co-authored-by: Cafe137 <aron@aronsoos.com>
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import { Box, Grid, Typography } from '@material-ui/core'
|
|
import { Web } from '@material-ui/icons'
|
|
import { ReactElement } from 'react'
|
|
import { File, Folder } from 'react-feather'
|
|
import { FitImage } from '../../components/FitImage'
|
|
import { getHumanReadableFileSize } from '../../utils/file'
|
|
import { AssetIcon } from './AssetIcon'
|
|
import { shortenHash } from '../../utils/hash'
|
|
|
|
interface Props {
|
|
previewUri?: string
|
|
metadata?: Metadata
|
|
}
|
|
|
|
// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)
|
|
|
|
export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
|
|
let previewComponent = <File />
|
|
let type = metadata?.type
|
|
|
|
if (metadata?.isWebsite) {
|
|
previewComponent = <Web />
|
|
type = 'Website'
|
|
} else if (metadata?.type === 'folder') {
|
|
previewComponent = <Folder />
|
|
type = 'Folder'
|
|
}
|
|
|
|
return (
|
|
<Box mb={4}>
|
|
<Box bgcolor="background.paper">
|
|
<Grid container direction="row">
|
|
{previewUri ? (
|
|
<FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
|
|
) : (
|
|
<AssetIcon icon={previewComponent} />
|
|
)}
|
|
<Box p={2}>
|
|
{metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
|
|
<Typography>
|
|
{metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {metadata?.name}
|
|
</Typography>
|
|
<Typography>Kind: {type}</Typography>
|
|
{metadata?.size && <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography>}
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
{metadata?.type === 'folder' && metadata.count && (
|
|
<Box mt={0.25} p={2} bgcolor="background.paper">
|
|
<Grid container justifyContent="space-between" alignItems="center" direction="row">
|
|
<Typography variant="subtitle2">Folder content</Typography>
|
|
<Typography variant="subtitle2">{metadata.count} items</Typography>
|
|
</Grid>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|