nakama/CHANGES_SUMMARY.md

7.0 KiB
Raw Blame History

📝 Сводка изменений

Исправлено

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 - инструкция для Windows
  • DEV_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) - границы

🔧 Как использовать

Загрузка трека

  1. Откройте Media → Music
  2. Нажмите иконку Upload (справа в табах)
  3. Выберите аудио файл
  4. Отредактируйте метаданные (автоматически извлекаются из имени)
  5. Нажмите "Загрузить"

Прикрепление музыки к посту

  1. Создайте пост (кнопка +)
  2. Нажмите иконку Music (🎵)
  3. Выберите трек из избранного или найдите через поиск
  4. Трек прикрепится к посту
  5. Опубликуйте пост

Воспроизведение

  • Нажмите Play на любом треке
  • Мини-плеер появится внизу экрана
  • Нажмите на мини-плеер для открытия полного плеера
  • Управление: play/pause, next/prev, громкость, избранное, скачивание

🚀 Dev режим

Для разработки без Telegram:

  1. Создайте .env:
DISABLE_TELEGRAM_AUTH=true
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/nakama-dev
  1. Создайте frontend\.env:
VITE_API_URL=http://localhost:3000/api
VITE_MOCK_TELEGRAM=true
  1. Запустите:
npm run dev

Подробнее в QUICK_DEV_START.md


Все изменения готовы! 🎉