@applicaster/zapp-react-native-utils
Version:
Applicaster Zapp React Native utilities package
2,029 lines (2,011 loc) • 51.4 kB
JavaScript
const R = require("ramda");
const { toSnakeCase, capitalize, compact } = require("./_internals");
const ZAPPIFEST_FIELDS = {
color_picker: "color_picker_rgba",
switch: "switch",
text_input: "text_input",
number_input: "number_input",
select: "select",
multi_select: "multi_select",
file: "uploader",
font_selector: {
ios: "ios_font_selector",
android: "android_font_selector",
tvos: "tvos_font_selector",
lg: "lg_tv_font_selector",
samsung: "samsung_font_selector",
roku: "roku_font_selector",
vizio: "vizio_font_selector",
},
};
const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
const FontPropsForTVPlatform = (platform) => ({
[`${R.toLower(platform)}FontFamily`]: {
name: `${platform} font family`,
type: ZAPPIFEST_FIELDS.font_selector[R.toLower(platform)],
},
[`${R.toLower(platform)}FontSize`]: {
name: `${platform} font size`,
type: ZAPPIFEST_FIELDS.number_input,
},
[`${R.toLower(platform)}LineHeight`]: {
name: `${platform} line height`,
type: ZAPPIFEST_FIELDS.number_input,
},
[`${R.toLower(platform)}LetterSpacing`]: {
name: `${platform} letter spacing`,
type: ZAPPIFEST_FIELDS.number_input,
},
});
const addTVFontsForPlatform = (props, platform) =>
R.merge(props, FontPropsForTVPlatform(platform));
const TV_FONT_KEY_DATA = {
dataKey: {
name: "data key",
type: ZAPPIFEST_FIELDS.select,
options: [
{
text: "summary",
value: "summary",
},
{
text: "title",
value: "title",
},
{
text: "published",
value: "published",
},
{
text: "updated",
value: "updated",
},
{
text: "author.name",
value: "author.name",
},
{
text: "extensions.section",
value: "extensions.section",
},
{
text: "other",
value: "other",
},
],
},
placeholderFontColor: {
name: "placeholder font color",
type: ZAPPIFEST_FIELDS.color_picker,
},
fontColor: {
name: "font color",
type: ZAPPIFEST_FIELDS.color_picker,
},
focusedFontColor: {
name: "focused font color",
type: ZAPPIFEST_FIELDS.color_picker,
},
...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS),
textAlignment: {
name: "text alignment",
type: ZAPPIFEST_FIELDS.select,
options: [
{
text: "Left",
value: "left",
},
{
text: "Right",
value: "right",
},
{
text: "Center",
value: "center",
},
],
},
textTransform: {
name: "text transform",
type: ZAPPIFEST_FIELDS.select,
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
},
numberOfLines: {
name: "number of lines",
type: ZAPPIFEST_FIELDS.number_input,
},
marginTop: {
name: "margin top",
type: ZAPPIFEST_FIELDS.number_input,
},
marginRight: {
name: "margin right",
type: ZAPPIFEST_FIELDS.number_input,
},
marginBottom: {
name: "margin bottom",
type: ZAPPIFEST_FIELDS.number_input,
},
marginLeft: {
name: "margin left",
type: ZAPPIFEST_FIELDS.number_input,
},
paddingTop: {
name: "padding top",
type: ZAPPIFEST_FIELDS.number_input,
},
paddingRight: {
name: "padding right",
type: ZAPPIFEST_FIELDS.number_input,
},
paddingBottom: {
name: "padding bottom",
type: ZAPPIFEST_FIELDS.number_input,
},
paddingLeft: {
name: "padding left",
type: ZAPPIFEST_FIELDS.number_input,
},
backgroundColor: {
name: "background_color",
type: ZAPPIFEST_FIELDS.color_picker,
},
focusedBackgroundColor: {
name: "focused background color",
type: ZAPPIFEST_FIELDS.color_picker,
},
cornerRadius: {
name: "corner radius",
type: ZAPPIFEST_FIELDS.text_input,
tooltip: "please provide a number of pixels or a % value",
},
};
const SPACING_KEYS = [
"margin top",
"margin right",
"margin bottom",
"margin left",
"padding top",
"padding right",
"padding bottom",
"padding left",
];
const ABSOLUTE_POSITION_FIELDS = [
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "width",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "x position",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "y position",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "padding top",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "padding right",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "padding left",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "padding bottom",
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "background color",
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "background image",
},
];
const TV_COLOR_STATES = ["", "focused ", "selected ", "selected and focused "];
const colorFields = (states, label) =>
states.map((suffix) => ({
type: ZAPPIFEST_FIELDS.color_picker,
suffix: `${suffix}${label} color`,
}));
const tvActionButtonContainerFields = (positionOptions) => [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "buttons enabled",
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "independent styles",
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "position",
tooltip:
"<on_top> means that button is placed above all labels. Choose label name here to place button below specific label.", // eslint-disable-line max-len
options: positionOptions,
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "align",
options: ["left", "center", "right"],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin top",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin right",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin bottom",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin left",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "horizontal gutter",
},
];
const TV_ACTION_BUTTON_FIELDS = [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "button enabled",
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "assign action",
options: [
{ text: "play", value: "navigation_action" },
{ text: "favorite", value: "local_storage_favourites_action" },
{ text: "trailer", value: "trailer_action" },
],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "display mode",
options: ["dynamic", "fixed", "fixed_center"],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "fixed and fixed_center width",
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "background color",
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "focused background color",
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "background border color",
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "focused background border color",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "background corner radius",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "background border thickness",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "background padding top",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "background padding right",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "background padding bottom",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "background padding left",
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "asset enabled",
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "asset alignment",
options: ["left", "right"],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "asset height",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "asset width",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "asset margin top",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "asset margin right",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "asset margin bottom",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "asset margin left",
},
];
const TV_MENU_LABEL_FIELDS = [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "enabled",
},
...colorFields(TV_COLOR_STATES, "underline"),
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "underline thickness",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "underline corner radius",
},
...colorFields(TV_COLOR_STATES, "font"),
{
type: ZAPPIFEST_FIELDS.font_selector.tvos,
suffix: "tvos font family",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "tvos font size",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "tvos line height",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "tvos letter spacing",
},
{
type: ZAPPIFEST_FIELDS.font_selector.android,
suffix: "android tv font family",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android tv font size",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android tv line height",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android tv letter spacing",
},
{
type: ZAPPIFEST_FIELDS.font_selector.samsung,
suffix: "samsung font family",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "samsung font size",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "samsung line height",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "samsung letter spacing",
},
{
type: ZAPPIFEST_FIELDS.font_selector.lg,
suffix: "LG font family",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "LG font size",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "LG line height",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "LG letter spacing",
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "text transform",
options: ["default", "uppercase", "lowercase", "capitalize"],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "number of lines",
},
...SPACING_KEYS.map((suffix) => ({
type: ZAPPIFEST_FIELDS.number_input,
suffix,
})),
...colorFields(TV_COLOR_STATES, "text background"),
...colorFields(TV_COLOR_STATES, "text border"),
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "text border thickness",
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "text border corner radius",
},
];
const MOBILE_CELL_LABEL_FIELDS = [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "enable",
},
{
type: ZAPPIFEST_FIELDS.select,
tooltip: "What data key from feed entry should be rendered in this field.",
suffix: "data key",
options: [
{
text: "summary",
value: "summary",
},
{
text: "title",
value: "title",
},
{
text: "published",
value: "published",
},
{
text: "updated",
value: "updated",
},
{
text: "author.name",
value: "author.name",
},
{
text: "extensions.section",
value: "extensions.section",
},
{
text: "other",
value: "other",
},
],
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "custom data key",
rules: "all_conditions",
conditions: [
{ key: "data key", section: "styles", value: "other" },
{ key: "switch", section: "styles", value: true },
],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color focused",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color selected",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color focused selected",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.font_selector.ios,
suffix: "iOS font family",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "iOS font size",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "iOS line height",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "iOS letter spacing",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.font_selector.android,
suffix: "android font family",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android font size",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android line height",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android letter spacing",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "text alignment",
options: [
{
text: "Left",
value: "left",
},
{
text: "Right",
value: "right",
},
{
text: "Center",
value: "center",
},
],
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "text transform",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "number of lines",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "date transform enable",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
tooltip:
"For more information about available formats, please refer to our documentation.",
suffix: "date transform",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "styles", value: true },
{ key: "date transform enable", section: "styles", value: true },
],
options: [
{
value: "DD/MM/YYYY",
text: "DD/MM/YYYY",
},
{
value: "D/M/YY",
text: "D/M/YY",
},
{
value: "MMMM D, YYYY",
text: "MMMM D, YYYY",
},
{
value: "MMM D, YYYY",
text: "MMM D, YYYY",
},
{
value: "MMMM D, YYYY h:mm A",
text: "MMMM D, YYYY h:mm A",
},
{
value: "other",
text: "Other",
},
],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "custom date transform",
tooltip:
"For more information about available formats, please refer to our documentation.",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "styles", value: true },
{ key: "date transform enable", section: "styles", value: true },
{ key: "date transform", section: "styles", value: "other" },
],
},
...SPACING_KEYS.map((suffix) => ({
type: ZAPPIFEST_FIELDS.number_input,
suffix,
conditions: [{ key: "switch", section: "styles", value: true }],
})),
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "background color",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "selected background color",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "focused background color",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "focused selected background color",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "corner radius",
conditions: [{ key: "switch", section: "styles", value: true }],
},
];
const TV_CELL_LABEL_FIELDS = [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "enable",
tooltip: "",
},
{
type: ZAPPIFEST_FIELDS.select,
tooltip: "What data key from feed entry should be rendered in this field.",
suffix: "data key",
options: [
{
text: "summary",
value: "summary",
},
{
text: "title",
value: "title",
},
{
text: "published",
value: "published",
},
{
text: "updated",
value: "updated",
},
{
text: "author.name",
value: "author.name",
},
{
text: "extensions.section",
value: "extensions.section",
},
{
text: "other",
value: "other",
},
],
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "custom data key",
rules: "all_conditions",
conditions: [
{ key: "data key", section: "styles", value: "other" },
{ key: "switch", section: "styles", value: true },
],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color focused",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color selected",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "font color focused selected",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.font_selector.android,
suffix: "android font family",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android font size",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android letter spacing",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "android line height",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.font_selector.tvos,
suffix: "tvOS font family",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "tvOS font size",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "tvOS letter spacing",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "tvOS line height",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.font_selector.samsung,
suffix: "samsung font family",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "samsung font size",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "samsung letter spacing",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "samsung line height",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.font_selector.lg,
suffix: "lg font family",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "lg font size",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "lg letter spacing",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "lg line height",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "text alignment",
options: [
{
text: "Left",
value: "left",
},
{
text: "Right",
value: "right",
},
{
text: "Center",
value: "center",
},
],
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "text transform",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "number of lines",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "date transform enable",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
tooltip:
"For more information about available formats, please refer to our documentation.",
suffix: "date transform",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "styles", value: true },
{ key: "date transform enable", section: "styles", value: true },
],
options: [
{
value: "DD/MM/YYYY",
text: "DD/MM/YYYY",
},
{
value: "D/M/YY",
text: "D/M/YY",
},
{
value: "MMMM D, YYYY",
text: "MMMM D, YYYY",
},
{
value: "MMM D, YYYY",
text: "MMM D, YYYY",
},
{
value: "MMMM D, YYYY h:mm A",
text: "MMMM D, YYYY h:mm A",
},
{
value: "other",
text: "Other",
},
],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "custom date transform",
tooltip:
"For more information about available formats, please refer to our documentation.",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "styles", value: true },
{ key: "date transform enable", section: "styles", value: true },
{ key: "date transform", section: "styles", value: "other" },
],
},
...SPACING_KEYS.map((suffix) => ({
type: ZAPPIFEST_FIELDS.number_input,
suffix,
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
})),
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "background color",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "focused background color",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "selected background color",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "focused selected background color",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "corner radius",
tooltip: "",
rules: "conditional",
conditions: [{ key: "switch", section: "styles", value: true }],
},
];
const TV_CELL_BADGE_FIELDS = [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "enable",
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "static badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "static badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "program badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "program badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "feed badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "feed badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "link badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "link badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "article badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "article badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "channel badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "channel badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "video badge",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "video badge focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "content type custom badge 1",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 1",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 1 focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "content type custom badge 2",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 2",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 2 focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "content type custom badge 3",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 3",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 3 focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "content type custom badge 4",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 4",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 4 focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "content type custom badge 5",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 5",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "custom badge 5 focused",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "position",
options: [
{ text: "Center", value: "center" },
{ text: "Top Left", value: "top_left" },
{ text: "Top Right", value: "top_right" },
{ text: "Bottom Left", value: "bottom_left" },
{ text: "Bottom Right", value: "bottom_right" },
],
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "width",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "height",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin top",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin right",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin bottom",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin left",
rules: "conditional",
conditions: [{ key: "switch", section: "assets", value: true }],
},
];
const progressBarFields = ({
defaultPosition,
useBottomOfCell,
bottomOfCellPosition,
textLabels,
}) => [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "enable",
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "hide unwatched",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "total bar color",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "total bar corner radius",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.color_picker,
suffix: "progress bar color",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "progress bar corner radius",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "height",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin top",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin right",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin bottom",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "margin left",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "position",
options: compact([
{
text: "On Top of Image",
value: defaultPosition,
},
useBottomOfCell
? { text: "Bottom of cell", value: bottomOfCellPosition }
: undefined,
...R.flatten(
textLabels.map((textLabel) => [
{
text: `Above ${capitalize(textLabel)}`,
value: `above_${toSnakeCase(textLabel)}`,
},
{
text: `Below ${capitalize(textLabel)}`,
value: `below_${toSnakeCase(textLabel)}`,
},
])
),
]),
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "time remaining label enable",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "time remaining label position",
options: [
{
text: "Above Bar",
value: "above_bar",
},
{
text: "Below Bar",
value: "below_bar",
},
],
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "time remaining label asset enable",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "time remaining label asset",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label asset width",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label asset height",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label asset margin top",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label asset margin right",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label asset margin bottom",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label asset margin left",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
{
key: "time_remaining_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label container margin top",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label container margin right",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label container margin bottom",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "time remaining label container margin left",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "time_remaining_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "watched label enable",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "watched label position",
options: [
{
text: "Above Bar",
value: "above_bar",
},
{
text: "Below Bar",
value: "below_bar",
},
],
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "watched label asset enable",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "watched label continue asset",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.file,
suffix: "watched label watched asset",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label asset width",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label asset height",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label asset margin top",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label asset margin right",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label asset margin bottom",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label asset margin left",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
{
key: "watched_label_asset_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label container margin top",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label container margin right",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label container margin bottom",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "watched label container margin left",
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "watched_label_enable",
section: "assets",
value: true,
},
],
},
];
const secondaryImageFields = ({
displayModes,
imageSizings,
visibilities,
positions,
aligns,
imagePositions,
fitPositions,
}) => [
{
type: ZAPPIFEST_FIELDS.switch,
suffix: "enable",
},
{
type: ZAPPIFEST_FIELDS.text_input,
suffix: "image key",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "visibility",
options: compact([
...visibilities.map((visibility) => ({
text: capitalize(visibility),
value: visibility,
})),
]),
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "display mode",
options: compact([
...displayModes.map((mode) => ({
text: capitalize(mode),
value: mode,
})),
]),
label_tooltip:
"Power Cell 1 and 2 only supports fixed display mode for secondary image. Dynamic mode will be supported only in Power Cell 3.",
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "fixed width",
rules: "all_conditions",
label: "width",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "display_mode",
section: "assets",
value: "fixed",
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "fixed height",
rules: "all_conditions",
label: "height",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "display_mode",
section: "assets",
value: "fixed",
},
],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "image sizing",
options: compact([
...imageSizings.map((sizing) => ({
text: capitalize(sizing),
value: sizing,
})),
]),
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "display_mode",
section: "assets",
value: "fixed",
},
],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "fit position",
options: fitPositions.map((fitPosition) => ({
text: capitalize(fitPosition),
value: toSnakeCase(fitPosition),
})),
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "display_mode",
section: "assets",
value: "fixed",
},
{
key: "image sizing",
section: "assets",
value: "fit",
},
],
},
{
type: ZAPPIFEST_FIELDS.number_input,
suffix: "dynamic width",
rules: "all_conditions",
label: "width",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "display_mode",
section: "assets",
value: "dynamic",
},
],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "position",
options: positions.map((position) => ({
text: capitalize(position),
value: toSnakeCase(position),
})),
rules: "all_conditions",
conditions: [{ key: "switch", section: "assets", value: true }],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "align",
options: aligns.map((align) => ({
text: capitalize(align),
value: toSnakeCase(align),
})),
rules: "all_conditions",
conditions: [
{ key: "switch", section: "assets", value: true },
{
key: "position",
section: "assets",
value: R.compose(
R.without(["over_image"]),
R.map(toSnakeCase)
)(positions),
},
],
},
{
type: ZAPPIFEST_FIELDS.select,
suffix: "image position",
options: imagePositions.map((imagePosition) => ({
text: capitalize(imagePosition),
value: toSnakeCase(imagePosition),
}))