@applicaster/zapp-react-native-utils 12.0.0-alpha.4960304100 → 12.0.0-alpha.5000126055

package/reactHooks/feed/__tests__/useInflatedUrl.test.ts

@@ -12,9 +12,21 @@ const {
 
 const { reactHooksLogger } = require("../../logger");
 
+let mockStore;
+
 describe("getInflatedDataSourceUrl", () => {
   beforeEach(() => {
     reactHooksLogger.warning.mockClear();
+
+    const {
+      appStore,
+    } = require("@applicaster/zapp-react-native-redux/AppStore");
+
+    mockStore = {
+      getState: jest.fn().mockReturnValue({ pipesEndpoints: {} }),
+    };
+
+    appStore.set(mockStore);
   });
 
   it("returns the url inflated with the right params", () => {
@@ -72,7 +84,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.id}} source: http://foo.com/show/seriesId={{seriesId}}",
       data: { source, contexts, mapping },
     });
   });
@@ -107,7 +120,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName}}",
       data: { source, contexts, mapping },
     });
   });
@@ -148,7 +162,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName2}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName1}}?test={{groupName2}}",
       data: { source, contexts, mapping },
     });
   });

package/reactHooks/feed/useInflatedUrl.ts

@@ -9,9 +9,15 @@ import {
 
 import { inflateString } from "../../stringUtils";
 import { useRoute } from "../navigation";
-import { isEnoughDataToInflateString } from "../../inflatedUrlUtils";
+import { getMissingValues } from "../../inflatedUrlUtils";
 import { reactHooksLogger as logger } from "../logger";
 import { isTV } from "../../reactUtils";
+import {
+  findEndpointForURL,
+  HTTP_METHODS,
+} from "@applicaster/zapp-pipes-v2-client";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { ENDPOINT_TAGS } from "../../types";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -105,24 +111,47 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
     R.keys(mapping)
   );
 
-  if (!isEnoughDataToInflateString(contexts, string)) {
-    const message = "Not enough data to fully inflate url";
+  const missingValues = getMissingValues(contexts, string);
 
-    // todo: add js only payload instead
-    if (__DEV__) {
-      logger.warning({
-        message,
-        data: { source, contexts, mapping },
-      });
+  if (missingValues && missingValues.length > 0) {
+    const pipesEndpoints = appStore.get("pipesEndpoints");
+
+    const endpointURL = findEndpointForURL(
+      source,
+      pipesEndpoints,
+      HTTP_METHODS.GET
+    );
+
+    const tags = pipesEndpoints?.[endpointURL]?.tags;
+    const allowMissingKeys = tags?.includes(ENDPOINT_TAGS.allow_missing_keys);
+
+    if (!allowMissingKeys) {
+      const message = `Not enough data to fully inflate url: ${missingValues.join(
+        ","
+      )} source: ${source}`;
+
+      // todo: add js only payload instead
+      if (__DEV__) {
+        logger.warning({
+          message,
+          data: { source, contexts, mapping },
+        });
+      } else {
+        // todo: log values we've failed to resolve
+        logger.warning({
+          message,
+        });
+      }
+
+      // return null in order to prevent start fetching data with invalid url
+      return null;
     } else {
-      // todo: log values we've failed to resolve
-      logger.warning({
-        message,
+      logger.debug({
+        message: `Ignoring missing values in url because ${
+          ENDPOINT_TAGS.allow_missing_keys
+        } endpoint tag, keys: ${missingValues.join(",")}`,
       });
     }
-
-    // return null in order to prevent start fetching data with invalid url
-    return null;
   }
 
   return inflateString({ string, data: contexts });

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,8 +15,21 @@ export const mockMenu: ZappNavigation = {
   // preset_id?: null | unknown;
 };
 
+export const useRoute = jest.fn(() => ({
+  screenData: {
+    name: "someName",
+  },
+  pathname: "someRoute",
+}));
+
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
+  activeRiver: {
+    id: "someId",
+  },
   currentRoute: "someRoute",
 }));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -1,4 +1,7 @@
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
   currentRoute: "someRoute",
 }));

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,9 +1,10 @@
 /* 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";
+import { isEmpty } from "ramda";
 
 import {
   useContentTypes,
@@ -31,6 +32,7 @@ import { isTV } 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 +148,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 +157,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 +178,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 +186,33 @@ 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);
-  }
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = isEmpty(screenDataContext)
+    ? navigator.screenData
+    : screenDataContext;
 
-  return composeRouteData(currentRouteScreenData);
+  return { screenData, pathname };
 };
 
 type Callbacks = Partial<{

package/reactHooks/player/__tests__/useAutoSeek.test.tsx

@@ -9,11 +9,18 @@ jest.useFakeTimers();
 
 const rewind = jest.fn();
 const forward = jest.fn();
+const exitDelayedSeek = jest.fn();
+const enterDelayedSeek = jest.fn();
 
 jest
   .spyOn(playerManager, "getInstanceController")
   // @ts-ignore
-  .mockImplementation(() => ({ rewind, forward }));
+  .mockImplementation(() => ({
+    rewind,
+    forward,
+    exitDelayedSeek,
+    enterDelayedSeek,
+  }));
 
 describe("useAutoSeek", () => {
   beforeEach(() => {

package/reactHooks/player/useAutoSeek.tsx

@@ -14,19 +14,24 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   const [isRunning, setIsRunning] = useState<boolean>(false);
   const [direction, setDirection] = useState<Nullable<SEEK_TYPE>>(null);
   const [multiplier, setMultiplier] = useState(1);
+
   const intervalTimer = React.useRef(null);
   const prevRunning = usePrevious(isRunning);
 
   const setIntervalTimer = (cb) => {
-    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
+    if (intervalTimer.current) {
+      return;
+    }
+
+    intervalTimer.current = setInterval(() => {
+      intervalTimer.current = null;
+      cb();
+    }, ON_HOLD_INTERVAL);
   };
 
   const clearIntervalTimer = () => {
-    try {
-      clearInterval(intervalTimer.current);
-    } catch (err) {
-      intervalTimer.current = null;
-    }
+    clearInterval(intervalTimer.current);
+    intervalTimer.current = null;
   };
 
   const resetState = () => {
@@ -37,6 +42,21 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   };
 
   useEffect(() => {
+    const player = playerManager.getInstanceController();
+    if (!player) return;
+
+    if (isRunning) {
+      player?.enterDelayedSeek();
+    } else if (!isRunning) {
+      player.exitDelayedSeek();
+    }
+  }, [isRunning]);
+
+  useEffect(() => {
+    if (!isRunning) {
+      return;
+    }
+
     const player = playerManager.getInstanceController();
 
     if (!player) return;
@@ -45,7 +65,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
       player[direction](R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
       resetHUDTimer();
     }
-  }, [multiplier, direction]);
+  }, [multiplier, direction, isRunning]);
 
   useEffect(() => {
     if (isRunning && isRunning !== prevRunning) {
@@ -75,7 +95,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
       setDirection(eventType);
       setIsRunning(true);
     },
-    [isRunning]
+    [isRunning, autoSeekStop]
   );
 
   return React.useMemo(

package/reactHooks/player/useSeek.tsx

@@ -9,11 +9,11 @@ export const useSeek = (resetHUDTimer = noop) => {
   const { autoSeekStart, autoSeekStop } = useAutoSeek(resetHUDTimer);
 
   const onForwardPress = () => {
-    handlePressEvent(SEEK_TYPE.FORWARD);
+    // handlePressEvent(SEEK_TYPE.FORWARD);
   };
 
   const onRewindPress = () => {
-    handlePressEvent(SEEK_TYPE.REWIND);
+    // handlePressEvent(SEEK_TYPE.REWIND);
   };
 
   const onForwardPressIn = () => {
@@ -21,6 +21,7 @@ export const useSeek = (resetHUDTimer = noop) => {
   };
 
   const onForwardPressOut = () => {
+    handlePressEvent(SEEK_TYPE.FORWARD);
     autoSeekStop();
   };
 
@@ -37,6 +38,7 @@ export const useSeek = (resetHUDTimer = noop) => {
   };
 
   const onRewindPressOut = () => {
+    handlePressEvent(SEEK_TYPE.REWIND);
     autoSeekStop();
   };
 

package/reactHooks/player/useTapSeek.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import * as R from "ramda";
 import {
   MAX_SEEK_TIME,
@@ -10,13 +10,11 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
 type SeekType = SEEK_TYPE | null;
 
-const getSkipTime = (multiplier) => {
-  const skipTime = R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
-
-  return skipTime;
-};
+const getSkipTime = (multiplier) =>
+  R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
 
 export const useTapSeek = () => {
+  const [resumeTimer, setResumeTimer] = useState<NodeJS.Timeout>(null);
   const onPressMultiplier = useRef(1);
   const lastPressTime = useRef(0);
   const currentOnPressEventType = useRef<SeekType>(null);
@@ -46,12 +44,41 @@ export const useTapSeek = () => {
       }
 
       const seekTime = getSkipTime(onPressMultiplier.current);
+
       player[eventType](seekTime);
 
+      if (resumeTimer) {
+        clearTimeout(resumeTimer);
+
+        const timer = setTimeout(() => {
+          player.exitDelayedSeek();
+          setResumeTimer(null);
+        }, 2000);
+
+        setResumeTimer(timer);
+      }
+
+      const clicksBeforePause = 3;
+
+      // Only pause player if user starts to seek on large increments
+      if (onPressMultiplier.current > clicksBeforePause) {
+        if (!player.isPaused()) {
+          player.enterDelayedSeek();
+
+          const timer = setTimeout(() => {
+            player.exitDelayedSeek();
+            setResumeTimer(null);
+          }, 2000);
+
+          clearTimeout(resumeTimer);
+          setResumeTimer(timer);
+        }
+      }
+
       lastPressTime.current = now;
       currentOnPressEventType.current = eventType;
     },
-    [resetMultiplier]
+    [resetMultiplier, resumeTimer]
   );
 
   return handlePressEvent;

package/reactHooks/screen/useScreenContext.ts

@@ -5,8 +5,9 @@ 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";
 
-function useScreenContextV2() {
+export function useScreenContextV2() {
   return useContext(ScreenContext);
 }
 
@@ -44,9 +45,9 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = useContext(ScreenDataContext) || navigator.data;
 
-  const screenKey = useMemo(() => navigator?.key, [navigator]);
-  const screenData = useMemo(() => navigator?.data, [screenKey]);
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();

package/screenState/index.ts

@@ -49,11 +49,3 @@ export function useScreenState(
     setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
   };
 }
-
-export const useScreenScrollStore = create<{
-  scrollPosition: number;
-  scrollingVelocity: number;
-}>(() => ({
-  scrollPosition: 0,
-  scrollingVelocity: 0,
-}));

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/testUtils/getByTestId.ts

@@ -0,0 +1,14 @@
+export const getByTestId = (wrapper, testId) => {
+  try {
+    if (wrapper?.getByTestId) {
+      return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+    } else if (wrapper?.root?.findByProps) {
+      return wrapper.root.findAllByProps({ testID: testId })?.[0] ?? undefined;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};

package/testUtils/index.tsx

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 
 import { Provider } from "react-redux";
@@ -11,6 +11,8 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { render } from "@testing-library/react-native";
 import { AnalyticsProvider } from "../analyticsUtils";
 
+export { getByTestId } from "./getByTestId";
+
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
  * Example:
@@ -21,17 +23,6 @@ import { AnalyticsProvider } from "../analyticsUtils";
 export const testIDEquals = (testId: any): boolean =>
   R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
 
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance
@@ -47,11 +38,11 @@ export const findByType = (type, renderer) => {
 export function createComponentMock(mockName, hasChildren = false) {
   return hasChildren
     ? jest.fn(({ children }) => (
-        <View comp={mockName} testID={mockName}>
+        <View testID={mockName}>
           {typeof children === "function" ? children() : children}
         </View>
       ))
-    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+    : jest.fn(() => <View testID={mockName} />);
 }
 
 const initialState = {
@@ -64,14 +55,21 @@ const initialState = {
     AppContainer: createComponentMock("appContainer", true),
     DisplayError: createComponentMock("displayError"),
   },
-  rivers: [{ id: "A1234", home: true }],
+  rivers: { id: "A1234", home: true },
   appSettings: {},
   plugins: [],
-  appState: { appReady: true },
+  appState: { appReady: true, appLaunched: true },
+  appData: { layoutVersion: "v1" },
+  contentTypes: null,
 };
 
-export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, ...store });
+export const WrappedWithProviders = ({
+  children,
+  store: storeObj = {},
+}: any) => {
+  const _store = configureStore([thunk])(
+    R.mergeDeepWith(R.concat, { ...initialState }, storeObj)
+  );
 
   return (
     <SafeAreaProvider
@@ -93,8 +91,12 @@ export const WrappedWithProviders = ({ children, store = {} }: any) => {
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, store?: unknown) => {
-  return render(
-    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
-  );
+export const renderWithProviders = (component, storeObj?: unknown) => {
+  return render(component, {
+    wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
+      return (
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+      );
+    },
+  });
 };