AM-Exporter/front/player.js

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;
            titleSongElement.textContent = `${name} - `

            const titleAlbumElement = document.querySelector('.title-album');
            titleAlbumElement.textContent = album;

            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();