From ba9cb2c39cae95a32e90a835dba38718111f18e1 Mon Sep 17 00:00:00 2001
From: Parikshith Mohite <parimohite1@gmail.com>
Date: Sun, 29 Sep 2024 14:27:35 -0400
Subject: [PATCH] Add functionality to metric settings buttons

---
 src/components/NowPlaying.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
index d4ead14..7c342ee 100644
--- a/src/components/NowPlaying.tsx
+++ b/src/components/NowPlaying.tsx
@@ -75,6 +75,19 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
     }
   };
 
+  toggleMetric = (metric: string) => {
+    if (this.state.metricsToDisplay.includes(metric)) {
+      this.setState({
+        metricsToDisplay: this.state.metricsToDisplay.filter((val) => val != metric)
+      }, this.setSongMetrics);
+    }
+    else {
+      this.setState({
+        metricsToDisplay: [...this.state.metricsToDisplay, metric]
+      }, this.setSongMetrics);
+    }
+  }
+
   render() {
 
     Spicetify.Player.addEventListener("songchange", this.setAudioFeatures);
@@ -162,7 +175,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
           })}
 
         </div>
-        <div style={{marginTop: String(Math.floor(this.state.songMetrics.length / 3) * 60) + "px"}}>
+        <div style={{marginTop: String(Math.floor((this.state.songMetrics.length-4) / 3) * 120) + "px"}}>
           <div className={styles.recommendationsLabel} style={{marginLeft: "20px",
                                                                marginBottom: "0px",
                                                                marginTop: "10px",
@@ -178,7 +191,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
           <div className={styles.settingContainer}>
             <span className={styles.settingLabel}>{"Displayed statistics: "}</span>
             {allMetrics.map((metric: string, i) => {
-              return <button className={styles.recommendationTarget} style={{marginLeft: "5px", fontSize: "15px", backgroundColor: this.state.metricsToDisplay.includes(metric) ? "rgb(81, 126, 97)" : "rgb(105,105,105)"}}>{metric}</button>
+              return <button className={styles.recommendationTarget} style={{marginLeft: "5px", fontSize: "15px", backgroundColor: this.state.metricsToDisplay.includes(metric) ? "rgb(81, 126, 97)" : "rgb(105,105,105)"}} onClick={() => this.toggleMetric(metric)}>{metric}</button>
             })}
             {/* <button onClick={this.changeRecTarget} className={styles.recommendationTarget}
                     disabled={false} style={{marginLeft: "10px", marginTop: "0px"}}>