Workaround of componentWillUnmount

Author: huyenltnguyen

src/components/Main.js

@@ -15,7 +15,7 @@ const Main = props => {
       {isBrowser && (
         <>
           <div className='animation saron' id='container' />
-          {props.playing && <Visualizer player={props.player} />}
+          <Visualizer player={props.player} playing={props.playing} />
           <details>
             <summary>Keyboard Controls</summary>
             <dl>

src/components/Visualizer.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+const DELAY = 500;
+
 export default class Visualizer extends React.PureComponent {
   rafId = null;
   timerId = null;
@@ -17,17 +19,26 @@ export default class Visualizer extends React.PureComponent {
     };
   }
 
-  componentDidMount() {
-    this.initiateEQ();
-    this.createVisualizer();
-    this.startDrawing();
-  }
 
-  componentWillUnmount() {
-    this.stopDrawing();
-    this.state.eq.analyser.disconnect();
-    this.state.eq.src.disconnect();
-    this.state.eq.context.close();
+  // In order to get around some mobile browser limitations,
+  // we can only generate a lot
+  // of the audio context stuff AFTER the audio has been triggered.
+  // We can't see it until
+  // then anyway so it makes no difference to desktop.
+  componentDidUpdate(prevProps) {
+    if (prevProps.playing !== this.props.playing) {
+      if (this.props.playing) {
+        this.initiateEQ();
+        this.createVisualizer();
+        this.startDrawing();
+      } else {
+        // Workaround componentWillUnmount to delay the clean up and achieve fadeout animation
+        setTimeout(() => {
+          this.stopDrawing();
+          this.reset();
+        }, DELAY)
+      }
+    }
   }
 
   initiateEQ() {
@@ -53,6 +64,12 @@ export default class Visualizer extends React.PureComponent {
     this.setState({ eq });
   }
 
+  reset = () => {
+    this.rafId = null;
+    this.state.eq.analyser.disconnect();
+    this.state.eq.src.disconnect();
+  }
+
   /** *
    * The equalizer bands available need to be updated
    * constantly in order to ensure that the value for any
@@ -161,5 +178,6 @@ export default class Visualizer extends React.PureComponent {
 }
 
 Visualizer.propTypes = {
-  player: PropTypes.object
+  player: PropTypes.object,
+  playing: PropTypes.bool
 };