@applicaster/zapp-react-dom-app 13.0.0-alpha.8532113155 → 13.0.0-alpha.9103242840

package/App/InteractionManager/index.tsx

@@ -140,16 +140,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
     this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
 
-    this.handlePhysicalKeyboardDismiss =
-      this.handlePhysicalKeyboardDismiss.bind(this);
-
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
   }
 
   componentDidMount() {
-    window.addEventListener("keydown", this.onKeyDownListener, true);
+    window.addEventListener("keydown", this.onKeyDownListener);
     window.addEventListener("keyup", this.onKeyUp);
     window.addEventListener("mousemove", this.onMouseMoveListener);
 
@@ -184,11 +181,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease.bind(this)
     );
-
-    document.addEventListener(
-      "keyboardDismissedByPhysicalKeypress",
-      this.handlePhysicalKeyboardDismiss
-    );
   }
 
   componentWillUnmount() {
@@ -217,11 +209,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease
     );
-
-    document.removeEventListener(
-      "keyboardDismissedByPhysicalKeypress",
-      this.handlePhysicalKeyboardDismiss
-    );
   }
 
   performExit() {
@@ -399,7 +386,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.longPressDetector.monitorKeyPress(event.code, event);
     }
 
-    // Only handle repeat events for arrow keys
+    // None of the logic below should be executed for repeated keys
     if (event.repeat && !keyCode(event).matchesAny(...ARROW_KEYS)) return;
 
     /**
@@ -461,13 +448,20 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     /**
-     When pressing escape or the Native "Back" button:
+     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
-     note: backspace affects the keyboard input, so it not handled here
      */
-    if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
+
+    if (
+      keyCode(event).matchesAny(
+        KEYS.Back,
+        KEYS.Escape,
+        KEYS.EscapeDevice,
+        KEYS.Backspace
+      )
+    ) {
       switch (displayState) {
         case DISPLAY_STATES.DEFAULT:
         case DISPLAY_STATES.PLAYER:
@@ -516,7 +510,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
       } else {
-        focusManager.pressIn();
         focusManager.press();
       }
 
@@ -549,6 +542,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
         focusManager.moveFocus(direction);
       }
 
+      if (!isDialogVisible) {
+        // run focus recovery on user interaction attempt
+        // probably we failed to set initial focus for some reason
+        focusManager.recoverFocus();
+      }
+
       if (
         displayState === DISPLAY_STATES.PLAYER ||
         displayState === DISPLAY_STATES.HUD
@@ -653,7 +652,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  handleKeyboardDismiss() {
+  handleKeyboardDismiss = () => {
     this.isDismissing = true;
 
     this.setState(
@@ -664,10 +663,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
       },
       () => {
         this.isDismissing = false;
-        focusManager.recoverFocus();
       }
     );
-  }
+  };
 
   handleKeyboardInput = (value: string) => {
     const { activeInputRef } = this.state;
@@ -763,35 +761,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ].includes(event.code);
   }
 
-  handlePhysicalKeyboardDismiss(event: CustomEvent) {
-    const { value, position, inputElement } = event.detail;
-
-    this.isDismissing = true;
-
-    this.setState(
-      {
-        isKeyboardVisible: false,
-        keyboardInput: "",
-        activeInputRef: null,
-      },
-      () => {
-        if (inputElement) {
-          inputElement.value = value;
-          inputElement.focus();
-          inputElement.setSelectionRange(position, position);
-
-          const keyboardEvent = new CustomEvent("keyboardUpdate", {
-            detail: { value },
-          });
-
-          document.dispatchEvent(keyboardEvent);
-        }
-
-        this.isDismissing = false;
-      }
-    );
-  }
-
   render() {
     return (
       (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (

package/App/Loader/loadLocale.js

@@ -4,8 +4,8 @@ import { QuickBrickCommunicationModule } from "../../Polyfills/QuickBrickCommuni
 import { loadLocaleImpl, getLanguageCode } from "./utils";
 
 type Locale = {
-  language: string;
-  country: string;
+  language: string,
+  country: string,
 };
 
 async function getBrowserLocale() {

package/App/Router/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Router } from "react-router";
+import { createMemoryHistory } from "history";
+
+const history = createMemoryHistory();
+
+export const ZappDomRouter = ({ children, ...otherProps }) => (
+  <Router history={history} {...otherProps}>
+    {children}
+  </Router>
+);
+
+ZappDomRouter.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/App/Splash/Spinner.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+import "./spinner-styles.css";
+
+export const Spinner = (color) => {
+  const spinnerColor = {
+    background: color.color,
+  };
+
+  return (
+    <div>
+      <div id="progress">
+        <div className="spinner">
+          <div style={spinnerColor} className="bar1" />
+          <div style={spinnerColor} className="bar2" />
+          <div style={spinnerColor} className="bar3" />
+          <div style={spinnerColor} className="bar4" />
+          <div style={spinnerColor} className="bar5" />
+          <div style={spinnerColor} className="bar6" />
+          <div style={spinnerColor} className="bar7" />
+          <div style={spinnerColor} className="bar8" />
+          <div style={spinnerColor} className="bar9" />
+          <div style={spinnerColor} className="bar10" />
+          <div style={spinnerColor} className="bar11" />
+          <div style={spinnerColor} className="bar12" />
+        </div>
+      </div>
+    </div>
+  );
+};

package/App/Splash/spinner-styles.css

@@ -0,0 +1,81 @@
+div.spinner {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  top: 50%;
+  left: 50%;
+  margin: -60px 0 0 -70px;
+}
+
+div.spinner div {
+  width: 6%;
+  height: 16%;
+  position: absolute;
+  left: 49%;
+  top: 43%;
+  opacity: 0;
+  -webkit-border-radius: 50px;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  -webkit-animation: fade 1s linear infinite;
+}
+
+@-webkit-keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}
+
+div.spinner div.bar1 {
+  -webkit-transform: rotate(0deg) translate(0, -130%);
+  -webkit-animation-delay: 0s;
+}
+
+div.spinner div.bar2 {
+  -webkit-transform: rotate(30deg) translate(0, -130%);
+  -webkit-animation-delay: -0.9167s;
+}
+
+div.spinner div.bar3 {
+  -webkit-transform: rotate(60deg) translate(0, -130%);
+  -webkit-animation-delay: -0.833s;
+}
+div.spinner div.bar4 {
+  -webkit-transform: rotate(90deg) translate(0, -130%);
+  -webkit-animation-delay: -0.7497s;
+}
+div.spinner div.bar5 {
+  -webkit-transform: rotate(120deg) translate(0, -130%);
+  -webkit-animation-delay: -0.667s;
+}
+div.spinner div.bar6 {
+  -webkit-transform: rotate(150deg) translate(0, -130%);
+  -webkit-animation-delay: -0.5837s;
+}
+div.spinner div.bar7 {
+  -webkit-transform: rotate(180deg) translate(0, -130%);
+  -webkit-animation-delay: -0.5s;
+}
+div.spinner div.bar8 {
+  -webkit-transform: rotate(210deg) translate(0, -130%);
+  -webkit-animation-delay: -0.4167s;
+}
+div.spinner div.bar9 {
+  -webkit-transform: rotate(240deg) translate(0, -130%);
+  -webkit-animation-delay: -0.333s;
+}
+div.spinner div.bar10 {
+  -webkit-transform: rotate(270deg) translate(0, -130%);
+  -webkit-animation-delay: -0.2497s;
+}
+div.spinner div.bar11 {
+  -webkit-transform: rotate(300deg) translate(0, -130%);
+  -webkit-animation-delay: -0.167s;
+}
+div.spinner div.bar12 {
+  -webkit-transform: rotate(330deg) translate(0, -130%);
+  -webkit-animation-delay: -0.0833s;
+}

package/index.js

@@ -1,11 +1,13 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
+import { useHistory, useLocation } from "react-router-dom";
 
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { OfflineHandler } from "@applicaster/zapp-react-native-ui-components/Components/OfflineHandler";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { ZappDomRouter } from "./App/Router";
 import { Layout } from "./App/Layout";
 import { SplashLoader } from "./App/Loader/SplashLoader";
 import { appLoader } from "./App/Loader";
@@ -22,6 +24,11 @@ const contextProviders = R.map(R.prop("withProvider"), R.values(Contexts));
 if (withXray) contextProviders.push(withXray);
 
 export const ZappApp = createQuickBrickApp({
+  navigations: {
+    Router: ZappDomRouter,
+    useLocation,
+    useHistory,
+  },
   QuickBrickManager,
   Layout,
   OfflineHandler,

package/package.json

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