@applicaster/zapp-react-native-utils 13.0.0-alpha.3334148221 → 13.0.0-alpha.3755455151

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/ISeekController.ts

@@ -0,0 +1,32 @@
+import { MAX_SEEK_TIME, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
+
+export interface ISeekControllerDelegate {
+  handleDelayedSeek(offset: number): void;
+  handleSeek(offset: number): void;
+  handleSeekComplete(): void;
+  handlePlayerPause(): void;
+}
+
+export interface ISeekController {
+  title: string;
+  onStartSeek(seekType: SEEK_TYPE): void;
+  onSeekEnd(): void;
+  reset(): void;
+}
+
+export class SeekIncrementalBaseStrategy {
+  private skipMultiplier = 1;
+
+  getSkipTime = () =>
+    Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * this.skipMultiplier);
+
+  increment = () => {
+    this.skipMultiplier++;
+  };
+
+  getSkipMultiplier = () => this.skipMultiplier;
+
+  reset = () => {
+    this.skipMultiplier = 1;
+  };
+}

package/reactHooks/player/TVSeekControlller/LongPressSeekController.ts

@@ -0,0 +1,71 @@
+import {
+  ISeekController,
+  ISeekControllerDelegate,
+  SeekIncrementalBaseStrategy,
+} from "./ISeekController";
+import { SEEK_TYPE } from "../const";
+import { log_debug, log_error, log_verbose } from "./TVSeekController";
+import { interval, Subscription } from "rxjs";
+import { tap } from "rxjs/operators";
+
+interface LongPressConfig {
+  TIMER_INTERVAL_MS: number;
+}
+
+export class LongPressSeekController implements ISeekController {
+  private subscription: Subscription | null = null;
+  readonly title = "LongPressSeek";
+  constructor(
+    private seekControllerDelegate: ISeekControllerDelegate,
+    private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
+    private config: LongPressConfig
+  ) {}
+
+  onStartSeek(seekType: SEEK_TYPE) {
+    this.cleanUpSubscription();
+
+    log_debug(`${this.title}: start long press seek type: ${seekType}.`);
+
+    this.seekControllerDelegate.handlePlayerPause();
+
+    this.subscription = interval(this.config.TIMER_INTERVAL_MS)
+      .pipe(
+        tap(() => {
+          this.seekControllerDelegate.handleDelayedSeek(
+            this.seekIncrementalStrategy.getSkipTime()
+          );
+
+          log_debug(
+            `${
+              this.title
+            }: handle delayed seek type: ${seekType} - multiplier: ${this.seekIncrementalStrategy.getSkipMultiplier()}, currentSkipAmount: ${this.seekIncrementalStrategy.getSkipTime()}.`
+          );
+
+          this.seekIncrementalStrategy.increment();
+        })
+      )
+      .subscribe({
+        complete: () =>
+          log_verbose(`${this.title}: Long press subscription complete`),
+        error: (err) =>
+          log_error(`${this.title}: Long press subscription error`, err),
+      });
+  }
+
+  onSeekEnd() {
+    this.cleanUpSubscription();
+    this.seekControllerDelegate.handleSeekComplete();
+  }
+
+  reset() {
+    this.seekIncrementalStrategy.reset();
+    this.cleanUpSubscription();
+  }
+
+  private cleanUpSubscription() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = null;
+    }
+  }
+}