@applicaster/zapp-react-dom-app 12.0.0-rc.75 → 12.0.0-rc.76

package/App/InteractionManager/index.tsx

@@ -31,14 +31,23 @@ import {
 import { PlayerContentContext } from "@applicaster/zapp-react-dom-ui-components/Contexts";
 
 import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
-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 {
+  isVizioPlatform,
+  isSamsungPlatform,
+  isLgPlatform,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+
+import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
 
 const { withXray } = getXray();
 const globalAny: any = global;
 
+const shouldUseOnScreenKeyboard = () =>
+  isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
+
 type Props = {
   displayState: string;
   setDisplayState: (state: string) => void;
@@ -56,7 +65,7 @@ type Props = {
   };
 };
 
-type State = { isKeyboardVisible: boolean };
+type State = { isKeyboardVisible: boolean; keyboardInput: string };
 
 type KeyCode = { code: string; keyCode: number | string };
 
@@ -76,6 +85,7 @@ export function withInteractionManager(Component: React.FC) {
     sequenceTimeout: NodeJS.Timeout | null; // timeoutID
     userSequence: number[] = [];
     confirmDialog: any;
+    isDismissing = false;
 
     constructor(props) {
       super(props);
@@ -84,6 +94,7 @@ export function withInteractionManager(Component: React.FC) {
 
       this.state = {
         isKeyboardVisible: false,
+        keyboardInput: "",
       };
 
       this.onMouseMoveListener = debounce({
@@ -116,6 +127,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 +153,8 @@ export function withInteractionManager(Component: React.FC) {
         false
       );
 
+      document.addEventListener("focusin", this.handleInputFocus);
+
       document.addEventListener(
         "cursorStateChange",
         this.cursorVisibilityChange,
@@ -155,28 +172,31 @@ 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() {
-      if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+      if (isSamsungPlatform()) {
         this.onConfirmDialogClose();
         sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
       }
 
-      if (Platform.OS === ("lg_tv" as QuickBrickPlatforms)) {
+      if (isLgPlatform()) {
         // webOS recommend to use this method when implemention a custom exit
         globalAny.close();
       }
+
+      if (isVizioPlatform()) {
+        window?.VIZIO?.exitApplication();
+      }
     }
 
     handleWebOsBack() {
@@ -205,7 +225,7 @@ export function withInteractionManager(Component: React.FC) {
     platformBack() {
       try {
         // TODO: temporary hack until this code is refactored
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+        if (isSamsungPlatform() || isVizioPlatform()) {
           const { isDialogVisible } = confirmationDialogStore.getState();
 
           if (isDialogVisible) {
@@ -218,7 +238,7 @@ export function withInteractionManager(Component: React.FC) {
               cancelCompletion: this.onConfirmDialogClose,
             });
           }
-        } else if (Platform.OS === ("lg_tv" as QuickBrickPlatforms)) {
+        } else if (isLgPlatform()) {
           this.handleWebOsBack();
         }
       } catch (e) {
@@ -441,6 +461,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 +472,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 +598,7 @@ export function withInteractionManager(Component: React.FC) {
       }
 
       if (keyCode(event).matches(KEYS.Exit)) {
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
+        if (isSamsungPlatform() || shouldUseOnScreenKeyboard()) {
           this.performExit();
 
           return;
@@ -622,11 +653,9 @@ export function withInteractionManager(Component: React.FC) {
       };
 
       if (deltaY > 0) {
-        DIRECTION.value =
-          Platform.OS === ("lg_tv" as QuickBrickPlatforms) ? "down" : "up";
+        DIRECTION.value = isLgPlatform() ? "down" : "up";
       } else if (deltaY < 0) {
-        DIRECTION.value =
-          Platform.OS === ("lg_tv" as QuickBrickPlatforms) ? "up" : "down";
+        DIRECTION.value = isLgPlatform() ? "up" : "down";
       }
 
       if (
@@ -667,8 +696,71 @@ export function withInteractionManager(Component: React.FC) {
       focusManager.setInitialFocus();
     }
 
+    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: "",
+        },
+        () => {
+          this.isDismissing = false;
+        }
+      );
+    };
+
+    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/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/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,24 @@ export const getDeviceData = async () => {
         ...tizenConnectionInfo,
         device_type: getDeviceType(),
       };
+    } else if (isVizioPlatform()) {
+      deviceData = {
+        ...deviceData,
+        platform: "vizio",
+        deviceMake: "Vizio",
+        deviceType: "tv",
+        userAgent: getUserAgent(),
+        deviceWidth: window.innerWidth,
+        deviceHeight: window.innerHeight,
+      };
+
+      if (hasVizioAPIs()) {
+        window.VIZIO.getFirmwareVersion(function (firmwareVersion) {
+          deviceData.osVersion = firmwareVersion;
+        });
+
+        deviceData.deviceModel = window.VIZIO.deviceModel;
+      }
     }
 
     return deviceData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "12.0.0-rc.75",
+  "version": "12.0.0-rc.76",
   "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-rc.75",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.75",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.75",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.75",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.75",
+    "@applicaster/zapp-react-dom-ui-components": "12.0.0-rc.76",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.76",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.76",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.76",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.76",
     "abortcontroller-polyfill": "^1.7.5",
     "history": "^4.7.2",
     "react-router-dom": "^5.1.2",