Added HTML file support to the animation_url parameter (#395)
* Changed stuff * working now * Reset customized files * Removed import * Fixed formatting * Added display flex to html style assets Some last minute changes to make the html category style match better with the other types
This commit is contained in:
parent
fda50663d7
commit
09d323accd
|
@ -51,6 +51,7 @@ export enum MetadataCategory {
|
|||
Video = 'video',
|
||||
Image = 'image',
|
||||
VR = 'vr',
|
||||
HTML = 'html',
|
||||
}
|
||||
|
||||
export type MetadataFile = {
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
REACT_APP_STORE_OWNER_ADDRESS_ADDRESS=
|
||||
REACT_APP_STORE_ADDRESS=
|
||||
REACT_APP_BIG_STORE=FALSE
|
||||
REACT_APP_BIG_STORE=FALSE
|
|
@ -94,4 +94,4 @@
|
|||
"react-dom": "*"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
|
@ -112,7 +112,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)}
|
||||
|
@ -158,6 +158,45 @@ 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,
|
||||
|
@ -232,6 +271,14 @@ export const ArtContent = ({
|
|||
animationURL={animationURL}
|
||||
active={active}
|
||||
/>
|
||||
) : (category === 'html' || animationUrlExt === 'html') ? (
|
||||
<HTMLContent
|
||||
uri={uri}
|
||||
animationUrl={animationURL}
|
||||
className={className}
|
||||
style={style}
|
||||
files={files}
|
||||
/>
|
||||
) : (
|
||||
<CachedImageContent
|
||||
uri={uri}
|
||||
|
|
|
@ -90,6 +90,11 @@ code {
|
|||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
iframe {
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
.placebid {
|
||||
|
|
|
@ -79,7 +79,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"
|
||||
|
|
|
@ -281,6 +281,18 @@ const CategoryStep = (props: {
|
|||
</div>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button
|
||||
className="type-btn"
|
||||
size="large"
|
||||
onClick={() => props.confirm(MetadataCategory.HTML)}
|
||||
>
|
||||
<div>
|
||||
<div>HTML Asset</div>
|
||||
<div className="type-btn-description">HTML</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
@ -323,6 +335,8 @@ const UploadStep = (props: {
|
|||
return 'Upload your video creation (MP4, MOV, GLB)';
|
||||
case MetadataCategory.VR:
|
||||
return 'Upload your AR/VR creation (GLB)';
|
||||
case MetadataCategory.HTML:
|
||||
return 'Upload your HTML File (HTML)';
|
||||
default:
|
||||
return 'Please go back and choose a category';
|
||||
}
|
||||
|
@ -338,6 +352,8 @@ const UploadStep = (props: {
|
|||
return '.mp4,.mov,.webm';
|
||||
case MetadataCategory.VR:
|
||||
return '.glb';
|
||||
case MetadataCategory.HTML:
|
||||
return '.html';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
@ -477,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();
|
||||
|
@ -1136,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