@applicaster/zapp-react-native-utils 13.0.0-alpha.7210171818 → 13.0.0-alpha.7330390362

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,10 @@
+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,
+    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

@@ -1,7 +1,32 @@
-import { SEEK_TYPE } from "../const";
+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;
+  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

@@ -1,99 +1,64 @@
-import { ISeekController } from "./ISeekController";
-import { SEEK_TYPE } from "../const";
 import {
-  log_debug,
-  log_error,
-  log_verbose,
-  TVSeekController,
-} from "./TVSeekController";
+  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";
 
-/**
- * Example interface for the configuration needed for long-press seeking.
- */
 interface LongPressConfig {
-  LONG_PRESS_THRESHOLD: number; // ms
-  TIMER_INTERVAL_MS: number; // ms
-  SKIP_INCREMENT_STEP: number; // seconds
-  MAX_SKIP_PER_TICK: number; // seconds
-  INITIAL_SKIP_AMOUNT: number; // e.g., 10s to start
+  TIMER_INTERVAL_MS: number;
 }
 
 export class LongPressSeekController implements ISeekController {
-  private pressStartTime = 0;
-  private isLongPressActive = false;
-  private currentSkipAmount = 0;
   private subscription: Subscription | null = null;
-
+  readonly title = "LongPressSeek";
   constructor(
-    private parent: TVSeekController,
+    private seekControllerDelegate: ISeekControllerDelegate,
+    private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
     private config: LongPressConfig
   ) {}
 
   onStartSeek(seekType: SEEK_TYPE) {
     this.cleanUpSubscription();
 
-    log_debug(
-      `LongPressSeekController: start long press seek type:${seekType}.`
-    );
-
-    this.parent.currentSeekType = seekType;
-    this.parent.pausePlayer();
-
-    this.pressStartTime = Date.now();
-    this.isLongPressActive = true;
-    this.currentSkipAmount = this.config.INITIAL_SKIP_AMOUNT;
-
-    // Start the interval immediately without waiting for a threshold.
-    this.subscription = interval(this.config.TIMER_INTERVAL_MS).pipe(
-      tap(() => {
-        this.parent.handleDelayedSeek(
-          this.parent.currentSeekType,
-          this.currentSkipAmount
-        );
-
-        log_debug(
-          `LongPressSeekController: handle delayed seek type: ${seekType} - currentSkipAmount: ${this.currentSkipAmount}.`
-        );
-
-        this.currentSkipAmount = Math.min(
-          this.currentSkipAmount + this.config.SKIP_INCREMENT_STEP,
-          this.config.MAX_SKIP_PER_TICK
-        );
-      })
-    ).subscribe({
-      complete: () =>
-        log_verbose("LongPressSeekController: Long press subscription complete"),
-      error: (err) =>
-        log_error("LongPressSeekController: Long press subscription error", err),
-    });
+    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() {
-    const pressDuration = Date.now() - this.pressStartTime;
-
-    if (
-      this.isLongPressActive &&
-      pressDuration > this.config.LONG_PRESS_THRESHOLD
-    ) {
-      const offset = this.parent.delayedSeekOffset;
-
-      if (offset) {
-        log_debug(
-          `LongPressSeekController: onPressEnd for LongPressSeekController, seek offset: ${offset}`
-        );
-
-        this.parent.seekPlayer(offset);
-      }
-    }
-
-    this.parent.resetAll();
+    this.cleanUpSubscription();
+    this.seekControllerDelegate.handleSeekComplete();
   }
 
   reset() {
-    this.isLongPressActive = false;
-    this.currentSkipAmount = 0;
+    this.seekIncrementalStrategy.reset();
     this.cleanUpSubscription();
   }