Preview & upload support for audio & video files (#14)

* Accept audio & video files for upload

* Rename image related variables

* Implement getAssetType util

* Preview & upload support for video files

* Preview & upload support for audio files

* Preview update for audio files

* New look for audio previews on asset list

* Remove extra refs

Co-authored-by: findolor <anakisci@gmail.com>

components/MetadataFormGroup.tsx

@@ -1,4 +1,7 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable jsx-a11y/media-has-caption */
 import type { ReactNode } from 'react'
+import { getAssetType } from 'utils/getAssetType'
 
 export interface MetadataFormGroupProps {
   title: string
@@ -19,7 +22,27 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
           <div>
             {relatedAsset && (
               <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
-                <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
+                {getAssetType(relatedAsset.name) === 'audio' && (
+                  <audio
+                    controls
+                    id="audio"
+                    onMouseEnter={(e) => e.currentTarget.play()}
+                    onMouseLeave={(e) => e.currentTarget.pause()}
+                    src={URL.createObjectURL(relatedAsset)}
+                  />
+                )}
+                {getAssetType(relatedAsset.name) === 'video' && (
+                  <video
+                    controls
+                    id="video"
+                    onMouseEnter={(e) => e.currentTarget.play()}
+                    onMouseLeave={(e) => e.currentTarget.pause()}
+                    src={URL.createObjectURL(relatedAsset)}
+                  />
+                )}
+                {getAssetType(relatedAsset.name) === 'image' && (
+                  <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
+                )}
               </div>
             )}
           </div>

components/MetadataModal.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
@@ -11,7 +12,7 @@ import { MetadataAttributes } from './forms/MetadataAttributes'
 import { MetadataFormGroup } from './MetadataFormGroup'
 
 export interface MetadataModalProps {
-  imageFile: File
+  assetFile: File
   metadataFile: File
   updateMetadata: (metadataFile: File) => void
   updatedMetadataFile: File
@@ -114,8 +115,8 @@ export const MetadataModal = (props: MetadataModalProps) => {
           htmlFor="temp"
         >
           <MetadataFormGroup
-            relatedAsset={props.imageFile}
-            subtitle={`Asset name: ${props.imageFile?.name}`}
+            relatedAsset={props.assetFile}
+            subtitle={`Asset filename: ${props.assetFile?.name}`}
             title="Update Metadata"
           >
             <TextInput {...nameState} onChange={(e) => nameState.onChange(e.target.value)} />