Auto-handle animation url for on-chain metadata uploads

components/openEdition/ImageUploadDetails.tsx

@@ -319,7 +319,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
                         )}
                       >
                         <input
-                          accept="image/*"
+                          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',

components/openEdition/OnChainMetadataInputDetails.tsx

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
 import clsx from 'clsx'
+import { Conditional } from 'components/Conditional'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
 import { useWallet } from 'contexts/wallet'
@@ -33,7 +34,7 @@ export interface OnChainMetadataInputDetailsDataProps {
   youtube_url?: string
 }
 
-export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDetailsProps) => {
+export const OnChainMetadataInputDetails = ({ onChange, uploadMethod }: OnChainMetadataInputDetailsProps) => {
   const wallet = useWallet()
   const [timestamp, setTimestamp] = useState<Date | undefined>(undefined)
   const [metadataFile, setMetadataFile] = useState<File>()
@@ -203,7 +204,9 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
           <TextInput className="mt-2" {...nameState} />
           <TextInput className="mt-2" {...descriptionState} />
           <TextInput className="mt-2" {...externalUrlState} />
-          <TextInput className="mt-2" {...animationUrlState} />
+          <Conditional test={uploadMethod === 'existing'}>
+            <TextInput className="mt-2" {...animationUrlState} />
+          </Conditional>
           <TextInput className="mt-2" {...youtubeUrlState} />
         </div>
         <div className={clsx('ml-10')}>

components/openEdition/OpenEditionMinterCreator.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-nested-ternary */
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
@@ -320,7 +321,12 @@ export const OpenEditionMinterCreator = ({
                     description: onChainMetadataInputDetails?.description,
                     attributes: onChainMetadataInputDetails?.attributes,
                     external_url: onChainMetadataInputDetails?.external_url,
-                    animation_url: onChainMetadataInputDetails?.animation_url,
+                    animation_url:
+                      imageUploadDetails?.uploadMethod === 'existing'
+                        ? onChainMetadataInputDetails?.animation_url
+                        : getAssetType(imageUploadDetails?.assetFile?.name as string) === 'video'
+                        ? uri
+                        : undefined,
                     youtube_url: onChainMetadataInputDetails?.youtube_url,
                   }
                 : null,
@@ -443,7 +449,10 @@ export const OpenEditionMinterCreator = ({
         <Conditional test={metadataStorageMethod === 'on-chain'}>
           <div>
             <ImageUploadDetails onChange={setImageUploadDetails} />
-            <OnChainMetadataInputDetails onChange={setOnChainMetadataInputDetails} uploadMethod={undefined} />
+            <OnChainMetadataInputDetails
+              onChange={setOnChainMetadataInputDetails}
+              uploadMethod={imageUploadDetails?.uploadMethod}
+            />
           </div>
         </Conditional>
       </div>