From cc27e46067a5f7158d4c59731adb91686a7d3a15 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 12 Oct 2022 18:33:32 -0500
Subject: [PATCH] Audio: move useEffect's to bottom, remove unused code

---
 app/soapbox/features/audio/index.tsx | 95 ++++++++++++----------------
 1 file changed, 39 insertions(+), 56 deletions(-)

diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx
index 9910ab73c..0bef3c3d9 100644
--- a/app/soapbox/features/audio/index.tsx
+++ b/app/soapbox/features/audio/index.tsx
@@ -102,44 +102,6 @@ const Audio: React.FC<IAudio> = (props) => {
     }
   };
 
-  useEffect(() => {
-    if (player.current) {
-      _setDimensions();
-    }
-  }, [player.current]);
-
-  useEffect(() => {
-    if (audio.current) {
-      setVolume(audio.current.volume);
-      setMuted(audio.current.muted);
-    }
-  }, [audio.current]);
-
-  useEffect(() => {
-    if (canvas.current && visualizer.current) {
-      visualizer.current.setCanvas(canvas.current);
-    }
-  }, [canvas.current, visualizer.current]);
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    window.addEventListener('resize', handleResize, { passive: true });
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      window.removeEventListener('resize', handleResize);
-
-      if (!paused && audio.current && deployPictureInPicture) {
-        deployPictureInPicture('audio', _pack());
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    _clear();
-    _draw();
-  }, [src, width, height, accentColor]);
-
   const togglePlay = () => {
     if (!audioContext.current) {
       _initAudioContext();
@@ -334,24 +296,6 @@ const Audio: React.FC<IAudio> = (props) => {
     }
   };
 
-  // const handleDownload = () => {
-  //   fetch(src).then(res => res.blob()).then(blob => {
-  //     const element   = document.createElement('a');
-  //     const objectURL = URL.createObjectURL(blob);
-
-  //     element.setAttribute('href', objectURL);
-  //     element.setAttribute('download', fileNameFromURL(src));
-
-  //     document.body.appendChild(element);
-  //     element.click();
-  //     document.body.removeChild(element);
-
-  //     URL.revokeObjectURL(objectURL);
-  //   }).catch(err => {
-  //     console.error(err);
-  //   });
-  // };
-
   const _renderCanvas = () => {
     requestAnimationFrame(() => {
       if (!audio.current) return;
@@ -450,8 +394,47 @@ const Audio: React.FC<IAudio> = (props) => {
   };
 
   const getDuration = () => duration || props.duration || 0;
+
   const progress = Math.min((currentTime / getDuration()) * 100, 100);
 
+  useEffect(() => {
+    if (player.current) {
+      _setDimensions();
+    }
+  }, [player.current]);
+
+  useEffect(() => {
+    if (audio.current) {
+      setVolume(audio.current.volume);
+      setMuted(audio.current.muted);
+    }
+  }, [audio.current]);
+
+  useEffect(() => {
+    if (canvas.current && visualizer.current) {
+      visualizer.current.setCanvas(canvas.current);
+    }
+  }, [canvas.current, visualizer.current]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+
+      if (!paused && audio.current && deployPictureInPicture) {
+        deployPictureInPicture('audio', _pack());
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    _clear();
+    _draw();
+  }, [src, width, height, accentColor]);
+
   return (
     <div
       className={classNames('audio-player', { editable })}