lovinervy/music-storage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Viner Abubakirov
2026-01-02 03:35:19 +05:00
parent 0c59bc5e77
commit 8af3cbee92
6 changed files with 445 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
music_storage/templates/music/track_list.html
View File

@@ -1,492 +1,29 @@
<!-- 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
{% extends 'base.html' %}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding-bottom: 100px;
}
{% load static %}
{% block head_extra %}
<link rel="stylesheet" href="{% static 'css/track_list.css' %}">
{% endblock head_extra %}
.container {
max-width: 1200px;
margin: 0 auto;
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;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1 {
font-weight: 600;
font-size: 2.5rem;
margin-bottom: 10px;
}
.subtitle {
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;
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-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;
}
.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);
}
.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) {
.container {
padding: 15px;
}
.track-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 15px;
}
.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>
<p class="subtitle">Ваша коллекция треков</p>
</header>
<ul class="track-list">
{% if tracks %}
{% for track in tracks %}
<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.album.artist }}</p>
</div>
</li>
{% endfor %}
{% else %}
<div class="empty-state">
<i class="fas fa-music"></i>
<p>Нет добавленных треков</p>
{% block content %}
<div class="container">
<ul class="track-list">
{% if tracks %}
{% for track in tracks %}
<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.album.artist }}</p>
</div>
{% endif %}
</ul>
</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>
</li>
{% endfor %}
{% else %}
<div class="empty-state">
<i class="fas fa-music"></i>
<p>Нет добавленных треков</p>
</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>
{% endif %}
</ul>
</div>
{% include 'player.html' %}
{% endblock %}

26
music_storage/templates/player.html Normal file
View File

@@ -0,0 +1,26 @@
{% load static %}
<link rel="stylesheet" href="{% static 'css/player.css' %}">
<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 src="{% static 'js/player.js' %}"></script>