Flow & Paywall Builder включает три типа медиаэлементов в категории Media: Image, Video и Icon.

Изображение

Загрузите файл .JPG, .PNG или .WEBP размером до 20 МБ.

Анимированные GIF и WEBP не поддерживаются. Для добавления движения используйте элемент Video.

• Content mode — управляет тем, как изображение заполняет контейнер при заданной высоте. См. Image sizing.
• Use custom media ID — см. Custom media ID ниже.

Размер изображения

У изображения есть собственные пропорции, и заданный контейнер может им не соответствовать. Сначала задайте ширину, затем определите высоту:

• Автоматическая высота. Изображение сохраняет форму: высота подстраивается под заданную ширину. Content mode отключается, так как обрезать нечего.
• Фиксированная высота или Fill. Контейнер получает собственные пропорции, и Content mode устраняет несоответствие:
  • Fit. Масштабирует изображение целиком внутри контейнера, оставляя пустое пространство.
  • Fill. Обрезает выходящее за границы. По умолчанию.

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

Видео

Загрузите файл .MP4 или .WEBM размером до 50 МБ и длительностью не более 30 секунд. Минимальное разрешение видео — 640x640 пикселей.

• Aspect — управляет тем, как видео заполняет контейнер при задании высоты. См. Размер видео.
• Loop — непрерывное воспроизведение видео. Включено по умолчанию.
• Use custom media ID — см. Custom media ID ниже.

В превью редактора видео не воспроизводится — на канвасе отображается статичный кадр. На устройстве во время работы приложения видео по умолчанию воспроизводится без звука. При включённом Loop оно повторяется бесконечно.

Размер видео

У видео есть собственные пропорции, и они могут не совпадать с размером контейнера. Поведение зависит от высоты:

• Hug height. Высота подстраивается под собственные пропорции видео.
• Fixed или Fill height. Несоответствие пропорций решает свойство Aspect:
  • Fit. Масштабирует видео целиком внутри контейнера, оставляя пустые области.
  • Fill. Обрезает то, что выходит за границы. По умолчанию.

Если Adapty не может определить пропорции видео при загрузке, появляется предупреждение: «Could not determine video dimensions. Set a fixed height to ensure the video displays correctly.» Задайте видео фиксированную высоту или убедитесь, что контейнер, в котором оно размещено, имеет фиксированную высоту. В противном случае высота может схлопнуться до 0.

Запустить действие по окончании видео

Элемент Video поддерживает триггер On playback finished, который срабатывает, когда видео заканчивается. Настройте его в панели Interactions, чтобы перейти на другой экран, показать CTA или выполнить любое другое действие.

Иконка

Выбирайте иконки из встроенной библиотеки Tabler Icons — тысячи иконок в двух стилях:

• Stroke — только контур.
• Filled — сплошная заливка.

Ищите иконку по ключевому слову в пикере. Цвет иконки задаётся в пикере Color — выберите сохранённый стиль цвета или укажите произвольный.

Локализация медиаконтента

Элементы Image и Video могут содержать разные файлы для каждой локали:

1. Если панель Localizations открыта, закройте её, чтобы отобразить панель свойств.
2. На нижней панели инструментов установите Locale на нужную локаль.
3. Выберите элемент, а затем в панели свойств загрузите локализованный файл.
4. Когда закончите, верните Locale к локали по умолчанию. Пока выбрана другая локаль, текст, который вы редактируете в панели свойств, изменяет перевод именно этой локали.

В локали без собственного файла элемент отображает файл локали по умолчанию. Вы также можете загрузить файл для каждой локали в панели Localizations.

Ограничения

Следующие элементы не поддерживают локализацию:

• Иконки
• Fill экрана или контейнера — это фон экрана и собственное фоновое изображение или видео контейнера, заданные в разделе Fill. Чтобы менять изображение или видео в зависимости от локали, добавьте его как отдельный элемент Image или Video — они поддерживают файлы для конкретной локали, как описано в разделе Локализация медиа.
• Пользовательские медиа-идентификаторы

Пользовательский медиа-идентификатор

Пометьте элемент изображения или видео пользовательским медиа-идентификатором, чтобы подменять его во время выполнения из кода приложения. Используйте это для персонализированных визуальных материалов — например, чтобы показывать выбранный пользователем аватар.

Медиафайл, загруженный в Flow & Paywall Builder, используется как резервный. Если ваш код не передаёт медиафайл для данного идентификатора во время выполнения, отображается резервный вариант.

Кастомный media ID позволяет заменить файл только файлом того же типа — изображение на изображение, видео на видео. Если типы не совпадают, отображается резервный вариант.

Чтобы включить кастомный media ID для элемента Image или Video:

1. Установите флажок Use custom media ID под областью загрузки.
2. Введите media ID.
3. Загрузите резервное изображение или видео.

В коде приложения получайте медиафайлы по ID — см. Настройка ассетов для SDK API.