Немножко разбросал track_list.html по шаблонам

music_storage/static/js/player.js

@@ -0,0 +1,156 @@
+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);
+    });
+});