Merge pull request #97 from public-awesome/html-file-support

Upload support for .html files during collection creation

.env.example

@@ -1,4 +1,4 @@
-APP_VERSION=0.4.1
+APP_VERSION=0.4.2
 
 NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
 NEXT_PUBLIC_SG721_CODE_ID=793

components/AssetsPreview.tsx

@@ -96,6 +96,18 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
               />
             </div>
           )}
+
+          {getAssetType(assetSource.name) === 'html' && (
+            <div className="flex absolute flex-col items-center mt-4 ml-2">
+              <img
+                key={`html-${index}`}
+                alt="html_icon"
+                className={clsx('mb-2 ml-1 w-10 h-10 thumbnail')}
+                src="/html.png"
+              />
+              <span className="flex self-center">{assetSource.name.toLowerCase()}</span>
+            </div>
+          )}
         </label>
       </button>
     ))

components/MetadataFormGroup.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable jsx-a11y/media-has-caption */
 import type { ReactNode } from 'react'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { getAssetType } from 'utils/getAssetType'
 
 export interface MetadataFormGroupProps {
@@ -13,6 +13,7 @@ export interface MetadataFormGroupProps {
 
 export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
   const { title, subtitle, relatedAsset, children } = props
+  const [htmlContents, setHtmlContents] = useState<string>('')
 
   const videoPreview = useMemo(
     () => (
@@ -40,6 +41,17 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
     [relatedAsset],
   )
 
+  useEffect(() => {
+    if (getAssetType(relatedAsset?.name as string) !== 'html') return
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (typeof e.target?.result === 'string') {
+        setHtmlContents(e.target.result)
+      }
+    }
+    reader.readAsText(new Blob([relatedAsset as File]))
+  }, [relatedAsset])
+
   return (
     <div className="flex p-4 pt-0 space-x-4 w-full">
       <div className="flex flex-col w-1/3">
@@ -54,6 +66,9 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}
+                {getAssetType(relatedAsset.name) === 'html' && (
+                  <iframe allowFullScreen height="420px" srcDoc={htmlContents} title="Preview" width="100%" />
+                )}
               </div>
             )}
           </div>

components/SingleAssetPreview.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable jsx-a11y/media-has-caption */
 import type { ReactNode } from 'react'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { getAssetType } from 'utils/getAssetType'
 
 export interface SingleAssetPreviewProps {
@@ -13,6 +13,7 @@ export interface SingleAssetPreviewProps {
 
 export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
   const { subtitle, relatedAsset, updateMetadataFileIndex, children } = props
+  const [htmlContents, setHtmlContents] = useState<string>('')
 
   const videoPreview = useMemo(
     () => (
@@ -40,6 +41,17 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
     [relatedAsset],
   )
 
+  useEffect(() => {
+    if (getAssetType(relatedAsset?.name as string) !== 'html') return
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (typeof e.target?.result === 'string') {
+        setHtmlContents(e.target.result)
+      }
+    }
+    reader.readAsText(new Blob([relatedAsset as File]))
+  }, [relatedAsset])
+
   return (
     <div className="flex p-4 pt-0 mt-11 ml-24 space-x-4 w-full">
       <div className="flex flex-col w-full">
@@ -53,6 +65,9 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}
+                {getAssetType(relatedAsset.name) === 'html' && (
+                  <iframe allowFullScreen height="300px" srcDoc={htmlContents} title="Preview" width="100%" />
+                )}
               </div>
             )}
           </div>

components/collections/creation/UploadDetails.tsx

@@ -441,7 +441,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
                       )}
                     >
                       <input
-                        accept="image/*, audio/*, video/*"
+                        accept="image/*, audio/*, video/*, .html"
                         className={clsx(
                           'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                           'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
@@ -488,7 +488,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
                       </div>
                     </div>
                   )}
-                  <Conditional test={assetFilesArray.length > 1}>
+                  <Conditional test={assetFilesArray.length >= 1}>
                     <MetadataModal
                       assetFile={assetFilesArray[metadataFileArrayIndex]}
                       metadataFile={metadataFilesArray[metadataFileArrayIndex]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargaze-studio",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "workspaces": [
     "packages/*"
   ],

pages/collections/create.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
+
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
@@ -576,12 +576,13 @@ const CollectionCreationPage: NextPage = () => {
 
                 if (
                   getAssetType(uploadDetails.assetFiles[i].name) === 'audio' ||
-                  getAssetType(uploadDetails.assetFiles[i].name) === 'video'
+                  getAssetType(uploadDetails.assetFiles[i].name) === 'video' ||
+                  getAssetType(uploadDetails.assetFiles[i].name) === 'html'
                 ) {
                   data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
                 }
-
+                if (getAssetType(uploadDetails.assetFiles[i].name) !== 'html')
-                data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
+                  data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
 
                 const metadataFileBlob = new Blob([JSON.stringify(data)], {
                   type: 'application/json',

utils/getAssetType.ts

@@ -1,6 +1,6 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-export type AssetType = 'image' | 'audio' | 'video' | 'unknown'
+export type AssetType = 'image' | 'audio' | 'video' | 'html' | 'unknown'
 
 export const getAssetType = (assetFileName: string): AssetType => {
   const assetType = assetFileName?.split('.').pop() || 'unknown'
@@ -8,5 +8,6 @@ export const getAssetType = (assetFileName: string): AssetType => {
     return 'image'
   if (assetType === 'mp3' || assetType === 'wav') return 'audio'
   if (assetType === 'mp4') return 'video'
+  if (assetType === 'html') return 'html'
   return 'unknown'
 }