music-storage/music_storage/static/js/player.js

document.addEventListener('DOMContentLoaded', function () {
    const audioPlayer = document.getElementById('audioPlayer');
    const trackItems = document.querySelectorAll('.track-item');
    const currentTrack = document.getElementById('currentTrack');
    const currentArtist = document.getElementById('currentArtist');
    const playerContainer = document.getElementById('playerContainer');

    const playPauseBtn = document.getElementById('playPauseBtn');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');

    const progressBar = document.getElementById('audioProgress');
    const currentTimeElem = document.getElementById('currentTime');
    const durationElem = document.getElementById('durationTime');

    let currentIndex = -1;

    function updateUI(title, artist) {
        currentTrack.textContent = title;
        currentArtist.textContent = 'Исполнитель: ' + artist;
    }

    function formatTime(seconds) {
        const m = Math.floor(seconds / 60);
        const s = Math.floor(seconds % 60);
        return `${m}:${s < 10 ? '0' : ''}${s}`;
    }

    function updateProgressUI(current, duration) {
        if (!progressBar) return;
        progressBar.max = duration || 0;
        progressBar.value = current || 0;

        if (currentTimeElem) currentTimeElem.textContent = formatTime(current || 0);
        if (durationElem) durationElem.textContent = formatTime(duration || 0);
    }

    // Обновление прогресса при воспроизведении
    audioPlayer.addEventListener('timeupdate', () => {
        updateProgressUI(audioPlayer.currentTime, audioPlayer.duration);
    });

    // Перемотка через прогресс-бар
    if (progressBar) {
        progressBar.addEventListener('input', () => {
            audioPlayer.currentTime = progressBar.value;
            updateProgressUI(audioPlayer.currentTime, audioPlayer.duration);
        });
    }

    // Обновление UI после загрузки метаданных
    audioPlayer.addEventListener('loadedmetadata', () => {
        updateProgressUI(0, audioPlayer.duration);
    });

    function updateMediaSession(title, artist) {
        if (!('mediaSession' in navigator)) return;

        navigator.mediaSession.metadata = new MediaMetadata({
            title: title,
            artist: artist,
            artwork: [
                { src: '/static/default_cover.png', sizes: '512x512', type: 'image/png' }
            ]
        });

        navigator.mediaSession.setActionHandler('play', () => audioPlayer.play());
        navigator.mediaSession.setActionHandler('pause', () => audioPlayer.pause());
        navigator.mediaSession.setActionHandler('previoustrack', () => playTrack(currentIndex - 1));
        navigator.mediaSession.setActionHandler('nexttrack', () => playTrack(currentIndex + 1));
    }
    // ---------------------------

    // Сброс активного трека
    function resetActiveTrack() {
        trackItems.forEach(item => {
            item.classList.remove('active');
        });
    }

    function playTrack(index) {
        if (index < 0 || index >= trackItems.length) return;

        currentIndex = index;
        const item = trackItems[index];

        const src = item.dataset.trackSrc;
        const title = item.querySelector('.track-title').textContent;
        const artist = item.querySelector('.track-artist').textContent.split(': ')[1];

        resetActiveTrack();
        item.classList.add('active');
        updateUI(title, artist);

        // ---------------------------
        // ВЫЗОВ Media Session API
        // ---------------------------
        updateMediaSession(title, artist);
        // ---------------------------

        audioPlayer.src = src;
        audioPlayer.title = artist + ' - ' + title;
        audioPlayer.play().catch(err => console.log(err));

        updatePlayButton(true);
    }

    // Клик по треку
    trackItems.forEach((item, i) => {
        item.addEventListener('click', () => playTrack(i));
    });

    // Auto-next on end
    audioPlayer.addEventListener('ended', () => {
        playTrack(currentIndex + 1);
    });

    // Автоматически скрыть плеер при прокрутке
    let scrollTimer;
    window.addEventListener('scroll', function () {
        clearTimeout(scrollTimer);
        playerContainer.style.opacity = '0.75';

        scrollTimer = setTimeout(() => {
            playerContainer.style.opacity = '1';
        }, 200);
    });

    function updatePlayButton(isPlaying) {
        playPauseBtn.innerHTML = isPlaying
            ? '<i class="fas fa-pause"></i>'
            : '<i class="fas fa-play"></i>';
    }

    playPauseBtn.addEventListener('click', () => {
        if (!audioPlayer.src) return;
        if (audioPlayer.paused) {
            audioPlayer.play();
        } else {
            audioPlayer.pause();
        }
    });

    audioPlayer.addEventListener('play', () => updatePlayButton(true));
    audioPlayer.addEventListener('pause', () => updatePlayButton(false));

    // Next track
    nextBtn.addEventListener('click', () => {
        if (currentIndex !== -1) playTrack(currentIndex + 1);
    });

    // Previous track
    prevBtn.addEventListener('click', () => {
        if (currentIndex !== -1) playTrack(currentIndex - 1);
    });
});