@applicaster/zapp-react-native-utils
Version:
Applicaster Zapp React Native utilities package
1,528 lines (1,512 loc) • 128 kB
JavaScript
/* eslint-disable max-len */
const {
fieldsGroup,
remapConditionalFieldsForPluginGallery,
} = require("../utils");
const R = require("ramda");
const compact = R.reject(R.isNil);
function getDevice(platform) {
switch (platform) {
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";
}
}
const isMobile = (platform) => getDevice(platform) === "mobile";
const isTV = (platform) => getDevice(platform) === "tv";
const mobileOnly = (platform, config) => (isMobile(platform) ? config : null);
function getPlayerConfiguration({ platform, version }) {
const audioTracksSettings =
platform.includes("android") || platform.includes("amazon")
? [
{
type: "switch",
label: "Use audio tracks based on the app language",
tooltip:
"If enabled, the default audio tracks for videos would be set according to the chosen app language and user's system language",
key: "enable_auto_audio_track_selection",
initial_value: false,
},
{
type: "switch",
label: "Collapse adaptive audio tracks",
tooltip:
"If enabled, will display only adaptive tracks group name, otherwise will display all audio tracks of all bitrates",
key: "enable_adaptive_audio_track_selection",
initial_value: false,
},
]
: [
{
type: "switch",
label: "Use audio tracks based on the app language",
tooltip:
"If enabled, the default audio tracks for videos would be set according to the chosen app language and user's system language",
key: "enable_auto_audio_track_selection",
initial_value: false,
},
];
const audioPlayer = [
{
key: "audio_player_rtl",
label: "Audio player layout right to left",
initial_value: false,
type: "switch",
label_tooltip:
"Disable if you don't want the content to have a right orientation",
},
];
const general = {
fields: [],
};
const styles = {
fields: [
{
type: "color_picker_rgba",
label: "Screen background color",
key: "screen_background_color",
label_tooltip:
"This will override the background color set in the theme",
initial_value: null,
},
],
};
const localizations = {
fields: [
{
type: "text_input",
label: "Playback Speed Modal Title",
key: "playback_speed_title",
initial_value: "Playback Speed Modal Title",
},
{
type: "text_input",
label: "Sleep Timer Modal Title",
key: "playback_sleep_title",
initial_value: "Sleep Timer Modal Title",
},
{
type: "text_input",
label: "Sleep timer countdown label",
key: "playback_sleep_countdown_label",
initial_value: "Sleep Timer",
},
{
type: "text_input",
label: "Sleep timer off label",
key: "playback_sleep_off_label",
initial_value: "Sleep timer off",
},
{
type: "text_input",
label: "Skip intro button",
key: "skip_button_localization_text_skip_intro",
initial_value: "Skip Intro",
},
{
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",
},
{
key: "accessibility_play_label",
label: "Accessibility play label",
initial_value: "Play button",
label_tooltip: "Label for play button accessibility",
type: "text_input",
},
{
key: "accessibility_play_hint",
label: "Accessibility play hint",
initial_value: "Press to play content",
label_tooltip: "Hint for play button accessibility",
type: "text_input",
},
{
key: "accessibility_pause_label",
label: "Accessibility pause label",
initial_value: "Pause button",
label_tooltip: "Label for pause button accessibility",
type: "text_input",
},
{
key: "accessibility_pause_hint",
label: "Accessibility pause hint",
initial_value: "Press to pause content",
label_tooltip: "Hint for pause button accessibility",
type: "text_input",
},
{
key: "accessibility_down_label",
label: "Accessibility down label",
initial_value: "Minimize button",
label_tooltip: "Label for minimize button accessibility",
type: "text_input",
},
{
key: "accessibility_down_hint",
label: "Accessibility down hint",
initial_value: "Press to minimize player",
label_tooltip: "Hint for minimize button accessibility",
type: "text_input",
},
{
key: "accessibility_maximize_label",
label: "Accessibility maximize label",
initial_value: "Maximize button",
label_tooltip: "Label for maximize button accessibility",
type: "text_input",
},
{
key: "accessibility_maximize_hint",
label: "Accessibility maximize hint",
initial_value: "Press to maximize player",
label_tooltip: "Hint for maximize button accessibility",
type: "text_input",
},
{
key: "accessibility_close_label",
label: "Accessibility close label",
initial_value: "Close button",
label_tooltip: "Label for close button accessibility",
type: "text_input",
},
{
key: "accessibility_close_hint",
label: "Accessibility close hint",
initial_value: "Press to close player",
label_tooltip: "Hint for close button accessibility",
type: "text_input",
},
{
key: "accessibility_forward_label",
label: "Accessibility forward label",
initial_value: "Fast forward button",
label_tooltip: "Label for forward button accessibility",
type: "text_input",
},
{
key: "accessibility_forward_hint",
label: "Accessibility forward hint",
initial_value: "Press to forward content",
label_tooltip: "Hint for forward button accessibility",
type: "text_input",
},
{
key: "accessibility_rewind_label",
label: "Accessibility rewind label",
initial_value: "Rewind button",
label_tooltip: "Label for rewind button accessibility",
type: "text_input",
},
{
key: "accessibility_rewind_hint",
label: "Accessibility rewind hint",
initial_value: "Press to rewind content",
label_tooltip: "Hint for rewind button accessibility",
type: "text_input",
},
{
key: "accessibility_close_mini_label",
label: "Accessibility docked close button label",
initial_value: "Close mini player",
label_tooltip: "Label for docked close button accessibility",
type: "text_input",
},
{
key: "accessibility_close_mini_hint",
label: "Accessibility docked close button hint",
initial_value: "Press to close mini player",
label_tooltip: "Hint for docked close button accessibility",
type: "text_input",
},
{
key: "accessibility_pause_mini_label",
label: "Accessibility docked pause button label",
initial_value: "Pause mini player",
label_tooltip: "Label for docked pause button accessibility",
type: "text_input",
},
{
key: "accessibility_pause_mini_hint",
label: "Accessibility docked pause button hint",
initial_value: "Press to pause mini player",
label_tooltip: "Hint for docked pause button accessibility",
type: "text_input",
},
{
key: "accessibility_play_mini_label",
label: "Accessibility docked play button label",
initial_value: "Play mini player",
label_tooltip: "Label for docked play button accessibility",
type: "text_input",
},
{
key: "accessibility_play_mini_hint",
label: "Accessibility docked play button hint",
initial_value: "Press to play mini player",
label_tooltip: "Hint for docked play button accessibility",
type: "text_input",
},
{
key: "accessibility_subtitle_label",
label: "Accessibility subtitles label",
initial_value: "Subtitles button",
label_tooltip: "Label for subtitles button accessibility",
type: "text_input",
},
{
key: "accessibility_subtitle_hint",
label: "Accessibility subtitles hint",
initial_value: "Press to open subtitles menu",
label_tooltip: "Hint for subtitles button accessibility",
type: "text_input",
},
{
key: "accessibility_back_label",
label: "Accessibility back label",
initial_value: "Exit player button",
label_tooltip: "Label for back button accessibility",
type: "text_input",
},
{
key: "accessibility_back_hint",
label: "Accessibility back hint",
initial_value: "Press to go back",
label_tooltip: "Hint for back button accessibility",
type: "text_input",
},
{
key: "accessibility_fullscreen_label",
label: "Accessibility fullscreen label",
initial_value: "Fullscreen button",
label_tooltip: "Label for fullscreen button accessibility",
type: "text_input",
},
{
key: "accessibility_fullscreen_hint",
label: "Accessibility fullscreen hint",
initial_value: "Press to toggle fullscreen mode",
label_tooltip: "Hint for fullscreen button accessibility",
type: "text_input",
},
{
key: "accessibility_skip_intro_label",
label: "Accessibility skip intro label",
initial_value: "Skip intro - button",
label_tooltip: "Label for skip intro button accessibility",
type: "text_input",
},
{
key: "accessibility_skip_intro_hint",
label: "Accessibility skip intro hint",
initial_value: "Press to skip intro",
label_tooltip: "Hint for skip intro button accessibility",
type: "text_input",
},
{
type: "text_input",
label: "Text Tracks Label",
key: "text_tracks_label",
initial_value: "Subtitles",
label_tooltip: "Label for the text tracks list",
},
{
type: "text_input",
label: "Audio Tracks Label",
key: "audio_tracks_label",
initial_value: "Audio",
label_tooltip: "Label for the audio tracks list",
},
{
type: "text_input",
label: "Off Track Label",
key: "off_track_label",
initial_value: "Off",
label_tooltip: "Label for the 'Off' option in text tracks list",
},
{
type: "text_input",
label: "Default Track Label",
key: "default_track_label",
initial_value: "Default",
label_tooltip:
"Label for the 'Default' audio track in audio tracks list",
},
],
};
if (isTV(platform)) {
styles.fields.push(
fieldsGroup("Always Show Scrub Bar & Timestamp", "", [
{
key: "always_show_scrub_bar_and_timestamp",
label: "Always Show Scrub Bar & Timestamp",
initial_value: false,
type: "switch",
label_tooltip:
"When enabled, progress bar will always appear while playing in full screen. otherwise, progress bar will appear only when tapping and revealing all controllers",
},
{
section: "Default Timestamp Type",
key: "default_timestamp_type",
label: "Default Timestamp Type",
type: "select",
initial_value: "remaining_time",
label_tooltip:
"When clicking on the timestamp - users will be able to switch between both modes. this configuration only set the default mode when entering the player.",
options: [
{
text: "Remaining time",
value: "remaining_time",
},
{
text: "Complete Duration",
value: "complete_duration",
},
],
},
]),
fieldsGroup(
"Partial Player (Roku only)",
"This section allows you to configure width and height of video player in Partial Player",
[
{
key: "video_theater_width",
label: "Width of player",
type: "number_input",
initial_value: 1420,
placeholder: "1420",
},
{
key: "video_theater_height",
label: "Height of player",
type: "number_input",
initial_value: 900,
placeholder: "900",
},
{
key: "full_screen_button_offset_x",
label: "Fullscreen button X",
type: "number_input",
initial_value: 160,
placeholder: "160",
},
{
key: "full_screen_button_offset_y",
label: "Fullscreen button Y",
type: "number_input",
initial_value: 160,
placeholder: "160",
},
{
key: "full_screen_button_w",
label: "Fullscreen button width",
type: "number_input",
initial_value: 120,
placeholder: "120",
},
{
key: "full_screen_button_h",
label: "Fullscreen button height",
type: "number_input",
initial_value: 120,
placeholder: "120",
},
{
key: "full_screen_button_background_color",
type: "color_picker",
label: "Fullscreen Button background color",
initial_value: "#00000000",
placeholder: "color",
label_tooltip: "Pick Color",
},
{
key: "full_screen_button_background_url",
type: "text_input",
label: "Fullscreen Button background URL",
initial_value: "pkg:/images/tv_fullscreen.png",
placeholder: "",
label_tooltip: "",
},
{
key: "full_screen_button_highlighted_background_color",
type: "color_picker",
label: "Fullscreen Button highlighted background color",
initial_value: "#00000000",
placeholder: "color",
label_tooltip: "Pick Color",
},
{
key: "full_screen_button_highlighted_background_url",
type: "text_input",
label: "Fullscreen Button highlighted URL",
initial_value: "pkg:/images/tv_fullscreen.png",
placeholder: "",
label_tooltip: "",
},
]
),
fieldsGroup(
"Skip Button",
"This section allows you to configure the skip button styles for tv",
[
{
type: "switch",
key: "skip_button_enabled",
label_tooltip: "Enables Skip button on the player.",
label: "Enable",
initial_value: true,
},
{
type: "switch",
key: "skip_button_persistent",
label_tooltip:
"Show skip button always if enabled, otherwise show only when the player controls are on the screen.",
label: "Persistent Button Toggle",
initial_value: true,
},
{
type: "color_picker_rgba",
label_tooltip: "",
label: "Border Color",
key: "skip_button_style_button_border_color",
initial_value: "rgba(239, 239, 239, 0.5)",
},
{
type: "color_picker_rgba",
label_tooltip: "",
label: "Border Color Focused",
key: "skip_button_style_button_focused_border_color",
initial_value: "rgba(239, 239, 239, 1)",
},
{
type: "number_input",
label_tooltip: "",
label: "Border Width",
key: "skip_button_style_button_border_width",
initial_value: 1.5,
},
{
type: "number_input",
label_tooltip: "",
label: "Corner Radius",
key: "skip_button_style_button_border_radius",
initial_value: 10,
},
{
type: "color_picker_rgba",
label_tooltip: "",
label: "Background Color",
key: "skip_button_style_button_background_color",
initial_value: "rgba(0, 0, 0, 0.3)",
},
{
type: "color_picker_rgba",
label_tooltip: "",
label: "Background Color Focused",
key: "skip_button_style_button_focused_background_color",
initial_value: "rgba(0, 0, 0, 0)",
},
{
type: "color_picker_rgba",
label_tooltip: "",
label: "Font Color",
key: "skip_button_style_text_color",
initial_value: "rgba(255, 255, 255, 0.5)",
},
{
type: "color_picker_rgba",
label_tooltip: "",
label: "Font Color Focused",
key: "skip_button_style_text_focused_color",
initial_value: "rgba(255, 255, 255, 1)",
},
{
type: "lg_tv_font_selector",
label_tooltip: "",
label: "LG Font Family",
key: "skip_button_style_text_lg_font_family",
initial_value: "Ubuntu-Bold",
},
{
type: "number_input",
label_tooltip: "",
label: "LG Font Size",
key: "skip_button_style_text_lg_font_size",
initial_value: 24,
},
{
type: "samsung_font_selector",
label_tooltip: "",
label: "Samsung Font Family",
key: "skip_button_style_text_samsung_font_family",
initial_value: "Ubuntu-Bold",
},
{
type: "number_input",
label_tooltip: "",
label: "Samsung Font Size",
key: "skip_button_style_text_samsung_font_size",
initial_value: 24,
},
{
type: "vizio_font_selector",
label_tooltip: "",
label: "Samsung Font Family",
key: "skip_button_style_text_vizio_font_family",
initial_value: "Ubuntu-Bold",
},
{
type: "number_input",
label_tooltip: "",
label: "Vizio Font Size",
key: "skip_button_style_text_vizio_font_size",
initial_value: 24,
},
{
type: "android_font_selector",
label_tooltip: "",
label: "Android Font Family",
key: "skip_button_style_text_android_font_family",
initial_value: "Ubuntu-Bold",
},
{
type: "number_input",
label_tooltip: "",
label: "Android Font Size",
key: "skip_button_style_text_android_font_size",
initial_value: 24,
},
{
type: "roku_font_selector",
label_tooltip: "",
label: "Roku Font Family",
key: "skip_button_style_text_roku_font_family",
initial_value: "Ubuntu-Bold",
},
{
type: "number_input",
label_tooltip: "",
label: "Roku Font Size",
key: "skip_button_style_text_roku_font_size",
initial_value: 24,
},
{
type: "select",
options: [
{
text: "None",
value: "none",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
label: "Text Transform",
key: "skip_button_style_text_text_transform",
initial_value: "none",
},
]
)
);
}
if (isMobile(platform)) {
general.fields.push(
{
section: "Default Timestamp Type",
key: "default_timestamp_type",
label: "Default Timestamp Type",
type: "select",
initial_value: "total_duration",
label_tooltip:
"When clicking on the timestamp - users will be able to switch between both modes. this configuration only set the default mode when entering the player.",
options: [
{
text: "Remaining time",
value: "remaining_time",
},
{
text: "Total duration",
value: "total_duration",
},
],
},
{
key: "seek_duration",
label: "Seek duration",
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",
},
{
key: "liveSeekingEnabled",
label: "Live Seeking Enabled",
initial_value: false,
type: "switch",
label_tooltip: "Enable Live Seek",
},
{
key: "minimumAllowedSeekableDurationInSeconds",
label: "Minimum allowed seekable duration in seconds",
initial_value: 300,
type: "number_input",
label_tooltip:
"If duration less that this value, player will disable 'liveSeekingEnabled' value",
},
{
key: "pictureInPictureEnabled",
label: "Picture in 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.",
}
);
if (
platform.includes("android") ||
platform.includes("amazon") ||
platform.includes("ios") ||
platform.includes("tvos")
) {
general.fields.push({
key: "user_agent",
label: "User agent",
initial_value: "",
type: "text_input",
label_tooltip: "Override default user agent string",
});
}
if (platform === "android_for_quickbrick") {
general.fields.push({
key: "stop_playback_on_task_removal",
label: "Stop background playback on close",
initial_value: false,
type: "switch",
label_tooltip:
"Stop background playback if user swipes app away from 'Recent' screen",
});
}
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",
},
{
type: "text_input",
label: "Background image key",
key: "player_preview_image_key",
initial_value: "",
},
{
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: "Disable Mini Player (in Inline Mode Video Modal)",
label_tooltip:
"Select whether you want to disable the mini player in the video player when in inline mode",
key: "disable_mini_player_when_inline",
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,
},
],
},
{
key: "android_pip_action_icons",
type: "uploader",
label: "Android PiP Action items",
label_tooltip:
"Upload Assets Folder Zip File, expected format: pip_play, pip_pause, pip_seek_forward, pip_seek_backward",
},
{
key: "speed_0_8",
label: "Playback Speed 0.8x",
type: "uploader",
label_tooltip: "Playback Speed 0.8x",
initial_value: null,
},
{
key: "speed_1",
label: "Playback Speed 1x",
type: "uploader",
label_tooltip: "Playback Speed 1x",
initial_value: null,
},
{
key: "speed_1_2",
label: "Playback Speed 1.2x",
type: "uploader",
label_tooltip: "Playback Speed 1.2x",
initial_value: null,
},
{
key: "speed_1_5",
label: "Playback Speed 1.5x",
type: "uploader",
label_tooltip: "Playback Speed 1.5x",
initial_value: null,
},
{
key: "speed_2",
label: "Playback Speed 2x",
type: "uploader",
label_tooltip: "Playback Speed 2x",
initial_value: null,
},
{
key: "sleep_timer",
label: "Sleep Timer Default",
type: "uploader",
label_tooltip: "Sleep Timer Default",
initial_value: null,
},
{
key: "sleep_timer_active",
label: "Sleep Timer Active",
type: "uploader",
label_tooltip: "Sleep Timer Active",
initial_value: null,
},
]
),
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: