@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
112 lines (111 loc) • 4 kB
JavaScript
import { mapColor, mapColorMode, mapFitMode, mapOverlay } from "./base-utils";
/** Resolved primary + optional low-res URL for theme video assets. */
export function resolveVideoBackgroundFiles(colorMode, info) {
const files = mapColorMode(colorMode, info);
const raw = String(files.url_low_res ?? "").trim();
return {
url: files.url,
url_low_res: raw.length > 0 ? raw : null,
};
}
export function resolveBackgroundVideoForSurface(colorMode, background) {
const opts = normalizeBackgroundVideo(background);
const files = resolveVideoBackgroundFiles(colorMode, background.value);
return {
url: files.url,
url_low_res: files.url_low_res,
fit: mapFitMode(opts.fit_mode),
position: opts.fit_mode === "fill" ? "center" : "top center",
overlay: mapOverlay(colorMode, background.color_overlay),
mute: opts.mute_audio,
loop: opts.loop,
posterWebp: opts.fallback_image
? mapColorMode(colorMode, opts.fallback_image).webp
: null,
};
}
function mapBackgroundImage(colorMode, info) {
const files = mapColorMode(colorMode, info);
return `url(${files.webp})`;
}
export function normalizeBackgroundVideo(background) {
return {
fit_mode: background.fit_mode ?? "fill",
mute_audio: background.mute_audio ?? true,
loop: background.loop ?? true,
fallback_image: background.fallback_image ?? null,
};
}
function mapBackgroundValue(colorMode, background_color, background) {
if (background == null) {
if (background_color == null) {
return "none";
}
return mapColor(colorMode, background_color);
}
if (background.type === "color") {
return mapColor(colorMode, background_color ?? background.value);
}
if (background.type === "image") {
return mapBackgroundImage(colorMode, background.value);
}
return "transparent";
}
export function paywallRootBackgroundModel(paywallData, colorMode) {
const background = paywallData?.components_config?.base?.background;
if (background == null) {
return { kind: "none" };
}
if (background.type === "video") {
const r = resolveBackgroundVideoForSurface(colorMode, background);
return {
kind: "video",
url: r.url,
url_low_res: r.url_low_res,
fit: r.fit,
position: r.position,
overlay: r.overlay,
mute: r.mute,
loop: r.loop,
posterWebp: r.posterWebp,
};
}
if (background.type !== "image") {
const styles = mapBackground(colorMode, null, background);
const overlay = styles["--overlay"] ?? "none";
const style = { ...styles };
delete style["--overlay"];
return { kind: "style", style, overlay };
}
const files = mapColorMode(colorMode, background.value);
return {
kind: "image",
src: files.webp,
fit: mapFitMode(background.fit_mode),
position: background.fit_mode === "fill" ? "center" : "top center",
overlay: mapOverlay(colorMode, background.color_overlay),
};
}
export function mapBackground(colorMode, background_color, background) {
if (background?.type === "video") {
return {
background: "transparent",
"--overlay": mapOverlay(colorMode, background.color_overlay),
};
}
const value = mapBackgroundValue(colorMode, background_color, background);
if (background?.type !== "image") {
return {
background: value,
"--overlay": "none",
};
}
const { fit_mode, color_overlay } = background;
return {
background: value,
"background-size": mapFitMode(fit_mode),
"background-position": fit_mode === "fill" ? "center" : "top center",
"background-repeat": "no-repeat",
"--overlay": mapOverlay(colorMode, color_overlay),
};
}