@applicaster/zapp-react-native-utils 12.0.0-alpha.5468407101 → 12.0.0-alpha.5471145113

package/reactHooks/feed/useBuildPipesUrl.ts

@@ -1,7 +1,6 @@
-// @ts-ignore
 import { RequestBuilder } from "@applicaster/zapp-pipes-v2-client";
-import { useEffect, useState } from "react";
-import { useInflatedUrl } from "./useInflatedUrl";
+import * as React from "react";
+import { useInflatedUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 import { reactHooksLogger } from "../logger";
 
 export const logger = reactHooksLogger.addSubsystem("build-pipes-url");
@@ -15,18 +14,16 @@ type PipesBuildRequestObject = {
 export function useBuildPipesUrl({
   url,
   mapping = {},
+  requestBuilder = new RequestBuilder(),
 }): PipesBuildRequestObject {
-  const [requestParams, setRequestParams] = useState<object | null>(null);
-  const [error, setError] = useState(null);
+  const [requestParams, setRequestParams] = React.useState<object | null>(null);
 
+  const [error, setError] = React.useState(null);
   const inflatedUrl = useInflatedUrl({ feedUrl: url, mapping });
 
-  const requestBuilder = new RequestBuilder();
-
   const buildRequest = async (_url) => {
     try {
       const result = await requestBuilder.build(_url);
-
       setRequestParams(result);
     } catch (e) {
       setError(e);
@@ -34,7 +31,7 @@ export function useBuildPipesUrl({
     }
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (inflatedUrl && !requestParams) {
       buildRequest(inflatedUrl);
     }
@@ -42,7 +39,7 @@ export function useBuildPipesUrl({
 
   return {
     url: inflatedUrl || "",
-    requestParams: requestParams, // TODO should it be: || {} ?
+    requestParams, // TODO should it be: || {} ?
     error: error || undefined,
   };
 }

package/reactHooks/feed/useFeedRefresh.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import * as R from "ramda";
+import { path, max } from "ramda";
 import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { reactHooksLogger } from "../logger";
 import { ReloadDataFunction } from "./useFeedLoader";
@@ -18,9 +19,8 @@ const minimumRefreshingInterval = 5;
 const defaultRefreshInterval = 60;
 
 export const useFeedRefresh = ({ reloadData, component }: Props): void => {
-  const enable_data_refreshing = R.path(
-    ["rules", "enable_data_refreshing"],
-    component
+  const isDataRefreshingEnabled = isTrue(
+    path(["rules", "enable_data_refreshing"], component)
   );
 
   const refreshing_interval = toNumberWithDefault(
@@ -29,10 +29,12 @@ export const useFeedRefresh = ({ reloadData, component }: Props): void => {
   );
 
   const refreshingIntervalInMilliseconds =
-    R.max(refreshing_interval, minimumRefreshingInterval) * 1000;
+    max(refreshing_interval, minimumRefreshingInterval) * 1000;
+
+  const isScreenActive = useIsScreenActive();
 
   React.useEffect(() => {
-    if (isTrue(enable_data_refreshing) && refreshing_interval) {
+    if (isDataRefreshingEnabled && refreshing_interval && isScreenActive) {
       if (refreshing_interval < minimumRefreshingInterval) {
         feedRefreshLogger.warning({
           message: `You set your feed refresh interval to ${refreshing_interval} when minimum value is ${minimumRefreshingInterval}seconds.Your feed will refresh after ${minimumRefreshingInterval}seconds.`,
@@ -59,5 +61,5 @@ export const useFeedRefresh = ({ reloadData, component }: Props): void => {
         clearInterval(refreshInterval);
       };
     }
-  }, [reloadData]);
+  }, [reloadData, isScreenActive]);
 };

package/reactHooks/feed/useInflatedUrl.ts

@@ -125,25 +125,10 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
     const tags = pipesEndpoints?.[endpointURL]?.tags;
     const allowMissingKeys = tags?.includes(ENDPOINT_TAGS.allow_missing_keys);
 
-    logger.debug({
-      message: `getInflatedDataSourceUrl: source: ${source}`,
-      data: {
-        findEndpointForURL,
-        key: ENDPOINT_TAGS.allow_missing_keys,
-        missingValues,
-        pipesEndpoints,
-        endpointURL,
-        tags,
-        allowMissingKeys,
-        string,
-        newSource,
-      },
-    });
-
     if (!allowMissingKeys) {
       const message = `Not enough data to fully inflate url: ${missingValues.join(
         ","
-      )}`;
+      )} source: ${source}`;
 
       // todo: add js only payload instead
       if (__DEV__) {

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute, isNavBarVisible } from "../";
+import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 const plugins = [];
 
@@ -100,13 +101,15 @@ const mainStackWrapper = ({
   pathname = homeStack.route,
 }) => (
   <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
-    >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
+    <ScreenDataContext.Provider value={homeStack.state}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+      >
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </ScreenDataContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint max-len: off */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -12,7 +12,11 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import {
+  LONG_KEY_PRESS_TIMEOUT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -27,10 +31,11 @@ import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
 import { getTargetScreenData } from "../screen/useTargetScreenData";
 
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 import { useNavigation } from "./useNavigation";
 import { useModalStore } from "../../modalState";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export { useNavigation } from "./useNavigation";
 
@@ -146,16 +151,8 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
-
-  /**
-   * compose `useRoute()` output data
-   */
-  const composeRouteData = (screenData: VariousScreenData) => ({
-    screenData,
-    pathname,
-  });
-
   const navigator = useNavigation();
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",
@@ -163,10 +160,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
+
   const modalScreenData = modalState.screen;
+
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -183,15 +181,6 @@ export const useRoute = (): {
       plugins
     );
 
-  const currentRouteScreenData = legacyScreenData(
-    {
-      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
-      entry: currentStack?.state?.entry ?? {},
-    } as NavigationScreenData,
-
-    plugins
-  );
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state
@@ -200,63 +189,30 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
   }
 
   if (isVideoModalPathname(pathname)) {
-    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookModalPathname(pathname)) {
-    return composeRouteData(hookModalScreenData);
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookPathname(pathname)) {
-    /**
-     * 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?.module;
-
-    let screenData;
-
-    // case 2: stack has valid hook data
-    if (isValidHookInCurrentRouteScreenData) {
-      screenData = currentRouteScreenData;
-    }
-
-    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);
+    return { screenData: screenDataContext, pathname };
   }
 
-  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
-  if (!currentStack) {
-    return composeRouteData(navigator.screenData);
-  }
+  const screenData = screenDataContext;
 
-  return composeRouteData(currentRouteScreenData);
+  return { screenData, pathname };
 };
 
 type Callbacks = Partial<{
@@ -496,3 +452,36 @@ export const useIsScreenActive = () => {
 
   return pathname === currentRoute;
 };
+
+type Return = (prefix: string) => string;
+
+export const useUniqueRouteSuffix = (): Return => {
+  const pathname = usePathname();
+  const { currentRoute } = useNavigation();
+
+  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
+
+  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
+    if (isWeb()) {
+      // we should use extended route prefix only on Web, where we have stack-navigator
+      return `${prefix}___${suffix}`;
+    }
+
+    // for other platforms use previous version
+    return prefix;
+  }, []);
+
+  return withUniqueRouteSuffix;
+};
+
+export const useNavbarId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
+};
+
+export const useContentId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
+};

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -3,23 +3,28 @@ import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 
 const mockStore = configureStore([thunk]);
 
-import { useCurrentScreenData } from "../useCurrentScreenData";
-
-describe("useScreenData", function () {
-  const river_id_2: ZappRiver = {
-    name: "River 2",
-    id: "A1234",
-    home: false,
-    home_offline: false,
-    supports_offline: false,
-    navigations: [],
-    hooks: { preload_plugins: [] },
-  };
-
+const river_id_2: ZappRiver = {
+  name: "River 2",
+  id: "A1234",
+  home: false,
+  home_offline: false,
+  supports_offline: false,
+  navigations: [],
+  hooks: { preload_plugins: [] },
+};
+
+jest.mock("../useScreenContext", () => ({
+  useScreenContext: () => ({
+    screen: river_id_2,
+  }),
+}));
+
+const { useCurrentScreenData } = require("../useCurrentScreenData");
+
+describe("useScreenData", () => {
   const river_id_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -27,17 +32,10 @@ describe("useScreenData", function () {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <NavigationContext.Provider
-      value={{
-        currentRoute: "/river/river_id_1/river/river_id_2",
-        data: { screen: river_id_2 },
-      }}
-    >
-      <Provider store={store}>{children}</Provider>
-    </NavigationContext.Provider>
+    <Provider store={store}>{children}</Provider>
   );
 
-  it("should return river data for the current screen/route", function () {
+  it("should return river data for the current screen/route", () => {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

@@ -10,3 +10,5 @@ export {
   useNavbarState,
   useSetNavbarState,
 } from "./useScreenContext";
+
+export { useScreenBackgroundColor } from "./useScreenBackgroundColor";

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+export const useScreenBackgroundColor = (screenId: string): string => {
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(screenId);
+
+  const theme = useTheme();
+
+  const themeBackgroundColor = React.useMemo(
+    () => theme.app_background_color,
+    [theme.app_background_color]
+  );
+
+  const backgroundColor = ifEmptyUseFallback(
+    screenBackgroundColor,
+    themeBackgroundColor
+  );
+
+  return backgroundColor;
+};

package/reactHooks/screen/useScreenContext.ts

@@ -5,6 +5,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export function useScreenContextV2() {
   return useContext(ScreenContext);
@@ -44,9 +45,8 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
+  const screenData = useContext(ScreenDataContext);
 
-  const screenKey = useMemo(() => navigator?.key, [navigator]);
-  const screenData = useMemo(() => navigator?.data, [screenKey]);
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();

package/reactUtils/index.ts

@@ -108,3 +108,105 @@ export const isAndroidPlatform = () => Platform.OS === "android";
 export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
+
+declare global {
+  interface Window {
+    VIZIO?: {
+      exitApplication: () => void;
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
+/**
+ * Platforms found in userAgent string, please note that simulators
+ * might not have the same agents that the devices have
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};
+
+/**
+ * Simple way of identifying if we have access to the tizen APIs
+ */
+export const hasTizen = typeof window?.tizen !== "undefined";
+
+/**
+ * Simple way of identifying if we have access to the webOS APIs
+ */
+export const hasWebOS = typeof window?.webOS !== "undefined";
+
+export const getUserAgent = () =>
+  window?.navigator?.userAgent || global?.navigator?.userAgent;
+
+export const isLgPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  // Note: LG uses the number 0 in their userAgent, possibly because of Palm WebOS
+  return hasWebOS || userAgent.includes(PLATFORMS.webos);
+};
+
+export const isSamsungPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  return (
+    hasTizen ||
+    userAgent.includes(PLATFORMS.samsung) ||
+    userAgent.includes(PLATFORMS.tizen)
+  );
+};
+
+/**
+ * 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();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  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;
+};