@applicaster/zapp-react-native-utils
Version:
Applicaster Zapp React Native utilities package
1,509 lines (1,496 loc) • 83.9 kB
text/typescript
/* eslint-disable max-len */
import * as R from "ramda";
import { generateManifest } from "@applicaster/zapp-react-native-utils/pluginUtils";
import {
fieldsGroup,
remapConditionalFieldsForPluginGallery,
} from "../manifestUtils";
import { modifyDefaultConfigValues } from "./configurationUtils";
function getDevice(platform) {
switch (platform) {
case "ios":
case "ios_for_quickbrick":
case "android":
case "android_for_quickbrick":
return "mobile";
case "tvos_for_quickbrick":
case "amazon_fire_tv_for_quickbrick":
case "android_tv_for_quickbrick":
case "lg_tv":
case "samsung_tv":
case "vizio":
case "web":
return "tv";
}
}
function getPlayerConfiguration({ platform }) {
const general = {
fields: [
{
key: "audio_player_rtl",
label: "Audio player layout right to left",
initial_value: true,
type: "switch",
label_tooltip:
"Disable if you don't want the content to have a right orientation",
},
{
key: "magic_background",
label: "Enable Magic Background",
initial_value: false,
type: "switch",
label_tooltip:
"Enable if you want to have adaptive background gradient based on audio background image.",
},
{
key: "audio_player_background_image_query",
label: "Audio Player Image Query",
initial_value: "",
type: "text_input",
label_tooltip:
"Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
},
],
};
const styles = {
fields: [],
};
const localizations = {
fields: [],
};
if (getDevice(platform) === "mobile") {
localizations.fields.push(
{
type: "text_input",
label: "Locked message",
key: "message_locked",
initial_value: "Screen Locked",
},
{
type: "text_input",
label: "Unlock message",
key: "message_unlock",
initial_value: "Tap again to unlock screen",
}
);
general.fields.push(
{
key: "seek_duration",
label: "Seek duration",
// @ts-ignore wrong derived value
initial_value: 10,
type: "number_input",
label_tooltip: "Duration of fast forward / rewind",
},
{
key: "nowPlayingEnabled",
label: "Now Playing enabled",
initial_value: false,
type: "switch",
label_tooltip:
"Enable this option to keep video and audio content playing in the background. Please know that on Android it has to be enabled in the plugin and for iOS on the player screen.",
},
{
key: "player_action_buttons",
label: "Player action buttons",
initial_value: null,
label_tooltip:
"type here the identifiers of the action buttons you want to show on the player, separated by commas. Only 2 action buttons may be added at the same time",
type: "text_input",
}
);
if (platform.includes("ios")) {
general.fields.push({
key: "pictureInPictureEnabled",
label: "Picture and picture enabled",
initial_value: false,
type: "switch",
label_tooltip:
"Enable this option to have a floating video player when the app is in the background (experimental)",
});
}
if (platform.includes("android") || platform.includes("amazon")) {
general.fields.push({
key: "user_agent",
label: "User agent",
// @ts-ignore wrong derived value
initial_value: "",
type: "text_input",
label_tooltip: "Override default user agent string",
});
}
styles.fields.push(
fieldsGroup(
"Player Styles",
"This section allows you to configure the main styles of the player",
[
{
key: "overlay_color",
label: "Player overlay color",
type: "color_picker_rgba",
initial_value: "rgba(0, 0, 0, 0)",
label_tooltip:
"Select the background overlay color for the player. The alpha channel is ignored, and a gradient is created from the provided RGB colors",
},
{
key: "use_video_modal",
label: "Use video modal",
initial_value: false,
type: "switch",
label_tooltip:
"Select whether you want to present player inside the video modal",
},
{
type: "switch",
label: "Disable Fullscreen Mode",
tooltip:
"Removes the ability to play the media content in fullscreen",
key: "disable_fullscreen",
initial_value: false,
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "switch",
label: "Inline Player Close Button",
tooltip:
"Select whether you want to include a close button in the inline player mode",
key: "inline_player_close_button_enabled",
initial_value: false,
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "switch",
label: "Fullscreen Player Close Button",
tooltip:
"Select whether you want to include a close button in the fullscreen player mode",
key: "fullscreen_player_close_button_enabled",
initial_value: false,
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "switch",
label: "Display live badge",
tooltip:
"Select whether you want to include a badge for live content",
key: "live_badge_enabled",
initial_value: true,
},
{
type: "number_input",
label: "Minimised height (Mobile)",
tooltip: "Height of the minimised modal - Applies only to mobile",
key: "minimised_height",
initial_value: 60,
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "number_input",
label: "Minimised height (Tablet)",
tooltip: "Height of the minimised modal - Applies only to Tablets",
key: "minimised_height_tablet",
initial_value: 64,
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "select",
label: "VideoModal StatusBar content style",
key: "status_bar_content_style",
tooltip: "Color of the modal status bar content",
options: [
{
text: "Dark",
value: "dark-content",
},
{
text: "Light",
value: "light-content",
},
],
initial_value: null,
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "color_picker_rgba",
label: "Modal Background Color",
key: "modal_background_color",
tooltip: "Color of the modal background (can be transparent)",
initial_value: "rgba(255, 255, 255, 0)",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "color_picker_rgba",
label: "Buffering spinner color",
key: "buffering_color",
initial_value: "rgba(255, 255, 255, 1)",
},
{
key: "docked_player_background_color",
label: "Docked player background color",
type: "color_picker_rgba",
initial_value: "rgba(15,15,15,1)",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "color_picker_rgba",
label: "Tablet landscape Player container background color",
key: "tablet_landscape_player_container_background_color",
initial_value: "rgba(0,0,0,1)",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
type: "text_input",
label: "Tablet landscape sidebar width",
key: "tablet_landscape_sidebar_width",
label_tooltip:
"This setting allow you to define the width of the sidebar, when using the inline player on tablet landscape mode. You can choose either a fix width or a % of the screen",
initial_value: "35%",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
]
),
fieldsGroup(
"Assets",
"This section enables you to configure the assets used in the player",
[
{
key: "play",
label: "Play badge",
type: "uploader",
label_tooltip: "Override default play badge / icon",
},
{
key: "pause",
label: "Pause badge",
type: "uploader",
label_tooltip: "Override default pause badge / icon",
},
{
key: "forward",
label: "Forward badge",
type: "uploader",
label_tooltip: "Override default forward badge / icon",
},
{
key: "rewind",
label: "Rewind badge",
type: "uploader",
label_tooltip: "Override default rewind badge / icon",
},
{
key: "stop",
label: "Stop badge",
type: "uploader",
label_tooltip:
"Set stop badge / icon. Pause badge is used if this field is empty",
},
{
key: "subtitle_off",
label: "Subtitle off badge",
type: "uploader",
label_tooltip: "Override default subtitle_off badge / icon",
},
{
key: "subtitle_on",
label: "Subtitle on badge",
type: "uploader",
label_tooltip: "Override default subtitle_on badge / icon",
},
{
key: "close",
label: "Close badge",
type: "uploader",
label_tooltip: "Override default close badge / icon",
},
{
key: "lock",
label: "Lock player badge",
type: "uploader",
label_tooltip: "Override default lock player badge / icon",
},
// Modal section
{
key: "minimize",
label: "Minimize badge",
type: "uploader",
label_tooltip: "Override default minimize badge / icon",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
key: "maximize",
label: "Maximize badge",
type: "uploader",
label_tooltip: "Override default maximize badge / icon",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
key: "down",
label: "Down badge",
type: "uploader",
label_tooltip: "Override default down badge / icon",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
// Docked section
{
key: "play_mini",
label: "Docked play badge",
type: "uploader",
label_tooltip: "Override default play badge / icon in docked mode",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
key: "pause_mini",
label: "Docked pause badge",
type: "uploader",
label_tooltip: "Override default pause badge / icon in docked mode",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
key: "close_mini",
label: "Docked close badge",
type: "uploader",
label_tooltip: "Override default close badge / icon in docked mode",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
key: "stop_mini",
label: "Docked stop badge",
type: "uploader",
label_tooltip:
"Set stop badge / icon in docked mode. Docked pause badge is used if this field is empty",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
key: "live_image",
label: "Live badge",
type: "uploader",
label_tooltip: "Override default live badge / icon",
rules: "conditional",
conditional_fields: [
{
key: "styles/live_badge_enabled",
condition_value: true,
},
],
},
{
key: "live_image_gray",
label: "Live Badge On Rewound State",
type: "uploader",
label_tooltip:
"This badge indicates that the stream is live but currently being viewed in a rewound state.",
rules: "conditional",
conditional_fields: [
{
key: "styles/live_badge_enabled",
condition_value: true,
},
],
},
{
key: "live_width",
label: "Live badge width",
type: "number_input",
label_tooltip: "Max value 230",
initial_value: 38,
rules: "conditional",
conditional_fields: [
{
key: "styles/live_badge_enabled",
condition_value: true,
},
],
},
{
key: "live_height",
label: "Live badge height",
type: "number_input",
label_tooltip: "Max value 40",
initial_value: 20,
rules: "conditional",
conditional_fields: [
{
key: "styles/live_badge_enabled",
condition_value: true,
},
],
},
]
),
fieldsGroup(
"Player Content Title",
"this section enables you to configure the styles of the content meta data displayed on top of the player",
[
// Title section
{
section: "title",
key: "title",
label: "Player content title",
initial_value: true,
type: "switch",
label_tooltip: "Select whether you want to display title in player",
},
{
section: "title",
key: "title_font_android",
label: "Android title font",
type: "android_font_selector",
initial_value: "Roboto-Bold",
label_tooltip: "Select the font for the android player's title",
},
{
section: "title",
key: "title_font_ios",
label: "iOS title font",
type: "ios_font_selector",
initial_value: "SFProText-Semibold",
label_tooltip: "Select the font for the iOS player's title",
},
{
section: "title",
key: "title_color",
label: "Title color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip: "Select the font color for the player's title",
},
{
section: "title",
key: "title_fontsize_android",
label: "Android title font size",
type: "number_input",
initial_value: 16,
label_tooltip:
"Select the font size for the android player's title",
},
{
section: "title",
key: "title_fontsize_ios",
label: "iOS title font size",
type: "number_input",
initial_value: 16,
label_tooltip: "Select the font size for the iOS player's title",
},
{
section: "title",
key: "title_lineheight_android",
label: "Android title line height",
type: "number_input",
initial_value: 20,
label_tooltip:
"Select the line height for the android player's title",
},
{
section: "title",
key: "title_lineheight_ios",
label: "iOS title line height",
type: "number_input",
initial_value: 20,
label_tooltip: "Select the line height for the iOS player's title",
},
{
section: "title",
key: "title_letterspacing_android",
label: "Android title letter spacing",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the letter spacing for the android player's title",
},
{
section: "title",
key: "title_letterspacing_ios",
label: "iOS title letter spacing",
type: "number_input",
initial_value: -0.4,
label_tooltip:
"Select the letter spacing for the iOS player's title",
},
{
section: "title",
key: "title_margin_bottom",
label: "Title margin bottom",
type: "number_input",
initial_value: 2,
label_tooltip: "Select the margin bottom for the player's title",
},
{
section: "title",
key: "title_text_transform",
label: "Title Text Transform",
type: "select",
initial_value: "default",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
},
// Docked Player Title section
{
section: "Docked Player Title",
key: "docked_player_title",
label: "Docked player content title",
initial_value: true,
type: "switch",
label_tooltip:
"Select whether you want to display the title in the docked player",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_font_android",
label: "Android Docked player content title font",
type: "android_font_selector",
initial_value: "Roboto-Bold",
rules: "all_conditions",
label_tooltip:
"Select the font for the docked player's title on Android",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_font_ios",
label: "iOS Docked player content title font",
type: "ios_font_selector",
initial_value: "SFProText-Semibold",
label_tooltip:
"Select the font for the docked player's title on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_color",
label: "Docked player content title color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip:
"Select the font color for the docked player's title",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_fontsize_android",
label: "Android Docked player content title font size",
type: "number_input",
initial_value: 15,
label_tooltip:
"Select the font size for the docked player's title on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_fontsize_ios",
label: "iOS Docked player content title font size",
type: "number_input",
initial_value: 15,
label_tooltip:
"Select the font size for the docked player's title on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_lineheight_android",
label: "Android Docked player content title line height",
type: "number_input",
initial_value: 18,
label_tooltip:
"Select the line height for the docked player's title on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_lineheight_ios",
label: "iOS Docked player content title line height",
type: "number_input",
initial_value: 18,
label_tooltip:
"Select the line height for the docked player's title on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_letterspacing_android",
label: "Android Docked player content title letter spacing",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the letter spacing for the docked player's title on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_letterspacing_ios",
label: "iOS Docked player content title letter spacing",
type: "number_input",
initial_value: -0.2,
label_tooltip:
"Select the letter spacing for the docked player's title on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_margin_bottom",
label: "Docked player content title margin bottom",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the margin bottom for the docked player's title",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_number_of_lines",
label: "Docked player content title number of lines",
type: "number_input",
initial_value: 1,
label_tooltip:
"Select the number of lines for the docked player's title (maximum of 2 if subtitle is turned off)",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
{
section: "Docked Player Title",
key: "docked_player_title_text_transform",
label: "Docked player content title Text Transform",
type: "select",
rules: "all_conditions",
initial_value: "default",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_title",
condition_value: true,
},
],
},
]
),
// Captions Menu for Mobile
fieldsGroup("Captions - Overlay", "Captions overlay styles", [
{
type: "switch",
label: "Disable captions overlay",
key: "disable_captions",
initial_value: false,
},
]),
fieldsGroup(
"Player Content Subtitle",
"this section enables you to configure the styles of the content meta data displayed on top of the player",
[
// Subtitle section
{
section: "subtitle",
key: "subtitle",
label: "Player content subtitle",
initial_value: true,
type: "switch",
label_tooltip:
"Select whether you want to display subtitle in player",
},
{
section: "subtitle",
key: "subtitle_font_android",
label: "Android subtitle font",
type: "android_font_selector",
initial_value: "Roboto-Regular",
label_tooltip: "Select the font for the android player's subtitle",
},
{
section: "subtitle",
key: "subtitle_font_ios",
label: "iOS subtitle font",
type: "ios_font_selector",
initial_value: "SFProText-Regular",
label_tooltip: "Select the font for the iOS player's subtitle",
},
{
section: "subtitle",
key: "subtitle_color",
label: "Subtitle color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip: "Select the font color for the player's subtitle",
},
{
section: "subtitle",
key: "subtitle_fontsize_android",
label: "Android subtitle font size",
type: "number_input",
initial_value: 13,
label_tooltip:
"Select the font size for the android player's subtitle",
},
{
section: "subtitle",
key: "subtitle_fontsize_ios",
label: "iOS subtitle font size",
type: "number_input",
initial_value: 13,
label_tooltip: "Select the font size for the iOS player's subtitle",
},
{
section: "subtitle",
key: "subtitle_lineheight_android",
label: "Android subtitle line height",
type: "number_input",
initial_value: 18,
label_tooltip:
"Select the line height for the android player's subtitle",
},
{
section: "subtitle",
key: "subtitle_lineheight_ios",
label: "iOS subtitle line height",
type: "number_input",
initial_value: 18,
label_tooltip:
"Select the line height for the iOS player's subtitle",
},
{
section: "subtitle",
key: "subtitle_letterspacing_android",
label: "Android subtitle letter spacing",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the letter spacing for the android player's subtitle",
},
{
section: "subtitle",
key: "subtitle_letterspacing_ios",
label: "iOS subtitle letter spacing",
type: "number_input",
initial_value: -0.2,
label_tooltip:
"Select the letter spacing for the iOS player's subtitle",
},
{
section: "subtitle",
key: "subtitle_text_transform",
label: "Subtitle Text Transform",
type: "select",
initial_value: "default",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
},
// Docked Player Subitle section
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle",
label: "Docked player content subtitle",
initial_value: true,
type: "switch",
label_tooltip:
"Select whether you want to display the subtitle in the docked player",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_font_android",
label: "Android Docked player content subtitle font",
type: "android_font_selector",
initial_value: "Roboto-Regular",
label_tooltip:
"Select the font for the docked player's subtitle on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_font_ios",
label: "iOS Docked player content subtitle font",
type: "ios_font_selector",
initial_value: "SFProText-Regular",
label_tooltip:
"Select the font for the docked player's subtitle on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_color",
label: "Docked player content subtitle color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 0.8)",
label_tooltip:
"Select the font color for the docked player's subtitle",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_fontsize_android",
label: "Android Docked player content subtitle font size",
type: "number_input",
initial_value: 13,
label_tooltip:
"Select the font size for the docked player's subtitle on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_fontsize_ios",
label: "iOS Docked player content subtitle font size",
type: "number_input",
initial_value: 13,
label_tooltip:
"Select the font size for the docked player's subtitle on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_lineheight_android",
label: "Android Docked player content subtitle line height",
type: "number_input",
initial_value: 16,
label_tooltip:
"Select the line height for the docked player's subtitle on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_lineheight_ios",
label: "iOS Docked player content subtitle line height",
type: "number_input",
initial_value: 16,
label_tooltip:
"Select the line height for the docked player's subtitle on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_letterspacing_android",
label: "Android Docked player content subtitle letter spacing",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the letter spacing for the docked player's subtitle on Android",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_letterspacing_ios",
label: "iOS Docked player content subtitle letter spacing",
type: "number_input",
initial_value: -0.2,
label_tooltip:
"Select the letter spacing for the docked player's subtitle on iOS",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
{
section: "Docked Player Subtitle",
key: "docked_player_subtitle_text_transform",
label: "Docked player content subtitle Text Transform",
type: "select",
initial_value: "default",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
rules: "all_conditions",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
{
key: "styles/docked_player_subtitle",
condition_value: true,
},
],
},
]
),
fieldsGroup(
"Scrub bar",
"this section allows you to configure the player's scrub bar",
[
// Scrub Bar or Progress Bar Section
{
section: "scrub",
key: "scrub_font_android",
label: "Android scrub font",
type: "android_font_selector",
initial_value: "Roboto-Medium",
label_tooltip:
"Select the font for the android player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_font_ios",
label: "iOS scrub font",
type: "ios_font_selector",
initial_value: "SFProText-Medium",
label_tooltip:
"Select the font for the iOS player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_color",
label: "Scrub font color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip:
"Select the font color for the player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_color_duration_inline",
label: "Scrub total duration font color (inline player)",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 0.65)",
label_tooltip:
"Select the font color for the player's progress bar total duration label in inline mode",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
section: "scrub",
key: "scrub_fontsize_android",
label: "Android scrub font size",
type: "number_input",
initial_value: 13,
label_tooltip:
"Select the font size for the android player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_fontsize_ios",
label: "iOS scrub font size",
type: "number_input",
initial_value: 13,
label_tooltip:
"Select the font size for the iOS player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_lineheight_android",
label: "Android scrub line height",
type: "number_input",
initial_value: 16,
label_tooltip:
"Select the line height for the android player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_lineheight_ios",
label: "iOS scrub line height",
type: "number_input",
initial_value: 16,
label_tooltip:
"Select the line height for the iOS player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_letterspacing_android",
label: "Android scrub letter spacing",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the letter spacing for the android player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_letterspacing_ios",
label: "iOS scrub letter spacing",
type: "number_input",
initial_value: 0,
label_tooltip:
"Select the letter spacing for the iOS player's scrub / progress bar",
},
{
section: "scrub",
key: "scrub_total",
label: "Scrub bar color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 0.35)",
label_tooltip:
"Select the bar color for the player's scrub / progress bar",
},
{
section: "scrub",
key: "docked_scrub_total",
label: "Docked scrub bar color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 0.35)",
label_tooltip:
"Select the bar color for the player's scrub / progress bar in docked mode",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
section: "scrub",
key: "scrub_progress",
label: "Scrub bar progress color",
type: "color_picker_rgba",
initial_value: "rgba(4, 207, 153, 1)",
label_tooltip:
"Select the progress bar color for the player's scrub / progress bar",
},
{
section: "scrub",
key: "docked_scrub_progress",
label: "Docked scrub bar progress color",
type: "color_picker_rgba",
initial_value: "rgba(4, 207, 153, 1)",
label_tooltip:
"Select the progress bar color for the player's scrub / progress bar in docked mode",
rules: "conditional",
conditional_fields: [
{
key: "styles/use_video_modal",
condition_value: true,
},
],
},
{
section: "scrub",
key: "scrub_handle",
label: "Scrub bar handle color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip:
"Select the bar handle / marker color for the player's scrub / progress bar",
},
]
),
fieldsGroup(
"Player/Screen Lock",
"this section allows you to configure the player/screen lock",
[
{
key: "lock_enabled",
label: "Enable player lock",
initial_value: true,
type: "switch",
label_tooltip:
"Select whether you want to enable the player lock feature",
},
{
key: "locked",
label: "Locked badge",
type: "uploader",
label_tooltip: "Override default locked badge / icon",
},
{
key: "unlock",
label: "Unlock badge",
type: "uploader",
label_tooltip: "Override default unlock badge / icon",
},
{
key: "lock_border_color",
label: "Locked border color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip:
"Select the border color for the locked badge / icon",
},
{
key: "lock_border_width",
label: "Locked border width",
type: "number_input",
initial_value: 2,
label_tooltip: "Select the border width of the locked badge / icon",
},
{
key: "lock_background",
label: "Unlock background color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip:
"Select the background color of the unlock badge / icon",
},
{
key: "lock_message_color",
label: "Lock message color",
type: "color_picker_rgba",
initial_value: "rgba(255, 255, 255, 1)",
label_tooltip: "Select the lock message color",
},
{
key: "lock_font_ios",
label: "iOS lock message font",
type: "ios_font_selector",
initial_value: "SFP