@applicaster/zapp-react-native-utils 12.0.0-alpha.5040434238 → 12.0.0-alpha.5061452310

package/appUtils/keyCodes/keys.web.js

@@ -1,6 +1,7 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
 
+import { isVizioPlatform } from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 
@@ -21,6 +22,13 @@ export const ARROW_KEYS = [
   KEYS.ArrowRight,
 ];
 
+/**
+ * Platform.OS currently identifies Vizio as LG_TV, therefore we are using isVizioPlatform to identify platform and add keys.
+ */
+if (isVizioPlatform()) {
+  Object.assign(KEYS, platformKeys.vizio);
+}
+
 /**
  * In TizenOS we need to register all of the keys that we are going to use.
  * You need to register using the name Tizen has for the key.

package/appUtils/keyCodes/keysByPlatform.js

@@ -102,4 +102,14 @@ const tvos = {
   Menu: { code: "Menu", eventType: "menu" },
 };
 
-export { lg_tv, samsung_tv, web, tvos, android_tv };
+const vizio = {
+  ...samsung_tv,
+  Exit: { code: "Exit", keyCode: 27 },
+  PageUp: { code: "PageUp", keyCode: 33 },
+  PageDown: { code: "PageDown", keyCode: 34 },
+  MediaTrackNext: { code: "MediaTrackNext", keyCode: 418 },
+  MediaTrackPrevious: { code: "MediaTrackPrevious", keyCode: 419 },
+  PrevCh: { code: "PrevCh", keyCode: 500 },
+};
+
+export { lg_tv, samsung_tv, web, tvos, android_tv, vizio };

package/cellUtils/index.ts

@@ -460,7 +460,9 @@ export const getColorFromData = ({
 }: GetColorFromData): string => {
   const value = getValue(key);
 
-  if (validateColor(value)) {
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  if (validateColor(value.replace(".00", ""))) {
     return value;
   }
 

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -245,6 +245,12 @@ const generalContent = () => ({
         ],
         initial_value: "reloading...",
       },
+      {
+        type: "text_input",
+        label: "Navigation Bar Screen Title",
+        key: "screen_title",
+        initial_value: null,
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -1663,7 +1663,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.5040434238",
+  "version": "12.0.0-alpha.5061452310",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5040434238",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5061452310",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/playerUtils/configurationGenerator.ts

@@ -22,6 +22,7 @@ function getDevice(platform) {
     case "android_tv_for_quickbrick":
     case "lg_tv":
     case "samsung_tv":
+    case "vizio":
     case "web":
       return "tv";
   }
@@ -1659,7 +1660,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu for TV

package/reactHooks/autoscrolling/__tests__/{useTrackedView.test.ts → useTrackedView.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { act, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const mockUpdateComponentsPositions = jest.fn();
 
@@ -19,11 +23,22 @@ jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChild }) => (
+  /* @ts-ignore */
+  <Provider store={store}>{children}</Provider>
+);
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
   it("should update position for selected component", async () => {
-    const { result } = renderHook(() => useTrackedView("123"));
+    const { result } = renderHook(() => useTrackedView("123"), {
+      wrapper: Wrapper,
+    });
 
     // Fast-forward until all timers have been executed
     jest.advanceTimersByTime(3000);

package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 import * as ReactNative from "react-native";
 
@@ -48,19 +52,43 @@ jest.mock("../../navigation", () => ({
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -69,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -87,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -113,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -128,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -141,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,14 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
-  const isLandscapeTablet = tablet && orientation === "landscape";
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation, isLandscapeTablet };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/types/index.ts

@@ -2,7 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
-  isLandscapeTablet: boolean;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -3,6 +3,8 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
@@ -36,6 +38,7 @@ export const useDimensions: UseDimensions = (
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
   const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
@@ -50,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -85,7 +88,7 @@ export const useDimensions: UseDimensions = (
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
       } else if (isActive || options.updateForInactiveScreens) {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };

package/reactHooks/navigation/index.ts

@@ -146,6 +146,15 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
+
+  /**
+   * compose `useRoute()` output data
+   */
+  const composeRouteData = (screenData: VariousScreenData) => ({
+    screenData,
+    pathname,
+  });
+
   const navigator = useNavigation();
 
   const { plugins, contentTypes, rivers } = usePickFromState([
@@ -157,9 +166,7 @@ export const useRoute = (): {
   const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
-
   const modalScreenData = modalState.screen;
-
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -193,36 +200,63 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
-
-    return { screenData, pathname };
+    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
   }
 
   if (isVideoModalPathname(pathname)) {
-    const screenData = videoModalScreenData as LegacyNavigationScreenData;
-
-    return { screenData, pathname };
+    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
   }
 
   if (isHookModalPathname(pathname)) {
-    const screenData = hookModalScreenData;
-
-    return { screenData, pathname };
+    return composeRouteData(hookModalScreenData);
   }
 
   if (isHookPathname(pathname)) {
-    const screenData =
+    /**
+     * HACK
+     *
+     * This condition relies on hacky approach to get the current hook screen data
+     * using navigator.screenData for some cases.
+     * This is used when hook is in sequence.
+     */
+
+    // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+    if (!currentStack) {
+      return composeRouteData(navigator.screenData);
+    }
+
+    const isValidHookInCurrentRouteScreenData =
       "hookPlugin" in currentRouteScreenData &&
-      currentRouteScreenData.hookPlugin.screen_id
-        ? currentRouteScreenData
-        : navigator.screenData;
+      !!currentRouteScreenData.hookPlugin?.module;
+
+    let screenData;
+
+    // case 2: stack has valid hook data
+    if (isValidHookInCurrentRouteScreenData) {
+      screenData = currentRouteScreenData;
+    }
 
-    return { screenData, pathname };
+    const navigatorScreenData = navigator.screenData as NavigatorEntry;
+
+    // case 3: current hookPlugin is missing weight, but navigator.screenData has weight, use navigator.screenData
+    if (
+      screenData.hookPlugin.identifier ===
+        navigatorScreenData?.hookPlugin?.identifier &&
+      !screenData.hookPlugin?.weight &&
+      navigatorScreenData?.hookPlugin?.weight
+    ) {
+      screenData = navigator.screenData;
+    }
+
+    return composeRouteData(screenData);
   }
 
-  const screenData = currentRouteScreenData;
+  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+  if (!currentStack) {
+    return composeRouteData(navigator.screenData);
+  }
 
-  return { screenData, pathname };
+  return composeRouteData(currentRouteScreenData);
 };
 
 type Callbacks = Partial<{