havart / learn-angular

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Создать компонент для отрисовки видео с привязками к времени

havart opened this issue · comments

Нужно создать компонент который с левой стороны будет отображать список привязок по времени(snapshotPoints), а справа видео.

  1. Автоматом видео начинает воспроизводиться с первого елемента и списка snapshotPoints
  2. На каждом snapshotPoint отображать прогресс показа видео.
  3. Нажатие на snapshotPoint переключает видео к нужному фрагменту.
  4. Компонент должен занимать всю ширину своего блока и иметь постоянную высоту.
  5. У компонент должен быть конфигурируемым, следовательно нужно сделать 2 входа sourceVideo и snapshotPoints

вот приблизительный макет
image

Работает компонент следующим образом, прокидываем в него ссылку на видео, передаем спискок snapshotPoints который содержит описание поинта description и timestamp. По нажатию на snapshotPoint видео начинает проигрываться с момента который указан в поле timestamp

Цифры на макете:

  1. snapshotPoint - его приблизительный вид
  2. секция видео
  3. Заголовок - его наверное тоже будем прокидывать в компонент.