Skip to content

Latest commit

 

History

History
173 lines (143 loc) · 9.68 KB

SCENARIO.md

File metadata and controls

173 lines (143 loc) · 9.68 KB

Описание приложения Timeline

Это комплексное приложение для профессионального видеомонтажа с акцентом на производительность и удобство использования. Каждый компонент оптимизирован для работы с большими объемами данных и обеспечивает плавное взаимодействие между различными частями системы.

Ключевая особенность приложения - программируемные сценарии монтажа, которые позволяют автоматизировать всю работу и упростить процесс видеомонтажа. Пользователь просто добавляет медиа, музыку, переходы и эффекты на собственный вкус, выбирает опции и запускает монтаж. Сами опции уже содержат характер видео, что позволяет получить неограниченное количесиво видео в разных жанрах, под ваши любимые треки.

Killer Feature - программируемые сценарии которые вы сможете создавать с помощью ИИ, пример запроса: Сделай мне фильм в стиле *Скрытое* Михаэля Ханеке ИИ пишет алгоритм преобразующий ваши данные в композицию сцен выбранных с учетом особенностей стиля автора (длительные статические сцены без музыки и тп.).

Основной интерфейс

  1. Управление медиафайлами (FileBrowser)

Основные возможности: Медиафайлы: Добавление и управление видеофайлами Музыка: Управление аудиотреками Переходы: Добавление эффектов перехода между сценами Эффекты: Применение визуальных эффектов Функции работы с файлами: Поддержка различных форматов видео (MP4, MOV, AVI, MKV, WEBM) Работа с 360-градусными видео (INSV) Управление аудиофайлами (MP3, WAV, AAC, OGG, FLAC) Предпросмотр файлов Отображение метаданных (размер, длительность, формат)

  • Включает в себя элементы управления и видеоплеер
  1. Видеоплеер (ActiveVideo)

Возможности: Воспроизведение активного видео Синхронизация времени между несколькими видео Управление воспроизведением (play/pause) Поддержка горячих клавиш Отображение нескольких видео одновременно Оптимизированное обновление времени (~60fps)

  1. Монтаж (Editing) Функционал: Индекс монтажа: Управление сценами и переходами Дорожки: Управление видео и аудиодорожками Настройки монтажа: Частота смены камер Длительность сцен Синхронизация аудио Автоматический монтаж

  2. Timeline

Основные возможности: Визуальное отображение всех треков Группировка видео по датам Синхронизация между треками Предзагрузка соседних видео Управление временными метками

Оптимизация: Кэширование миниатюр Эффективное управление памятью Предзагрузка видео Отмена неактуальных запросов Дополнительные функции:

Сохранение состояния воспроизведения Горячие клавиши для управления Автоматическая синхронизация времени Поддержка различных форматов видео Эффективная работа с большими файлами

Управление с клавиатуры

  1. Переключение камер (1-9)

    • Нажатие клавиш 1-9 переключает на соответствующую камеру
    • Переключение происходит только если выбранная дорожка имеет запись в текущий момент времени
    • При попытке переключения на дорожку без записи в текущий момент времени ничего не происходит

  2. Управление воспроизведением

    • Пробел: переключает воспроизведение/паузу
    • 'P'/'p': переключает воспроизведение/паузу
    • Работает с учетом регистра клавиш

Очистка ресурсов

  • При размонтировании компонента удаляются все слушатели событий
  • Предотвращаются утечки памяти

Технические детали

  • Использует хук useMedia для управления состоянием
  • Поддерживает горячие клавиши через глобальные слушатели событий
  • Обрабатывает монтирование/размонтирование компонентов

Кэширование и оптимизация

1. Кэширование данных в памяти

Кэширование миниатюр

  • Хранение в thumbnailCache состояния VideoStore.
  • Ключ кэша формируется как ${videoId}-${timestamp}.
  • Реализация в методе getThumbnail: 
    // src/stores/videoStore.ts:getThumbnail
const cacheKey = `${videoId}-${timestamp}`
if (thumbnailCache[cacheKey]) {
  return thumbnailCache[cacheKey]
}

Сохранение состояния воспроизведения

  • Текущее время сохраняется в sessionStorage при каждом обновлении.
  • При закрытии страницы сохраняется в localStorage.
  • Реализовано через useEffect в хуке useMedia: 
    // src/hooks/use-media.tsx
sessionStorage.setItem(STORAGE_KEYS.CURRENT_TIME, store.currentTime.toString())
localStorage.setItem(STORAGE_KEYS.CURRENT_TIME, store.currentTime.toString())

2. Оптимизация загрузки

Предзагрузка видео

  • При переключении камеры предзагружаются соседние видео.
  • Реализовано в методе setActiveCamera: 
    // src/stores/videoStore.ts:setActiveCamera
const preloadNearbyVideos = () => {
  const nearbyVideos = [
    targetTrack.allVideos[currentIndex - 1],
    targetTrack.allVideos[currentIndex + 1],
  ].filter(Boolean)
  // Предзагрузка видео
}

Управление запросами миниатюр

  • Отмена предыдущих запросов при быстрой прокрутке.
  • Использование AbortController для управления запросами.
  • Реализовано в компоненте TrackThumbnails: 
    // src/components/track/track-thumbnails.tsx
abortController.current = new AbortController()
requestsInProgress.current = true

3. Управление состоянием

Zustand Store

  • Централизованное хранение состояния в VideoStore.
  • Эффективное обновление только измененных данных.
  • Основные методы:
    • setVideos: Установка списка видео.
    • setActiveCamera: Переключение активной камеры.
    • updateActiveVideos: Обновление активных видео.
    • addThumbnailToCache: Добавление миниатюр в кэш.

Оптимизация переключения камер

  • Проверка доступности видео перед переключением.
  • Учет временных меток для синхронизации.
  • Реализовано в методе setActiveCamera: 
    // src/stores/videoStore.ts
const availableVideo = targetTrack.allVideos.find((video) => {
  const startTime = new Date(video.probeData.format.tags?.creation_time || 0).getTime() / 1000
  const endTime = startTime + (video.probeData.format.duration || 0)
  return currentTime >= startTime && currentTime <= endTime
})

4. Технические детали

  • Использование AbortController для управления асинхронными запросами.
  • Дебаунсинг запросов миниатюр для оптимизации производительности.
  • Предварительная загрузка видео через HTML5 Video API.
  • Кэширование в localStorage/sessionStorage для персистентности данных.