diff --git a/music_storage/static/css/main.css b/music_storage/static/css/main.css index 313d12c..a7b6262 100644 --- a/music_storage/static/css/main.css +++ b/music_storage/static/css/main.css @@ -25,7 +25,7 @@ header { color: white; border-radius: 10px; margin-bottom: 30px; - box-shadow: 0 4px 15px rgba(0,0,0,0.1); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } h1 { @@ -59,7 +59,7 @@ h1 { background: rgba(255, 255, 255, 0.15); border-radius: 8px; transition: background 0.3s ease, transform 0.2s ease; - box-shadow: 0 2px 6px rgba(0,0,0,0.15); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .nav-link:hover { @@ -69,4 +69,10 @@ h1 { .nav-link:active { transform: translateY(0); +} + +@media (max-width: 768px) { + .container { + padding: 15px; + } } \ No newline at end of file diff --git a/music_storage/static/css/player.css b/music_storage/static/css/player.css new file mode 100644 index 0000000..574cbbe --- /dev/null +++ b/music_storage/static/css/player.css @@ -0,0 +1,141 @@ +.player-container { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 75%); + color: white; + padding: 15px 20px; + box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); + z-index: 1000; + transition: all 0.3s ease; +} + +.player-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +} + +.current-track { + font-weight: 600; + font-size: 1.1rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.current-artist { + font-size: 0.9rem; + opacity: 0.9; +} + +.audio-player { + width: 100%; + margin: 0; + border-radius: 4px; + background-color: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.player-controls { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + flex-wrap: wrap; + gap: 10px; +} + +.player-time { + font-size: 0.85rem; + opacity: 0.9; + min-width: 60px; +} + +.player-buttons { + display: flex; + gap: 10px; +} + +.control-btn { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; +} + +.control-btn:hover { + background: rgba(255, 255, 255, 0.3); + transform: scale(1.1); +} + + +@media (max-width: 768px) { + .player-container { + padding: 12px 15px; + } +} + +.player-controls { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.player-buttons { + display: flex; + gap: 15px; +} + +.control-btn { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + width: 42px; + height: 42px; + border-radius: 50%; + font-size: 16px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all .2s ease; +} + +.control-btn:hover { + background: rgba(255, 255, 255, 0.35); + transform: scale(1.15); +} + +.player-header { + text-align: center; + margin-bottom: 5px; +} + +.player-header .current-track { + font-size: 1.2rem; + font-weight: bold; +} + +.player-header .current-artist { + opacity: .9; +} + +@media (max-width: 768px) { + .player-header .current-track { + font-size: 1.1rem; + } + + .player-header .current-artist { + font-size: 0.9rem; + } +} \ No newline at end of file diff --git a/music_storage/static/css/track_list.css b/music_storage/static/css/track_list.css new file mode 100644 index 0000000..ba7cdd8 --- /dev/null +++ b/music_storage/static/css/track_list.css @@ -0,0 +1,89 @@ +.track-list { + list-style: none; + background: white; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + overflow: hidden; + margin-bottom: 30px; +} + +.track-item { + padding: 20px; + border-bottom: 1px solid #eee; + display: flex; + align-items: center; + gap: 20px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.track-item:last-child { + border-bottom: none; +} + +.track-item:hover { + background-color: #f8f9fa; + transform: translateX(5px); +} + +.track-item.active::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 100%); +} + +.track-item.playing { + background-color: #e3f2fd; +} + +.track-item.playing .track-title { + color: #667eea; +} + +.track-info { + flex: 1; +} + +.track-title { + font-weight: 600; + color: #2c3e50; + margin-bottom: 5px; + font-size: 1.1rem; +} + +.track-artist { + color: #7f8c8d; + font-size: 0.95rem; +} + +.empty-state { + text-align: center; + padding: 50px 20px; + color: #7f8c8d; +} + +.empty-state i { + font-size: 3rem; + margin-bottom: 15px; + color: #bdc3c7; +} + +.empty-state p { + font-size: 1.1rem; + margin-top: 10px; +} + +@media (max-width: 768px) { + .track-item { + flex-direction: column; + align-items: flex-start; + gap: 10px; + padding: 15px; + } +} \ No newline at end of file diff --git a/music_storage/static/js/player.js b/music_storage/static/js/player.js index e69de29..ee290d4 100644 --- a/music_storage/static/js/player.js +++ b/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 + ? '' + : ''; + } + + 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); + }); +}); \ No newline at end of file diff --git a/music_storage/templates/music/track_list.html b/music_storage/templates/music/track_list.html index ab67c4e..d92a21c 100644 --- a/music_storage/templates/music/track_list.html +++ b/music_storage/templates/music/track_list.html @@ -1,492 +1,29 @@ - - - - - - - Музыкальный сервис - - - - -
-
-

🎵 Музыкальный сервис

-

Ваша коллекция треков

-
- - +
+{% include 'player.html' %} +{% endblock %} diff --git a/music_storage/templates/player.html b/music_storage/templates/player.html new file mode 100644 index 0000000..ab6c533 --- /dev/null +++ b/music_storage/templates/player.html @@ -0,0 +1,26 @@ +{% load static %} + + +
+
+
Выберите трек для воспроизведения
+
+
+
+ 0:00 + + 0:00 + +
+ + + +
+
+ + +
+ + \ No newline at end of file