Микросервис и админка для управления видео импортированными из Vimeo

50 000 руб. за проект • электронные деньги
19 марта 2019, 22:12 • 8 откликов • 101 просмотр
Технологии - Node/React/JW-player
DB - предварительно mongodb или что-то лучше
JW-player - https://www.jwplayer.com
Верстка/компоненты на основе https://react-bootstrap.github.io

В откликах, пожалуйста, примеры проектов/кода на github, сроки, и когда сможете начать.

Техническое задание.

Необходимо разработать микросервис для импорта/синхронизации видео из Vimeo(только видео загруженные конкретным пользователем, видео должны импортироваться из Vimeo используя Vimeo API, но сами файлы будут находиться на Vimeo, физически импортировать файлы не нужно, Vimeo будет использоваться как CDN) и админку для управления библиотекой импортированных видео, тэгами и плейлистами. При первом запуске микросервиса список видео импортируется из Vimeo(включая ссылки на файлы), далее видео должны синхронизироваться с Vimeo по таймеру каждый час(период должен быть настраиваемым в конфиге микросервиса). Если видео удалено на Vimeo - видео так же должно быть удалено из библиотеки, итд.

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

Что должно получиться в итоге:
1. Возможность динамического подключения конкретного видео на html странице с помощью js - bf_player.load('#element', 'video', 'jhdf78adsfb8'), где по значению jhdf78adsfb8 будет определяться конкретное видео и подгружаться плеер

2. Возможность динамического подключения плейлиста на html странице с помощью js - bf_player.load('#element', 'playlist', 'sdf58sad7fasfd'), где по значению sdf58sad7fasfd будет определяться конкретный плейлист и подгружаться плеер

Админка
Вверху страницы в хедере находится горизонтальное меню, которое включает в себя 3 пункта: Videos, Tags, Playlists

1. Videos
Раздел управления видео импортированных из Vimeo

- Таблица видео импортированных из Vimeo микросервисом, столбцы: ID(ID видео в DB), Preview(превью для видео из Vimeo, картинка), Title(название видео из Vimeo), Tags(список выбранных тэгов для этого видео, строка, через запятую), Duration(длительность видео в минутах/секундах), Active(активное/нет), Imported(дата импорта из Vimeo), Actions(доступные действия для видео, Play - по клику открывается модальное окно и видео начинает проигрываться, Edit - по клику открывается форма редактирования видео)
- Форма редактирования видео должна открываться в модальном окне, поля: 1. активное/нет(переключатель), 2. Нередактируемое название, 3. Список тэгов(можно выбрать несколько тэгов из тэгов определенных в разделе управления тэгами), не редактируемый js код для динамического подключения видео на html странице, кнопки Save и Cancel

2. Tags
Раздел управления списком тегов, которые могут быть выбраны для импортированных видео и динамических плейлистов

- Таблица тегов, столбцы: ID(ID тэга в DB), Title, Playlists(количество плейлистов для которых выбран этот тэг, ссылка на раздел плейлистов отфильтрованных по этому тэгу), Videos(количество видео для которых выбран этот тэг, ссылка на раздел видео отфильтрованных по этому тэгу), Actions(Edit - по клику открывается форма редактирования тега, Delete с подтверждением в модальном окне), над таблицей кнопка Add tag, по клику открывается форма добавления тэга
- Форма редактирования тэга должна открываться в модальном окне, поля: 1. Название, кнопки Save и Cancel
- При нажатии на количество в столбце Playlists попадаем в раздел Playlists, отфильтрованных/содержащих этот тэг
- При нажатии на количество в столбце Videos попадаем в раздел Videos, отфильтрованных/содержащих этот тэг
- При удалении тэга этот тэг должен быть удален из всех плейлистов и видео

3. Playlists
Раздел управления динамическими плейлистами
- Таблица управления плейлистами, столбцы: ID(ID плейлиста в DB), Title(название плейлиста), Tags(тэги выбранные для плейлиста, строка, через запятую), Videos(количество видео в плейлисте), над таблицей кнопка Add playlist, по клику открывается форма добавления плейлиста
- Для плейлиста можно выбрать теги, которые добавлены в разделе тэгов(можно выбрать несколько тэгов)
- Форма редактирования плейлиста открывается в модальном окне, поля: Title, Tags(можно выбрать несколько), нередактируемый js код для динамического подключения плейлиста на html странице, кнопки Save и Cancel
- В плейлист попадают только активные видео, для которых указан хотя бы один из тэгов, выбранных для этого плейлиста

Плееры
Должно быть реализовано два варианта воспроизведения: определенное видео и динамический плейлист.

1. Video
Проигрывается конкретное видео из библиотеки. При подключении на странице проигрывание начинается автоматически, без контролов, проигрывается только один раз.

2. Playlist
Видео из конкретного плейлиста(видео в плейлисте определяются выбранными тэгами соответственно для плейлиста и для видео) проигрываются в случайном порядке, причем видео не проигрываются повторно пока не будет проигран весь плейлист или не перезагружена страница. При подключении на странице проигрывание начинается автоматически, без контролов, плейлист проигрывается бесконечно.

API методы
Реализовать два метода API микросервиса, аутентификация происходит по хэдеру X-Auth в запросах(ожидаемое значение хедера должно настраиваться в конфиге)

1. https://play.buzz.fit/api/list_tags, метод GET, возвращает массив тэгов из раздела управления тегами, поля: id, title

2. https://play.buzz.fit/api/create_playlist, метод POST, принимает название, массив id тэгов, возвращает id созданного плейлиста