diff --git a/front/html.html b/front-example/html.html
similarity index 98%
rename from front/html.html
rename to front-example/html.html
index dc92efc..279e075 100644
--- a/front/html.html
+++ b/front-example/html.html
@@ -1,5 +1,4 @@
-
-
+
diff --git a/front/player.js b/front-example/player.js
similarity index 89%
rename from front/player.js
rename to front-example/player.js
index 6869a79..8dafad9 100644
--- a/front/player.js
+++ b/front-example/player.js
@@ -5,7 +5,7 @@ function secondsToMinutesAndSeconds(seconds) {
}
function fetchDataAndAnimate() {
// fetch('http://192.168.1.58:3005/music/get')
- fetch('http://192.168.1.64:3005/music/get')
+ fetch('https://api.noh.am/music/get')
.then(response => response.json())
.then(data => {
const artist = data.artist;
@@ -20,6 +20,7 @@ function fetchDataAndAnimate() {
let pPosition = Math.round(parseFloat(data.pPosition) + decalage - 3);
const duration = parseFloat(data.duration);
const status = data.status;
+ const dominantcolor = data.dominantcolor;
const titleSongElement = document.querySelector('.title-song');
// titleSongElement.textContent = name;
@@ -31,8 +32,12 @@ function fetchDataAndAnimate() {
const artistSongElement = document.querySelector('.name-artist');
artistSongElement.textContent = artist;
- const artwork_urlElement = document.querySelector('.artwork_url');
- artwork_urlElement.src = artwork_url;
+ const artworkElement = document.querySelector('.artwork_url');
+ artworkElement.src = artwork_url;
+
+ const playerDiv = document.querySelector('.player');
+ const colorString = 'rgb(' + dominantcolor.join(',') + ')';
+ playerDiv.style.backgroundColor = colorString;
const artist_urlElement = document.querySelector('.artist-url');
artist_urlElement.href = artist_url;
@@ -42,7 +47,7 @@ function fetchDataAndAnimate() {
element.href = itunes_url;
});
- if (status === 'playing') {
+ if (status === 'playing' && (pPosition / duration) * 100 <= 100) {
const totaltimeElement = document.querySelector('.total-time');
totaltimeElement.textContent = time;
diff --git a/front/style.css b/front-example/style.css
similarity index 97%
rename from front/style.css
rename to front-example/style.css
index 6aeaf87..fd74acb 100644
--- a/front/style.css
+++ b/front-example/style.css
@@ -9,7 +9,6 @@
body {
background-repeat: no-repeat;
background-size: cover;
-
}
body * {
@@ -47,7 +46,7 @@ body * {
}
.player {
- background-color: #080747;
+ background-color: rgb(119, 119, 119);
padding: 28px;
border-radius: 20px;
}