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

package/App/InteractionManager/index.tsx

@@ -31,25 +31,17 @@ 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 { hasVizioAPIs, isVizioPlatform } from "../Loader/utils/platform";
+import {
+  isVizioPlatform,
+  isSamsungPlatform,
+  isLgPlatform,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 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;
 
@@ -162,7 +154,6 @@ export function withInteractionManager(Component: React.FC) {
       );
 
       document.addEventListener("focusin", this.handleInputFocus);
-      // document.addEventListener("focusout", this.handleInputBlur);
 
       document.addEventListener(
         "cursorStateChange",
@@ -193,18 +184,18 @@ export function withInteractionManager(Component: React.FC) {
     }
 
     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 (hasVizioAPIs()) {
-        window.VIZIO.exitApplication();
+      if (isVizioPlatform()) {
+        window?.VIZIO?.exitApplication();
       }
     }
 
@@ -234,10 +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) ||
-          hasVizioAPIs()
-        ) {
+        if (isSamsungPlatform() || isVizioPlatform()) {
           const { isDialogVisible } = confirmationDialogStore.getState();
 
           if (isDialogVisible) {
@@ -250,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) {
@@ -610,10 +598,7 @@ export function withInteractionManager(Component: React.FC) {
       }
 
       if (keyCode(event).matches(KEYS.Exit)) {
-        if (
-          Platform.OS === ("samsung_tv" as QuickBrickPlatforms) ||
-          shouldUseOnScreenKeyboard()
-        ) {
+        if (isSamsungPlatform() || shouldUseOnScreenKeyboard()) {
           this.performExit();
 
           return;
@@ -638,6 +623,12 @@ export function withInteractionManager(Component: React.FC) {
           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
@@ -662,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 (
@@ -702,6 +691,9 @@ export function withInteractionManager(Component: React.FC) {
 
     onConfirmDialogClose() {
       this.confirmDialog.hideDialog();
+
+      // restore initial focus after closing dialog
+      focusManager.setInitialFocus();
     }
 
     handleInputFocus = (event: FocusEvent) => {
@@ -747,9 +739,7 @@ export function withInteractionManager(Component: React.FC) {
           keyboardInput: "",
         },
         () => {
-          setTimeout(() => {
-            this.isDismissing = false;
-          }, 100);
+          this.isDismissing = false;
         }
       );
     };

package/App/Loader/utils/platform.js

@@ -283,21 +283,24 @@ export const getDeviceData = async () => {
         ...tizenConnectionInfo,
         device_type: getDeviceType(),
       };
-    } else if (hasVizioAPIs()) {
-      window.VIZIO.getFirmwareVersion(function (firmwareVersion) {
-        deviceData.osVersion = firmwareVersion;
-      });
-
+    } else if (isVizioPlatform()) {
       deviceData = {
         ...deviceData,
         platform: "vizio",
         deviceMake: "Vizio",
-        deviceModel: window.VIZIO.deviceModel,
         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/Polyfills/AnalyticsBridge/index.ts

@@ -105,7 +105,11 @@ function isInvalidAnalyticsData(eventName, payload = null) {
 
 export const AnalyticsBridge = (function () {
   let registeredAnalyticPlugins: {
-    module: { sendEvent: Function; initialize?: Function };
+    module: {
+      sendEvent: Function;
+      initialize?: Function;
+      getPlayerConfiguration?: Function;
+    };
     configuration?: any;
   }[] = [];
 

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