Инструкция по интеграции оператора

Обратите внимание на то, что отображаемые в данной статье фрагменты кода предназначены для использования исключительно для целей оценки и тестирования. Прежде чем включиться в процесс, напишите по адресу: Integrations@imgarena.com.

Библиотека процесса интеграции

Библиотека процесса интеграции в формате Front Row Seat распространяется со сборкой в виде модуля ES и сборкой UMD. В приведенных ниже примерах для ясности и демонстрации простейших вариантов реализации используется синтаксис UMD.

Пакет распространяется с помощью npm, в котором доступны как сборка в виде модуля ES, так и сборка UMD: https://www.npmjs.com/package/@img-arena/front-row-seat

Сборка UMD доступна на unpkg: https://unpkg.com/@img-arena/front-row-seat

Подробнее о том, как использовать unpkg, см. в их документации: https://unpkg.com

Порядок действий

Чтобы интегрировать Центр мероприятий Абсолютного бойцовского чемпионата (UFC) IMG Arena в свой веб-сайт, вам нужно выполнить следующие действия:

Добавить «контейнерный» HTML DOM элемент туда, где должна отображаться информация о данном Центре мероприятий.
Включить в него сценарий библиотеки процесса интеграции.
Инициализировать библиотеку процесса интеграции.

<!DOCTYPE html>
<html>
  <head>
    <title>IMG Arena Event Centre</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="img-arena-event-centre"></div>
    <script src="https://unpkg.com/@img-arena/front-row-seat"></script>
    <script>
      const { MessageTopics } = frontRowSeat.eventCentreUtils;
      const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "OPERATOR-NAME",
        sport: "ufc",
        targetModule: "full",
        eventId: "EventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

      eventCentreInstance.on(MessageTopics.CONTEXT_UPDATE, msg => {
        console.log(msg);
      });

      eventCentreInstance.on(MessageTopics.HANDSHAKE_FAILED, () => {
        console.log("Handshake failed");
      });
    </script>
  </body>
</html>

Целевой элемент

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

Свойством targetElementSelector может выступать либо строка выбора DOM-элемента, либо сам узел элемента.

const targetElement = document.querySelector('#img-arena-event-centre');
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: "[OPERATOR-NAME]",
  sport: "ufc",
  version: "latest",
  eventId: "705",
  language: "en",
  targetModule: "full",
  targetElementSelector: targetElement
});

Авторизация

Каждый интегрированный клиент получает собственный уникальный URL-адрес Центра мероприятий IMG Arena. В целях предотвращения потенциального веб-скрапинга мы нередко отслеживаем несанкционированное использование этого URL-адреса и можем заблокировать любое подозрительное использование.

Инициализация

Для выполнения синхронизации Центра мероприятий UFC с вашим сайтом есть два метода, зависящие от возвращаемого значения инициализатора eventCentre: on и emit. При асинхронном обмене сообщениями оба эти метода действуют по шаблону pub/sub. Метод on предназначен для получения сообщений из Центра мероприятий, тогда как метод emit предназначен для отправки сообщений в Центр мероприятий.

Метод on доступен для возвращаемого значения инициализатора eventCentre. Применяется он для оформления подписки на сообщения, отправляемые из Центра мероприятий. Поддерживаемые темы сообщений зависят от области имен eventCentreUtils, eventCentreUtils.MessageTopics, и подробно описаны ниже. С обратным вызовов поступает единственное значение, представляющее собой объект, содержащий в себе соответствующие поля для темы сообщений, на которую оформлена подписка.

Генерирование

// See below the fields to include on object passed for each topic
.emit(MESSAGE_TOPIC_NAME, messageData)

Метод emit доступен для возвращаемого значения инициализатора eventCentre. Применяется он для отправки сообщений в Центр мероприятий. Передаваться в Центр мероприятий будут только сообщения на поддерживаемые темы.

Языки

Как видно из примеров, параметр «язык» задается как переменная. См.: Доступные переводы на другие языки

Тематика

Тематика центра мероприятий можно настроить путем передач значения параметра theme. theme: "dark" активирует отображение темной версии центра мероприятий. Обратите внимание на тот факт, что, если параметр theme вы не передадите, отображаться будет светлая версия центра мероприятий.

Параметры

В поле options могут быть заданы некоторые дополнительные параметры.

Имя параметра

Описание

По умолчанию

Пример

videoPlaybackEnabled

Позволяет просматривать трансляции по мере их доступности

false

true либо false

disablePeopleImages

Отключает изображения людей, показывая вместо них заполнители

false

true либо false

userId

Используется для отслеживания средствами Google Analytics

undefined

"123e4567"

NextМодули Центра мероприятий UFC

Last updated 2 years ago

Библиотека процесса интеграции

Порядок действий

Целевой элемент

Авторизация

Инициализация

Подписка

Генерирование

Языки

Тематика

Параметры