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

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 = {

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

js/packages/web/package.json

@@ -94,4 +94,4 @@
     "react-dom": "*"
   },
   "license": "MIT"
-}
+}

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/') ? (
       <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}

js/packages/web/src/styles/app.less

@@ -90,6 +90,11 @@ code {
     height: 300px;
     object-fit: cover;
   }
+  iframe {
+    height: 300px;
+    object-fit: cover;
+    border:none;
+  }
 }
 
 .placebid {

js/packages/web/src/views/art/index.tsx

@@ -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"

js/packages/web/src/views/artCreate/index.tsx

@@ -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',