From 4582fade3db77ed55bc287dd25357810ec34acda Mon Sep 17 00:00:00 2001
From: Viner Abubakirov <viner96@yandex.ru>
Date: Fri, 12 Dec 2025 09:53:32 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8=D0=BB=20ht?=
 =?UTF-8?q?ml=20=D0=BA=D0=BE=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 music_storage/templates/music/track_list.html | 422 +++++++++++++++---
 1 file changed, 358 insertions(+), 64 deletions(-)
diff --git a/music_storage/templates/music/track_list.html b/music_storage/templates/music/track_list.html
index ed0a1c2..e86b537 100644
--- a/music_storage/templates/music/track_list.html
+++ b/music_storage/templates/music/track_list.html
@@ -1,10 +1,11 @@
+<!-- templates/music_library.html -->
 <!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Музыкальный сервис</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         * {
             margin: 0;
@@ -13,69 +14,78 @@
         }
 
         body {
-            font-family: 'Inter', sans-serif;
-            background-color: #f8f9fa;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f5f7fa;
             color: #333;
             line-height: 1.6;
-            padding: 20px;
-            min-height: 100vh;
+            padding-bottom: 100px;
         }
 
         .container {
-            max-width: 800px;
+            max-width: 1200px;
             margin: 0 auto;
-            background-color: #fff;
-            border-radius: 8px;
-            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
-            padding: 30px;
+            padding: 20px;
         }
 
         header {
             text-align: center;
+            padding: 30px 0;
+            background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 100%);
+            color: white;
+            border-radius: 10px;
             margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 1px solid #eee;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
 
         h1 {
-            font-weight: 500;
-            font-size: 2rem;
-            color: #2c3e50;
+            font-weight: 600;
+            font-size: 2.5rem;
             margin-bottom: 10px;
         }
 
         .subtitle {
-            color: #7f8c8d;
-            font-size: 1rem;
+            font-size: 1.1rem;
+            opacity: 0.9;
         }
 
         .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 0;
-            border-bottom: 1px solid #f0f0f0;
+            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-number {
-            width: 30px;
-            height: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #e9ecef;
-            border-radius: 50%;
-            font-size: 0.9rem;
-            color: #6c757d;
-            flex-shrink: 0;
+        .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-info {
@@ -83,28 +93,56 @@
         }
 
         .track-title {
-            font-weight: 500;
+            font-weight: 600;
             color: #2c3e50;
             margin-bottom: 5px;
+            font-size: 1.1rem;
         }
 
         .track-artist {
             color: #7f8c8d;
-            font-size: 0.9rem;
+            font-size: 0.95rem;
         }
 
         .player-container {
-            background-color: #f8f9fa;
-            border-radius: 6px;
-            padding: 15px;
-            margin-top: 10px;
+            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: #fff;
+            background-color: rgba(255,255,255,0.2);
+            border: 1px solid rgba(255,255,255,0.3);
         }
 
         .player-controls {
@@ -112,11 +150,38 @@
             align-items: center;
             justify-content: space-between;
             padding: 10px 0;
+            flex-wrap: wrap;
+            gap: 10px;
         }
 
         .player-time {
-            font-size: 0.8rem;
-            color: #7f8c8d;
+            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);
         }
 
         .empty-state {
@@ -131,54 +196,106 @@
             color: #bdc3c7;
         }
 
-        footer {
-            text-align: center;
-            margin-top: 40px;
-            padding-top: 20px;
-            border-top: 1px solid #eee;
-            color: #7f8c8d;
-            font-size: 0.9rem;
+        .empty-state p {
+            font-size: 1.1rem;
+            margin-top: 10px;
         }
 
-        @media (max-width: 600px) {
+        @media (max-width: 768px) {
             .container {
-                padding: 20px 15px;
+                padding: 15px;
             }
             
             .track-item {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 10px;
+                padding: 15px;
             }
             
-            .track-number {
-                margin-right: 10px;
+            .player-container {
+                padding: 12px 15px;
             }
         }
+
+        .track-item.playing {
+            background-color: #e3f2fd;
+        }
+
+        .track-item.playing .track-title {
+            color: #667eea;
+        }
+
+        .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;
+            }
+        }
+
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1>Музыкальный сервис</h1>
+            <h1>🎵 Музыкальный сервис</h1>
             <p class="subtitle">Ваша коллекция треков</p>
         </header>
 
         <ul class="track-list">
             {% if tracks %}
                 {% for track in tracks %}
-                <li class="track-item">
-                    <div class="track-number">{{ forloop.counter }}</div>
+                <li class="track-item" data-track-id="{{ track.id }}" data-track-src="{{ track.file.url }}">
                     <div class="track-info">
                         <h3 class="track-title">{{ track.title }}</h3>
                         <p class="track-artist">Исполнитель: {{ track.artist }}</p>
-                        
-                        <div class="player-container">
-                            <audio class="audio-player" controls>
-                                <source src="{{ track.file.url }}" type="audio/mpeg">
-                                Ваш браузер не поддерживает аудио.
-                            </audio>
-                        </div>
                     </div>
                 </li>
                 {% endfor %}
@@ -189,10 +306,187 @@
                 </div>
             {% endif %}
         </ul>
-
-        <footer>
-            <p>© 2023 Музыкальный сервис</p>
-        </footer>
     </div>
+
+    <div class="player-container" id="playerContainer">
+        <div class="player-header">
+            <div class="current-track" id="currentTrack">Выберите трек для воспроизведения</div>
+            <div class="current-artist" id="currentArtist"></div>
+        </div>
+        <div class="player-controls">
+            <span id="currentTime">0:00</span>
+            <input type="range" id="audioProgress" value="0" step="0.1">
+            <span id="durationTime">0:00</span>
+
+            <div class="player-buttons">
+                <button class="control-btn" id="prevBtn"><i class="fas fa-backward"></i></button>
+                <button class="control-btn" id="playPauseBtn"><i class="fas fa-play"></i></button>
+                <button class="control-btn" id="nextBtn"><i class="fas fa-forward"></i></button>
+            </div>
+        </div>
+        <audio id="audioPlayer" class="audio-player" preload="metadata">
+            Ваш браузер не поддерживает аудио.
+        </audio>
+        
+    </div>
+
+    <script>
+        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);
+            });
+        });
+    </script>
 </body>
 </html>
