WEB Version https://garfy2.github.io/ahj-media/
Важно: в рамках этого задания вы будете разрабатывать один проект, в который добавляется новая функциональность. Поэтому все три задачи нужно делать в одном репозитории (не забудьте опубликовать проект на GitHub Pages).
Правила сдачи задания:
- Важно: в рамках этого ДЗ можно использовать любой менеджер пакетов
- Все три задачи нужно делать в одном репозитории.
- Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor
- В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
- В качестве результата присылайте проверяющему ссылки на ваши GitHub-проекты
- Авто-тесты нужно сделать только на функцию, которая обрабатывает ввод пользователем координат вручную (см. задачу 1)
- Серверную часть и загрузку также реализовывать не нужно, храните всё в памяти
Вам предстоит создать проект "Timeline" - некую ленту постов человека, где он может прикреплять текстовые посты, а также записывать аудио и видео в привязке к своей геопозиции.
Затем посты с текстом можно просматривать, посты с аудио - прослушивать, посты с видео - "проигрывать".
Как это примерно должно выглядеть:
Записи отображаются сверху вниз, наверху самая последняя.
Первая запись - пример текстовой записи.
Вторая запись - пример аудио-записи (при нажатии на кнопке Play происходит проигрывание аудио-записи).
Третья запись - пример видео-записи (при нажатии на кнопке Play происходит проигрывание видео-записи).
Для каждой записи указаны координаты, где сделана запись.
При создании текстовой записи (пользователь вводит текст в нижнее поле ввода и нажимает Enter) запросите координаты пользователя (через Geolocation API). Если координаты доступны, то добавьте сообщение в Timeline. Если же координаты не доступны - выведите пользователю соответствующее предупреждение с помощью модального окна и предложите указать координаты вручную (в реальном приложении, вы, конечно, будете использовать провайдера карт, но мы пока поступим именно так):
Напишите авто-тест для функции, которая будет обрабатывать пользовательский ввод координат, при этом функция корректно должна обрабатывать следующие ситуации (и выводить объект содержащий широту и долготу):
- 51.50851, −0.12572 (есть пробел)
- 51.50851,−0.12572 (нет пробела)
- [51.50851, −0.12572] (есть квадратные скобки)
При несоответствии формата функция должна генерировать исключение, которое должно влиять на валидацию поля (валидацию мы проходили).
При нажатии на иконку микрофона в поле ввода текста начните записывать аудио (если недоступно API, либо пользователь не выдал прав - выводите соответствующее всплывающее окно о необходимости выдачи прав или о использовании другого браузера).
Вид при записи аудио:
Т.е. иконка микрофона и камеры пропадают, появляются иконки "Ok" и "Отмена", между ними - таймер, показывающий, сколько секунд аудио записано.
По нажатию кнопки "Оk" (галочка) запись завершается, далее определяются гео-координаты, если они не доступны, выводится всплывашка с просьбой ввести вручную.
После чего запись добавляется в виде <audio>
в Timeline. При нажатии "Play" запись должна воспроизводится.
Обратите внимание, что при записи звук дублироваться не должен.
При нажатии на иконку камеры в поле ввода текста начните записывать видео (если недоступно API, либо пользователь не выдал прав - выводите соответствующее всплывающее окно о необходимости выдачи прав или о использовании другого браузера).
Вид при записи видео:
Т.е. иконка микрофона и камеры пропадают, появляются иконки "Ok" и "Отмена", между ними - таймер, показывающий, сколько секунд аудио записано.
При этом дополнительно появляется всплывающий блок, в котором дублируется только изображение, т.е. звук не дублируется (см. атрибут muted
).
По нажатию кнопки "Оk" (галочка) запись завершается, далее определяются гео-координаты, если они не доступны, выводится всплывашка с просьбой ввести вручную.
После чего запись добавляется в виде <video>
в Timeline. При нажатии "Play" запись должна воспроизводится.