6.8 KiB
6.8 KiB
📝 Сводка изменений
✅ Исправлено
1. Кнопки Media - 2 в ряд
- Изменено:
grid-template-columns: repeat(2, 1fr)вMedia.css - Удалены адаптивные медиа-запросы
- Теперь всегда отображается ровно 2 кнопки в ряд
2. Заголовки выровнены слева
Media.css- заголовок "Media" слеваMediaSearch.css- заголовки "Furry", "Anime" слеваMediaMusic.css- заголовок "Music" слева- Все заголовки черного цвета (
color: var(--text-primary))
3. Иконки обновлены
- Furry: 🦊 Лиса (кастомный SVG FoxIcon)
- Anime: 👤 Человек (User из lucide-react)
- Music: 🎵 Музыка (Music из lucide-react)
4. Загрузка треков и альбомов добавлена
Создан модал UploadTrackModal с функциями:
- ✅ Выбор аудио файла (MP3, WAV, OGG, M4A, FLAC) - макс 50MB
- ✅ Выбор ZIP архива (альбом) - макс 100MB
- ✅ Автоматическое извлечение метаданных из ID3 тегов:
- Название трека
- Исполнитель
- Альбом
- Год
- Жанр
- Номер трека
- Обложка (из встроенных изображений)
- Длительность
- ✅ Редактирование всех полей при загрузке
- ✅ Поддержка вложенных папок в ZIP
- ✅ Кнопка Upload в табах Music (справа)
5. Музыка - вкладки переорганизованы
Было: Поиск | Все треки | Избранное
Стало: Избранное | Обзор | [Upload]
- Избранное - на первом месте
- Обзор - объединяет поиск и все треки
- Upload - кнопка загрузки (иконка)
6. Прикрепление музыки к посту
- ✅ Кнопка Music (🎵) в CreatePostModal
- ✅ Модал выбора трека (MusicPickerModal)
- ✅ Поиск треков или выбор из избранного
- ✅ Отображение прикрепленного трека в посте (MusicAttachment)
- ✅ Воспроизведение через общий плеер
7. Темная тема
Добавлена полная поддержка темной темы для:
- ✅ Media карточки
- ✅ MediaSearch страницы
- ✅ MediaMusic страницы
- ✅ UploadTrackModal
- ✅ MusicPickerModal
- ✅ MusicAttachment
- ✅ MiniPlayer
- ✅ FullPlayer
- ✅ PostCard с музыкой
📁 Новые файлы
Components
frontend/src/components/UploadTrackModal.jsx- модал загрузки трекаfrontend/src/components/UploadTrackModal.css- стилиfrontend/src/components/MusicPickerModal.jsx- выбор трека для постаfrontend/src/components/MusicPickerModal.css- стилиfrontend/src/components/MusicAttachment.jsx- отображение трекаfrontend/src/components/MusicAttachment.css- стилиfrontend/src/components/MiniPlayer.jsx- мини-плеерfrontend/src/components/MiniPlayer.css- стилиfrontend/src/components/FullPlayer.jsx- полный плеерfrontend/src/components/FullPlayer.css- стили
Contexts
frontend/src/contexts/MusicPlayerContext.jsx- управление плеером
Pages
frontend/src/pages/Media.jsx- главная Media страницаfrontend/src/pages/Media.css- стилиfrontend/src/pages/MediaFurry.jsx- Furry поискfrontend/src/pages/MediaAnime.jsx- Anime поискfrontend/src/pages/MediaMusic.jsx- Music сервисfrontend/src/pages/MediaMusic.css- стилиfrontend/src/pages/MediaSearch.css- общие стили для Furry/Anime
Utils
frontend/src/utils/musicApi.js- API функции для музыки
Backend
backend/models/Artist.js- модель исполнителяbackend/models/Album.js- модель альбомаbackend/models/Track.js- модель трекаbackend/models/FavoriteTrack.js- избранные трекиbackend/routes/music.js- routes для музыкиbackend/middleware/devAuth.js- dev авторизация
Documentation
WIND.md- инструкция для WindowsDEV_SETUP.md- настройка dev режимаQUICK_DEV_START.md- быстрый стартMUSIC_SETUP.md- настройка музыкиCHANGES_SUMMARY.md- этот файл
🎨 Дизайн
Цвета
- Furry:
#FF8A33(оранжевый) - Anime:
#4A90E2(синий) - Music:
#9b59b6(фиолетовый)
Темная тема
Все компоненты используют CSS переменные:
var(--bg-primary)- основной фонvar(--bg-secondary)- вторичный фонvar(--text-primary)- основной текстvar(--text-secondary)- вторичный текстvar(--divider-color)- разделителиvar(--border-color)- границы
🔧 Как использовать
Загрузка трека
- Откройте Media → Music
- Нажмите иконку Upload (справа в табах)
- Выберите аудио файл
- Отредактируйте метаданные (автоматически извлекаются из имени)
- Нажмите "Загрузить"
Прикрепление музыки к посту
- Создайте пост (кнопка +)
- Нажмите иконку Music (🎵)
- Выберите трек из избранного или найдите через поиск
- Трек прикрепится к посту
- Опубликуйте пост
Воспроизведение
- Нажмите Play на любом треке
- Мини-плеер появится внизу экрана
- Нажмите на мини-плеер для открытия полного плеера
- Управление: play/pause, next/prev, громкость, избранное, скачивание
🚀 Dev режим
Для разработки без Telegram:
- Создайте
.env:
DISABLE_TELEGRAM_AUTH=true
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/nakama-dev
- Создайте
frontend\.env:
VITE_API_URL=http://localhost:3000/api
VITE_MOCK_TELEGRAM=true
- Запустите:
npm run dev
Подробнее в QUICK_DEV_START.md
Все изменения готовы! 🎉