From 9311b28160cf0ae033fa9953bb4fd55b18e64b7d Mon Sep 17 00:00:00 2001 From: eniteCZ Date: Thu, 1 Dec 2022 15:31:39 -0500 Subject: [PATCH 1/3] Added randomisation and selection of 10 songs only --- client/script.js | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/client/script.js b/client/script.js index 948cee0db..8d1d81c7f 100644 --- a/client/script.js +++ b/client/script.js @@ -5,6 +5,12 @@ const clientSecret = '6f2f0a36046f4f21980873a48c7bdab0'; // API dialogue functions +function getRandomIntInclusive(min, max) { + const newMin = Math.ceil(min); + const newMax = Math.floor(max); + return Math.floor(Math.random() * (newMax - newMin + 1) + newMin); // The maximum is inclusive and the minimum is inclusive + } + async function getToken() { const result = await fetch('https://accounts.spotify.com/api/token',{ @@ -45,9 +51,7 @@ async function getPlaylistsByGenre(token, genreId, limit) { } -async function getTracks(token, tracksEndPoint) { - - const limit = "10"; +async function getTracks(token, tracksEndPoint, limit) { const result = await fetch(`${tracksEndPoint}?limit=${limit}`, { method: 'GET', @@ -83,7 +87,7 @@ async function initSongs(){ //console.log(playlist.href); if(playlist !== null){ const plEndpoint = `${playlist.href}/tracks` - const tracks = await getTracks(token, plEndpoint); + const tracks = await getTracks(token, plEndpoint,10); listOfTracks.push(...tracks.items) console.log(listOfTracks.length) //console.log(tracks.items) @@ -101,12 +105,17 @@ async function initSongs(){ }); const plalylistSg = "https://api.spotify.com/v1/playlists/37i9dQZF1DXcF6B6QPhFDv/tracks" - const tracks = await getTracks(token, plalylistSg); + const tracks = await getTracks(token, plalylistSg, 20); + console.log(tracks) return tracks.items } + + async function songNamesArray(){ const songs = await initSongs(); + let files = ['a', 'b', 'c', 'd', 'e', 'f']; + console.log(songs) const array = []; songs.forEach(element => { @@ -121,6 +130,18 @@ async function songNamesArray(){ // UI Handling +function getRandomTen(list) { + console.log('fired restaurants list'); + const range = [...Array(10).keys()]; + const newArray = range.map((item) => { + const index = getRandomIntInclusive(0, list.length); + let picked = list[index]; + // Gets us the desired data only. + return picked; + }); + return newArray; + } + function injectHTML(list) { console.log('fired injectHTML'); const target = document.querySelector('#music_list'); @@ -138,12 +159,12 @@ function injectHTML(list) { async function init(){ const submit = document.querySelector('#submit'); - let songArray = await songNamesArray(); submit.addEventListener('click', (e) => { e.preventDefault(); - injectHTML(songArray); - console.log(songArray); + sample = getRandomTen(songArray) + injectHTML(sample); + console.log(sample); }) } From 9860161e45762e2837dea86a7c82c8dcda1545a7 Mon Sep 17 00:00:00 2001 From: eniteCZ Date: Thu, 1 Dec 2022 17:17:11 -0500 Subject: [PATCH 2/3] Style changes --- client/script.js | 67 +++++++++++++++++++++++++----------------------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/client/script.js b/client/script.js index 8d1d81c7f..0584e8307 100644 --- a/client/script.js +++ b/client/script.js @@ -12,7 +12,7 @@ function getRandomIntInclusive(min, max) { } async function getToken() { - + // Gets authorisation token const result = await fetch('https://accounts.spotify.com/api/token',{ method: 'POST', headers: { @@ -27,7 +27,7 @@ async function getToken() { } async function getGenres(token) { - + // Gets a list of genres const result = await fetch(`https://api.spotify.com/v1/browse/categories?locale=sv_US&limit=40`, { method: 'GET', headers: { 'Authorization' : 'Bearer ' + token} @@ -38,7 +38,7 @@ async function getGenres(token) { } async function getPlaylistsByGenre(token, genreId, limit) { - + //Based on genre ID gets a list of playlists of that genre const result = await fetch(`https://api.spotify.com/v1/browse/categories/${genreId}/playlists?limit=${limit}`, { method: 'GET', headers: { 'Authorization' : 'Bearer ' + token} @@ -52,7 +52,7 @@ async function getPlaylistsByGenre(token, genreId, limit) { } async function getTracks(token, tracksEndPoint, limit) { - + //Based on a playlist gets a list of songs from that playlist const result = await fetch(`${tracksEndPoint}?limit=${limit}`, { method: 'GET', headers: { 'Authorization' : 'Bearer ' + token} @@ -62,39 +62,37 @@ async function getTracks(token, tracksEndPoint, limit) { return data; } -async function getTrack(token, tracksEndPoint) { - - const result = await fetch(`${tracksEndPoint}`, { - method: 'GET', - headers: {'Authorization' : 'Bearer ' + token} - }); - - const data = result.json(); - return data; -} async function initSongs(){ - const listOfTracks = []; - const token = await getToken(); + // A function that gets us a lot of songs from different genres on spotify + const listOfTracks = []; //Initialize output + const token = await getToken(); //Get token console.log(token) const genres = await getGenres(token) - let prom = new Promise((resolve, reject) => { - genres.forEach(async (genre, index, array) => { - //console.log(`Getting tracks from: ${genre.name} has id: ${genre.id}`) + let prom = new Promise((resolve, reject) => { //Wrapped the loop in a promise to make the rest of the func wait for the loop to execute + + genres.map(async (genre, index, array) => { + + console.log(`Getting tracks from: ${genre.name} has id: ${genre.id}`) const playlists = await getPlaylistsByGenre(token, genre.id, 3) + if(typeof playlists !== "undefined"){ - playlists.forEach(async playlist =>{ + + playlists.map(async playlist =>{ + //console.log(playlist.href); if(playlist !== null){ const plEndpoint = `${playlist.href}/tracks` const tracks = await getTracks(token, plEndpoint,10); + tracks.items.map(obj => ({ ...obj, gen: genre.name })) listOfTracks.push(...tracks.items) - console.log(listOfTracks.length) - //console.log(tracks.items) + console.log(listOfTracks) } }) - } - if (index === array.length -1) resolve(); + } + if (index === array.length -1) { + resolve() + }; }); }); @@ -104,10 +102,11 @@ async function initSongs(){ console.log(listOfTracks.length); }); + //This is a placeholder part until I make all of the above work. const plalylistSg = "https://api.spotify.com/v1/playlists/37i9dQZF1DXcF6B6QPhFDv/tracks" const tracks = await getTracks(token, plalylistSg, 20); console.log(tracks) - return tracks.items + return tracks.items.map(obj => ({ ...obj, gen: "Rock"})) } @@ -121,7 +120,9 @@ async function songNamesArray(){ songs.forEach(element => { array.push({ name : element.track.name, - link : element.track.external_urls.spotify + link : element.track.external_urls.spotify, + image_url : element.track.album.images[0].url, + genre : element.gen }) }) return(array) @@ -129,19 +130,21 @@ async function songNamesArray(){ } -// UI Handling +// -------------------UI Handling------------------- + +//Get random 10 items from an aray (to be replacedby betterselection item) function getRandomTen(list) { - console.log('fired restaurants list'); + console.log('fired get 10 songs'); const range = [...Array(10).keys()]; - const newArray = range.map((item) => { + const newArray = range.map(() => { const index = getRandomIntInclusive(0, list.length); let picked = list[index]; - // Gets us the desired data only. return picked; }); return newArray; } +// Inject a song to the page function injectHTML(list) { console.log('fired injectHTML'); const target = document.querySelector('#music_list'); @@ -156,14 +159,14 @@ function injectHTML(list) { }); } - +// Turn the site script on async function init(){ const submit = document.querySelector('#submit'); let songArray = await songNamesArray(); submit.addEventListener('click', (e) => { e.preventDefault(); sample = getRandomTen(songArray) - injectHTML(sample); + injectHTML(sample) console.log(sample); }) From 1b78c74e66d975cc96911755b459965123c576ba Mon Sep 17 00:00:00 2001 From: eniteCZ Date: Thu, 1 Dec 2022 21:00:26 -0500 Subject: [PATCH 3/3] Further polishing of the randomization --- client/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/script.js b/client/script.js index 0584e8307..41aa0b966 100644 --- a/client/script.js +++ b/client/script.js @@ -104,7 +104,7 @@ async function initSongs(){ //This is a placeholder part until I make all of the above work. const plalylistSg = "https://api.spotify.com/v1/playlists/37i9dQZF1DXcF6B6QPhFDv/tracks" - const tracks = await getTracks(token, plalylistSg, 20); + const tracks = await getTracks(token, plalylistSg, 60); console.log(tracks) return tracks.items.map(obj => ({ ...obj, gen: "Rock"})) }