Add Dynamic Resizing to Piano Roll

gabe-serna · Nov 14, 2024 · 0c6871e · 0c6871e
1 parent 7a3c2f6
commit 0c6871e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/app/DemoSection.tsx b/app/DemoSection.tsx
@@ -76,7 +76,7 @@ export default function DemoSection() {
   return (
     <section
       id="demo"
-      className="flex h-[120vh] w-screen flex-col items-center justify-start pt-12 sm:w-[calc(100vw-12px)] lg:pt-16 xl:pt-20"
+      className="flex h-[120vh] w-full flex-col items-center justify-start pt-12 max-lg:px-8 sm:w-[calc(100vw-12px)] lg:pt-16 xl:pt-20"
     >
       <h1 className="text-2xl font-semibold leading-tight sm:text-3xl xl:text-4xl">
         Try it Out!
@@ -89,6 +89,7 @@ export default function DemoSection() {
             midiFile={samples.midiBlob as Blob}
             controls={[midiControls, originalAudioControls]}
             pageUpdate={pageUpdate}
+            isDemo={true}
           />
         )}
         <Accordion

diff --git a/app/audio/midi/page.tsx b/app/audio/midi/page.tsx
diff --git a/components/AudioMidiVisualizer.tsx b/components/AudioMidiVisualizer.tsx
@@ -19,6 +19,7 @@ interface Props {
   midiFile: Blob;
   controls: Controls[];
   pageUpdate: boolean;
+  isDemo?: boolean;
 }
 
 export default function AudioMidiVisualizer({
@@ -27,6 +28,7 @@ export default function AudioMidiVisualizer({
   midiFile,
   controls,
   pageUpdate,
+  isDemo = false,
 }: Props) {
   const wavesurferRef = useRef<WaveSurfer | null>(null);
   const parentRef = useRef<HTMLDivElement | null>(null);
@@ -211,6 +213,7 @@ export default function AudioMidiVisualizer({
             duration={duration}
             volume={midiVol}
             pan={midiPan}
+            isDemo={isDemo}
           />
         ) : (
           <Skeleton className="mb-9 flex h-[300px] items-center justify-center rounded-2xl bg-accent text-card-foreground shadow-lg dark:shadow-stone-900 xl:h-[400px]">

diff --git a/components/PianoRoll.tsx b/components/PianoRoll.tsx
@@ -18,6 +18,7 @@ interface PianoRollProps {
   duration: number;
   volume: number;
   pan: number;
+  isDemo?: boolean;
 }
 
 interface MidiNote {
@@ -36,6 +37,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
   duration,
   volume,
   pan,
+  isDemo = false,
 }) => {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const pianoKeysCanvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -56,7 +58,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
 
   // Constants
   const pianoKeyWidth = 50;
-  const containerWidth = parentRef.current?.clientWidth || 800 - pianoKeyWidth;
+  const [containerWidth, setContainerWidth] = useState(0);
   const noteHeight = containerWidth > 600 ? 7 : containerWidth > 300 ? 6 : 5;
   const totalNotes = 88;
   const canvasHeight = totalNotes * noteHeight;
@@ -72,6 +74,11 @@ const PianoRoll: React.FC<PianoRollProps> = ({
 
   useEffect(() => {
     // Parse the MIDI file
+    if (!parentRef.current) return;
+    if (containerWidth === 0) {
+      setContainerWidth(parentRef.current.clientWidth - pianoKeyWidth);
+      return;
+    }
     const reader = new FileReader();
     reader.onload = async () => {
       const arrayBuffer = await midiFile.arrayBuffer();
@@ -101,7 +108,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
     };
 
     reader.readAsArrayBuffer(midiFile);
-  }, [midiFile]);
+  }, [midiFile, containerWidth]);
 
   // Draw piano keys with active notes highlighted
   const drawPianoKeys = (activeNotes: Set<string> = activeNotesRef.current) => {
@@ -176,7 +183,9 @@ const PianoRoll: React.FC<PianoRollProps> = ({
     const measures = containerWidth > 600 ? 8 : containerWidth > 300 ? 6 : 4;
     const viewLength = measures * 4 * secondsPerBeat;
     const timeScale = containerWidth / viewLength; // Pixels Per Second
-    canvas.width = duration * timeScale + containerWidth - pianoKeyWidth;
+    canvas.width = duration * timeScale + containerWidth;
+    if (!isDemo) canvas.width -= pianoKeyWidth - 40;
+    else canvas.width -= 5;
 
     ctx.clearRect(0, 0, containerWidth, height);
 
@@ -331,6 +340,24 @@ const PianoRoll: React.FC<PianoRollProps> = ({
     }
   }, [pageUpdate]);
 
+  // Add ResizeObserver effect
+  useEffect(() => {
+    if (!parentRef.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width - pianoKeyWidth);
+      }
+    });
+
+    resizeObserver.observe(parentRef.current);
+
+    // Cleanup
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
   return (
     <>
       <div