diff --git a/html.html b/html.html index 0baa38e..6853bcd 100644 --- a/html.html +++ b/html.html @@ -9,6 +9,7 @@ Music Player + @@ -19,12 +20,15 @@
- LogoMusicImage + LogoMusicImage
-

Tired of a Bewildered Heart

-

Elijah Lee & Casiio

+ +

+ + +

+
@@ -32,12 +36,11 @@
-
2:12
-
00:50
+
+
- diff --git a/player.js b/player.js new file mode 100644 index 0000000..c1a21a1 --- /dev/null +++ b/player.js @@ -0,0 +1,77 @@ +function secondsToMinutesAndSeconds(seconds) { + const minutes = Math.floor(seconds / 60); + const remainingSeconds = seconds % 60; + return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; +} +function fetchDataAndAnimate() { + fetch('http://127.0.0.1:5000/music/get') + .then(response => response.json()) + .then(data => { + const artist = data.artist; + const album = data.album; + const artist_url = data.artist_url; + const artwork_url = data.artwork_url; + const time = data.time; + const itunes_url = data.itunes_url; + const name = data.name; + const timestamp = parseFloat(data.timestamp); + const decalage = (Date.now()/1000 - timestamp); + let pPosition = Math.round(parseFloat(data.pPosition) + decalage-3); + const duration = parseFloat(data.duration); + + const titleSongElement = document.querySelector('.title-song'); + titleSongElement.textContent = name; + + const artistSongElement = document.querySelector('.name-artist'); + artistSongElement.textContent = artist; + + const artwork_urlElement = document.querySelector('.artwork_url'); + artwork_urlElement.src = artwork_url; + + const artist_urlElement = document.querySelector('.artist-url'); + artist_urlElement.href = artist_url; + + const songUrlElements = document.querySelectorAll('.song-url'); + songUrlElements.forEach(element => { + element.href = itunes_url; + }); + + const totaltimeElement = document.querySelector('.total-time'); + totaltimeElement.textContent = time; + + const lasttimeElement = document.querySelector('.last-time'); + lasttimeElement.textContent = secondsToMinutesAndSeconds(pPosition); + + const rapport = (pPosition / duration) * 100; + const trackElements = document.querySelectorAll('.track'); + trackElements.forEach(element => { + const style = window.getComputedStyle(element, '::after'); + const currentWidth = parseFloat(style.getPropertyValue('width')); + element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`); + }); + + let intervalId; + + function updateProgress() { + const lasttimeElement = document.querySelector('.last-time'); + lasttimeElement.textContent = secondsToMinutesAndSeconds(pPosition); + const rapport = (pPosition / duration) * 100; + const trackElements = document.querySelectorAll('.track'); + trackElements.forEach(element => { + element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`); + }); + pPosition++; + if (pPosition > duration) { + clearInterval(intervalId); + fetchDataAndAnimate(); + } + } + + intervalId = setInterval(updateProgress, 1000); + }) + .catch(error => { + console.error('Error fetching data:', error); + }); +} + +fetchDataAndAnimate(); \ No newline at end of file diff --git a/style.css b/style.css index ce4cbb3..28afbb9 100644 --- a/style.css +++ b/style.css @@ -31,6 +31,11 @@ body * { height: 100vh; } +.song-url, .artist-url { + text-decoration: none; + color: inherit; +} + #player { grid-area: B; height: fit-content; @@ -103,19 +108,16 @@ body * { .track::after { content: ''; height: 6px; - width: 85%; + width: var(--new-width); display: block; background: #D9D9D9; border-radius: 10px; - - } .time { opacity: 0.7; font-size: 14px; color: gainsboro; - display: flex; justify-content: space-between; padding-top: 9.6px; @@ -125,15 +127,9 @@ body * { #boxes { display: flex; flex-direction: column; - max-width: 270px; margin: auto; - - height: auto; padding-block: 60px; } - - - } \ No newline at end of file diff --git a/test.py b/test.py index 0b956ba..1d60a76 100644 --- a/test.py +++ b/test.py @@ -47,6 +47,7 @@ def main(): if currentsong['status'] == 'playing': if currentsong['persistent ID'] != persistendId: persistendId = currentsong['persistent ID'] + currentsong['timestamp'] = time.time() (currentsong['artwork_url'], currentsong['itunes_url'], currentsong['artist_url']) = get_track_extras(currentsong['name'], currentsong['artist'], currentsong['album']) print(post(currentsong)) timets = float(currentsong['duration'].replace(",", "."))-float(currentsong['pPosition'].replace(",", ".")) + 3