working now

js/packages/web/src/components/ArtContent/index.tsx

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

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

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

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

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

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

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