Click to pick items

Author: benfoxall

src/App.tsx

@@ -6,19 +6,43 @@ import { Compare } from "./Compare";
 
 function App() {
   const [blobs, setBlobs] = useState<Blob[]>([]);
+  const [picked, setPicked] = useState<Blob[]>([]);
+  console.log({ blobs, picked });
 
   return (
     <>
       <h1>Audiovis</h1>
-      <RecordAudio onCreated={(b) => setBlobs((prev) => [b, ...prev])} />
 
-      {blobs.length === 2 ? (
-        <Compare a={blobs[0]} b={blobs[1]} />
+      {picked.length === 2 ? (
+        <>
+          <h4>
+            <button onClick={() => setPicked([])}>&larr;</button> Comparing
+          </h4>
+
+          <Compare a={picked[0]} b={picked[1]} />
+        </>
       ) : (
-        blobs.map((blob, i) => <Audiovis key={i} srcObject={blob} />)
+        <>
+          <RecordAudio onCreated={(b) => setBlobs((prev) => [b, ...prev])} />
+
+          {blobs.map((blob, i) => (
+            <Audiovis
+              key={i}
+              srcObject={blob}
+              picked={picked.includes(blob)}
+              onPick={() => setPicked((prev) => toggle(prev, blob))}
+            />
+          ))}
+        </>
       )}
     </>
   );
 }
 
+function toggle<T>(list: T[], item: T): T[] {
+  return list.includes(item)
+    ? list.filter((each) => each !== item)
+    : [...list, item];
+}
+
 export default App;

src/Audiovis.module.css

@@ -7,10 +7,16 @@
   align-items: center;
 
   gap: 2em;
+  padding: 0.5em;
+  border-radius: 5px;
 
   & audio,
   & canvas {
     width: 100%;
     max-height: 20em;
   }
 }
+
+.picked {
+  background-color: #fff1;
+}

src/Audiovis.tsx

@@ -3,12 +3,19 @@ import styles from "./Audiovis.module.css";
 import { useAudioCtx } from "./AudioCtxCtx";
 import { spectrum, spectrumToImage } from "./util";
 
-export const Audiovis: FC<{ srcObject: Blob }> = ({ srcObject }) => {
+export const Audiovis: FC<{
+  srcObject: Blob;
+  picked: boolean;
+  onPick: () => void;
+}> = ({ srcObject, picked, onPick }) => {
   const url = useMemo(() => URL.createObjectURL(srcObject), [srcObject]);
   const buffer = useAudioBuffer(srcObject);
 
   return (
-    <section className={styles.container}>
+    <section
+      className={classes(styles.container, picked && styles.picked)}
+      onClick={onPick}
+    >
       <audio src={url} controls />
 
       {buffer && <Waveform audio={buffer} />}
@@ -91,3 +98,7 @@ const Sonogram: FC<{ audio: AudioBuffer }> = ({ audio }) => {
 
   return <canvas ref={canvas} className={styles.waveform} />;
 };
+
+function classes(...list: (string | false)[]) {
+  return list.filter(Boolean).join(" ");
+}

src/RecordAudio.tsx

@@ -27,13 +27,13 @@ const RecordAudio: FC<{ onCreated: (blob: Blob) => void }> = ({
       for (const track of stream.getTracks()) {
         track.stop();
       }
-    }, 8000); // Stop recording after 5 seconds
+    }, 5000); // Stop recording after 5 seconds
   };
 
   return (
     <div>
       <button onClick={startRecording} disabled={isRecording}>
-        {isRecording ? "Recording..." : "Start Recording"}
+        {isRecording ? "Recording..." : "Add Recording"}
       </button>
     </div>
   );