@applicaster/zapp-react-native-utils 13.0.0-alpha.4750811552 → 13.0.0-alpha.4863201005

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -5,7 +5,7 @@ const mockDimensionsGet = jest.fn(
     ({
       window: { width: 1, height: 1 },
       screen: { width: 360, height: 540 },
-    }[type])
+    })[type]
 );
 
 ReactNative.Dimensions.get = mockDimensionsGet;

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -52,6 +52,14 @@ export const useDimensions: UseDimensions = (
       ? { fullDimensions }
       : { ...fullDimensions };
 
+  if (options.updateForInactiveScreens === undefined) {
+    options.updateForInactiveScreens = true;
+  }
+
+  if (options.fullDimensions === undefined) {
+    options.fullDimensions = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 

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

@@ -135,10 +135,6 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
-jest.mock("../../../modalState", () => ({
-  useModalStore: jest.fn(),
-}));
-
 describe("navigation", () => {
   describe("useRoute", () => {
     describe("Main stack components", () => {

package/reactHooks/navigation/index.ts

@@ -1,9 +1,5 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint max-len: off */
-
-import React, { useContext, useEffect, useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
   useContentTypes,
@@ -11,34 +7,36 @@ import {
 } from "@applicaster/zapp-react-native-redux/hooks";
 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,
-  QUICK_BRICK_NAVBAR,
-  QUICK_BRICK_CONTENT,
-} from "@applicaster/quick-brick-core/const";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
-import {
-  getNavigationProps,
-  getRiverFromRoute,
-  getTargetRoute,
-} from "../../navigationUtils";
-import { platformSelect } from "../../reactUtils";
+import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
-import { getTargetScreenData } from "../screen/useTargetScreenData";
 
-import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+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";
 
+export { useRoute } from "./useRoute";
+
+export { usePathname } from "./usePathname";
+
+export { useNavigationPluginData } from "./useNavigationPluginData";
+
+export { useNavigationType } from "./useNavigationType";
+
+export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
+
+export { useIsScreenActive } from "./useIsScreenActive";
+
+export {
+  useUniqueRouteSuffix,
+  useNavbarId,
+  useContentId,
+} from "./useUniqueRouteSuffix";
+
 /**
  * This function helps to decide wether the navbar should be presented on the screen
  * based on route and / or screen Data
@@ -125,8 +123,6 @@ export function isNavBarVisible(
 
 const { ProfilerBridge } = NativeModules;
 
-export const usePathname = () => React.useContext(PathnameContext);
-
 export const useBackHandler = (cb: () => boolean) => {
   React.useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
@@ -137,88 +133,6 @@ export const useBackHandler = (cb: () => boolean) => {
   }, [cb]);
 };
 
-// starts with modal/
-const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
-
-const isVideoModalPathname = (pathname: string) =>
-  /^video-modal\//.test(pathname);
-
-const isHookModalPathname = (pathname: string) =>
-  /^hooks-modal\//.test(pathname);
-
-const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
-
-type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
-
-export const useRoute = (): {
-  screenData: VariousScreenData;
-  pathname: string;
-} => {
-  const pathname = usePathname() || "";
-  const navigator = useNavigation();
-  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
-
-  const { plugins, contentTypes, rivers } = usePickFromState([
-    "plugins",
-    "rivers",
-    "contentTypes",
-  ]);
-
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
-
-  const modalScreenData = modalState.screen;
-
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
-
-  const videoModalScreenData =
-    navigator.videoModalState?.item &&
-    legacyScreenData(
-      {
-        entry: navigator.videoModalState?.item as ZappEntry,
-        screen: getTargetScreenData(
-          navigator.videoModalState?.item as ZappEntry,
-          rivers,
-          contentTypes
-        ),
-      },
-      plugins
-    );
-
-  // There are 4 route scenarios
-  // For regular screens take date from navigator stack.
-  // is path is model grab screenData from modal state
-  // if path is video modal grab screenData from video state
-  // if path is hook modal grab screenData from hook state
-  // if path is hook grab screenData from screenData
-
-  if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
-
-    return { screenData, pathname };
-  }
-
-  if (isVideoModalPathname(pathname)) {
-    const screenData = videoModalScreenData as LegacyNavigationScreenData;
-
-    return { screenData, pathname };
-  }
-
-  if (isHookModalPathname(pathname)) {
-    const screenData = hookModalScreenData;
-
-    return { screenData, pathname };
-  }
-
-  if (isHookPathname(pathname)) {
-    return { screenData: screenDataContext, pathname };
-  }
-
-  const screenData = screenDataContext;
-
-  return { screenData, pathname };
-};
-
 type Callbacks = Partial<{
   handleHookPresent: ({
     route,
@@ -320,16 +234,19 @@ export const useZappHooksForEntry = (
         callbacks?.handleHookComplete?.(props);
       };
 
-      const hookManager = HooksManager(hooksOptions)
+      const hookManager = HooksManager(hooksOptions);
+
+      hookManager.subscriber
         .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
         .on(HOOKS_EVENTS.ERROR, handleHookError)
         .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
         .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
-        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete)
-        .handleHooks(entry);
+        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete);
+
+      hookManager.handleHooks(entry);
 
       return () => {
-        hookManager
+        hookManager.subscriber
           .removeHandler(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .removeHandler(HOOKS_EVENTS.ERROR, handleHookError)
           .removeHandler(HOOKS_EVENTS.CANCEL, handleHookCancel)
@@ -339,34 +256,6 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export enum MenuTypes {
-  drawer = "DRAWER",
-  bottomTabBar = "BOTTOM_TAB_BAR",
-}
-
-export const useNavigationPluginData = (): ZappNavigation | undefined => {
-  const {
-    screenData: useRouteScreenData,
-  }: { screenData: QuickBrickNavigationData | null } = useRoute();
-
-  const navigations = useRouteScreenData?.targetScreen
-    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
-    : (useRouteScreenData as ZappRiver).navigations;
-
-  const navigationMenu = navigations?.find((nav) => nav.category === "menu");
-
-  return navigationMenu;
-};
-
-export const useNavigationType = (): MenuTypes => {
-  const navigationMenu = useNavigationPluginData();
-
-  return !navigationMenu ||
-    navigationMenu.navigation_type === "quick_brick_side_menu"
-    ? MenuTypes.drawer
-    : MenuTypes.bottomTabBar;
-};
-
 export const useProfilerLogging = () => {
   const logTimestamp = (data: string) =>
     InteractionManager.runAfterInteractions(() => {
@@ -411,81 +300,3 @@ export const useIsNavBarVisible = (): boolean => {
 
   return useMemo(() => visible, [visible]);
 };
-
-const useGetNavBarTopBorderWidth = (): number => {
-  const navigator = useNavigation();
-
-  const navProps = getNavigationProps({
-    navigator,
-    title: "",
-    category: "menu",
-  });
-
-  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
-};
-
-const TAB_BAR_HEIGHT_IOS = 49;
-const TAB_BAR_HEIGHT_ANDROID = 56;
-
-const useGetTabBarHeight = () =>
-  platformSelect({
-    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
-    android: TAB_BAR_HEIGHT_ANDROID,
-  }) as number;
-
-export const useGetBottomTabBarHeight = (): number => {
-  const topBorderWidth = useGetNavBarTopBorderWidth();
-  const tabBarHeight = useGetTabBarHeight();
-
-  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
-
-  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
-};
-
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
-
-  if (
-    videoModalState.visible &&
-    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
-  ) {
-    return false;
-  }
-
-  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/navigation/useGetBottomTabBarHeight.ts

@@ -0,0 +1,12 @@
+import { useGetNavBarTopBorderWidth } from "./useGetNavBarTopBorderWidth";
+import { useGetTabBarHeight } from "./useGetTabBarHeight";
+import { MenuTypes, useNavigationType } from "./useNavigationType";
+
+export const useGetBottomTabBarHeight = (): number => {
+  const topBorderWidth = useGetNavBarTopBorderWidth();
+  const tabBarHeight = useGetTabBarHeight();
+
+  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
+
+  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
+};

package/reactHooks/navigation/useGetNavBarTopBorderWidth.ts

@@ -0,0 +1,14 @@
+import { getNavigationProps } from "../../navigationUtils";
+import { useNavigation } from "./useNavigation";
+
+export const useGetNavBarTopBorderWidth = (): number => {
+  const navigator = useNavigation();
+
+  const navProps = getNavigationProps({
+    navigator,
+    title: "",
+    category: "menu",
+  });
+
+  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
+};

package/reactHooks/navigation/useGetTabBarHeight.ts

@@ -0,0 +1,12 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { platformSelect } from "../../reactUtils";
+
+const TAB_BAR_HEIGHT_IOS = 49;
+const TAB_BAR_HEIGHT_ANDROID = 56;
+
+export const useGetTabBarHeight = () =>
+  platformSelect({
+    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
+    android: TAB_BAR_HEIGHT_ANDROID,
+  }) as number;

package/reactHooks/navigation/useIsScreenActive.ts

@@ -0,0 +1,17 @@
+import { useNavigation } from "./useNavigation";
+import { usePathname } from "./usePathname";
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
+};

package/reactHooks/navigation/useNavigationPluginData.ts

@@ -0,0 +1,15 @@
+import { useRoute } from "./useRoute";
+
+export const useNavigationPluginData = (): ZappNavigation | undefined => {
+  const {
+    screenData: useRouteScreenData,
+  }: { screenData: QuickBrickNavigationData | null } = useRoute();
+
+  const navigations = useRouteScreenData?.targetScreen
+    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
+    : (useRouteScreenData as ZappRiver).navigations;
+
+  const navigationMenu = navigations?.find((nav) => nav.category === "menu");
+
+  return navigationMenu;
+};

package/reactHooks/navigation/useNavigationType.ts

@@ -0,0 +1,15 @@
+import { useNavigationPluginData } from "./useNavigationPluginData";
+
+export enum MenuTypes {
+  drawer = "DRAWER",
+  bottomTabBar = "BOTTOM_TAB_BAR",
+}
+
+export const useNavigationType = (): MenuTypes => {
+  const navigationMenu = useNavigationPluginData();
+
+  return !navigationMenu ||
+    navigationMenu.navigation_type === "quick_brick_side_menu"
+    ? MenuTypes.drawer
+    : MenuTypes.bottomTabBar;
+};

package/reactHooks/navigation/usePathname.ts

@@ -0,0 +1,4 @@
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import React from "react";
+
+export const usePathname = () => React.useContext(PathnameContext);

package/reactHooks/navigation/useRoute.ts

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint max-len: off */
+
+import { useContext } from "react";
+
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
+
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+import { getTargetScreenData } from "../screen/useTargetScreenData";
+
+import { useNavigation } from "./useNavigation";
+import { useModalStore } from "../../modalState";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { usePathname } from "./usePathname";
+
+// starts with modal/
+const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
+
+const isVideoModalPathname = (pathname: string) =>
+  /^video-modal\//.test(pathname);
+
+const isHookModalPathname = (pathname: string) =>
+  /^hooks-modal\//.test(pathname);
+
+const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useRoute = (): {
+  screenData: VariousScreenData;
+  pathname: string;
+} => {
+  const pathname = usePathname() || "";
+  const navigator = useNavigation();
+
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
+
+  const { plugins, contentTypes, rivers } = usePickFromState([
+    "plugins",
+    "rivers",
+    "contentTypes",
+  ]);
+
+  const { modalState } = useModalStore();
+  const hookModalState = useZappHooksModalState();
+
+  const modalScreenData = modalState.screen;
+
+  const hookModalScreenData = hookModalState.state.screenData?.payload;
+
+  const videoModalScreenData =
+    navigator?.videoModalState?.item &&
+    legacyScreenData(
+      {
+        entry: navigator.videoModalState?.item as ZappEntry,
+        screen: getTargetScreenData(
+          navigator.videoModalState?.item as ZappEntry,
+          rivers,
+          contentTypes
+        ),
+      },
+      plugins
+    );
+
+  // There are 4 route scenarios
+  // For regular screens take date from navigator stack.
+  // is path is model grab screenData from modal state
+  // if path is video modal grab screenData from video state
+  // if path is hook modal grab screenData from hook state
+  // if path is hook grab screenData from screenData
+
+  if (isModalPathname(pathname)) {
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
+  }
+
+  if (isVideoModalPathname(pathname)) {
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
+  }
+
+  if (isHookModalPathname(pathname)) {
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
+  }
+
+  if (isHookPathname(pathname)) {
+    return { screenData: screenDataContext, pathname };
+  }
+
+  const screenData = screenDataContext;
+
+  return { screenData, pathname };
+};

package/reactHooks/navigation/useUniqueRouteSuffix.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { isWeb } from "../../reactUtils";
+import { useNavigation } from "./useNavigation";
+import { usePathname } from "./usePathname";
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
+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/player/TVSeekControlller/LongPressSeekController.ts

@@ -13,7 +13,6 @@ interface LongPressConfig {
 }
 
 export class LongPressSeekController implements ISeekController {
-  isLongPressActive = false;
   private subscription: Subscription | null = null;
   readonly title = "LongPressSeek";
   constructor(
@@ -29,8 +28,6 @@ export class LongPressSeekController implements ISeekController {
 
     this.seekControllerDelegate.handlePlayerPause();
 
-    this.isLongPressActive = true;
-
     this.subscription = interval(this.config.TIMER_INTERVAL_MS)
       .pipe(
         tap(() => {
@@ -56,11 +53,11 @@ export class LongPressSeekController implements ISeekController {
   }
 
   onSeekEnd() {
+    this.cleanUpSubscription();
     this.seekControllerDelegate.handleSeekComplete();
   }
 
   reset() {
-    this.isLongPressActive = false;
     this.seekIncrementalStrategy.reset();
     this.cleanUpSubscription();
   }

package/reactHooks/player/TVSeekControlller/TVSeekController.ts

@@ -32,10 +32,10 @@ const CONFIG_LONG_PRESS = {
 
 const LONG_PRESS_THRESHOLD = 500;
 const SEEK_END_TIMEOUT_DURATION = 700;
+// prettier-ignore
 
 export class TVSeekController
-  implements SeekKeyHandlerListener, ISeekControllerDelegate
-{
+  implements SeekKeyHandlerListener, ISeekControllerDelegate {
   public delayedSeekPosition: number | null = null;
   private readonly playerController: Player;
   private delayedSeekProgressSubject = new BehaviorSubject<number | null>(null);
@@ -117,8 +117,8 @@ export class TVSeekController
   };
 
   onSeekEnd = () => {
+    this.clearLongPressThresholdTimeout();
     this.currentSeekController.onSeekEnd();
-    this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
   };
 
   onRewindPressOut = () => {
@@ -129,13 +129,11 @@ export class TVSeekController
     this.onSeekEnd();
   };
 
-  public onVideoProgress = (position: number) => {
-    if (this.delayedSeekPosition) {
+  onVideoProgress = (position: number) => {
+    if (this.delayedSeekPosition !== null) {
       return;
     }
 
-    // TODO: If 1 second after seek, send
-
     this.delayedSeekProgressSubject.next(position);
   };
 
@@ -143,7 +141,9 @@ export class TVSeekController
     this.handlePlayerPause();
 
     const currentPos =
-      this.delayedSeekPosition || this.playerController.getPosition();
+      this.delayedSeekPosition === null
+        ? this.playerController.getPosition()
+        : this.delayedSeekPosition;
 
     let targetPos = currentPos;
 
@@ -199,10 +199,6 @@ export class TVSeekController
 
     this.seekEndTimeout = setTimeout(() => {
       if (this.delayedSeekPosition !== null) {
-        // const offset = Math.abs(
-        //   this.playerController.getPosition() - this.delayedSeekPosition
-        // );
-
         this.handleSeekTo(this.delayedSeekPosition);
       }
 
@@ -214,8 +210,8 @@ export class TVSeekController
     }, SEEK_END_TIMEOUT_DURATION);
   };
 
-  isAutoSeeking = (): boolean => {
-    return this.longPressSeekController.isLongPressActive;
+  isSeeking = (): boolean => {
+    return this.delayedSeekPosition !== null;
   };
 
   handlePlayerPause = () => {