Stop visualizer rendering when visualizer is minimized

src/components/panelHeader/outputPanelHeader.ts

@@ -30,7 +30,10 @@ export default class OutputPanelHeader {
         );
         new OutputHeaderToggle(
             visualizerButton,
-            OutputPanelHeader.visualizerContainer
+            OutputPanelHeader.visualizerContainer,
+            false,
+            () => visual?.start(),
+            () => visual?.stop()
         );
     }
 

src/components/toggle/headerToggle.ts

@@ -5,18 +5,24 @@ export default class HeaderToggle {
     public button: HTMLButtonElement;
     public contentContainer: HTMLDivElement;
     protected open: boolean = false;
+    protected openCallback: () => void;
+    protected closeCallback: () => void;
 
     constructor(
         button: HTMLButtonElement,
         contentContainer: HTMLDivElement,
-        initialOpen: boolean = false
+        initialOpen: boolean = false,
+        openCallback: () => void = () => {},
+        closeCallback: () => void = () => {}
     ) {
         this.button = button;
         this.contentContainer = contentContainer;
 
         this.button.addEventListener("click", () => {
             this.toggle();
         });
+        this.openCallback = openCallback;
+        this.closeCallback = closeCallback;
         this.setActive(initialOpen);
     }
 
@@ -28,9 +34,11 @@ export default class HeaderToggle {
     setActive(open: boolean) {
         if (open) {
             this.contentContainer.classList.remove("hidden");
+            this.openCallback();
             this.open = true;
         } else {
             this.contentContainer.classList.add("hidden");
+            this.closeCallback();
             this.open = false;
         }
     }

src/components/toggle/outputHeaderToggle.ts

@@ -23,14 +23,22 @@ export default class OutputHeaderToggle extends HeaderToggle {
     constructor(
         button: HTMLButtonElement,
         contentContainer: HTMLDivElement,
-        initialOpen: boolean = false
+        initialOpen: boolean = false,
+        openCallback: () => void = () => {},
+        closeCallback: () => void = () => {}
     ) {
         OutputHeaderToggle.numToggles++;
         // If initialOpen, increment active
         if (initialOpen) {
             OutputHeaderToggle.numActive++;
         }
-        super(button, contentContainer, initialOpen);
+        super(
+            button,
+            contentContainer,
+            initialOpen,
+            openCallback,
+            closeCallback
+        );
     }
 
     toggle() {
@@ -54,6 +62,7 @@ export default class OutputHeaderToggle extends HeaderToggle {
             this.button.classList.remove(DARK_HOVER_COLOR_CLASS);
             this.contentContainer.classList.remove("hidden");
 
+            this.openCallback();
             this.open = true;
         } else {
             // inactive
@@ -65,6 +74,7 @@ export default class OutputHeaderToggle extends HeaderToggle {
             this.button.classList.add(DARK_HOVER_COLOR_CLASS);
             this.contentContainer.classList.add("hidden");
 
+            this.closeCallback();
             this.open = false;
         }
 

src/host.ts

@@ -201,6 +201,5 @@ function startVisualizer() {
     // connect chuck output to analyser
     theChuck.connect(analyser);
     // start visualizer
-    visual.drawVisualization_();
     visual.start();
 }