working now
This commit is contained in:
parent
0e49fa7fe8
commit
2f06302873
|
@ -113,7 +113,7 @@ const VideoArtContent = ({
|
|||
|
||||
const content =
|
||||
likelyVideo &&
|
||||
likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
|
||||
likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
|
||||
<div className={`${className} square`}>
|
||||
<Stream
|
||||
streamRef={(e: any) => playerRef(e)}
|
||||
|
@ -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
|
||||
|
|
|
@ -86,10 +86,15 @@ code {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
.ant-image-img,
|
||||
video {
|
||||
video{
|
||||
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();
|
||||
|
@ -1150,7 +1152,7 @@ const Congrats = (props: {
|
|||
text: "I've created a new NFT artwork on Metaplex, check it out!",
|
||||
url: `${
|
||||
window.location.origin
|
||||
}/#/art/${props.nft?.metadataAccount.toString()}`,
|
||||
}/#/art/${props.nft?.metadataAccount.toString()}`,
|
||||
hashtags: 'NFT,Crypto,Metaplex',
|
||||
// via: "Metaplex",
|
||||
related: 'Metaplex,Solana',
|
||||
|
|
Loading…
Reference in New Issue