Разработать виджет на сайты, и конструктор для этого виджета

Необходимо реализовать виджет, а также базовый конструктор (конфигуратор) 

виджета (загрузка видео, подгонка цветов, ввод текста, выбор эффектов и анимаций, а также получение кода виджета).

*** ВИДЖЕТ:

Работающий прототип виджета находится на странице по адресу: http://driveavto.ru/ (слева) https://www.typeform.com/templates/c/forms/

0. Для сборки проекта использовать webpack 4, gulp или аналог;

1. Проект реализовать на фронтенд-фреймворке Vue; виджет должен быть изготовлен в виде VUE-компонента, который легко можно будет переиспользовать в других местах (в конструкторе виджета);

2. Все ресурсы (HTML, картинки, стили и тд) должны быть в js-файле.

3. Выходной js бандл должен быть одним (включающий все необходимые зависимости), обфусцированным при помощи UglyJS (или аналог), а также его размер не должен превышать 50кб (hard-limit 100).

4. JS файл будет размещен на CDN, по-этому его содержимое должно быть статическое (никакой серверной генерации быть не может);

5. Если вы собираетесь использовать ES6, то бандл должен быть транспиллирован в ECMAScript версии 5 (babel или аналог).

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

7. Начальная конфигурация виджета содержится в глобальном свойстве (условно - объект window.__CONFIG), и включает адрес JSON-конфигурации (ссылка на json-файл на сервере, который задает все необходимые параметры для корректной работы виджета - ссылки на видео, количество видео и другие), а также плейсхолдеры для callback-функций (для кастомных обработчиков событий, возникающих в виджете, например onFabClicked, onAudioEnabled, onChat и другие).

Если ссылка на внешний файл отсутствует, то используется только window.__CONFIG; Если указан файл, то значение параметров получается сначала с window.__CONFIG, а затем, если они отсутствуют в window.__CONFIG, получаются из JSON-файла; Полный перечень параметров доступен в конце настоящего документа.

8. Предусмотреть два варианта размещения виджета (слева, справа), а также без позиционирования (для показа предпросмотра в конструкторе); Брать из конфига;

9. Виджет адаптивен для мобильных устройств (psd внешний вид на мобильных устройствах- прилагается);

*** FLOATING ACTION video BUTTON:

10. Состояние FAB (видео в кружочке ДО КЛИКА) после клика открывает окно видео на весь размер (VIDEO WINDOW); Если открыто окно с видео, то FAB отображать не нужно (или отображать под окном);

11. Для FAB предусмотрены различные варианты анимирования и появления - перечислены в файлах хххххх.psd; В нем должны быть по-умолчанию анимация появления

и настраиваемые функции - анимация текста, анимация воспроизведения.

Необходимо брать из конфига конкретный; [За примером анимации в форум проекта напишите , я в лс вам отправлю пример]

Значит у каждой анимации есть 4 состояния: с текстом, без текста, с анимированным текстом 1, с анимированным текстом 2. Получилось 11 сборок по 4 варианта. 44 варианта.(комбинации) .

12. На FAB может быть размещен небольшой текст (CALL-TO-ACTION на примерах макета “Ты неповеришь”); 2 слова, но предусмотреть растяжку до 2х линий (не более 50 символов);

13. Размер элемента на мобильной верстке и размер элемента обычной верстки должны быть конфигурируемыми;

14. Внутри элемента содержится Тег VIDEO, который отображает видео-приветствие (mp4); Видео БЕЗ звука, зациклено;

15. Предусмотреть возможность смещения видео внутри круга для отцентровки лица (чтобы лицо полностью входило в круг); Для этого В конфигурационном файле для каждого видео указаны параметры: SIZE РАЗМЕР ВИДЕОФАЙЛА (в пикселях), SCALE, CENTER ПОЗИЦИЯ ЛИЦА В ВИДЕО(X;Y).

16. FAB должен автоматически скейлить размер элемента видео-приветствия, чтобы оно вписывалось в круг согласно требуемого центра;

*** VIDEO WINDOW:

17.на мобильных устройствах разворачивается во весь экран (согласно макетам);

18. в окне может быть до 10 видео; стрелки влево-вправо переключают текущее видео;

 19. По-умолчанию после клика на FAB, первое видео воспроизводится без звука;

20. Если пользователь включает звук первого видео (жмет кнопку плей), то оно начинается сначала;

21. Видео доигравшее до конца должно остановится, если нет следующего видео, иначе перейти на следующее видео, но не должно идти по кругу бесконечно;

22. Для мобильных устройств (на которых это поддерживается) реализовать поддержку нативной функции “webShare” (соответствующая кнопка поделиться присутствует на макетах).

23. Социальные кнопки FB OK VK отображаются только на ПК, они существуют для осуществления возможности отправить ссылку НА ТЕКУЩУЮ страницу в выбранную соцсеть. При hover реализовать красивые tooltip’ы (согласно макету).

24. Кнопка X закрывает окно с видео; 

25. Визуально отобразить текущий Прогресс - Номер видео (аналогия с сторис), а также отобразить Время видео (играет и всего).

26. Кнопка плей/пауза начинает или приостанавливает проигрование текущего видео.

27. Кнопка звук включает/отключает звук с видео.

28. Кнопка (…) отображает диалог для жалобы на непристойный контент.

29. Кнопка “Кнопка” может быть ссылкой или выпадающим меню, в котором находится до 3х ссылок.

30. Предусмотрено 4 кнопки для основных популярных мессенджеров, wa.me t.me vk.me и invite viber - при клике открывать в новой вкладке;

31. Кнопки чат и телефон должны вызывать JS-коллбэк функции (если js-функция не установлена, то кнопку отображать не нужно);

32. Указание контактных данных и форма для сбора номера телефона от клиента, если установлена соответствующая опция в конфигурации (замещает пункт 31 касательно работы кнопки “телефон”).

+++ РЕДАКТОР (КОНФИГУРАТОР) во второй части (после первой части).

Настройка ссылок для “Видео приветствие” “основное видео” “Дополнительное видео”.

Представляет из себя окно для предпросмотра виджета в действии, а также опций настройки (ссылки на видео, смена текстов, получение кода виджета и тд). Виджет в конфигуратор должен быть встроен через vue-компонент, параметры передаются через props; Смена настроек виджета автоматически обновляет Предпросмотр.

((ТО ЕСТЬ имеется ввиду, что виджет должен уметь реагировать на изменения в его конфигурации и налету изменять свое визуальное состояние.))

Также здесь будет окно для подгонки видео в круг (отцентровка и подгонка размера, как на аватарках crop&scale);

/!\ Макеты psd будут предоставлены только тем, кто имеет подходящие скиллы!! Сбрасывайте заявку в проект, 

а я с вами свяжусь и покажу.