feat: sync and update with all changes from fork (#720)
* feat: sync and update with all changes from fork * refactor: extract clipboard copy logic into custom hook * fix: correct spelling of DEFAULT_REFRESH_FREQUENCY_MS in Stamps and WalletBalance providers * refactor(ui-tests): replace fixed sleeps with condition-based waits * fix: handle null values for size and granteeCount in infoGroups * fix(lint): add newline at end of file in useClipboardCopy hook * fix(ui-tests): page.goto URL * refactor: update import paths for useClipboardCopy --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>
This commit is contained in:
@@ -1,44 +1,45 @@
|
||||
import { Box, Grid, Typography } from '@material-ui/core'
|
||||
import { Web } from '@material-ui/icons'
|
||||
import { Web } from '@mui/icons-material'
|
||||
import { Box, Grid, Typography } from '@mui/material'
|
||||
import { ReactElement, useMemo } from 'react'
|
||||
import File from 'remixicon-react/FileLineIcon'
|
||||
import Folder from 'remixicon-react/FolderLineIcon'
|
||||
|
||||
import { FitAudio } from '../../components/FitAudio'
|
||||
import { FitImage } from '../../components/FitImage'
|
||||
import { FitVideo } from '../../components/FitVideo'
|
||||
import { shortenText } from '../../utils'
|
||||
import { getHumanReadableFileSize } from '../../utils/file'
|
||||
import { shortenHash } from '../../utils/hash'
|
||||
|
||||
import { AssetIcon } from './AssetIcon'
|
||||
import { FitVideo } from '../../components/FitVideo'
|
||||
import { FitAudio } from '../../components/FitAudio'
|
||||
|
||||
interface Props {
|
||||
previewUri?: string
|
||||
metadata?: Metadata
|
||||
}
|
||||
|
||||
/* eslint-disable react/display-name */
|
||||
const getPreviewComponent = (previewUri?: string, metadata?: Metadata) => {
|
||||
const getPreviewElement = (previewUri?: string, metadata?: Metadata) => {
|
||||
if (metadata?.isVideo) {
|
||||
return () => <FitVideo src={previewUri} maxWidth="250px" maxHeight="175px" />
|
||||
return <FitVideo src={previewUri} maxWidth="250px" maxHeight="175px" />
|
||||
}
|
||||
|
||||
if (metadata?.isAudio) {
|
||||
return () => <FitAudio src={previewUri} maxWidth="250px" />
|
||||
return <FitAudio src={previewUri} maxWidth="250px" />
|
||||
}
|
||||
|
||||
if (metadata?.isImage) {
|
||||
return () => <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
|
||||
return <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
|
||||
}
|
||||
|
||||
if (metadata?.isWebsite) {
|
||||
return () => <AssetIcon icon={<Web />} />
|
||||
return <AssetIcon icon={<Web />} />
|
||||
}
|
||||
|
||||
if (metadata?.type === 'folder') {
|
||||
return () => <AssetIcon icon={<Folder />} />
|
||||
return <AssetIcon icon={<Folder />} />
|
||||
}
|
||||
|
||||
return () => <AssetIcon icon={<File />} />
|
||||
return <AssetIcon icon={<File />} />
|
||||
}
|
||||
|
||||
const getType = (metadata?: Metadata) => {
|
||||
@@ -51,14 +52,14 @@ const getType = (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 {
|
||||
const PreviewAssetComponent = useMemo(() => getPreviewComponent(previewUri, metadata), [metadata, previewUri])
|
||||
const previewElement = useMemo(() => getPreviewElement(previewUri, metadata), [metadata, previewUri])
|
||||
const type = useMemo(() => getType(metadata), [metadata])
|
||||
|
||||
return (
|
||||
<Box mb={4}>
|
||||
<Box bgcolor="background.paper">
|
||||
<Grid container direction="row">
|
||||
<PreviewAssetComponent />
|
||||
{previewElement}
|
||||
<Box p={2}>
|
||||
{metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
|
||||
{metadata?.name && metadata?.name !== metadata?.hash && (
|
||||
|
||||
Reference in New Issue
Block a user