@applicaster/zapp-react-dom-app 12.0.0-alpha.4802689107 → 12.0.0-alpha.4840257570

package/App/InteractionManager/index.tsx

@@ -35,10 +35,27 @@ import { Platform } from "react-native";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+import { hasVizioAPIs, isVizioPlatform } from "../Loader/utils/platform";
+
+import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
+
+declare global {
+  interface Window {
+    applicaster: {
+      useOnScreenKeyboard: boolean;
+    };
+    VIZIO: {
+      exitApplication: () => void;
+    };
+  }
+}
 
 const { withXray } = getXray();
 const globalAny: any = global;
 
+const shouldUseOnScreenKeyboard = () =>
+  isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
+
 type Props = {
   displayState: string;
   setDisplayState: (state: string) => void;
@@ -56,7 +73,7 @@ type Props = {
   };
 };
 
-type State = { isKeyboardVisible: boolean };
+type State = { isKeyboardVisible: boolean; keyboardInput: string };
 
 type KeyCode = { code: string; keyCode: number | string };
 
@@ -76,6 +93,7 @@ export function withInteractionManager(Component: React.FC) {
     sequenceTimeout: NodeJS.Timeout | null; // timeoutID
     userSequence: number[] = [];
     confirmDialog: any;
+    isDismissing = false;
 
     constructor(props) {
       super(props);
@@ -84,6 +102,7 @@ export function withInteractionManager(Component: React.FC) {
 
       this.state = {
         isKeyboardVisible: false,
+        keyboardInput: "",
       };
 
       this.onMouseMoveListener = debounce({
@@ -116,6 +135,10 @@ export function withInteractionManager(Component: React.FC) {
       this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
       this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
       this.performExit = this.performExit.bind(this);
+      this.handleInputFocus = this.handleInputFocus.bind(this);
+      this.handleInputBlur = this.handleInputBlur.bind(this);
+      this.handleKeyboardInput = this.handleKeyboardInput.bind(this);
+      this.handleKeyboardDismiss = this.handleKeyboardDismiss.bind(this);
 
       this.confirmDialog.setConfirmAction(this.performExit);
       this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
@@ -138,6 +161,9 @@ export function withInteractionManager(Component: React.FC) {
         false
       );
 
+      document.addEventListener("focusin", this.handleInputFocus);
+      // document.addEventListener("focusout", this.handleInputBlur);
+
       document.addEventListener(
         "cursorStateChange",
         this.cursorVisibilityChange,
@@ -155,16 +181,15 @@ export function withInteractionManager(Component: React.FC) {
         this.cursorVisibilityChange
       );
 
-      document.removeEventListener(
-        "keyboardStateChange",
-        this.onKeyboardStateChange
-      );
+      document.removeEventListener("focusin", this.handleInputFocus);
 
       document.removeEventListener("mousedown", this.onMouseDownListener);
 
       if (this.timeout) {
         this.clearTimeout();
       }
+
+      this.isDismissing = false;
     }
 
     performExit() {
@@ -177,6 +202,10 @@ export function withInteractionManager(Component: React.FC) {
         // webOS recommend to use this method when implemention a custom exit
         globalAny.close();
       }
+
+      if (hasVizioAPIs()) {
+        window.VIZIO.exitApplication();
+      }
     }
 
     handleWebOsBack() {
@@ -205,7 +234,10 @@ export function withInteractionManager(Component: React.FC) {
     platformBack() {
       try {
         // TODO: temporary hack until this code is refactored
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+        if (
+          Platform.OS === ("samsung_tv" as QuickBrickPlatforms) ||
+          hasVizioAPIs()
+        ) {
           const { isDialogVisible } = confirmationDialogStore.getState();
 
           if (isDialogVisible) {
@@ -441,6 +473,7 @@ export function withInteractionManager(Component: React.FC) {
 
     onKeyDown(event) {
       const { displayState, setDisplayState, navigator } = this.props;
+      const { isKeyboardVisible } = this.state;
 
       const { isDialogVisible } = confirmationDialogStore.getState();
 
@@ -451,6 +484,16 @@ export function withInteractionManager(Component: React.FC) {
         }, LONG_KEY_PRESS_TIMEOUT);
       }
 
+      if (isKeyboardVisible && shouldUseOnScreenKeyboard()) {
+        if (keyCode(event).matchesAny("Escape", "Back")) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.handleKeyboardDismiss();
+
+          return;
+        }
+      }
+
       /**
        When the player is displayed, we listen to Native Play / Pause / Stop
        buttons. Any other key press will display the transport controls
@@ -567,7 +610,10 @@ export function withInteractionManager(Component: React.FC) {
       }
 
       if (keyCode(event).matches(KEYS.Exit)) {
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+        if (
+          Platform.OS === ("samsung_tv" as QuickBrickPlatforms) ||
+          shouldUseOnScreenKeyboard()
+        ) {
           this.performExit();
 
           return;
@@ -658,8 +704,73 @@ export function withInteractionManager(Component: React.FC) {
       this.confirmDialog.hideDialog();
     }
 
+    handleInputFocus = (event: FocusEvent) => {
+      if (!shouldUseOnScreenKeyboard()) return;
+      const target = event.target as HTMLElement;
+
+      if (this.isDismissing) {
+        return;
+      }
+
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+        this.setState({
+          isKeyboardVisible: true,
+          keyboardInput: (target as HTMLInputElement).value || "",
+        });
+      }
+    };
+
+    handleInputBlur(event: FocusEvent) {
+      if (!shouldUseOnScreenKeyboard()) return;
+
+      const target = event.target as HTMLElement;
+
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+        const relatedTarget = event.relatedTarget as HTMLElement;
+
+        if (
+          !relatedTarget ||
+          (relatedTarget.tagName !== "INPUT" &&
+            relatedTarget.tagName !== "TEXTAREA")
+        ) {
+          this.setState({ isKeyboardVisible: false });
+        }
+      }
+    }
+
+    handleKeyboardDismiss = () => {
+      this.isDismissing = true;
+
+      this.setState(
+        {
+          isKeyboardVisible: false,
+          keyboardInput: "",
+        },
+        () => {
+          setTimeout(() => {
+            this.isDismissing = false;
+          }, 100);
+        }
+      );
+    };
+
+    handleKeyboardInput(value: string) {
+      this.setState({ keyboardInput: value });
+    }
+
     render() {
-      return <Component {...this.props} />;
+      return (
+        <>
+          <Component {...this.props} />
+          {shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
+            <OnScreenKeyboard
+              initialValue={this.state.keyboardInput}
+              onInput={this.handleKeyboardInput}
+              onDismiss={this.handleKeyboardDismiss}
+            />
+          )}
+        </>
+      );
     }
   }
 

package/App/Loader/appLoader.js

@@ -8,11 +8,7 @@ export const appLoaderImpl =
   ) =>
   async (dispatch, getState) => {
     try {
-      const {
-        plugins,
-        pluginConfigurations,
-        remoteConfigurations: { localizations },
-      } = getState();
+      const { plugins, pluginConfigurations } = getState();
 
       // Await crucial tasks
       await loadLocale();
@@ -20,7 +16,7 @@ export const appLoaderImpl =
       await loadAnalyticsPlugins(plugins, pluginConfigurations);
 
       // Remaining loaders
-      const loaders = [loadDomPlugins(plugins), setUpRTL(localizations)];
+      const loaders = [loadDomPlugins(plugins), setUpRTL()];
 
       // Await for the remaining tasks and return when they are all complete
       await Promise.all(loaders);

package/App/Loader/setUpRTL.js

@@ -1,7 +1,7 @@
-import { getIsRTLFromLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { getIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { I18nManager } from "react-native";
 
-export async function setUpRTL(localizations) {
-  const isRTL = getIsRTLFromLocalizations(localizations);
+export async function setUpRTL() {
+  const isRTL = getIsRTL();
   I18nManager.forceRTL(isRTL);
 }

package/App/Loader/utils/const.js

@@ -62,6 +62,9 @@ export const PLATFORMS = {
   iphone: "iPhone",
   android: "Android",
   mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
 };
 
 /**

package/App/Loader/utils/index.js

@@ -1,7 +1,6 @@
 import * as R from "ramda";
 import { appStore as AppStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { NativeModules } from "react-native";
-import { getAppData } from "../../../Polyfills/AppData";
 
 export const UI_LANGUAGE = "uiLanguage";
 
@@ -15,11 +14,11 @@ export const persistLanguageSelection = async (languageCode) => {
   return NativeModules.LocalStorage.setItem(UI_LANGUAGE, languageCode);
 };
 
-export const getAvailableAppLanguagesImpl = () => {
+export const getAvailableAppLanguagesImpl = (appStore) => {
   try {
-    const { languages } = getAppData();
+    const remoteConfigurations = appStore.get("remoteConfigurations");
 
-    return languages;
+    return R.keys(remoteConfigurations.localizations);
   } catch (e) {
     return [];
   }

package/App/Loader/utils/platform.js

@@ -42,6 +42,36 @@ export const isSamsungPlatform = () => {
   );
 };
 
+/**
+ * Checks if we are on the Vizio platform by using the userAgent string
+ *
+ * Use this method when you need to identify the platform on runtime
+ * before the VIZIO Companion Library has loaded
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * Checks if we are on the Vizio platform by checking for the global VIZIO object
+ * and the VIZIO Companion Library. This method does not use the userAgent string,
+ * because it mainly checks whether we have access to apis, which may not be available yet
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};
+
 /**
  * platformSelect can't be used, because Platform.OS is overriden
  * by overloadReactNativePlatform and don't support 'web' value
@@ -253,6 +283,21 @@ export const getDeviceData = async () => {
         ...tizenConnectionInfo,
         device_type: getDeviceType(),
       };
+    } else if (hasVizioAPIs()) {
+      window.VIZIO.getFirmwareVersion(function (firmwareVersion) {
+        deviceData.osVersion = firmwareVersion;
+      });
+
+      deviceData = {
+        ...deviceData,
+        platform: "vizio",
+        deviceMake: "Vizio",
+        deviceModel: window.VIZIO.deviceModel,
+        deviceType: "tv",
+        userAgent: getUserAgent(),
+        deviceWidth: window.innerWidth,
+        deviceHeight: window.innerHeight,
+      };
     }
 
     return deviceData;

package/Polyfills/AppLoaderBridge/utils/enums.ts

@@ -8,4 +8,5 @@ export enum STORAGE {
 export enum STORE_PLATFORM {
   lg = "lg_content_store",
   samsung = "samsung_app_store",
+  vizio = "vizio_app_store",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.0-alpha.4802689107",
+  "version": "12.0.0-alpha.4840257570",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.4802689107",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4802689107",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4802689107",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4802689107",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4802689107",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.0-alpha.4840257570",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4840257570",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4840257570",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4840257570",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4840257570",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",

package/App/Loader/utils/__tests__/getAvailableAppLanguages.test.js

@@ -1,22 +0,0 @@
-jest.mock("../../../../Polyfills/AppData", () => ({
-  getAppData: jest.fn(),
-}));
-
-describe("getAvailableAppLanguages", () => {
-  const { getAppData } = require("../../../../Polyfills/AppData");
-  const { getAvailableAppLanguagesImpl } = require("..");
-
-  it("return list of languages", () => {
-    const languages = ["en", "de", "fr", "en-UK", "en-GB"];
-
-    getAppData.mockReturnValue({ languages });
-
-    expect(getAvailableAppLanguagesImpl()).toEqual(languages);
-  });
-
-  it("return list of languages", () => {
-    getAppData.mockReturnValue(undefined);
-
-    expect(getAvailableAppLanguagesImpl()).toEqual([]);
-  });
-});