Adds recommendation by artist

src/components/DynamicRecommendations.tsx

@@ -2,10 +2,13 @@ import styles from "../css/app.module.scss";
 import React from "react";
 import getRecommendations from "../services/dynamicRecommendationsService";
 import { GetRecommendationsInput, GetRecommendationsResponse } from "../types/spotify-web-api.d";
+import getID from './../services/common';
 
-class DynamicRecommendations extends React.Component<{}, {queue: Array<string>, recommendations: GetRecommendationsResponse | {}}> {
+class DynamicRecommendations extends React.Component<{}, {songQueue: Array<string>, artistQueue: Array<string>, recTarget: string, recommendations: GetRecommendationsResponse | {}}> {
   state = {
-    queue: Spicetify.LocalStorage.get("queue")?.split(',') || new Array<string>,
+    songQueue: Spicetify.LocalStorage.get("songQueue")?.split(',') || new Array<string>,
+    artistQueue: Spicetify.LocalStorage.get("artistQueue")?.split(',') || new Array<string>,
+    recTarget: "songs",
     recommendations: {},
   }
 
@@ -15,15 +18,21 @@ class DynamicRecommendations extends React.Component<{}, {queue: Array<string>,
 
   generateRecommendations = async () => {
     let apiOptions = new GetRecommendationsInput();
-    apiOptions.data.seed_tracks = this.state.queue.toString();
+    if (this.state.recTarget == "songs") {
+      apiOptions.data.seed_tracks = this.state.songQueue.toString();
+    }
+    else if (this.state.recTarget == "artists") {
+      apiOptions.data.seed_artists = this.state.artistQueue.toString(); 
+    }
+
     var recommendations = await getRecommendations(apiOptions);
     this.setState({
       recommendations: recommendations,
     });
   };
-
+  
   addToQueue = (event?: Event & {data: number}) => {
-    if (!event || !Spicetify.Player.data || this.state.queue.includes(Spicetify.Player.data.item.uri.split(":")[2])) {
+    if (!event || !Spicetify.Player.data) {
       return;
     }
 
@@ -32,31 +41,113 @@ class DynamicRecommendations extends React.Component<{}, {queue: Array<string>,
       return;
     }
 
-    let newQueue = this.state.queue.slice();
-    if (this.state.queue.length == 5) {
+    this.setSongQueue();
+    this.setArtistQueue();
+  };
+
+  setSongQueue = () => {
+    let curSongID = getID(Spicetify.Player.data.item.uri);
+    if (this.state.songQueue && this.state.songQueue[this.state.songQueue.length-1] == curSongID) {
+      return;
+    }
+
+    let newQueue = this.state.songQueue.slice();
+    if (newQueue.includes(curSongID)) {
+      newQueue = newQueue.filter((val, ind) => val != curSongID);
+    }
+
+    newQueue.push(curSongID);
+    if (newQueue.length > 5) {
       newQueue.shift();
     }
 
-    newQueue.push(Spicetify.Player.data.item.uri.split(":")[2]);
     this.setState({
-      queue: newQueue,
+      songQueue: newQueue,
     }, () => {
-      if (Spicetify.LocalStorage.get("queue") == this.state.queue.toString()) {
+      if (Spicetify.LocalStorage.get("songQueue") == this.state.songQueue.toString()) {
         return;
       }
-      Spicetify.LocalStorage.set("queue", this.state.queue.toString());
-      this.generateRecommendations();
+      Spicetify.LocalStorage.set("songQueue", this.state.songQueue.toString());
+      if (this.state.recTarget == "songs") {
+        this.generateRecommendations();
+      }
     });
-  }
+  };
+
+  shouldArtistQueueBeUpdated = (): boolean => {
+    if (!Spicetify.Player.data.item.artists) {
+      return false;
+    }
+    if (!this.state.artistQueue) {
+      return true;
+    }
+
+    for (const artist of Spicetify.Player.data.item.artists) {
+      let fromIndex = Math.max(0, this.state.artistQueue.length - Spicetify.Player.data.item.artists.length);
+      if (!this.state.artistQueue.includes(getID(artist.uri), fromIndex)) {
+        return true;
+      };
+    }
+
+    return false;
+  };
+
+  setArtistQueue = () => {
+    if (!Spicetify.Player.data.item.artists || !this.shouldArtistQueueBeUpdated()) {
+      return;
+    }
+
+    let newArtistQueue = this.state.artistQueue.slice();
+    for (const artist of Spicetify.Player.data.item.artists) {
+      let artistID = getID(artist.uri);
+      if (newArtistQueue.includes(artistID)) {
+        newArtistQueue = newArtistQueue.filter((val, ind) => val != artistID);
+      }
+      newArtistQueue.push(artistID);
+    }
+
+    while (newArtistQueue.length > 5) {
+      newArtistQueue.shift();
+    }
+
+    this.setState({
+      artistQueue: newArtistQueue,
+    }, () => {
+      if (Spicetify.LocalStorage.get("artistQueue") == this.state.artistQueue.toString()) {
+        return;
+      }
+      Spicetify.LocalStorage.set("artistQueue", this.state.artistQueue.toString());
+      if (this.state.recTarget == "artists") {
+        this.generateRecommendations();
+      }
+    });
+  };
+
+  changeRecTarget = () => {
+    if (this.state.recTarget == "songs") {
+      this.setState({
+        recTarget: "artists",
+      }, () => this.generateRecommendations());
+    }
+    else if (this.state.recTarget == "artists") {
+      this.setState({
+        recTarget: "songs",
+      }, () => this.generateRecommendations());
+    }
+  };
 
   render() {
     Spicetify.Player.addEventListener("onprogress", this.addToQueue);
     return (
       <>
         <text className={styles.text}>
-          {String(this.state.queue)}
+          {"songQueue: " + String(this.state.songQueue) + "\n"}
+          {"artistQueue: " + String(this.state.artistQueue) + "\n"}
           {JSON.stringify(Object.keys(this.state.recommendations).length != 0 ? (this.state.recommendations as GetRecommendationsResponse)["tracks"][0].name : {})}
         </text>
+        <button onClick={this.changeRecTarget}>
+          {this.state.recTarget}
+        </button>
       </>
     );
   }

src/services/common.tsx

@@ -0,0 +1,5 @@
+function getID(uri: string): string {
+  return uri.split(":")[2];
+}
+
+export default getID;

src/services/nowPlayingService.tsx

@@ -1,4 +1,5 @@
 import type { AudioFeaturesResponse } from "../types/spotify-web-api";
+import getID from "./common";
 
 async function getAudioFeatures(songURI: string | undefined): Promise<AudioFeaturesResponse | {}> {
     if (!songURI) {
@@ -7,7 +8,7 @@ async function getAudioFeatures(songURI: string | undefined): Promise<AudioFeatu
 
     var accessToken = Spicetify.Platform.Session.accessToken;
 
-    var songID = songURI.split(":")[2];
+    var songID = getID(songURI);
     let response = await fetch(
         "https://api.spotify.com/v1/audio-features/" + songID,
         {