diff --git a/js/packages/common/src/actions/metadata.ts b/js/packages/common/src/actions/metadata.ts
index 0731082..e00d74a 100644
--- a/js/packages/common/src/actions/metadata.ts
+++ b/js/packages/common/src/actions/metadata.ts
@@ -51,6 +51,7 @@ export enum MetadataCategory {
Video = 'video',
Image = 'image',
VR = 'vr',
+ HTML = 'html',
}
export type MetadataFile = {
diff --git a/js/packages/web/.env b/js/packages/web/.env
index f01fb3a..fd4c2c7 100644
--- a/js/packages/web/.env
+++ b/js/packages/web/.env
@@ -1,3 +1,3 @@
REACT_APP_STORE_OWNER_ADDRESS_ADDRESS=
REACT_APP_STORE_ADDRESS=
-REACT_APP_BIG_STORE=FALSE
+REACT_APP_BIG_STORE=FALSE
\ No newline at end of file
diff --git a/js/packages/web/package.json b/js/packages/web/package.json
index e5bc9c0..2b2b26e 100644
--- a/js/packages/web/package.json
+++ b/js/packages/web/package.json
@@ -94,4 +94,4 @@
"react-dom": "*"
},
"license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/js/packages/web/src/components/ArtContent/index.tsx b/js/packages/web/src/components/ArtContent/index.tsx
index e38f92b..3de41cd 100644
--- a/js/packages/web/src/components/ArtContent/index.tsx
+++ b/js/packages/web/src/components/ArtContent/index.tsx
@@ -112,7 +112,7 @@ const VideoArtContent = ({
const content =
likelyVideo &&
- likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
+ likelyVideo.startsWith('https://watch.videodelivery.net/') ? (
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 (
+
+ );
+ }
+ return (
+ );
+};
+
+
export const ArtContent = ({
category,
className,
@@ -232,6 +271,14 @@ export const ArtContent = ({
animationURL={animationURL}
active={active}
/>
+ ) : (category === 'html' || animationUrlExt === 'html') ? (
+
) : (
{
+
+
+
>
@@ -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',