@applicaster/zapp-react-dom-app 12.0.0-alpha.7855034103 → 12.0.0-alpha.7990242848

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 {
+  isLgPlatform,
+  isSamsungPlatform,
+  isVizioPlatform,
+} 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,571 +65,562 @@ type Props = {
   };
 };
 
-type State = { isKeyboardVisible: boolean };
+type State = { isKeyboardVisible: boolean; keyboardInput: string };
 
 type KeyCode = { code: string; keyCode: number | string };
 
 export const alertConfirmationMesage =
   "Are you sure you want to exit application?";
 
-export function withInteractionManager(Component: React.FC) {
-  class InteractionManager extends React.Component<Props, State> {
-    onKeyDownListener: (keyCode: KeyCode) => void;
-    onMouseDownListener: (event: MouseEvent) => void;
-    onMouseMoveListener: (event: MouseEvent) => void;
-    onScrollListener: (event: MouseEvent) => void;
-
-    longKeyPressTimeout: any | null;
-    longPressActive: boolean;
-    timeout: any | null;
-    sequenceTimeout: NodeJS.Timeout | null; // timeoutID
-    userSequence: number[] = [];
-    confirmDialog: any;
+class InteractionManager extends React.Component<Props, State> {
+  onKeyDownListener: (keyCode: KeyCode) => void;
+  onMouseDownListener: (event: MouseEvent) => void;
+  onMouseMoveListener: (event: MouseEvent) => void;
+  onScrollListener: (event: MouseEvent) => void;
+
+  longKeyPressTimeout: any | null;
+  longPressActive: boolean;
+  timeout: any | null;
+  sequenceTimeout: NodeJS.Timeout | null; // timeoutID
+  userSequence: number[] = [];
+  confirmDialog: any;
+  isDismissing = false;
+
+  constructor(props) {
+    super(props);
+
+    this.onKeyDownListener = this.onKeyDown.bind(this);
+
+    this.state = {
+      isKeyboardVisible: false,
+      keyboardInput: "",
+    };
+
+    this.onMouseMoveListener = debounce({
+      fn: this.onMouseMove,
+      context: this,
+    });
+
+    this.onScrollListener = debounce({
+      fn: this.onScroll,
+      wait: 100,
+      context: this,
+    });
+
+    this.onMouseDownListener = debounce({
+      fn: this.onMouseDown,
+      context: this,
+    });
+
+    this.longKeyPressTimeout = null;
+    this.longPressActive = false;
+    this.confirmDialog = confirmationDialogStore.getState();
+    this.resetHudTimeout = this.resetHudTimeout.bind(this);
+    this.cursorVisibilityChange = this.cursorVisibilityChange.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onKeyboardStateChange = this.onKeyboardStateChange.bind(this);
+    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);
+  }
 
-    constructor(props) {
-      super(props);
+  componentDidMount() {
+    window.addEventListener("keydown", this.onKeyDownListener);
+    window.addEventListener("keyup", this.onKeyUp);
+    window.addEventListener("mousemove", this.onMouseMoveListener);
 
-      this.onKeyDownListener = this.onKeyDown.bind(this);
+    document.addEventListener("wheel", this.onScrollListener, {
+      passive: true,
+    });
 
-      this.state = {
-        isKeyboardVisible: false,
-      };
+    document.addEventListener("mousedown", this.onMouseDownListener);
 
-      this.onMouseMoveListener = debounce({
-        fn: this.onMouseMove,
-        context: this,
-      });
+    document.addEventListener(
+      "keyboardStateChange",
+      this.onKeyboardStateChange,
+      false
+    );
 
-      this.onScrollListener = debounce({
-        fn: this.onScroll,
-        wait: 100,
-        context: this,
-      });
+    document.addEventListener("focusin", this.handleInputFocus);
 
-      this.onMouseDownListener = debounce({
-        fn: this.onMouseDown,
-        context: this,
-      });
+    document.addEventListener(
+      "cursorStateChange",
+      this.cursorVisibilityChange,
+      false
+    );
+  }
 
-      this.longKeyPressTimeout = null;
-      this.longPressActive = false;
-      this.confirmDialog = confirmationDialogStore.getState();
-      this.resetHudTimeout = this.resetHudTimeout.bind(this);
-      this.cursorVisibilityChange = this.cursorVisibilityChange.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-      this.onKeyUp = this.onKeyUp.bind(this);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onScroll = this.onScroll.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.onKeyboardStateChange = this.onKeyboardStateChange.bind(this);
-      this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
-      this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
-      this.performExit = this.performExit.bind(this);
-
-      this.confirmDialog.setConfirmAction(this.performExit);
-      this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
-    }
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.onKeyDownListener);
+    window.removeEventListener("keyup", this.onKeyUp);
+    document.removeEventListener("wheel", this.onScrollListener);
 
-    componentDidMount() {
-      window.addEventListener("keydown", this.onKeyDownListener);
-      window.addEventListener("keyup", this.onKeyUp);
-      window.addEventListener("mousemove", this.onMouseMoveListener);
+    document.removeEventListener(
+      "cursorStateChange",
+      this.cursorVisibilityChange
+    );
 
-      document.addEventListener("wheel", this.onScrollListener, {
-        passive: true,
-      });
+    document.removeEventListener("focusin", this.handleInputFocus);
 
-      document.addEventListener("mousedown", this.onMouseDownListener);
+    document.removeEventListener("mousedown", this.onMouseDownListener);
 
-      document.addEventListener(
-        "keyboardStateChange",
-        this.onKeyboardStateChange,
-        false
-      );
-
-      document.addEventListener(
-        "cursorStateChange",
-        this.cursorVisibilityChange,
-        false
-      );
+    if (this.timeout) {
+      this.clearTimeout();
     }
 
-    componentWillUnmount() {
-      window.removeEventListener("keydown", this.onKeyDownListener);
-      window.removeEventListener("keyup", this.onKeyUp);
-      document.removeEventListener("wheel", this.onScrollListener);
-
-      document.removeEventListener(
-        "cursorStateChange",
-        this.cursorVisibilityChange
-      );
-
-      document.removeEventListener(
-        "keyboardStateChange",
-        this.onKeyboardStateChange
-      );
-
-      document.removeEventListener("mousedown", this.onMouseDownListener);
+    this.isDismissing = false;
+  }
 
-      if (this.timeout) {
-        this.clearTimeout();
-      }
+  performExit() {
+    if (isSamsungPlatform()) {
+      this.onConfirmDialogClose();
+      sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
     }
 
-    performExit() {
-      if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
-        this.onConfirmDialogClose();
-        sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
-      }
+    if (isLgPlatform()) {
+      // webOS recommend to use this method when implemention a custom exit
+      globalAny.close();
+    }
 
-      if (Platform.OS === ("lg_tv" as QuickBrickPlatforms)) {
-        // webOS recommend to use this method when implemention a custom exit
-        globalAny.close();
-      }
+    if (isVizioPlatform()) {
+      window?.VIZIO?.exitApplication();
     }
+  }
 
-    handleWebOsBack() {
-      const systemBack = globalAny?.webOS?.platformBack;
+  handleWebOsBack() {
+    const systemBack = globalAny?.webOS?.platformBack;
 
-      if (systemBack) {
-        systemBack();
-      } else {
-        /**
-         * In case webOS failed to show the exit pop-up, we show a regular promtp as fallback
-         */
-        showConfirmationDialog({
-          title: "",
-          message: alertConfirmationMesage,
-          confirmCompletion: this.performExit,
-        });
-      }
+    if (systemBack) {
+      systemBack();
+    } else {
+      /**
+       * In case webOS failed to show the exit pop-up, we show a regular promtp as fallback
+       */
+      showConfirmationDialog({
+        title: "",
+        message: alertConfirmationMesage,
+        confirmCompletion: this.performExit,
+      });
     }
+  }
 
-    /**
-     * This methods sends the app to background in whatever way is appropriate for each platform
-     * In the case of Tizen it shows a custom dialog on confirm it exits the app
-     * WebOS behavior depends on the SDK version, WebOS 4 would pull up the launcher menu
-     * following versions would show a native exit prompt
-     */
-    platformBack() {
-      try {
-        // TODO: temporary hack until this code is refactored
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
-          const { isDialogVisible } = confirmationDialogStore.getState();
-
-          if (isDialogVisible) {
-            this.onConfirmDialogClose();
-          } else {
-            showConfirmationDialog({
-              title: "",
-              message: alertConfirmationMesage,
-              confirmCompletion: this.performExit,
-              cancelCompletion: this.onConfirmDialogClose,
-            });
-          }
-        } else if (Platform.OS === ("lg_tv" as QuickBrickPlatforms)) {
-          this.handleWebOsBack();
+  /**
+   * This methods sends the app to background in whatever way is appropriate for each platform
+   * In the case of Tizen it shows a custom dialog on confirm it exits the app
+   * WebOS behavior depends on the SDK version, WebOS 4 would pull up the launcher menu
+   * following versions would show a native exit prompt
+   */
+  platformBack() {
+    try {
+      // TODO: temporary hack until this code is refactored
+      if (isSamsungPlatform() || isVizioPlatform()) {
+        const { isDialogVisible } = confirmationDialogStore.getState();
+
+        if (isDialogVisible) {
+          this.onConfirmDialogClose();
+        } else {
+          showConfirmationDialog({
+            title: "",
+            message: alertConfirmationMesage,
+            confirmCompletion: this.performExit,
+            cancelCompletion: this.onConfirmDialogClose,
+          });
         }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn("Failed to execute platformBack", e);
+      } else if (isLgPlatform()) {
+        this.handleWebOsBack();
       }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn("Failed to execute platformBack", e);
     }
+  }
 
-    cursorVisibilityChange(event) {
-      const visible = event.detail.visibility;
-      const { setDisplayState, displayState } = this.props;
+  cursorVisibilityChange(event) {
+    const visible = event.detail.visibility;
+    const { setDisplayState, displayState } = this.props;
 
-      if (visible && displayState === DISPLAY_STATES.PLAYER) {
-        setDisplayState(DISPLAY_STATES.HUD);
-        this.resetHudTimeout();
-      }
+    if (visible && displayState === DISPLAY_STATES.PLAYER) {
+      setDisplayState(DISPLAY_STATES.HUD);
+      this.resetHudTimeout();
     }
+  }
 
-    onMouseMove() {
-      const { setDisplayState, displayState } = this.props;
+  onMouseMove() {
+    const { setDisplayState, displayState } = this.props;
 
-      if (displayState === DISPLAY_STATES.PLAYER) {
-        setDisplayState(DISPLAY_STATES.HUD);
-        this.resetHudTimeout();
-      }
+    if (displayState === DISPLAY_STATES.PLAYER) {
+      setDisplayState(DISPLAY_STATES.HUD);
+      this.resetHudTimeout();
     }
+  }
 
-    isHomeScreen() {
-      const { navigator } = this.props;
-      const { rivers } = this.props;
+  isHomeScreen() {
+    const { navigator } = this.props;
+    const { rivers } = this.props;
 
-      const homeId = R.compose(
-        R.prop("id"),
-        R.find(R.prop("home")),
-        R.values
-      )(rivers);
+    const homeId = R.compose(
+      R.prop("id"),
+      R.find(R.prop("home")),
+      R.values
+    )(rivers);
 
-      const homePath = `/river/${homeId}`;
+    const homePath = `/river/${homeId}`;
 
-      return homePath === navigator.currentRoute;
-    }
+    return homePath === navigator.currentRoute;
+  }
 
-    goToHome() {
-      const { navigator } = this.props;
-      const { rivers } = this.props;
-      const homeRiver = R.find(R.propEq("home", true), R.values(rivers));
+  goToHome() {
+    const { navigator } = this.props;
+    const { rivers } = this.props;
+    const homeRiver = R.find(R.propEq("home", true), R.values(rivers));
 
-      navigator.replace(homeRiver);
-    }
+    navigator.replace(homeRiver);
+  }
 
-    resetHudTimeout() {
-      const { resetHudTimer = noop } = this.props;
+  resetHudTimeout() {
+    const { resetHudTimer = noop } = this.props;
 
-      resetHudTimer?.();
-    }
+    resetHudTimer?.();
+  }
 
-    clearTimeout() {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-        this.timeout = null;
-      }
+  clearTimeout() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
     }
+  }
 
-    clearLongPressTimeout() {
-      if (this.longKeyPressTimeout) {
-        clearTimeout(this.longKeyPressTimeout);
-        this.longKeyPressTimeout = null;
-      }
+  clearLongPressTimeout() {
+    if (this.longKeyPressTimeout) {
+      clearTimeout(this.longKeyPressTimeout);
+      this.longKeyPressTimeout = null;
     }
+  }
 
-    /**
-     * If the keySupportsLongPress this method is called on longpress of key
-     * Register your longpress handlers here, and make sure to add it to list of supported keys
-     */
-    onLongPress(event) {
-      this.longPressActive = true;
-      // Legacy way of determining whether controls are being displayed
-      // Or if the player is in a playback state.
-      const { displayState } = this.props;
-      const playerState = displayState === DISPLAY_STATES.PLAYER;
-      const hudState = displayState === DISPLAY_STATES.HUD;
-      const playbackState = playerState || hudState;
-
-      switch (event.code) {
-        case KEYS.Back.code:
-          // If you longpress the back button we probably want to exit
-          this.platformBack();
+  /**
+   * If the keySupportsLongPress this method is called on longpress of key
+   * Register your longpress handlers here, and make sure to add it to list of supported keys
+   */
+  onLongPress(event) {
+    this.longPressActive = true;
+    // Legacy way of determining whether controls are being displayed
+    // Or if the player is in a playback state.
+    const { displayState } = this.props;
+    const playerState = displayState === DISPLAY_STATES.PLAYER;
+    const hudState = displayState === DISPLAY_STATES.HUD;
+    const playbackState = playerState || hudState;
+
+    switch (event.code) {
+      case KEYS.Back.code:
+        // If you longpress the back button we probably want to exit
+        this.platformBack();
 
-          break;
+        break;
 
-        case KEYS.Enter.code:
-          focusManager.longPress();
+      case KEYS.Enter.code:
+        focusManager.longPress();
 
-          break;
+        break;
 
-        case KEYS.Forward.code:
-          playbackState && this.props.seekMethods.onForwardLongPress();
+      case KEYS.Forward.code:
+        playbackState && this.props.seekMethods.onForwardLongPress();
 
-          break;
+        break;
 
-        case KEYS.Rewind.code:
-          playbackState && this.props.seekMethods.onRewindLongPress();
+      case KEYS.Rewind.code:
+        playbackState && this.props.seekMethods.onRewindLongPress();
 
-          break;
+        break;
 
-        default:
-          break;
-      }
+      default:
+        break;
     }
+  }
 
-    /**
-     * If the keySupportsLongPress this method is called on keyup of a longpress key
-     * If you need to handle the release or keyup of a longpress key register the handler here
-     */
-    onLongPressRelease(event) {
-      this.longPressActive = false;
-      this.resetHudTimeout();
+  /**
+   * If the keySupportsLongPress this method is called on keyup of a longpress key
+   * If you need to handle the release or keyup of a longpress key register the handler here
+   */
+  onLongPressRelease(event) {
+    this.longPressActive = false;
+    this.resetHudTimeout();
 
-      focusManager.pressOut();
+    focusManager.pressOut();
 
-      switch (event.code) {
-        case KEYS.Forward.code:
-          this.props.seekMethods.onForwardPressOut();
+    switch (event.code) {
+      case KEYS.Forward.code:
+        this.props.seekMethods.onForwardPressOut();
 
-          break;
+        break;
 
-        case KEYS.Rewind.code:
-          this.props.seekMethods.onForwardPressOut();
+      case KEYS.Rewind.code:
+        this.props.seekMethods.onForwardPressOut();
 
-          break;
+        break;
 
-        default:
-          break;
-      }
+      default:
+        break;
     }
+  }
 
-    /**
-     * Resets the sequence of keys we captured.
-     * Clear ensures that we don't interpret regular interactions
-     * as a sequence used to unlock certain features
-     */
-    resetSequenceTimeout() {
-      const SEQUENCE_ENTRY_TIME = 1900;
-
-      if (this.sequenceTimeout) {
-        // Start timer over
-        clearTimeout(this.sequenceTimeout);
-      }
-
-      this.sequenceTimeout = setTimeout(() => {
-        // User needs to complete sequence before SEQUENCE_ENTRY_TIME
-        // or we set userSequence, and prev sequenceTimeout to empty values
-        this.sequenceTimeout = null;
-        this.userSequence = [];
-      }, SEQUENCE_ENTRY_TIME);
+  /**
+   * Resets the sequence of keys we captured.
+   * Clear ensures that we don't interpret regular interactions
+   * as a sequence used to unlock certain features
+   */
+  resetSequenceTimeout() {
+    const SEQUENCE_ENTRY_TIME = 1900;
+
+    if (this.sequenceTimeout) {
+      // Start timer over
+      clearTimeout(this.sequenceTimeout);
     }
 
-    /**
-     * If a certain sequence of keys are pressed we enable special menus or settings
-     * Each supported sequence can be stored as a constant
-     */
-    checkSequence(key) {
-      const SINK_SEQUENCE = [
-        KEYS.ArrowUp.keyCode,
-        KEYS.ArrowUp.keyCode,
-        KEYS.ArrowDown.keyCode,
-        KEYS.ArrowDown.keyCode,
-        KEYS.ArrowLeft.keyCode,
-        KEYS.ArrowRight.keyCode,
-        KEYS.ArrowLeft.keyCode,
-        KEYS.ArrowRight.keyCode,
-      ];
-
-      this.resetSequenceTimeout();
-      this.userSequence.push(key);
-
-      // Remember [1,2,3] !== [1,2,3] in js, so string comparison is better
-      const shouldAddSink =
-        this.userSequence.toString() === SINK_SEQUENCE.toString();
-
-      if (shouldAddSink) {
-        this.props.xray.addRemoteSink({});
-      }
+    this.sequenceTimeout = setTimeout(() => {
+      // User needs to complete sequence before SEQUENCE_ENTRY_TIME
+      // or we set userSequence, and prev sequenceTimeout to empty values
+      this.sequenceTimeout = null;
+      this.userSequence = [];
+    }, SEQUENCE_ENTRY_TIME);
+  }
+
+  /**
+   * If a certain sequence of keys are pressed we enable special menus or settings
+   * Each supported sequence can be stored as a constant
+   */
+  checkSequence(key) {
+    const SINK_SEQUENCE = [
+      KEYS.ArrowUp.keyCode,
+      KEYS.ArrowUp.keyCode,
+      KEYS.ArrowDown.keyCode,
+      KEYS.ArrowDown.keyCode,
+      KEYS.ArrowLeft.keyCode,
+      KEYS.ArrowRight.keyCode,
+      KEYS.ArrowLeft.keyCode,
+      KEYS.ArrowRight.keyCode,
+    ];
+
+    this.resetSequenceTimeout();
+    this.userSequence.push(key);
+
+    // Remember [1,2,3] !== [1,2,3] in js, so string comparison is better
+    const shouldAddSink =
+      this.userSequence.toString() === SINK_SEQUENCE.toString();
+
+    if (shouldAddSink) {
+      this.props.xray.addRemoteSink({});
     }
+  }
 
-    /**
-     * Determines whether the key supports or handles longpress
-     * At the moment the only keys that support are the ones defined in
-     * supportedEvents array. This logic just prevents us from registering timeouts for every key
-     */
-    keySupportsLongPress(event): boolean {
-      const supportedEvents = [
-        KEYS.Back,
-        KEYS.Enter,
-        KEYS.Rewind,
-        KEYS.Forward,
-      ];
+  /**
+   * Determines whether the key supports or handles longpress
+   * At the moment the only keys that support are the ones defined in
+   * supportedEvents array. This logic just prevents us from registering timeouts for every key
+   */
+  keySupportsLongPress(event): boolean {
+    const supportedEvents = [KEYS.Back, KEYS.Enter, KEYS.Rewind, KEYS.Forward];
 
-      const eventMatcher = R.compose(R.prop("matches"), keyCode)(event);
+    const eventMatcher = R.compose(R.prop("matches"), keyCode)(event);
 
-      const supportsLongPress = R.compose(
-        R.any(R.equals(true)),
-        R.map(eventMatcher)
-      )(supportedEvents);
+    const supportsLongPress = R.compose(
+      R.any(R.equals(true)),
+      R.map(eventMatcher)
+    )(supportedEvents);
 
-      return supportsLongPress;
-    }
+    return supportsLongPress;
+  }
 
-    onKeyUp(event: KeyboardEvent) {
-      // If this is a supported longpress key we need to clear the timeout and handle release of key
-      // This logic is handled by onLongPressRelease
-      if (this.keySupportsLongPress(event)) {
-        if (this.longPressActive) {
-          this.onLongPressRelease(event);
-        } else {
-          this.clearLongPressTimeout();
-        }
+  onKeyUp(event: KeyboardEvent) {
+    // If this is a supported longpress key we need to clear the timeout and handle release of key
+    // This logic is handled by onLongPressRelease
+    if (this.keySupportsLongPress(event)) {
+      if (this.longPressActive) {
+        this.onLongPressRelease(event);
+      } else {
+        this.clearLongPressTimeout();
       }
     }
+  }
 
-    onKeyDown(event) {
-      const { displayState, setDisplayState, navigator } = this.props;
+  onKeyDown(event) {
+    const { displayState, setDisplayState, navigator } = this.props;
+    const { isKeyboardVisible } = this.state;
 
-      const { isDialogVisible } = confirmationDialogStore.getState();
+    const { isDialogVisible } = confirmationDialogStore.getState();
 
-      // If this is a supported longpress key we need to set the timeout and handle the longpress
-      if (this.keySupportsLongPress(event)) {
-        this.longKeyPressTimeout = setTimeout(() => {
-          this.onLongPress(event);
-        }, LONG_KEY_PRESS_TIMEOUT);
+    // If this is a supported longpress key we need to set the timeout and handle the longpress
+    if (this.keySupportsLongPress(event)) {
+      this.longKeyPressTimeout = setTimeout(() => {
+        this.onLongPress(event);
+      }, 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
+     */
+    if (
+      displayState === DISPLAY_STATES.PLAYER ||
+      displayState === DISPLAY_STATES.HUD
+    ) {
       /**
-       When the player is displayed, we listen to Native Play / Pause / Stop
-       buttons. Any other key press will display the transport controls
+       registering native keys for playback
        */
-      if (
-        displayState === DISPLAY_STATES.PLAYER ||
-        displayState === DISPLAY_STATES.HUD
-      ) {
-        /**
-         registering native keys for playback
-         */
-        if (keyCode(event).matches(KEYS.TogglePlayPause)) {
-          const { playing } = playerManager.getState() || {};
-
-          if (!playing) {
-            return playerManager.togglePlayPause();
-          }
-        }
+      if (keyCode(event).matches(KEYS.TogglePlayPause)) {
+        const { playing } = playerManager.getState() || {};
 
-        if (keyCode(event).matches(KEYS.Play)) {
-          return playerManager.play();
+        if (!playing) {
+          return playerManager.togglePlayPause();
         }
+      }
 
-        if (keyCode(event).matches(KEYS.Pause)) {
-          setDisplayState(DISPLAY_STATES.HUD);
+      if (keyCode(event).matches(KEYS.Play)) {
+        return playerManager.play();
+      }
 
-          return playerManager.pause();
-        }
+      if (keyCode(event).matches(KEYS.Pause)) {
+        setDisplayState(DISPLAY_STATES.HUD);
 
-        if (keyCode(event).matches(KEYS.Stop)) {
-          setDisplayState(DISPLAY_STATES.DEFAULT);
-          navigator.goBack();
+        return playerManager.pause();
+      }
 
-          return;
-        }
+      if (keyCode(event).matches(KEYS.Stop)) {
+        setDisplayState(DISPLAY_STATES.DEFAULT);
+        navigator.goBack();
 
-        if (keyCode(event).matches(KEYS.Forward)) {
-          setDisplayState(DISPLAY_STATES.HUD);
-          this.props.seekMethods.onForwardPress();
+        return;
+      }
 
-          return;
-        }
+      if (keyCode(event).matches(KEYS.Forward)) {
+        setDisplayState(DISPLAY_STATES.HUD);
+        this.props.seekMethods.onForwardPress();
 
-        if (keyCode(event).matches(KEYS.Rewind)) {
-          setDisplayState(DISPLAY_STATES.HUD);
-          this.props.seekMethods.onRewindPress();
+        return;
+      }
 
-          return;
-        }
+      if (keyCode(event).matches(KEYS.Rewind)) {
+        setDisplayState(DISPLAY_STATES.HUD);
+        this.props.seekMethods.onRewindPress();
+
+        return;
       }
+    }
 
-      /**
-        When pressing backspace or the Native "Back" button:
-        if on the transport controls: we show the player
-        if on the player : we show the UI
-        if on the UI : we exit the app
-       */
+    /**
+     When pressing backspace or the Native "Back" button:
+     if on the transport controls: we show the player
+     if on the player : we show the UI
+     if on the UI : we exit the app
+     */
 
-      if (
-        keyCode(event).matchesAny(
-          KEYS.Back,
-          KEYS.Escape,
-          KEYS.EscapeDevice,
-          KEYS.Backspace
-        )
-      ) {
-        switch (displayState) {
-          case DISPLAY_STATES.DEFAULT:
-          case DISPLAY_STATES.PLAYER:
-            if (isDialogVisible) {
-              this.onConfirmDialogClose();
-            } else if (navigator.canGoBack()) {
-              navigator.goBack();
-            } else if (this.isHomeScreen()) {
+    if (
+      keyCode(event).matchesAny(
+        KEYS.Back,
+        KEYS.Escape,
+        KEYS.EscapeDevice,
+        KEYS.Backspace
+      )
+    ) {
+      switch (displayState) {
+        case DISPLAY_STATES.DEFAULT:
+        case DISPLAY_STATES.PLAYER:
+          if (isDialogVisible) {
+            this.onConfirmDialogClose();
+          } else if (navigator.canGoBack()) {
+            navigator.goBack();
+          } else if (this.isHomeScreen()) {
+            this.platformBack();
+          } else if (navigator.currentRoute.includes("hook")) {
+            // If code reaches this block navigator cant go back, it is not home,
+            // and this is a login plugin that was pushed on top of the home
+            // Treat it like a home screen and run platformBack()
+            const entryData = navigator?.data?.entry;
+            const isHookInHomescreen = entryData?.payload?.home;
+
+            const isHookFlowBlocker =
+              entryData?.hookPlugin?.module?.isFlowBlocker();
+
+            if (isHookInHomescreen && isHookFlowBlocker) {
               this.platformBack();
-            } else if (navigator.currentRoute.includes("hook")) {
-              // If code reaches this block navigator cant go back, it is not home,
-              // and this is a login plugin that was pushed on top of the home
-              // Treat it like a home screen and run platformBack()
-              const entryData = navigator?.data?.entry;
-              const isHookInHomescreen = entryData?.payload?.home;
-
-              const isHookFlowBlocker =
-                entryData?.hookPlugin?.module?.isFlowBlocker();
-
-              if (isHookInHomescreen && isHookFlowBlocker) {
-                this.platformBack();
-              } else {
-                navigator.goBack(false, true);
-              }
             } else {
-              this.goToHome();
+              navigator.goBack(false, true);
             }
+          } else {
+            this.goToHome();
+          }
 
-            break;
-          case DISPLAY_STATES.HUD:
-            // IF transport controls are open, close them instead of closing player
-            setDisplayState(DISPLAY_STATES.PLAYER);
-            break;
-          default:
-            setDisplayState(DISPLAY_STATES.PLAYER);
-            break;
-        }
+          break;
+        case DISPLAY_STATES.HUD:
+          // IF transport controls are open, close them instead of closing player
+          setDisplayState(DISPLAY_STATES.PLAYER);
+          break;
+        default:
+          setDisplayState(DISPLAY_STATES.PLAYER);
+          break;
       }
+    }
 
-      if (keyCode(event).matches(KEYS.Enter)) {
-        if (displayState === DISPLAY_STATES.PLAYER) {
-          setDisplayState(DISPLAY_STATES.HUD);
-        } else {
-          focusManager.press();
-        }
-
-        return true;
+    if (keyCode(event).matches(KEYS.Enter)) {
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        setDisplayState(DISPLAY_STATES.HUD);
+      } else {
+        focusManager.press();
       }
 
-      if (keyCode(event).matches(KEYS.Exit)) {
-        if (Platform.OS === ("samsung_tv" as QuickBrickPlatforms)) {
-          this.performExit();
+      return true;
+    }
 
-          return;
-        }
+    if (keyCode(event).matches(KEYS.Exit)) {
+      if (isSamsungPlatform() || shouldUseOnScreenKeyboard()) {
+        this.performExit();
 
-        this.platformBack();
+        return;
       }
 
-      if (
-        keyCode(event).matchesAny(...ARROW_KEYS) &&
-        !this.state.isKeyboardVisible
-      ) {
-        if (displayState === DISPLAY_STATES.PLAYER) {
-          setDisplayState(DISPLAY_STATES.HUD);
-        }
-
-        this.checkSequence(event.keyCode);
-
-        const direction = keyCode(event).direction();
-
-        if (!isDialogVisible || !["up", "down"].includes(direction.value)) {
-          focusManager.moveFocus(direction);
-        }
-
-        if (
-          displayState === DISPLAY_STATES.PLAYER ||
-          displayState === DISPLAY_STATES.HUD
-        ) {
-          this.resetHudTimeout();
-        }
+      this.platformBack();
+    }
 
-        return true;
+    if (
+      keyCode(event).matchesAny(...ARROW_KEYS) &&
+      !this.state.isKeyboardVisible
+    ) {
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        setDisplayState(DISPLAY_STATES.HUD);
       }
-    }
 
-    onScroll(event) {
-      const { displayState } = this.props;
+      this.checkSequence(event.keyCode);
 
-      const deltaY = event?.deltaY;
+      const direction = keyCode(event).direction();
 
-      const DIRECTION = {
-        axis: "y",
-        isHorizontal: false,
-        isVertical: true,
-        value: "",
-      };
+      if (!isDialogVisible || !["up", "down"].includes(direction.value)) {
+        focusManager.moveFocus(direction);
+      }
 
-      if (deltaY > 0) {
-        DIRECTION.value =
-          Platform.OS === ("lg_tv" as QuickBrickPlatforms) ? "down" : "up";
-      } else if (deltaY < 0) {
-        DIRECTION.value =
-          Platform.OS === ("lg_tv" as QuickBrickPlatforms) ? "up" : "down";
+      if (!isDialogVisible) {
+        // run focus recovery on user interaction attempt
+        // probably we failed to set initial focus for some reason
+        focusManager.recoverFocus();
       }
 
       if (
@@ -628,46 +628,152 @@ export function withInteractionManager(Component: React.FC) {
         displayState === DISPLAY_STATES.HUD
       ) {
         this.resetHudTimeout();
-      } else {
-        focusManager.moveFocus(DIRECTION);
       }
+
+      return true;
     }
+  }
 
-    onMouseDown(event) {
-      const { button } = event;
-      const { displayState } = this.props;
+  onScroll(event) {
+    const { displayState } = this.props;
 
-      if (
-        button === 1 && // number 1 represents press on the scroll wheel
-        (displayState === DISPLAY_STATES.PLAYER ||
-          displayState === DISPLAY_STATES.HUD)
-      ) {
-        this.resetHudTimeout();
-      }
+    const deltaY = event?.deltaY;
+
+    const DIRECTION = {
+      axis: "y",
+      isHorizontal: false,
+      isVertical: true,
+      value: "",
+    };
+
+    if (deltaY > 0) {
+      DIRECTION.value = isLgPlatform() ? "down" : "up";
+    } else if (deltaY < 0) {
+      DIRECTION.value = isLgPlatform() ? "up" : "down";
     }
 
-    onKeyboardStateChange(event) {
-      this.setState({ isKeyboardVisible: event.visibility });
+    if (
+      displayState === DISPLAY_STATES.PLAYER ||
+      displayState === DISPLAY_STATES.HUD
+    ) {
+      this.resetHudTimeout();
+    } else {
+      focusManager.moveFocus(DIRECTION);
     }
+  }
 
-    onConfirmDialogOpen() {
-      this.confirmDialog.showDialog();
+  onMouseDown(event) {
+    const { button } = event;
+    const { displayState } = this.props;
+
+    if (
+      button === 1 && // number 1 represents press on the scroll wheel
+      (displayState === DISPLAY_STATES.PLAYER ||
+        displayState === DISPLAY_STATES.HUD)
+    ) {
+      this.resetHudTimeout();
     }
+  }
 
-    onConfirmDialogClose() {
-      this.confirmDialog.hideDialog();
+  onKeyboardStateChange(event) {
+    this.setState({ isKeyboardVisible: event.visibility });
+  }
+
+  onConfirmDialogOpen() {
+    this.confirmDialog.showDialog();
+  }
+
+  onConfirmDialogClose() {
+    this.confirmDialog.hideDialog();
+
+    // restore initial focus after closing dialog
+    focusManager.setInitialFocus();
+  }
+
+  handleInputFocus = (event: FocusEvent) => {
+    if (!shouldUseOnScreenKeyboard()) return;
+    const target = event.target as HTMLElement;
+
+    if (this.isDismissing) {
+      return;
     }
 
-    render() {
-      return <Component {...this.props} />;
+    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 });
   }
 
-  return R.compose(
-    withNavigator,
-    withUseSeek,
-    withXray,
-    PlayerContentContext.withConsumer,
-    DisplayStateContext.withConsumer
-  )(InteractionManager);
+  render() {
+    return (
+      (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (
+        <OnScreenKeyboard
+          initialValue={this.state.keyboardInput}
+          onInput={this.handleKeyboardInput}
+          onDismiss={this.handleKeyboardDismiss}
+        />
+      )) ||
+      null
+    );
+  }
+}
+
+const IM = R.compose(
+  withNavigator,
+  withUseSeek,
+  withXray,
+  PlayerContentContext.withConsumer,
+  DisplayStateContext.withConsumer
+)(InteractionManager);
+
+export function withInteractionManager(Component: React.FC) {
+  // Wrapper was created to avoid re-renders of the Component when InteractionManager context changes
+  const InteractionManagerWrapper = (props: Props) => {
+    return (
+      <>
+        <Component {...props} />
+        <IM {...props} />
+      </>
+    );
+  };
+
+  return InteractionManagerWrapper;
 }

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/main.css

@@ -10,8 +10,8 @@ body {
 }
 
 div#zapp_app_container {
-  height: 100%;
-  width: 100%;
+  height: 1080px;
+  width: 1920px;
   display: flex;
   flex: 1;
 }

package/package.json

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