fixed ogg error and rerendering lag

teia-community · Jan 4, 2025 · d30eee5 · d30eee5
1 parent 7443f99
commit d30eee5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/src/components/form/FormFields.jsx b/src/components/form/FormFields.jsx
@@ -39,6 +39,7 @@ export const FormFields = ({ value, field, error, register, control }) => {
     shallow
   )
   const [showVisualizer, setShowVisualizer] = useState(false)
+  const [audioBlob, setAudioBlob] = useState(null)
   const visualizerRef = useRef(null)
   const AUDIO_MIME_TYPES = [
     'audio/mpeg',
@@ -168,13 +169,20 @@ export const FormFields = ({ value, field, error, register, control }) => {
           rules={field.rules}
           render={({ field: { onChange, value, name, ref } }) => {
             const fileValue = watch(value)
-
             const isAudioMimeType =
               fileValue &&
               AUDIO_MIME_TYPES.includes(fileValue.artifact?.mimeType)
-            const audioBlob = processAudioForVisualizer(
-              fileValue?.artifact.reader
-            )
+
+            const handleShowVisualizer = () => {
+              if (!showVisualizer && fileValue?.artifact?.reader) {
+                const blob = processAudioForVisualizer(
+                  fileValue.artifact.reader
+                )
+                // Store the processed blob on the fileValue object itself
+                setAudioBlob(blob)
+              }
+              setShowVisualizer(true)
+            }
 
             const containerStyle = {
               position: 'relative',
@@ -228,7 +236,7 @@ export const FormFields = ({ value, field, error, register, control }) => {
                 {isAudioMimeType && !showVisualizer && (
                   <Button
                     className={styles['visualizer-image-download-button']}
-                    onClick={() => setShowVisualizer(true)}
+                    onClick={() => handleShowVisualizer(true)}
                   >
                     Generate Audio Visualization
                   </Button>

diff --git a/src/components/media-types/index.tsx b/src/components/media-types/index.tsx
@@ -152,6 +152,7 @@ export const RenderMediaType = ({
         )
       /* AUDIO */
       case MIMETYPE.MP3:
+      case MIMETYPE.OGG:
       case MIMETYPE.OGA:
       case MIMETYPE.FLAC:
       case MIMETYPE.WAV:

diff --git a/src/components/media-types/unknown/index.jsx b/src/components/media-types/unknown/index.jsx
@@ -1,12 +1,39 @@
-import styles from '@style'
+import { useEffect, useState } from 'react'
 
 export const UnknownComponent = ({ mimeType }) => {
-  /*   const [queue, updateQueue] = useState()
-  updateQueue(await axios.post(import.meta.env.VITE_GRAPHQL_STATUS).then(res => res.data))
- */
+  const [processingState, setProcessingState] = useState('checking')
+
+  useEffect(() => {
+    // If we have a mimeType that's known (like PNG), but we're still hitting this component,
+    // it likely means we're in a metadata processing state
+    const isKnownMimeType = mimeType?.toLowerCase().includes('png')
+
+    if (isKnownMimeType) {
+      setProcessingState('processing')
+    } else {
+      setProcessingState('unknown')
+    }
+  }, [mimeType])
+
   return (
-    <div className={styles.container}>
-      <div className={styles.square}>Metadata on queue</div>
+    <div className="flex items-center justify-center p-4">
+      <div className="bg-gray-100 rounded p-4 text-center">
+        {processingState === 'processing' ? (
+          <div>
+            <p>Metadata processing...</p>
+            <p className="text-sm text-gray-500">
+              Please wait while we process your file
+            </p>
+          </div>
+        ) : (
+          <div>
+            <p>Unknown file type: {mimeType}</p>
+            <p className="text-sm text-gray-500">
+              This file type is not supported
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   )
 }