Merge pull request #203 from public-awesome/badge-creation-video-support

Badge creation video asset support

components/badges/creation/BadgeDetails.tsx

@@ -44,7 +44,7 @@ export interface BadgeDetailsDataProps {
   youtube_url?: string
 }
 
-export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
+export const BadgeDetails = ({ metadataSize, onChange, uploadMethod }: BadgeDetailsProps) => {
   const wallet = useWallet()
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [transferrable, setTransferrable] = useState<boolean>(false)
@@ -192,6 +192,10 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
       })
   }, [metadataFile])
 
+  useEffect(() => {
+    animationUrlState.onChange('')
+  }, [uploadMethod])
+
   useEffect(() => {
     try {
       const data: BadgeDetailsDataProps = {
@@ -266,6 +270,7 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
           <TextInput className="mt-2" {...nameState} />
           <TextInput className="mt-2" {...descriptionState} />
           <NumberInput className="mt-2" {...maxSupplyState} />
+          {uploadMethod === 'existing' ? <TextInput className="mt-2" {...animationUrlState} /> : null}
           <TextInput className="mt-2" {...externalUrlState} />
 
           <FormControl className="mt-2" htmlId="expiry-date" subtitle="Badge minting expiry date" title="Expiry Date">

components/badges/creation/ImageUploadDetails.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
-
+/* eslint-disable jsx-a11y/media-has-caption */
 /* eslint-disable no-misleading-character-class */
 /* eslint-disable no-control-regex */
 
@@ -10,9 +10,10 @@ import { TextInput } from 'components/forms/FormInput'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { SingleAssetPreview } from 'components/SingleAssetPreview'
 import type { ChangeEvent } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
+import { getAssetType } from 'utils/getAssetType'
 
 export type UploadMethod = 'new' | 'existing'
 export type MintRule = 'by_key' | 'by_minter' | 'by_keys' | 'not_resolved'
@@ -129,6 +130,22 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
     imageUrlState.onChange('')
   }, [uploadMethod, mintRule])
 
+  const videoPreview = useMemo(
+    () => (
+      <video
+        className="ml-4"
+        controls
+        id="video"
+        onMouseEnter={(e) => e.currentTarget.play()}
+        onMouseLeave={(e) => e.currentTarget.pause()}
+        src={
+          imageUrlState.value ? imageUrlState.value.replace('ipfs://', 'https://ipfs-gw.stargaze-apis.com/ipfs/') : ''
+        }
+      />
+    ),
+    [imageUrlState.value],
+  )
+
   return (
     <div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
       <div className="flex justify-center">
@@ -190,13 +207,16 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
             <div className="flex flex-row w-full">
               <TextInput {...imageUrlState} className="mt-2 ml-6 w-full max-w-2xl" />
               <Conditional test={imageUrlState.value !== ''}>
-                <div className="mt-2 ml-4 w-1/4 border-2 border-dashed">
-                  <img
-                    alt="badge-preview"
-                    className="w-full"
-                    src={imageUrlState.value.replace('IPFS://', 'ipfs://').replace(/,/g, '').replace(/"/g, '').trim()}
-                  />
-                </div>
+                {getAssetType(imageUrlState.value) === 'image' && (
+                  <div className="mt-2 ml-4 w-1/4 border-2 border-dashed">
+                    <img
+                      alt="badge-preview"
+                      className="w-full"
+                      src={imageUrlState.value.replace('IPFS://', 'ipfs://').replace(/,/g, '').replace(/"/g, '').trim()}
+                    />
+                  </div>
+                )}
+                {getAssetType(imageUrlState.value) === 'video' && videoPreview}
               </Conditional>
             </div>
           </div>
@@ -277,7 +297,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
                         )}
                       >
                         <input
-                          accept="image/*"
+                          accept="image/*, video/*"
                           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',

pages/badges/create.tsx

@@ -41,6 +41,7 @@ import * as secp256k1 from 'secp256k1'
 import { upload } from 'services/upload'
 import { copy } from 'utils/clipboard'
 import { BADGE_HUB_ADDRESS, BLOCK_EXPLORER_URL, NETWORK } from 'utils/constants'
+import { getAssetType } from 'utils/getAssetType'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 import { uid } from 'utils/random'
@@ -184,7 +185,6 @@ const BadgeCreationPage: NextPage = () => {
       if (!badgeHubContract) throw new Error('Contract not found')
       setCreatingBadge(true)
       const coverUrl = await handleImageUrl()
-
       const badge = {
         manager: badgeDetails?.manager as string,
         metadata: {
@@ -195,7 +195,11 @@ const BadgeCreationPage: NextPage = () => {
           external_url: badgeDetails?.external_url || undefined,
           attributes: badgeDetails?.attributes || undefined,
           background_color: badgeDetails?.background_color || undefined,
-          animation_url: badgeDetails?.animation_url || undefined,
+          animation_url: badgeDetails?.animation_url
+            ? badgeDetails.animation_url
+            : imageUploadDetails?.assetFile && getAssetType(imageUploadDetails.assetFile.name) === 'video'
+            ? coverUrl
+            : undefined,
           youtube_url: badgeDetails?.youtube_url || undefined,
         },
         transferrable: badgeDetails?.transferrable as boolean,