Merge pull request #11 from rrk0804/now-playing-functionality

Now Playing Functionality

src/components/DynamicRecommendations.tsx

@@ -164,6 +164,7 @@ class DynamicRecommendations extends React.Component<{recTargetProp : string}, {
                                                         songAlbum={recs[i].album.name}
                                                         songName={recs[i].name}
                                                         songArtists={recs[i].artists.map((artist) => artist.name)}
+                                                        songURI={recs[i].uri}
                                                         key={i}>
                                       </RecommendedTrack>;
                 recommendedTracksHTML.push(recommendedSong);

src/components/NowPlaying.tsx

@@ -5,7 +5,7 @@ import { AudioFeaturesResponse } from "../types/spotify-web-api";
 import DynamicRecommendations from "./DynamicRecommendations";
 import SongMetric from "./SongMetric";
 import { SongMetricData } from "../types/enhancify";
-import { getSongMetrics } from "../services/enhancifyInternalService";
+import { allMetrics, getSongMetrics } from "../services/enhancifyInternalService";
 
 class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesResponse | {}, 
                                               songURI: string, 
@@ -18,7 +18,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
     songURI: "",        // URI of the currently playing song
     recTarget: "songs", // Recommendations based on either songs or artist
     songMetrics: [], // Current song metric information
-    metricsToDisplay: [], // Current metric information types
+    metricsToDisplay: Spicetify.LocalStorage.get("metricsToDisplay") != "" ? Spicetify.LocalStorage.get("metricsToDisplay")?.split(',') || ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo"] : [], // Current metric information types
   }
 
   componentDidMount = () => {
@@ -50,12 +50,8 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
   // Sets the song metric information based on the type of information that the user wants to be displayed
   setSongMetrics = () => {
     this.setState({
-      metricsToDisplay: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo"] // TODO: Change so that we get the metrics we want to display dynamically
-    }, () => {
-      this.setState({
-        songMetrics: getSongMetrics((this.state.audioFeatures as AudioFeaturesResponse), this.state.metricsToDisplay)
-      });
-    })
+      songMetrics: getSongMetrics((this.state.audioFeatures as AudioFeaturesResponse), this.state.metricsToDisplay)
+    });
   }
 
   // Change the recommendation target
@@ -72,6 +68,23 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
     }
   };
 
+  // Toggles whether the metric that the user clicked on should be displayed or not
+  toggleMetric = (metric: string) => {
+    let newArray = this.state.metricsToDisplay.slice();
+    if (newArray.includes(metric)) {
+      newArray = newArray.filter((val) => val != metric);
+    }
+    else {
+      newArray.push(metric);
+    }
+
+    Spicetify.LocalStorage.set("metricsToDisplay", newArray.toString());
+
+    this.setState({
+      metricsToDisplay: newArray
+    }, this.setSongMetrics);
+  }
+
   render() {
 
     Spicetify.Player.addEventListener("songchange", this.setAudioFeatures);
@@ -170,7 +183,13 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
             <button onClick={this.changeRecTarget} className={styles.recommendationTarget}
                     disabled={false} style={{marginLeft: "10px", marginTop: "0px"}}> 
               {this.state.recTarget} 
-          </button>
+            </button>
+          </div>
+          <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)"}} onClick={() => this.toggleMetric(metric)}>{metric}</button>
+            })}
           </div>
         </div>
       </>

src/components/RecommendedTrack.tsx

@@ -4,10 +4,16 @@ import React from "react";
 class RecommendedTrack extends React.Component<{songCover: string, 
                                                 songName: string, 
                                                 songArtists: string[], 
-                                                songAlbum: string}, 
+                                                songAlbum: string,
+                                                songURI: string}, 
                                                 {paddingRight: string}>  {
 
-    playIcon = <img className={styles.playIcon} src={"https://img.icons8.com/?size=100&id=36067&format=png&color=FFFFFF"}/>;
+    // Plays the recommended song whose play icon has been clicked
+    playSong = () => {
+      Spicetify.Player.playUri(this.props.songURI);
+    }
+
+    playIcon = <img className={styles.playIcon} src={"https://img.icons8.com/?size=100&id=36067&format=png&color=FFFFFF"} onClick={this.playSong}/>;
 
     render() {
         return (

src/css/app.module.scss

@@ -32,7 +32,6 @@
 
 .statsBlock {
   width: 96.5%;
-  height: 290px;
   margin-top: 40px;
   margin: 20px;
   margin-right: 0px;
@@ -44,7 +43,6 @@
 .statsBlock {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
   row-gap: 10px;
   column-gap: 10px;
   padding: 10px;

src/services/enhancifyInternalService.tsx

@@ -16,11 +16,16 @@ export function getSongMetrics(audioFeatures: AudioFeaturesResponse, metricsToDi
 }
 
 // Object that represents which metrics require a progress bar and which metrics require a specific label
-// TODO: Add information for other metrics that we can show the user
 const metricFeatures: MetricFeatures = {
-  progressbar: new Set(["Danceability", "Energy", "Acousticness"]),
+  progressbar: new Set(["Danceability", "Energy", "Acousticness", "Instrumentalness", "Speechiness", "Valence", "Liveness"]),
   label: {
     Loudness: "dB",
     Tempo: "bpm",
+    Time_Signature: "/4",
+    Key: "in Pitch Class notation",
+    Mode: "(0: Minor, 1: Major)",
   }
 };
+
+// Array of all the metric types that we allow to be shown
+export const allMetrics: string[] = ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"];

src/types/enhancify.d.ts

@@ -6,9 +6,12 @@ export type SongMetricData = {
 };
 
 export type Labels = {
-  Loudness: string
-  Tempo: string
-}
+  Loudness: string,
+  Tempo: string,
+  Time_Signature: string,
+  Key: string,
+  Mode: string
+};
 
 export type MetricFeatures = {
   progressbar: Set<string>,