From 359c7d25ee92864057ed28016221cd72b8a83a80 Mon Sep 17 00:00:00 2001
From: jberg <jordannealberg@gmail.com>
Date: Tue, 15 May 2018 14:12:11 -0700
Subject: [PATCH] only render milkdrop when playing

---
 js/components/MilkdropWindow/index.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/components/MilkdropWindow/index.js b/js/components/MilkdropWindow/index.js
index 75529b38..8a1430e6 100644
--- a/js/components/MilkdropWindow/index.js
+++ b/js/components/MilkdropWindow/index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { connect } from "react-redux";
 import screenfull from "screenfull";
 
 const PRESET_TRANSITION_SECONDS = 2.7;
@@ -27,7 +28,14 @@ class MilkdropWindow extends React.Component {
         );
         this.visualizer.connectAudio(analyserNode);
         this.visualizer.loadPreset(reactionDiffusion2, 0);
-        this._renderViz();
+        // Kick off the animation loop
+        const loop = () => {
+          if (this.props.status === "PLAYING") {
+            this.visualizer.render();
+          }
+          window.requestAnimationFrame(loop);
+        };
+        loop();
       },
       e => {
         console.error("Error loading Butterchurn", e);
@@ -68,10 +76,6 @@ class MilkdropWindow extends React.Component {
       this._setRendererSize(this.props.width, this.props.height);
     }
   }
-  _renderViz() {
-    this.animationFrameRequest = requestAnimationFrame(() => this._renderViz());
-    this.visualizer.render();
-  }
   _pauseViz() {
     if (this.animationFrameRequest) {
       window.cancelAnimationFrame(this.animationFrameRequest);
@@ -125,4 +129,8 @@ class MilkdropWindow extends React.Component {
   }
 }
 
-export default MilkdropWindow;
+const mapStateToProps = state => ({
+  status: state.media.status
+});
+
+export default connect(mapStateToProps)(MilkdropWindow);