Merge pull request #25 from deus-labs/fix-video-preview-flicker

Fix blinking/flicker on audio and video previews

components/MetadataFormGroup.tsx

@@ -1,6 +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 { getAssetType } from 'utils/getAssetType'
 
 export interface MetadataFormGroupProps {
@@ -13,6 +14,32 @@ export interface MetadataFormGroupProps {
 export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
   const { title, subtitle, relatedAsset, children } = props
 
+  const videoPreview = useMemo(
+    () => (
+      <video
+        controls
+        id="video"
+        onMouseEnter={(e) => e.currentTarget.play()}
+        onMouseLeave={(e) => e.currentTarget.pause()}
+        src={relatedAsset ? URL.createObjectURL(relatedAsset) : ''}
+      />
+    ),
+    [relatedAsset],
+  )
+
+  const audioPreview = useMemo(
+    () => (
+      <audio
+        controls
+        id="audio"
+        onMouseEnter={(e) => e.currentTarget.play()}
+        onMouseLeave={(e) => e.currentTarget.pause()}
+        src={relatedAsset ? URL.createObjectURL(relatedAsset) : ''}
+      />
+    ),
+    [relatedAsset],
+  )
+
   return (
     <div className="flex p-4 pt-0 space-x-4 w-full">
       <div className="flex flex-col w-1/3">
@@ -22,24 +49,8 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
           <div>
             {relatedAsset && (
               <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
-                {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) === 'audio' && audioPreview}
+                {getAssetType(relatedAsset.name) === 'video' && videoPreview}
                 {getAssetType(relatedAsset.name) === 'image' && (
                   <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
                 )}

components/collections/creation/UploadDetails.tsx

@@ -7,7 +7,7 @@ import { useInputState } from 'components/forms/FormInput.hooks'
 import { MetadataModal } from 'components/MetadataModal'
 import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collection'
 import type { ChangeEvent } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import type { UploadServiceType } from 'services/upload'
 import { getAssetType } from 'utils/getAssetType'
@@ -139,6 +139,31 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
     }
   }
 
+  const videoPreviewElements = useMemo(() => {
+    const tempArray: JSX.Element[] = []
+    assetFilesArray.forEach((assetFile) => {
+      if (getAssetType(assetFile.name) === 'video') {
+        tempArray.push(
+          <video
+            key={assetFile.name}
+            className="absolute px-1 my-1 thumbnail"
+            id="video"
+            muted
+            onMouseEnter={(e) => {
+              void e.currentTarget.play()
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.pause()
+              e.currentTarget.currentTime = 0
+            }}
+            src={URL.createObjectURL(assetFile)}
+          />,
+        )
+      }
+    })
+    return tempArray
+  }, [assetFilesArray])
+
   useEffect(() => {
     try {
       checkAssetMetadataMatch()
@@ -400,25 +425,20 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                           htmlFor="my-modal-4"
                         >
                           {getAssetType(assetSource.name) === 'audio' && (
-                            <div className="flex relative flex-col items-center mt-2 ml-2">
+                            <div className="flex absolute flex-col items-center mt-4 ml-2">
                               <img
                                 key={`audio-${index}`}
                                 alt="audio_icon"
-                                className="relative mb-2 ml-1 w-6 h-6 thumbnail"
+                                className="mb-2 ml-1 w-6 h-6 thumbnail"
                                 src="/audio.png"
                               />
-                              <span className="relative self-center">{assetSource.name}</span>
+                              <span className="flex self-center ">{assetSource.name}</span>
                             </div>
                           )}
-                          {getAssetType(assetSource.name) === 'video' && (
-                            <video
-                              id="video"
-                              muted
-                              onMouseEnter={(e) => e.currentTarget.play()}
-                              onMouseLeave={(e) => e.currentTarget.pause()}
-                              src={URL.createObjectURL(assetSource)}
-                            />
-                          )}
+                          {getAssetType(assetSource.name) === 'video' &&
+                            videoPreviewElements.filter(
+                              (videoPreviewElement) => videoPreviewElement.key === assetSource.name,
+                            )}
 
                           {getAssetType(assetSource.name) === 'image' && (
                             <img