UMD-INST377 · eniteCZ · Oct 18, 2022 · Nov 11, 2022 · Nov 14, 2022 · Nov 22, 2022
diff --git a/README.md b/README.md
@@ -1,6 +1,33 @@
-# This is your readme
-You are required to fill it in with documentation similar to that found in the Sequelize example for the course as part of your final project.
+# Music: New Horizons
+This is an INST377 final project website by Filip Radmanovic and Minghan Cai. Please visit our webpage at:
+
+https://mingc98.github.io/Group102-01-Final-Project-Music-NewHorizon/index.html
+
+## Broad description
+While using spotify most of us search for a song we know and listen to and then either choose a playlist with what is already know or we let the algorithm take the reigns and play songs for us based on our known preferences. 
+
+The intent of the project is to provide the user with song suggestions for a particular genre that have not been generated based on their preferences, thus broadening their musical horizon. When a user selects a genre and presses the button, we show a list of 9 randomly selected songs along with the links to them on Spotify, a galery of their album covers and a chart of their length. Once a user has picked a song they can click on the link which will tak them to spotify web page where they can listen to it.
+
+
+
+## Usage manual
+This page should work on all mainstram browsers on mobile and fixed divices. 
+
+ * First when you open the page, it will load a selection of genres to the dropdown menu prompting you to select a genre
+ * Once you have selected a genre give the page a second to retrieve a list of songs
+ * Then press the "Broaden my horizon" button
+ * You can look at the names of the songs and select whichever you like best, you will be redirected to spotify where you can listen to it.
+ * If you want to know more about us, please visit the "About us" link at the bottom of the page.
+
+
+## API 
+We are using the Spotify API. For details please refer to the official documentation:
+
+https://developer.spotify.com/documentation/web-api/
+
+## Visualizations
+We use 2 visualizations in this project: 
+ * An image galery of album covers handled internaly by our code.
+ * A chart of song lengths using the chart.js library
+
 
-### How to use Markdown
-Markdown is a text notation system used in Discord, Whatsapp and similar to structure pages without writing HTML at all. You'll be using it for your documentation.
-* [Markdown guide](https://www.markdownguide.org/cheat-sheet/)
diff --git a/about_us.html b/about_us.html
@@ -0,0 +1,57 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music: Broad Horizons</title>
+    <link rel="stylesheet" href="./client/styles.css">
+</head>
+<body>
+    <div class="Wrapper">
+        <div class='header'>
+            <h2> INST377 group 102-01 </h2>
+        </div>
+
+        <div class="paragraph">
+            <p>
+                This is Minghan Cai and Filip Radmanovic's final project for INST377. Please visit our Webpage at:
+            </p>
+            <p><a href='https://mingc98.github.io/Group102-01-Final-Project-Music-NewHorizon/index.html'>'https://mingc98.github.io/Group102-01-Final-Project-Music-NewHorizon/index.html'</a></p>
+
+            <p1>
+                Broad description
+            </p1>
+            <p>
+                While using spotify most of us search for a song we know and listen to and then either choose a playlist with what is already know or we let the algorithm take the reigns and play songs for us based on our known preferences.
+                The intent of the project is to provide the user with song suggestions for a particular genre that have not been generated based on their preferences, thus broadening their musical horizon. When a user selects a genre and presses the button, we show a list of 9 randomly selected songs along with the links to them on Spotify, a galery of their album covers and a chart of their length. Once a user has picked a song they can click on the link which will tak them to spotify web page where they can listen to it.
+            </p>
+
+            <p1>
+                Usage manual
+            </p1>
+            <p>First when you open the page, it will load a selection of genres to the dropdown menu prompting you to select a genre</p>
+            <p>Once you have selected a genre give the page a second to retrieve a list of songs</p>
+            <p>Then press the "Broaden my horizon" button</p>
+            <p>You can look at the names of the songs and select whichever you like best, you will be redirected to spotify where you can listen to it.</p>
+            <p>If you want to know more about us, please visit the "About us" link at the bottom of the page.</p>
+
+            <p1>API</p1>
+            <p>We are using the Spotify API. For details please refer to the official documentation:</p>
+            <p><a href='https://developer.spotify.com/documentation/web-api/'>'https://developer.spotify.com/documentation/web-api/'</a></p>
+
+            <p1>Visualizations</p1>
+            <p>We use 2 visualizations in this project:</p>
+            <p>An image galery of album covers handled internaly by our code.</p>
+            <p>A chart of song lengths using the chart.js library</p>
+        </div>
+
+
+        <div class='footer'>
+            <p>Go to <a href='index.html'>Our project's main page</a></p>
+            <p>MingC98 <a href='https://github.com/MingC98/INST377-Lab-Work'>My Github account</a></p>
+            <p>eniteCZ <a href='https://github.com/eniteCZ/INST377-Lab-Work'>My Github account</a></p>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/client/favicon.ico b/client/favicon.ico
diff --git a/client/index.html b/client/index.html
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,268 @@
+/* eslint-disable no-trailing-spaces */
+/* eslint-disable max-len */
+/* eslint-disable linebreak-style */
+// const e = require("express");
+
+const clientId = 'd9827efb2c79463b92becb457a635a04';
+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() {
+  // Gets authorisation token
+  const result = await fetch('https://accounts.spotify.com/api/token', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Authorization: `Basic ${btoa(`${clientId}:${clientSecret}`)}`
+    },
+    body: 'grant_type=client_credentials'
+  });
+
+  const data = await result.json();
+  return data.access_token;
+}
+
+async function getGenres(token) {
+  // Gets a list of genres
+  const result = await fetch(
+    'https://api.spotify.com/v1/browse/categories?locale=US&limit=45',
+    {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${token}` }
+    }
+  );
+
+  const data = await result.json();
+  return data.categories.items;
+}
+
+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}` }
+    }
+  );
+
+  const data = await result.json();
+  if (typeof data.playlists !== 'undefined') {
+    return data.playlists.items;
+  }
+}
+
+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}` }
+  });
+
+  const data = result.json();
+  return data;
+}
+
+// --------------------- Data handling functions ---------------------
+
+async function initSongs(plalylistSg, genre, token) {
+  // A function that gets us a the songs from a playlist
+
+  const tracks = await getTracks(token, plalylistSg, 60);
+  console.log(tracks.items);
+  return tracks.items.map((obj) => ({ ...obj, gen: genre }));
+}
+
+function songsToArray(songs) {
+  console.log(songs);
+  const array = [];
+  songs.forEach((element) => {
+    array.push({
+      name: element.track.name,
+      link: element.track.external_urls.spotify,
+      image_url: element.track.album.images[0].url,
+      genre: element.gen,
+      length: element.track.duration_ms
+    });
+  });
+  return array;
+}
+
+function songLenArray(list) {
+  const array = [];
+  list.forEach((element) => {
+    array.push(element.length);
+  });
+  return array;
+}
+
+function songNameArray(list) {
+  const array = [];
+  list.forEach((element) => {
+    array.push(element.name);
+  });
+  return array;
+}
+// -------------------UI Handling-------------------
+
+// Inject genres into the dropdown menu
+function insertGenres(text, value, element) {
+  const html = `<option value="${value}">${text}</option>`;
+  element.insertAdjacentHTML('beforeend', html);
+}
+
+// Get random 9 items from an aray (to be replacedby betterselection item)
+function getRandomTen(list) {
+  console.log('fired get 9 songs');
+  const range = [...Array(9).keys()];
+  const newArray = range.map(() => {
+    const index = getRandomIntInclusive(0, list.length - 1);
+    const picked = list[index];
+    return picked;
+  });
+  return newArray;
+}
+
+// Inject a song to the page
+function injectHTML(list) {
+  console.log('fired injectHTML');
+  const target = document.querySelector('#music_list');
+  target.innerHTML = '';
+
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    el.innerHTML = `<a href=${item.link}>${item.name}</a>`;
+    listEl.appendChild(el);
+  });
+}
+
+// Inject images
+function injectImages(list) {
+  console.log('fired injectImages');
+  const target = document.querySelector('#Imagebox');
+  target.innerHTML = '<h2>Songs are from these albums</h2><br>';
+
+  list.forEach((item) => {
+    const el = `<img src="${item.image_url}"></img>`;
+    target.innerHTML += el;
+  });
+}
+
+function initChart(songs, songlength) {
+  const ctx = document.getElementById('myChart');
+
+  // eslint-disable-next-line no-new
+  const m_chart = new Chart(ctx, {
+    type: 'bar',
+    // eslint-disable-next-line linebreak-style
+    data: {
+      labels: songs,
+      datasets: [
+        {
+          label: 'Length of the song(ms)',
+          data: songlength,
+          borderWidth: 4
+        }
+      ]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+  return m_chart;
+}
+
+// ---------------------------Page Initialisation-------------------------------------------
+
+// Turn the site script on
+async function init() {
+  // Step 1: Get token, initialise variables
+  const token = await getToken();
+
+  let myChart = new Chart();
+
+  document.getElementById('GeneratedContents').style.display = 'none';
+  document.getElementById('Chartbox').style.display = 'none';
+  const selectGenre = document.querySelector('#select_genre');
+  const submit = document.querySelector('#submit');
+  let playlistEndpoint = '';
+  let songArray = [];
+  const chartTarget = document.querySelector('#myChart');
+
+  // Step 2: Get genre selection and insert the options into HTML
+  const genres = await getGenres(token);
+  console.log(genres);
+  genres.map((genre) => {
+    insertGenres(genre.name, genre.id, selectGenre);
+  });
+
+  // Step 3: When user selects a genre get a playlist for it.
+  selectGenre.addEventListener('change', async () => {
+    // get the genre id and name associated with the selected genre
+    const genreId = selectGenre.options[selectGenre.selectedIndex].value;
+    const genreName = selectGenre.options[selectGenre.selectedIndex].innerHTML;
+
+    // get the playlist based on a genre
+    console.log(
+      `Getting tracks from genre: ${genreName} which has the id: ${genreId}`
+    );
+    const playlist = await getPlaylistsByGenre(token, genreId, 1);
+
+    // store the track endpoint of the playlist
+    playlistEndpoint = `${playlist[0].href}/tracks`;
+    console.log(playlistEndpoint);
+
+    // Finally get the tracks and turn them into an array
+    const tracks = await initSongs(playlistEndpoint, genreName, token);
+    songArray = songsToArray(tracks);
+    document.getElementById('GeneratedContents').style.display = 'none';
+  });
+
+  // Step 4: When user presses the submit button (broaden my horizons) we display 9 random songs out of those retrived.
+  // If the user keeps pressing submit he should get new songs from the same genre.
+  // If user changes genre the generate content will be hidden until he presses the button again
+  submit.addEventListener('click', (e) => {
+    e.preventDefault();
+    const sample = getRandomTen(songArray);
+    const sample_name = songNameArray(sample);
+    const sample_len = songLenArray(sample);
+    injectHTML(sample);
+    injectImages(sample);
+    document.getElementById('GeneratedContents').style.display = 'flex';
+
+    document.getElementById('Chartbox').style.display = 'block';
+
+    myChart.destroy();
+    myChart = initChart(sample_name, sample_len);
+
+    filter.addEventListener('click', (z) => {
+      z.preventDefault();
+      const filterData = myChart.data.datasets[0].data.filter((value) => value > 200000);
+
+      const filterLabels = [];
+      let i = 0;
+      for (i; i < filterData.length; i += 1) {
+        const result = myChart.data.datasets[0].data.indexOf(filterData[i]);
+        const label = myChart.data.labels[result];
+        filterLabels.push(label);
+      }
+      myChart.data.datasets[0].data = filterData;
+      myChart.data.labels = filterLabels;
+      myChart.update();
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', async () => init());