working now
This commit is contained in:
parent
0e49fa7fe8
commit
2f06302873
|
@ -159,6 +159,39 @@ const VideoArtContent = ({
|
|||
return content;
|
||||
};
|
||||
|
||||
const HTMLContent = ({
|
||||
uri,
|
||||
animationUrl,
|
||||
className,
|
||||
style,
|
||||
files,
|
||||
}: {
|
||||
uri?: string;
|
||||
animationUrl?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
files?: (MetadataFile | string)[];
|
||||
}) => {
|
||||
const htmlURL =
|
||||
files && files.length > 0 && typeof files[0] === 'string'
|
||||
? files[0]
|
||||
: animationUrl;
|
||||
const { isLoading } = useCachedImage(htmlURL || '', true);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<CachedImageContent
|
||||
uri={uri}
|
||||
className={className}
|
||||
preview={false}
|
||||
style={{ width: 300, ...style }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" sandbox="allow-scripts" frameBorder="0" src={htmlURL} className={className} style={style}></iframe>;
|
||||
};
|
||||
|
||||
|
||||
export const ArtContent = ({
|
||||
category,
|
||||
className,
|
||||
|
@ -223,6 +256,19 @@ export const ArtContent = ({
|
|||
);
|
||||
}
|
||||
|
||||
if (category === 'html' || animationUrlExt === 'html'
|
||||
) {
|
||||
return (
|
||||
<HTMLContent
|
||||
uri={uri}
|
||||
animationUrl={animationURL}
|
||||
className={className}
|
||||
style={style}
|
||||
files={files}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const content =
|
||||
category === 'video' ? (
|
||||
<VideoArtContent
|
||||
|
|
|
@ -90,6 +90,11 @@ code {
|
|||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
iframe {
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
.placebid {
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
Skeleton,
|
||||
List,
|
||||
Card,
|
||||
AutoComplete,
|
||||
} from 'antd';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useArt, useExtendedArt } from '../../hooks';
|
||||
|
@ -79,7 +80,7 @@ export const ArtView = () => {
|
|||
<Row ref={ref}>
|
||||
<Col xs={{ span: 24 }} md={{ span: 12 }} style={{ padding: '30px' }}>
|
||||
<ArtContent
|
||||
style={{ width: 300 }}
|
||||
style={{ width: '300px', height: '300px', margin: '0 auto' }}
|
||||
height={300}
|
||||
width={300}
|
||||
className="artwork-image"
|
||||
|
|
|
@ -336,7 +336,7 @@ const UploadStep = (props: {
|
|||
case MetadataCategory.VR:
|
||||
return 'Upload your AR/VR creation (GLB)';
|
||||
case MetadataCategory.HTML:
|
||||
return 'Upload your HTML File (.html)';
|
||||
return 'Upload your HTML File (HTML)';
|
||||
default:
|
||||
return 'Please go back and choose a category';
|
||||
}
|
||||
|
@ -352,6 +352,8 @@ const UploadStep = (props: {
|
|||
return '.mp4,.mov,.webm';
|
||||
case MetadataCategory.VR:
|
||||
return '.glb';
|
||||
case MetadataCategory.HTML:
|
||||
return '.html';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
@ -491,7 +493,7 @@ const UploadStep = (props: {
|
|||
}),
|
||||
},
|
||||
image: coverFile?.name || '',
|
||||
animation_url: mainFile && mainFile.name,
|
||||
animation_url: (props.attributes.properties?.category !== MetadataCategory.Image && customURL) ? customURL : mainFile && mainFile.name,
|
||||
});
|
||||
props.setFiles([coverFile, mainFile].filter(f => f) as File[]);
|
||||
props.confirm();
|
||||
|
|
Loading…
Reference in New Issue