Виджет авторизации Ver.2.0

Материал из SmartPlayer

Описание ситуации

Виджет авторизации — это инструмент, который позволял пользователям проводить автоматическую авторизацию на платформах при проигрывание. Новая версия виджета предлагает дополнительные возможности к логике работы функционала, упрощает взаимодействие и делает пользовательский опыт более позитивным.
Ознакомиться с работой первой версии виджета можно по ссылке здесь

Добавление виджета в личный кабинет

Чтобы добавить данный виджет в личный кабинет, пользователю необходимо запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip - архива.

Пример виджета в формате ".zip" - архива

После этого пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».

Пример отображения раздела «Контент» в личном кабинете

В разделе «Контент» необходимо перетянуть данный виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.

Пример отображения переноса виджета с помощью drag-n-drop

Главная страница виджета

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

Пример отображения главной страницы виджета

На главной странице виджета отображается:

  • инструкция по использованию виджета (главный экран, на котором после настройки будет идти настройка);
  • кнопки управления виджетом;
  • колонка учёта шагов.
Пример отображения иконки для перехода в настройки виджета
При необходимости, можно открыть инструкцию снова, кликнув на иконку в виде знака «?».

Общие настройки виджета

Кликнув на кнопку «Настройки» с иконкой в виде шестерёнки пользователю откроется страница с общими настройками виджета. На этой странице можно настроить следующие параметры:

  • выбор языка — позволяет выбрать один из доступных для работы виджета языков. Доступные языки — русский, английский, испанский, португальский, казахский;
  • адрес страницы — необходимо вставить URL-ссылку на нужную страницу авторизации;
  • чекбокс(галочка)«Запустить десктопную версию» — активирует/деактивирует масштабирование элементов отображаемых на экране по размерам экрана устройства вывода данных;
  • интервал обновления страницы — необходимо указать значения для интервала обновления страницы. Измеряется в секундах. Минимальное значение — 30 секунд;
  • чекбокс(галочка)«Автоскрол» — активирует/деактивирует автоматический скролл на странице после прохождения процесса авторизации;
  • скорость автоскролла — прописывается значение для учета скорости автоскролла. Измеряется в процентах (%). Минимальное значение — 1, максимальное - 100. Если значение будет вне диапазона будут использоваться ближайшие пограничные к диапазону значения;
  • задержка перед началом автоскролла — прописывается значение задержки, запуска работы автоскролла. Измеряется в миллисекундах;
  • выбрать изображение — позволяет выбрать загруженные изображения из папки расположенной в личном кабинете SmartPlayer.
Пример отображения общих настроек виджета

Загрузка и скачивание настроек

В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.

Пример отображения иконок в настройках виджета

Завершение общих настроек виджета

После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана. Либо пользователь может не сохранять выставленные настройки по кнопке «Сбросить».

Пример отображения кнопок «Применить настройки» и «Сбросить»

Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.

Пример отображения кнопки «Сохранить»

Добавление шага

После завершения общих настроек виджета в левой нижней части экрана для пользователя станет активна кнопка «Добавить шаг». По клику на нее изменится отображение страницы:

  • будут отображены новые кнопки:
    • выбрать скриншот;
    • добавить действие.
  • в колонке «Шаги авторизации» появиться новый шаг и две кнопки:
    • применить;
    • блок схема.
  • в левом верхнем углу появиться обозначение текущего шага в виде кнопки (является кликабельной кнопкой)
Пример отображения изменений при добавлении шага

Выбор скриншота

Пользователю по нажатию на одноименную кнопку откроется модальное окно, в котором загружены все скриншоты из папки. В этом окне необходимо выбрать нужны для шага скриншот.

Пример отображения модального окна с выбором скриншота

После выбора название скриншота будет отображено в колонке «Шаги авторизации» для первого шага.

Пример отображения изменений в колонке «Шаги авторизации»

Добавить действие

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

  • добавить поле ввода — создаёт на экране поле для наложения и ввода данных накладываемое на поле авторизации;
  • добавить кнопку — создаёт кнопку, которая делает клик и накладывается на кнопки, которые есть на страницах авторизации, чтобы делать действия;
Пример отображения кнопок действия

После создание поля и кнопки пользователю необходимо разместить их на экране со скриншотом.

Пример отображения кнопок действия

Добавленные действия также отобразятся в колонке «Шаги авторизации» внутри текущего шага.

Пример отображения кнопок действия

При перемещении элементов откроется панель с параметрами для настройки выбранного элемента. О параметрах поля и кнопки будет описано ниже в разделе. Также при перемещении подсвечивается только выбранный пользователем элемент.

Колонка «Шаги авторизации»

Настройки кнопки

Блок схема

Добавление настроенного виджета в трансляцию

Чтобы полностью ознакомиться с работой данной функциональности, пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:

Видеоинструкция

Настройка виджета авторизации ver. 2.0

Дополнительная информация

Если данная статья не помогает использовать функционал по назначению, или после её прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.

Пример отображения вкладки «Обсуждения» на wiki-странице

Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"