tethysfaceid
Version:
227 lines (223 loc) • 19.2 kB
JavaScript
import { Config } from 'common/Config';
import { FaceTecSDK } from 'core-sdk/FaceTecSDK.js/FaceTecSDK';
import { FaceMapAppUtillities } from './faceMapAppUtilities';
export const ThemeHelpers = () => {
var currentTheme = "Sample Bank";
var themeResourceDirectory = "resources/themes/";
function setAppTheme(theme) {
Config.currentCustomization = getCustomizationForTheme(theme);
var currentLowLightCustomization = getLowLightCustomizationForTheme(theme);
FaceTecSDK.setCustomization(Config.currentCustomization);
FaceTecSDK.setLowLightCustomization(currentLowLightCustomization);
}
function getCustomizationForTheme(theme = 'Sample Bank') {
var currentCustomization = new FaceTecSDK.FaceTecCustomization();
if (FaceMapAppUtillities.isLikelyMobileDevice()) {
// using strings with breaks for Ready Screen text on mobile devices
currentCustomization.guidanceCustomization.readyScreenHeaderAttributedString = "Get Ready For<br/>Your Video Selfie";
currentCustomization.guidanceCustomization.readyScreenSubtextAttributedString = "Please Frame Your Face In<br/>The Small Oval, Then The Big Oval";
}
var retryScreenSlideshowImages = [themeResourceDirectory + "FaceTec_ideal_1.png", themeResourceDirectory + "FaceTec_ideal_2.png", themeResourceDirectory + "FaceTec_ideal_3.png", themeResourceDirectory + "FaceTec_ideal_4.png", themeResourceDirectory + "FaceTec_ideal_5.png"];
var primaryColor = "#03224c";
var primaryColorDark = "#000025";
var backgroundColor = "white"; // navy
var font = "'Source Sans Pro', Helvetica, sans-serif";
// Initial Loading Animation Customization
currentCustomization.initialLoadingAnimationCustomization.customAnimation = null;
currentCustomization.initialLoadingAnimationCustomization.animationRelativeScale = 1.0;
currentCustomization.initialLoadingAnimationCustomization.backgroundColor = primaryColor;
currentCustomization.initialLoadingAnimationCustomization.foregroundColor = backgroundColor;
currentCustomization.initialLoadingAnimationCustomization.messageTextColor = primaryColor;
currentCustomization.initialLoadingAnimationCustomization.messageFont = font;
currentCustomization.initialLoadingAnimationCustomization.messageTextSpacing = "normal";
currentCustomization.initialLoadingAnimationCustomization.messageTextSize = "16px";
// Overlay Customization
currentCustomization.overlayCustomization.backgroundColor = backgroundColor;
currentCustomization.overlayCustomization.showBrandingImage = true;
currentCustomization.overlayCustomization.brandingImage = themeResourceDirectory + "sample-bank/sample_bank_logo.png";
// Guidance Customization
currentCustomization.guidanceCustomization.backgroundColors = backgroundColor;
currentCustomization.guidanceCustomization.foregroundColor = primaryColor;
currentCustomization.guidanceCustomization.headerFont = font;
currentCustomization.guidanceCustomization.headerTextSpacing = "normal";
currentCustomization.guidanceCustomization.headerTextSize = "20px";
currentCustomization.guidanceCustomization.subtextFont = font;
currentCustomization.guidanceCustomization.subtextTextSpacing = "normal";
currentCustomization.guidanceCustomization.subtextTextSize = "12px";
currentCustomization.guidanceCustomization.buttonFont = font;
currentCustomization.guidanceCustomization.buttonTextSpacing = "normal";
currentCustomization.guidanceCustomization.buttonTextSize = "16px";
currentCustomization.guidanceCustomization.buttonTextNormalColor = backgroundColor;
currentCustomization.guidanceCustomization.buttonBackgroundNormalColor = primaryColor;
currentCustomization.guidanceCustomization.buttonTextHighlightColor = backgroundColor;
currentCustomization.guidanceCustomization.buttonBackgroundHighlightColor = primaryColorDark;
currentCustomization.guidanceCustomization.buttonTextDisabledColor = "rgba(29, 23, 79, 0.3)";
currentCustomization.guidanceCustomization.buttonBackgroundDisabledColor = primaryColor;
currentCustomization.guidanceCustomization.buttonBorderColor = backgroundColor;
currentCustomization.guidanceCustomization.buttonBorderWidth = "2px";
currentCustomization.guidanceCustomization.buttonCornerRadius = "2px";
currentCustomization.guidanceCustomization.buttonRelativeWidth = "1.0";
currentCustomization.guidanceCustomization.buttonRelativeWidthOnDesktop = "0.5";
currentCustomization.guidanceCustomization.readyScreenOvalFillColor = "rgba(255, 255, 255, 0.2)";
currentCustomization.guidanceCustomization.readyScreenTextBackgroundColor = backgroundColor;
currentCustomization.guidanceCustomization.readyScreenTextBackgroundCornerRadius = "2px";
currentCustomization.guidanceCustomization.retryScreenImageBorderColor = primaryColor;
currentCustomization.guidanceCustomization.retryScreenImageBorderWidth = "2px";
currentCustomization.guidanceCustomization.retryScreenImageCornerRadius = "2px";
currentCustomization.guidanceCustomization.retryScreenOvalStrokeColor = primaryColor;
currentCustomization.guidanceCustomization.retryScreenSlideshowImages = retryScreenSlideshowImages;
currentCustomization.guidanceCustomization.retryScreenSlideshowInterval = "1500ms";
currentCustomization.guidanceCustomization.enableRetryScreenSlideshowShuffle = false;
currentCustomization.guidanceCustomization.enableRetryScreenBulletedInstructions = true;
currentCustomization.guidanceCustomization.cameraPermissionsScreenImage = themeResourceDirectory + "sample-bank/camera_white_navy.png";
// ID Scan Customization
currentCustomization.idScanCustomization.showSelectionScreenBrandingImage = false;
currentCustomization.idScanCustomization.selectionScreenBrandingImage = "";
currentCustomization.idScanCustomization.selectionScreenBackgroundColors = backgroundColor;
currentCustomization.idScanCustomization.reviewScreenBackgroundColors = backgroundColor;
currentCustomization.idScanCustomization.captureScreenForegroundColor = backgroundColor;
currentCustomization.idScanCustomization.reviewScreenForegroundColor = backgroundColor;
currentCustomization.idScanCustomization.selectionScreenForegroundColor = primaryColor;
currentCustomization.idScanCustomization.headerFont = font;
currentCustomization.idScanCustomization.headerTextSpacing = "normal";
currentCustomization.idScanCustomization.headerTextSize = "20px";
currentCustomization.idScanCustomization.subtextFont = font;
currentCustomization.idScanCustomization.subtextTextSpacing = "normal";
currentCustomization.idScanCustomization.subtextTextSize = "12px";
currentCustomization.idScanCustomization.buttonFont = font;
currentCustomization.idScanCustomization.buttonTextSpacing = "normal";
currentCustomization.idScanCustomization.buttonTextSize = "16px";
currentCustomization.idScanCustomization.buttonTextNormalColor = backgroundColor;
currentCustomization.idScanCustomization.buttonBackgroundNormalColor = primaryColor;
currentCustomization.idScanCustomization.buttonTextHighlightColor = backgroundColor;
currentCustomization.idScanCustomization.buttonBackgroundHighlightColor = "rgba(255, 255, 255, 0.8)";
currentCustomization.idScanCustomization.buttonTextDisabledColor = "rgba(29, 23, 79, 0.3)";
currentCustomization.idScanCustomization.buttonBackgroundDisabledColor = primaryColor;
currentCustomization.idScanCustomization.buttonBorderColor = backgroundColor;
currentCustomization.idScanCustomization.buttonBorderWidth = "2px";
currentCustomization.idScanCustomization.buttonCornerRadius = "2px";
currentCustomization.idScanCustomization.buttonRelativeWidth = "1.0";
currentCustomization.idScanCustomization.buttonRelativeWidthOnDesktop = "0.5";
currentCustomization.idScanCustomization.captureScreenTextBackgroundColor = primaryColor;
currentCustomization.idScanCustomization.captureScreenTextBackgroundBorderColor = backgroundColor;
currentCustomization.idScanCustomization.captureScreenTextBackgroundBorderWidth = "2px";
currentCustomization.idScanCustomization.captureScreenTextBackgroundCornerRadius = "2px";
currentCustomization.idScanCustomization.reviewScreenTextBackgroundColor = primaryColor;
currentCustomization.idScanCustomization.reviewScreenTextBackgroundBorderColor = backgroundColor;
currentCustomization.idScanCustomization.reviewScreenTextBackgroundBorderWidth = "2px";
currentCustomization.idScanCustomization.reviewScreenTextBackgroundBorderCornerRadius = "2px";
currentCustomization.idScanCustomization.captureScreenBackgroundColor = backgroundColor;
currentCustomization.idScanCustomization.captureFrameStrokeColor = primaryColor;
currentCustomization.idScanCustomization.captureFrameStrokeWidth = "2px";
currentCustomization.idScanCustomization.captureFrameCornerRadius = "12px";
// Result Screen Customization
currentCustomization.resultScreenCustomization.backgroundColors = backgroundColor;
currentCustomization.resultScreenCustomization.foregroundColor = primaryColor;
currentCustomization.resultScreenCustomization.messageFont = font;
currentCustomization.resultScreenCustomization.messageTextSpacing = "normal";
currentCustomization.resultScreenCustomization.messageTextSize = "16px";
currentCustomization.resultScreenCustomization.activityIndicatorColor = primaryColor;
currentCustomization.resultScreenCustomization.customActivityIndicatorImage = themeResourceDirectory + "sample-bank/activity_indicator_navy.png";
currentCustomization.resultScreenCustomization.customActivityIndicatorRotationInterval = "1s";
currentCustomization.resultScreenCustomization.customActivityIndicatorAnimation = null;
currentCustomization.resultScreenCustomization.resultAnimationBackgroundColor = "transparent";
currentCustomization.resultScreenCustomization.resultAnimationForegroundColor = primaryColor;
currentCustomization.resultScreenCustomization.resultAnimationSuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png";
currentCustomization.resultScreenCustomization.resultAnimationUnsuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png";
currentCustomization.resultScreenCustomization.customResultAnimationSuccess = null;
currentCustomization.resultScreenCustomization.customResultAnimationUnsuccess = null;
currentCustomization.resultScreenCustomization.showUploadProgressBar = true;
currentCustomization.resultScreenCustomization.uploadProgressTrackColor = "rgba(255, 255, 255, 0.2)";
currentCustomization.resultScreenCustomization.uploadProgressFillColor = primaryColor;
currentCustomization.resultScreenCustomization.animationRelativeScale = 1.0;
// Feedback Customization
currentCustomization.feedbackCustomization.backgroundColor = primaryColor;
currentCustomization.feedbackCustomization.textColor = backgroundColor;
currentCustomization.feedbackCustomization.textFont = font;
currentCustomization.feedbackCustomization.textSpacing = "normal";
currentCustomization.feedbackCustomization.textSize = "18px";
currentCustomization.feedbackCustomization.cornerRadius = "2px";
currentCustomization.feedbackCustomization.shadow = "none";
currentCustomization.feedbackCustomization.relativeWidth = "1.0";
currentCustomization.feedbackCustomization.relativeWidthOnDesktop = "0.5";
// Frame Customization
currentCustomization.frameCustomization.backgroundColor = backgroundColor;
currentCustomization.frameCustomization.borderColor = backgroundColor;
currentCustomization.frameCustomization.borderWidth = "2px";
currentCustomization.frameCustomization.borderCornerRadius = "2px";
currentCustomization.frameCustomization.shadow = "none";
// Oval Customization
currentCustomization.ovalCustomization.strokeColor = primaryColor;
currentCustomization.ovalCustomization.progressColor1 = "rgba(255, 255, 255, 0.8)";
currentCustomization.ovalCustomization.progressColor2 = "rgba(255, 255, 255, 0.8)";
// Cancel Button Customization
currentCustomization.cancelButtonCustomization.customImage = themeResourceDirectory + "sample-bank/cancel_navy.png";
currentCustomization.cancelButtonCustomization.location = FaceTecSDK.FaceTecCancelButtonLocation.TopLeft;
return currentCustomization;
}
function getLowLightCustomizationForTheme(theme) {
var currentLowLightCustomization = getCustomizationForTheme(theme);
var retryScreenSlideshowImages = [themeResourceDirectory + "FaceTec_ideal_1.png", themeResourceDirectory + "FaceTec_ideal_2.png", themeResourceDirectory + "FaceTec_ideal_3.png", themeResourceDirectory + "FaceTec_ideal_4.png", themeResourceDirectory + "FaceTec_ideal_5.png"];
var primaryColor = "white";
var backgroundColor = "rgb(29, 23, 79)"; // navy
// Overlay Customization
currentLowLightCustomization.overlayCustomization.brandingImage = themeResourceDirectory + "sample-bank/sample_bank_logo.png";
// Guidance Customization
currentLowLightCustomization.guidanceCustomization.foregroundColor = backgroundColor;
currentLowLightCustomization.guidanceCustomization.buttonTextNormalColor = primaryColor;
currentLowLightCustomization.guidanceCustomization.buttonBackgroundNormalColor = backgroundColor;
currentLowLightCustomization.guidanceCustomization.buttonTextHighlightColor = primaryColor;
currentLowLightCustomization.guidanceCustomization.buttonBackgroundHighlightColor = "rgba(29, 23, 79, 0.8)";
currentLowLightCustomization.guidanceCustomization.buttonTextDisabledColor = "rgba(255, 255, 255, 0.3)";
currentLowLightCustomization.guidanceCustomization.buttonBackgroundDisabledColor = backgroundColor;
currentLowLightCustomization.guidanceCustomization.buttonBorderColor = backgroundColor;
currentLowLightCustomization.guidanceCustomization.readyScreenOvalFillColor = "rgba(255, 255, 255, 0.2)";
currentLowLightCustomization.guidanceCustomization.readyScreenTextBackgroundColor = primaryColor;
currentLowLightCustomization.guidanceCustomization.retryScreenImageBorderColor = backgroundColor;
currentLowLightCustomization.guidanceCustomization.retryScreenOvalStrokeColor = primaryColor;
currentLowLightCustomization.guidanceCustomization.retryScreenSlideshowImages = retryScreenSlideshowImages;
// ID Scan Customization
currentLowLightCustomization.idScanCustomization.selectionScreenBrandingImage = "";
currentLowLightCustomization.idScanCustomization.captureScreenForegroundColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.reviewScreenForegroundColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.selectionScreenForegroundColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.buttonTextNormalColor = primaryColor;
currentLowLightCustomization.idScanCustomization.buttonBackgroundNormalColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.buttonTextHighlightColor = primaryColor;
currentLowLightCustomization.idScanCustomization.buttonBackgroundHighlightColor = "rgba(29, 23, 79, 0.8)";
currentLowLightCustomization.idScanCustomization.buttonTextDisabledColor = "rgba(255, 255, 255, 0.3)";
currentLowLightCustomization.idScanCustomization.buttonBackgroundDisabledColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.buttonBorderColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.captureScreenTextBackgroundColor = primaryColor;
currentLowLightCustomization.idScanCustomization.captureScreenTextBackgroundBorderColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.reviewScreenTextBackgroundColor = primaryColor;
currentLowLightCustomization.idScanCustomization.reviewScreenTextBackgroundBorderColor = backgroundColor;
currentLowLightCustomization.idScanCustomization.captureFrameStrokeColor = primaryColor;
// Result Screen Customization
currentLowLightCustomization.resultScreenCustomization.foregroundColor = backgroundColor;
currentLowLightCustomization.resultScreenCustomization.activityIndicatorColor = backgroundColor;
currentLowLightCustomization.resultScreenCustomization.customActivityIndicatorImage = themeResourceDirectory + "sample-bank/activity_indicator_navy.png";
currentLowLightCustomization.resultScreenCustomization.customActivityIndicatorAnimation = null;
currentLowLightCustomization.resultScreenCustomization.resultAnimationBackgroundColor = "transparent";
currentLowLightCustomization.resultScreenCustomization.resultAnimationForegroundColor = backgroundColor;
currentLowLightCustomization.resultScreenCustomization.resultAnimationSuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png";
currentLowLightCustomization.resultScreenCustomization.resultAnimationUnsuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png";
currentLowLightCustomization.resultScreenCustomization.customResultAnimationSuccess = null;
currentLowLightCustomization.resultScreenCustomization.customResultAnimationUnsuccess = null;
currentLowLightCustomization.resultScreenCustomization.uploadProgressTrackColor = "rgba(0, 0, 0, 0.2)";
currentLowLightCustomization.resultScreenCustomization.uploadProgressFillColor = backgroundColor;
// Feedback Customization
currentLowLightCustomization.feedbackCustomization.backgroundColor = backgroundColor;
currentLowLightCustomization.feedbackCustomization.textColor = primaryColor;
// Frame Customization
currentLowLightCustomization.frameCustomization.borderColor = backgroundColor;
// Oval Customization
currentLowLightCustomization.ovalCustomization.strokeColor = backgroundColor;
currentLowLightCustomization.ovalCustomization.progressColor1 = "rgba(29, 23, 79, 0.8)";
currentLowLightCustomization.ovalCustomization.progressColor2 = "rgba(29, 23, 79, 0.8)";
// Cancel Button Customization
currentLowLightCustomization.cancelButtonCustomization.customImage = themeResourceDirectory + "sample-bank/cancel_navy.png";
return currentLowLightCustomization;
}
setAppTheme();
};