+
);
}
diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
index 86b0ab7..a0d5d3f 100644
--- a/src/components/NowPlaying.tsx
+++ b/src/components/NowPlaying.tsx
@@ -2,11 +2,36 @@ import styles from "../css/app.module.scss";
import React from "react";
import getAudioFeatures from "../services/nowPlayingService";
import { AudioFeaturesResponse } from "../types/spotify-web-api";
+import DynamicRecommendations from "./DynamicRecommendations";
+import SongMetric from "./SongMetric";
+import { SelectedMetrics, SongMetricData } from "../types/enhancify";
+import { allMetrics, getSongMetrics } from "../services/enhancifyInternalService";
+import RecommendationsModal from "./RecommendationsModal";
+import SettingsModal from "./SettingsModal";
+import Modal from 'react-modal';
-class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesResponse | {}, songURI: string}> {
+class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesResponse | {},
+ songURI: string,
+ recTarget: string,
+ songMetrics: SongMetricData[],
+ metricsToDisplay: string[],
+ modalIsOpen: boolean,
+ settingsModalIsOpen: boolean,
+ selectedMetrics: SelectedMetrics}> {
+
state = {
- audioFeatures: {},
- songURI: "",
+ audioFeatures: {}, // Features of the currently playing song (name, artist, stats)
+ songURI: "", // URI of the currently playing song
+ recTarget: "songs", // Recommendations based on either songs or artist
+ songMetrics: [], // Current song metric information
+ metricsToDisplay: Spicetify.LocalStorage.get("metricsToDisplay") != "" ?
+ Spicetify.LocalStorage.get("metricsToDisplay")?.split(',') ||
+ ["Danceability", "Energy", "Acousticness", "Loudness", "Key", "Tempo"] :
+ [], // Current metric information types
+ modalIsOpen: false, // Whether the modal is currently open
+ settingsModalIsOpen: false,
+ selectedMetrics: JSON.parse(Spicetify.LocalStorage.get("selectedMetrics") ||
+ "{}"), // Metrics that have been selected to be fed into the Spotify recommendations endpoint
}
componentDidMount = () => {
@@ -14,31 +39,250 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
}
setAudioFeatures = () => {
+ // Check if there is no currently playing song or
+ // if the info of the song is currently being displayed
if (!Spicetify.Player.data || this.state.songURI == Spicetify.Player.data.item.uri) {
return;
}
+
this.state.songURI = Spicetify.Player.data.item.uri;
+ // API call for getting song info
const apiCall = async () => {
- var currentAudioFeatures = await getAudioFeatures(this.state.songURI || "");
+ const currentAudioFeatures = await getAudioFeatures(this.state.songURI || "");
this.setState({
audioFeatures: currentAudioFeatures,
- });
+ }, this.setSongMetrics);
}
+ // Make the API call
apiCall();
}
-
+
+ // Sets the song metric information based on the type of information that the user wants to be displayed
+ setSongMetrics = () => {
+ this.setState({
+ songMetrics: getSongMetrics((this.state.audioFeatures as AudioFeaturesResponse), this.state.metricsToDisplay)
+ });
+ }
+
+ // Change the recommendation target
+ changeRecTarget = () => {
+ if (this.state.recTarget == "songs") {
+ this.setState({
+ recTarget: "artists",
+ });
+ }
+ else if (this.state.recTarget == "artists") {
+ this.setState({
+ recTarget: "songs",
+ });
+ }
+ };
+
+ // 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);
+
+ // If a metric is being hidden from the display, it should not be fed into the recommendations endpoint
+ if (metric in this.state.selectedMetrics) {
+ let copy: SelectedMetrics = { ...this.state.selectedMetrics };
+ delete copy[metric];
+ Spicetify.LocalStorage.set("selectedMetrics", JSON.stringify(copy));
+ this.setState({
+ selectedMetrics: copy
+ });
+ }
+ }
+ else {
+ newArray.push(metric);
+ }
+
+ Spicetify.LocalStorage.set("metricsToDisplay", newArray.toString());
+
+ this.setState({
+ metricsToDisplay: newArray
+ }, this.setSongMetrics);
+ }
+
+ // Set whether the modal should be open or closed
+ setModalIsOpen = (value: boolean) => {
+ this.setState({
+ modalIsOpen: value
+ });
+ }
+
+ setSettingsModalIsOpen = (value: boolean) => {
+ this.setState({
+ settingsModalIsOpen: value,
+ });
+ }
+
+ // Select a metric to toggle whether they should be included in the recommendations endpoint request or not
+ selectMetric = (metric: string, value: string) => {
+ let copy: SelectedMetrics = { ...this.state.selectedMetrics };
+ if (metric in copy) {
+ delete copy[metric];
+ }
+ else {
+ copy[metric] = value;
+ }
+ Spicetify.LocalStorage.set("selectedMetrics", JSON.stringify(copy));
+ this.setState({
+ selectedMetrics: copy
+ });
+ }
+
+ modalStyles = {
+ overlay: {
+ backgroundColor: "rgba(0, 0, 0, 0.70)",
+ },
+ content: {
+ position: 'relative',
+ top: '60px',
+ left: '27.5%',
+ width: "550px",
+ height: "610px",
+ },
+ }
+
+ recommendationsModalStyles = {
+ overlay: {
+ backgroundColor: "rgba(0, 0, 0, 0.70)",
+ },
+ content: {
+ position: 'relative',
+ top: '55px',
+ left: '21.5%',
+ width: "800px",
+ height: "600px"
+ },
+ }
+
render() {
+
Spicetify.Player.addEventListener("songchange", this.setAudioFeatures);
+
return (
<>
-
+
+ {"Song Recommendations"}
+
+ {this.props.recTargetProp}
+
+ {RecommendationsRender(this.state.recommendations)}
+
+
+
+
+ {/* Stats block */}
+
+ {Spicetify.Player.data ?
+
+
+ {/* Track cover */}
+ {Spicetify.Player.data.item.images ?
+ Spicetify.Player.data.item.images.length > 0 ?
+ 
+ : <>
+ : <>}
+
+ {/* Track title */}
+
+ {Spicetify.Player.data.item.name}
+
+
+ {/* Track artist(s) */}
+ {(function () {
+
+ // Get all the artists
+ const trackArtists = Spicetify.Player.data.item.artists;
+ let trackAritistsInnnerHTML = "";
+
+ // Check if there are any artists
+ if (trackArtists) {
+ // Display all the artists
+ for (const artist of trackArtists) {
+ trackAritistsInnnerHTML += (artist.name + ", ")
+ }
+ if(trackAritistsInnnerHTML.length > 0) {
+ trackAritistsInnnerHTML = trackAritistsInnnerHTML.substring(0, trackAritistsInnnerHTML.length - 2);
+ }
+
+ return
+ {trackAritistsInnnerHTML}
+
+ } else {
+ return <>;
+ }
+ })()}
+
+ {/* Track album */}
+
+ {Spicetify.Player.data.item.album.name}
+
+
+ : <>}
+
+
+
+
+
+ {"Song Statistics"}
+
+ this.setState({modalIsOpen: true})}>
+ ![]({"https://img.icons8.com/?size=100&id=9403&format=png&color=FFFFFF"})
+
+
+ this.setSettingsModalIsOpen(true)}>
+ ![]({"https://img.icons8.com/?size=100&id=2969&format=png&color=FFFFFF"})
+
+
+
+
+ {/* Stats block data */}
+ {this.state.songMetrics.map((songMetric: SongMetricData, i) => {
+ return
+
+
+
+
+ );
+ }
+}
+
+export default RecommendationsModal;
diff --git a/src/components/RecommendedTrack.tsx b/src/components/RecommendedTrack.tsx
new file mode 100644
index 0000000..73fa58a
--- /dev/null
+++ b/src/components/RecommendedTrack.tsx
@@ -0,0 +1,70 @@
+import styles from "../css/app.module.scss";
+import React from "react";
+
+class RecommendedTrack extends React.Component<{songCover: string,
+ songName: string,
+ songArtists: string[],
+ songAlbum: string,
+ songURI: string},
+ {paddingRight: string}> {
+
+ // Plays the recommended song whose play icon has been clicked
+ playSong = () => {
+ Spicetify.Player.playUri(this.props.songURI);
+ }
+
+ playIcon =
+ ![]({"https://img.icons8.com/?size=100&id=6483&format=png&color=FFFFFF"})
this.props.setModalIsOpen(false)}/>
+
+
+ {"More Recommendations"}
+
+ this.props.setModalIsOpen(false)}/>
+
+ {Object.keys(this.props.selectedMetrics).map((metric_name) =>
+
+ {metric_name}
+
)}
+
+ {RecommendationsRender(this.state.recommendations)}
+
+ ![]({"https://img.icons8.com/?size=100&id=36067&format=png&color=FFFFFF"})
;
+
+ render() {
+ return (
+
+ 
+
+ );
+ }
+}
+
+export default RecommendedTrack;
\ No newline at end of file
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
new file mode 100644
index 0000000..aed13d1
--- /dev/null
+++ b/src/components/SettingsModal.tsx
@@ -0,0 +1,51 @@
+import styles from "../css/app.module.scss";
+import React from "react";
+import { allMetrics, getSongMetrics } from "../services/enhancifyInternalService";
+
+class SettingsModal extends React.Component<{changeRecTarget: () => void,
+ toggleMetric: (metric: string) => void,
+ setModalIsOpen: (value: boolean) => void,
+ recTarget: string,
+ metricsToDisplay: string[]} , {}> {
+
+ render() {
+ return (
+
+
+ {/* Play icon*/}
+ {this.playIcon}
+
+ {this.props.songName.length > 12 ?
+
+ + {this.props.songName} + + {this.props.songName} + +
: +{this.props.songName}
+ } +
+ {Object.keys(this.props.songArtists).length > 0 ? ( () => {
+ // Get all the artists
+ const trackArtists = this.props.songArtists;
+ let trackAritistsInnnerHTML = "";
+
+ // Check if there are any artists
+ if (trackArtists) {
+ // Display all the artists
+ for (const artist of trackArtists) {
+ trackAritistsInnnerHTML += (artist + ", ")
+ }
+ if(trackAritistsInnnerHTML.length > 0) {
+ trackAritistsInnnerHTML = trackAritistsInnnerHTML.substring(0, trackAritistsInnnerHTML.length - 2);
+ }
+
+ return (
+
+ {trackAritistsInnnerHTML}
+
);
+ } else {
+ return <>;
+ }
+
+ })() : }
+
+ {this.props.songAlbum}
+
+
+
);
+ }
+}
+
+export default SettingsModal;
\ No newline at end of file
diff --git a/src/components/SongMetric.tsx b/src/components/SongMetric.tsx
new file mode 100644
index 0000000..15356a9
--- /dev/null
+++ b/src/components/SongMetric.tsx
@@ -0,0 +1,57 @@
+import styles from "../css/app.module.scss";
+import React from "react";
+import { CircularProgressbar } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+
+// Component for each individual song metric data block
+class SongMetric extends React.Component<{floatValue: string,
+ title: string,
+ progressBar: boolean,
+ label: string,
+ selectMetric: (metric: string, value: string) => void
+ isMetricSelected: boolean},
+ {}> {
+
+ render() {
+ return (
+
+ this.props.setModalIsOpen(false)}/>
+
+
+ {"Settings"}
+
+ this.props.setModalIsOpen(false)}/>
+
+ {"Show recommendations by: "}
+
+
+
+ {"Displayed statistics: "}
+
+
+ {allMetrics.map((metric: string, i) => {
+ return ();
+ })}
+
+ this.props.selectMetric(this.props.title, this.props.floatValue)}
+ style={this.props.isMetricSelected ? {backgroundColor: "rgb(99, 155, 119",
+ border: "2px solid white",
+ } : {}}>
+
+ );
+ }
+}
+
+export default SongMetric;
\ No newline at end of file
diff --git a/src/css/app.module.scss b/src/css/app.module.scss
index 9c0eb39..077e693 100644
--- a/src/css/app.module.scss
+++ b/src/css/app.module.scss
@@ -2,3 +2,327 @@
font-size: 16px;
word-wrap: break-word;
}
+
+.topBar {
+ display: flex;
+ flex-direction: row;
+}
+
+.nowPlayingSidebar {
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height:auto;
+}
+
+.trackInfoPrimary {
+ width: 280px;
+ margin-top: 35px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.trackCover {
+ border-radius: 5px;
+ width: 250px;
+ height: 250px;
+}
+
+.statsBlock {
+ width: 105%;
+ margin-top: 40px;
+ margin: 20px;
+ margin-right: 0px;
+ margin-bottom: 0px;
+ margin-left: 0px;
+ border-radius: 5px;
+}
+
+.statsBlock {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ padding: 10px;
+ padding-right: 0px;
+ padding-top: 0px;
+}
+
+.statContainer {
+ background-color: rgb(81, 126, 97);
+ width: 30%;
+ height: 145px;
+ border-radius: 9px;
+ margin: 5px;
+ padding: 10px;
+ padding-left: 30px;
+ padding-right: 30px;
+ padding-bottom: 10px;
+ display: flex;
+}
+
+.statContainer:hover {
+ background-color: rgb(99, 155, 119);
+}
+
+.statTitle {
+ font-weight: bolder;
+ font-size: larger;
+}
+
+.statLabel {
+ font-weight: 600;
+ width: 100px;
+ text-overflow: ellipsis;
+}
+
+.statValue {
+ margin-top: 10px;
+ font-weight: 600;
+}
+
+.graphicContainer {
+ justify-content: flex-end;
+ align-self: center;
+ margin-left: auto;
+ width: 100px;
+ height: 100px;
+}
+
+.recommendationsSection {
+ width: 750px;
+ padding-bottom: 20px;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.recommendationsBlock {
+ border-radius: 5px;
+ margin-top: 8px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(3, 1fr);
+ row-gap: 13px;
+ column-gap: 10px;
+}
+
+.trackContainer {
+ display: flex;
+ background-image: linear-gradient(to right, rgb(43, 43, 43), rgb(79, 79, 79));
+ border-radius: 10px;
+ padding: 10px;
+ padding-right: 20px;
+}
+
+.trackContainer:hover {
+ background-image: linear-gradient(to right, rgb(62, 62, 62), rgb(99, 99, 99));
+}
+
+.recommendationsCover {
+ width: 70px;
+ height: 70px;
+ border-radius: 6px;
+ margin-right: 20px;
+}
+
+.trackName {
+ width: 150px;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.playIcon {
+ width: 40px;
+ height: 40px;
+ margin-left: auto;
+ align-self: center;
+ filter: brightness(90%);
+}
+
+.playIcon:hover {
+ cursor: pointer;
+ filter: brightness(100%);
+ width: 41px;
+ height: 41px;
+}
+
+.changeRecTragetBtn {
+ border-radius: 10px;
+ font-size: large;
+ padding: 10px;
+ background-color: rgb(81, 126, 97);
+ color: white;
+}
+
+.trackNameText {
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+ white-space: nowrap;
+ position: relative;
+ display: inline-block;
+ transition-delay: 2s;
+ transition-property: right;
+}
+
+.leftSideBar {
+ display: flex;
+ flex-direction: column;
+}
+
+// .scrollTitle {
+// -webkit-animation: linear infinite;
+// -webkit-animation-name: run;
+// -webkit-animation-duration: 5s;
+// animation: linear infinite;
+// animation-name: run;
+// animation-duration: 5s;
+// }
+
+.scrollTitle {
+ animation: scrollText 10s infinite linear;
+ animation-delay: 10s;
+}
+
+@keyframes scrollText {
+ from {
+ transform: translateX(0%);
+ }
+
+ to {
+ transform: translateX(-50%);
+ }
+}
+
+@-webkit-keyframes run {
+ 0% {
+ right: 0;
+ }
+ 50% {
+ right: 100%;
+ }
+ 100% {
+ right: -2%;
+ }
+}
+
+@keyframes run {
+ 0% {
+ right: 0;
+ }
+ 50% {
+ right: 100%;
+ }
+ 100% {
+ right: -2%;
+ }
+}
+
+.recommendationsLabel {
+ color: rgb(227, 227, 227);
+ font-size: 32px;
+ font-weight: 510;
+ margin-bottom: 10px;
+}
+
+.recommendationHeader {
+ display: flex;
+ align-items: center;
+}
+
+.recommendationTarget {
+ color: white;
+ font-weight: 600;
+ font-size: 20px;
+ text-align: center;
+ align-items: center;
+ height: auto;
+ background-color: rgb(81, 126, 97);
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-bottom: 9px;
+ padding-top: 5px;
+ border-radius: 10px;
+ margin-top: 7px;
+}
+
+.recommendationsHeaderSpacer {
+ flex-grow: 1;
+ visibility: hidden;
+}
+
+.settingContainer {
+ display: flex;
+ flex-direction: row;
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-bottom: 10px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.settingLabel {
+ font-size: larger;
+ font-weight: 500;
+ color: white;
+}
+
+.modal {
+ background-color: black;
+ height: 80%;
+ width: 80%;
+ margin-right: 50px;
+ margin-top: 50px;
+ margin-left: 50px;
+ margin-bottom: 50px;
+ text-wrap: wrap;
+}
+
+.settingsModalContainer {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+
+.recommendationsModalContainer {
+ padding: 40px;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.modalHeaderContainer {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 20px;
+}
+
+.sectionHeaderContainer {
+ display: flex;
+ align-items: center;
+}
+
+.settingsIconContainer:hover {
+ background-color: rgb(0, 0, 0);
+ cursor: pointer;
+}
+
+.settingsIconContainer {
+ margin-left: 10px;
+ margin-right: 45px;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ background-color: rgb(43, 43, 43);
+ border-radius: 7px;
+}
+
+.metricsRecommendationContainer {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(4, 1fr);
+ row-gap: 13px;
+ column-gap: 10px;
+}
\ No newline at end of file
diff --git a/src/services/common.tsx b/src/services/common.tsx
new file mode 100644
index 0000000..ba31080
--- /dev/null
+++ b/src/services/common.tsx
@@ -0,0 +1,5 @@
+function getID(uri: string): string {
+ return uri.split(":")[2];
+}
+
+export default getID;
diff --git a/src/services/enhancifyInternalService.tsx b/src/services/enhancifyInternalService.tsx
new file mode 100644
index 0000000..d2b3ef1
--- /dev/null
+++ b/src/services/enhancifyInternalService.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import RecommendedTrack from "../components/RecommendedTrack";
+import { Labels, MetricFeatures, SongMetricData } from "../types/enhancify";
+import { AudioFeaturesResponse, GetRecommendationsResponse } from "../types/spotify-web-api";
+
+// Creates the recommended track view for any response from the Spotify recommendations endpoint
+export function RecommendationsRender(recommendations : GetRecommendationsResponse | {}) {
+ if (Object.keys(recommendations).length == 0) {
+ return;
+ }
+ let recs = (recommendations as GetRecommendationsResponse)["tracks"];
+ let recommendedTracksHTML = [];
+ for (let i = 0; i < recs.length; i++) {
+ let recommendedSong =
+
+ { this.props.progressBar ?
+
+ {this.props.title}
+
+
+ {Math.round(parseFloat(this.props.floatValue) * (this.props.progressBar ? 100 : 1))}
+
+ {/* Label represents the unit (something like dB, bpm, etc.) */}
+ { this.props.label != "" ?
+
+ {this.props.label}
+ : <> }
+
+
+
+
+
:
+ <> }
+