Fix sample view height (#16)

* Fix waveform view on Safari Pass container size into SVG element size to avoid feedback loop between element and resize observer on Safari. Tested on macOS only, not iOS * Improve waveform styling
grddavies · May 18, 2023 · 6a0ff94 · 6a0ff94
1 parent f668951
commit 6a0ff94
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/components/SampleControls/SampleControls.tsx b/src/components/SampleControls/SampleControls.tsx
@@ -51,23 +51,21 @@ export const SampleControls: Component = () => {
         </div>
       </div>
 
-      <div class="px-1 pb-2">
-        <SampleView model={selected()} />
-        <div class="flex pt-2">
-          <Knob
-            value={selected().playbackRate}
-            updateFunc={(value: number) =>
-              mutateSelected((sampler) => {
-                sampler.playbackRate = value;
-              })
-            }
-            defaultValue={1}
-            min={0.01}
-            max={2.0}
-            size={50}
-            label="Playback Speed"
-          />
-        </div>
+      <SampleView model={selected()} />
+      <div class="flex flex-auto align-items-end py-2">
+        <Knob
+          value={selected().playbackRate}
+          updateFunc={(value: number) =>
+            mutateSelected((sampler) => {
+              sampler.playbackRate = value;
+            })
+          }
+          defaultValue={1}
+          min={0.01}
+          max={2.0}
+          size={50}
+          label="Playback Speed"
+        />
       </div>
     </div>
   );

diff --git a/src/components/SampleView/SampleView.tsx b/src/components/SampleView/SampleView.tsx
@@ -120,7 +120,13 @@ type SampleViewProps = {
  * @returns
  */
 export const SampleView: Component<SampleViewProps> = (props) => {
+  let divRef: HTMLDivElement | undefined;
   let svgRef: SVGSVGElement | undefined;
+
+  // Container element size to set SVG size
+  const size = createElementSize(() => divRef);
+
+  // TODO: Waveform Pan/Zoom
   const camera = (): Camera2D => ({
     pan: { x: 0, y: 0 },
     zoom: { x: 1, y: 1 },
@@ -131,9 +137,6 @@ export const SampleView: Component<SampleViewProps> = (props) => {
     fetchAudioBuffer,
   );
 
-  // SVG element size
-  const size = createElementSize(() => svgRef);
-
   // Waveform zero crossing point
   const y0 = (): number => (size.height || 0) / 2;
 
@@ -189,7 +192,7 @@ export const SampleView: Component<SampleViewProps> = (props) => {
   });
 
   return (
-    <SampleDropzone class={`${style.sampleView} overflow-hidden`}>
+    <SampleDropzone ref={divRef!} class={`${style.sampleView} overflow-hidden`}>
       <svg
         ref={svgRef!}
         class="w-full h-full"