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

Изображение

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

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

Элемент «Изображение» может содержать разные картинки для каждой локали. Чтобы показывать другое изображение в тёмном режиме, добавьте тёмный файл к элементу.

• Content mode — управляет тем, как изображение заполняет контейнер при заданной высоте. См. Размер изображения.
• 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 — см. Пользовательский медиа ID ниже.

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

Элемент Video может содержать разные видео для каждой локали. Чтобы отображать другое видео в тёмном режиме, добавьте тёмный файл к элементу.

Размер видео

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

• 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. В панели свойств загрузите локализованный файл.
5. Верните Locale к локали по умолчанию, чтобы последующие изменения применялись к локали по умолчанию.

Для цветового стиля замените изображение или видео в стиле, пока активна целевая локаль.

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

Ограничения

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

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

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

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

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

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

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

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