As music supervisors usually already have something in mind when they are looking for a track a quick search option was mandatory in the app:
This results in a list of tracks based on the name of the track or artist:
And shows you a list of recommended songs based on the mood of the first track from the search results list
How it works
When users start typing the in the searchbar this is registered by an eventListener:
input.addEventListener(
'input',
debounce((event) => {
// saves the value of what the user is typing in userInput
const userInput = event.target.value;
// intercepts the url the form is pointing at
const url = document.getElementById(formID).getAttribute('action');
// shapes the url with the query state
history.replaceState({}, '', `?searchValue=${userInput}&token=${token}`);
// then a fetch to our own server is made with the id and token passed, these are used on the server to fetch the right playlist the Spotify api
fetch(`${url}?query=${userInput}&async=true&token=${token}`)
.then((res) => res.text())
.then((html) => {
// the server than renders the component, with the right data and sends this back to the client
const resultComponent = document.querySelector('.search-results');
resultComponent.innerHTML = html;
});
});
})
