From 5ec817dffda091bc807c16efdd249f82ac095e06 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 8 Apr 2020 19:44:16 -0700
Subject: [PATCH] Set FFT size in outer component

---
 js/components/Visualizer.tsx     |  5 ++++-
 js/components/VisualizerInner.js | 12 ------------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/js/components/Visualizer.tsx b/js/components/Visualizer.tsx
index 33d645c6..323653d2 100644
--- a/js/components/Visualizer.tsx
+++ b/js/components/Visualizer.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState } from "react";
+import React, { useMemo, useCallback, useState, useLayoutEffect } from "react";
 
 import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
@@ -125,6 +125,9 @@ function preRenderBar(
   return barCanvas;
 }
 function Visualizer(props: Props) {
+  useLayoutEffect(() => {
+    props.analyser.fftSize = 2048;
+  }, [props.analyser]);
   const colors = useTypedSelector(Selectors.getSkinColors);
   const style = useTypedSelector(Selectors.getVisualizerStyle);
   const status = useTypedSelector(Selectors.getMediaStatus);
diff --git a/js/components/VisualizerInner.js b/js/components/VisualizerInner.js
index 80078a82..31b45848 100644
--- a/js/components/VisualizerInner.js
+++ b/js/components/VisualizerInner.js
@@ -13,8 +13,6 @@ class VisualizerInner extends React.Component {
     this.canvasCtx = this.canvas.getContext("2d");
     this.canvasCtx.imageSmoothingEnabled = false;
 
-    this.setStyle();
-
     // Kick off the animation loop
     const loop = () => {
       if (this.props.status === MEDIA_STATUS.PLAYING) {
@@ -38,7 +36,6 @@ class VisualizerInner extends React.Component {
   }
 
   componentDidUpdate() {
-    this.setStyle();
     // Redraw the current frame, since the skin may have changed.
     this.paintFrame();
   }
@@ -59,15 +56,6 @@ class VisualizerInner extends React.Component {
     return this.props.width * PIXEL_DENSITY;
   }
 
-  setStyle() {
-    if (!this.props.colors) {
-      return;
-    }
-    // TODO: Split this into to methods. One for skin update, one for style
-    // update.
-    this.props.analyser.fftSize = 2048;
-  }
-
   paintFrame() {
     switch (this.props.style) {
       case VISUALIZERS.OSCILLOSCOPE: