Домашнее задание к лекции ШРИ - мультимедиа

Демонстрация работы

demonstration.mp4

На сегодняшний день сториз стали одним из самых успешных медиаформатов. Реализация этого формата в вашем проекте может увеличить вовлеченность аудитории. Так же, это мощный инструмент продаж, используемый разными площадками и приложениями.

Что реализовано

Интерфейс страницы:

• ✅ При открытии страницы автоматически отображается и воспроизводится первый слайд сториз. Видео для слайдов находятся здесь.
• ✅ Реализованы контролы для переключения между слайдами:
  • Кнопки "Предыдущий" и "Следующий" с визуальной индикацией состояния
  • Клавиатурные сокращения (← → для переключения, Пробел для паузы, R для реакций)
  • Плавное листание по свайпу на мобильных устройствах
  • Клик по прогресс-бару для перехода к соответствующему слайду
• ✅ Панель выбора реакций с 5 реакциями (👍 ❤️ 😂 😮 😢):
  • Открывается по клику на кнопку реакций
  • Видео автоматически ставится на паузу с затемнённым фоном
  • Анимация летящей реакции при выборе
  • Автоматическое возобновление воспроизведения после выбора
• ✅ Прогресс-бар сверху с плавной анимацией:
  • Отображает прогресс воспроизведения текущего слайда
  • Показывает завершённые слайды (заполненные)
  • Останавливается на последнем слайде
  • Кликабелен для быстрого перехода к любому слайду
• ✅ Пауза/воспроизведение видео:
  • Клик по видео или экрану паузы переключает состояние
  • Визуальная индикация паузы (иконка play и затемнение)
  • Экран паузы отображается только когда видео на паузе

Функциональные требования:

• Сториз имеют вертикальную ориентацию.
• Адаптивность встраиваемого видео (Задаём максимальную ширину для видео ручками, высота должна автоматически подстроиться так, чтобы не поломалась пропорция соотношения сторон видео).
• По окончании видео происходит автоматический переход к следующему слайду, видео в нём автоматически запускается.
• Анимация переключения слайдов должна работать без заметной просадки FPS на странице.
• Прогресс-бар должен ползти без тормозов. После проигрывания последнего слайда отсчет времени останавливается.
• Во время выбора реакции видео должно быть на паузе. Фон должен быть затемнённым.
• После клика по реакции убирается затемнённый фон, запускается анимация, видео воспроизводится дальше.
• Предусмотреть мисклики по затемнённому фону.

Чтобы запустить шаблон:

npm i
npm run start