From a855dae4806f4e1d38d55afc4bf57b699830394e Mon Sep 17 00:00:00 2001 From: Parikshith Mohite Date: Sun, 29 Sep 2024 13:59:52 -0400 Subject: [PATCH 1/6] Allow users to play songs that are recommended and displays more song statistics --- src/components/DynamicRecommendations.tsx | 1 + src/components/NowPlaying.tsx | 6 +++--- src/components/RecommendedTrack.tsx | 9 +++++++-- src/services/enhancifyInternalService.tsx | 5 ++++- src/types/enhancify.d.ts | 9 ++++++--- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/DynamicRecommendations.tsx b/src/components/DynamicRecommendations.tsx index 309fd67..4b87cc6 100644 --- a/src/components/DynamicRecommendations.tsx +++ b/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}> ; recommendedTracksHTML.push(recommendedSong); diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx index b9c7a28..2fb6572 100644 --- a/src/components/NowPlaying.tsx +++ b/src/components/NowPlaying.tsx @@ -50,7 +50,7 @@ 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 + metricsToDisplay: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"] // 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) @@ -159,7 +159,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon })} -
+
{this.state.recTarget} - +
diff --git a/src/components/RecommendedTrack.tsx b/src/components/RecommendedTrack.tsx index 4f1e86a..965b34f 100644 --- a/src/components/RecommendedTrack.tsx +++ b/src/components/RecommendedTrack.tsx @@ -4,10 +4,15 @@ import React from "react"; class RecommendedTrack extends React.Component<{songCover: string, songName: string, songArtists: string[], - songAlbum: string}, + songAlbum: string, + songURI: string}, {paddingRight: string}> { - playIcon = ; + playSong = () => { + Spicetify.Player.playUri(this.props.songURI); + } + + playIcon = ; render() { return ( diff --git a/src/services/enhancifyInternalService.tsx b/src/services/enhancifyInternalService.tsx index c385b15..14861c5 100644 --- a/src/services/enhancifyInternalService.tsx +++ b/src/services/enhancifyInternalService.tsx @@ -18,9 +18,12 @@ 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)", } }; diff --git a/src/types/enhancify.d.ts b/src/types/enhancify.d.ts index 6b72dc8..2ab7859 100644 --- a/src/types/enhancify.d.ts +++ b/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, From 69daa752ae3819a3b1bfcfb342ff83f3a5c5cbe3 Mon Sep 17 00:00:00 2001 From: Parikshith Mohite Date: Sun, 29 Sep 2024 14:07:56 -0400 Subject: [PATCH 2/6] Add settings section for displayed statistics --- src/components/NowPlaying.tsx | 12 +++++++++++- src/services/enhancifyInternalService.tsx | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx index 2fb6572..0e28b01 100644 --- a/src/components/NowPlaying.tsx +++ b/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, @@ -172,6 +172,16 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon {this.state.recTarget}
+
+ {"Displayed statistics: "} + {allMetrics.map((metric: string, i) => { + return + })} + {/* */} +
); diff --git a/src/services/enhancifyInternalService.tsx b/src/services/enhancifyInternalService.tsx index 14861c5..12a6c7e 100644 --- a/src/services/enhancifyInternalService.tsx +++ b/src/services/enhancifyInternalService.tsx @@ -27,3 +27,5 @@ const metricFeatures: MetricFeatures = { Mode: "(0: Minor, 1: Major)", } }; + +export const allMetrics: string[] = ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"]; From f28e544d1429b49b2a0293234fb3e2d26513169c Mon Sep 17 00:00:00 2001 From: Parikshith Mohite Date: Sun, 29 Sep 2024 14:15:09 -0400 Subject: [PATCH 3/6] Make statistics that are not displayed grey in settings --- src/components/NowPlaying.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx index 0e28b01..d4ead14 100644 --- a/src/components/NowPlaying.tsx +++ b/src/components/NowPlaying.tsx @@ -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: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo"], // Current metric information types } componentDidMount = () => { @@ -49,13 +49,16 @@ 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", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"] // 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) + // }); + // }) this.setState({ - metricsToDisplay: ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo", "Instrumentalness", "Liveness", "Mode", "Speechiness", "Time_Signature", "Valence"] // 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 @@ -175,7 +178,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
{"Displayed statistics: "} {allMetrics.map((metric: string, i) => { - return + return })} {/*
-
+
{"Displayed statistics: "} {allMetrics.map((metric: string, i) => { - return + return })} {/*
-
+
{ return })} - {/* */}
diff --git a/src/css/app.module.scss b/src/css/app.module.scss index a20ca3a..03cb32e 100644 --- a/src/css/app.module.scss +++ b/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; From 9bb9c3a5fe850fbf87467bd0c842657cde79a020 Mon Sep 17 00:00:00 2001 From: Parikshith Mohite Date: Sun, 29 Sep 2024 15:15:51 -0400 Subject: [PATCH 6/6] Update comments --- src/components/NowPlaying.tsx | 1 + src/components/RecommendedTrack.tsx | 1 + src/services/enhancifyInternalService.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx index 3df8be5..7357ebf 100644 --- a/src/components/NowPlaying.tsx +++ b/src/components/NowPlaying.tsx @@ -68,6 +68,7 @@ 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)) { diff --git a/src/components/RecommendedTrack.tsx b/src/components/RecommendedTrack.tsx index 965b34f..73fa58a 100644 --- a/src/components/RecommendedTrack.tsx +++ b/src/components/RecommendedTrack.tsx @@ -8,6 +8,7 @@ class RecommendedTrack extends React.Component<{songCover: string, songURI: string}, {paddingRight: string}> { + // Plays the recommended song whose play icon has been clicked playSong = () => { Spicetify.Player.playUri(this.props.songURI); } diff --git a/src/services/enhancifyInternalService.tsx b/src/services/enhancifyInternalService.tsx index 12a6c7e..16b3e70 100644 --- a/src/services/enhancifyInternalService.tsx +++ b/src/services/enhancifyInternalService.tsx @@ -16,7 +16,6 @@ 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", "Instrumentalness", "Speechiness", "Valence", "Liveness"]), label: { @@ -28,4 +27,5 @@ const metricFeatures: MetricFeatures = { } }; +// 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"];