@applicaster/zapp-react-native-utils 13.0.0-alpha.5428512514 → 13.0.0-alpha.5771418585

package/focusManager/FocusManager.ts

@@ -250,7 +250,17 @@ class FocusManager {
   }
 
   onDisableFocusChange = (id) => {
-    if (FocusManager.instance.isFocused(id)) {
+    const isFocused = FocusManager.instance.isFocused(id);
+
+    const isDescendantFocused = (() => {
+      try {
+        return FocusManager.instance.isAnyDescendantFocused(id);
+      } catch (_e) {
+        return false;
+      }
+    })();
+
+    if (isFocused || isDescendantFocused) {
       // Move focus to next one
       const nextFocus = FocusManager.instance.focused?.props
         ?.nextFocusDown as string;

package/idleUtils/__tests__/withTimeout$.test.ts

@@ -0,0 +1,37 @@
+import { TestScheduler } from "rxjs/testing";
+
+import { withTimeout$ } from "..";
+
+describe("withTimeout$", () => {
+  let testScheduler: TestScheduler;
+
+  beforeEach(() => {
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  it("should emit undefined after the specified timeout", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 1000;
+      const expectedMarble = "1s (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+
+  it("should complete after emitting undefined", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 500;
+      const expectedMarble = "500ms (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+});

package/idleUtils/index.ts

@@ -1,4 +1,4 @@
-export { withTimeout } from "./withTimeout";
+export { withTimeout, withTimeout$ } from "./withTimeout";
 
 export { onIdle } from "./onIdle";
 

package/idleUtils/withTimeout.ts

@@ -1,7 +1,20 @@
-export const withTimeout = (timeout: number) => {
-  return new Promise((resolve) => {
+import { of, Observable } from "rxjs";
+import { delay } from "rxjs/operators";
+
+export const withTimeout = (timeout: number): Promise<void> => {
+  return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve(undefined);
     }, timeout);
   });
 };
+
+/**
+ * Creates an observable that emits a single value after a specified timeout.
+ *
+ * @param timeout - The delay duration in milliseconds before emitting the value.
+ * @returns An observable that emits `undefined` after the specified timeout.
+ */
+export const withTimeout$ = (timeout: number): Observable<void> => {
+  return of(undefined).pipe(delay(timeout));
+};

package/logger/const.ts

@@ -1,6 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
-import * as R from "ramda";
-
 enum XRayLogLevel {
   verbose = 0,
   debug = 1,
@@ -11,51 +8,9 @@ enum XRayLogLevel {
   off = 100,
 }
 
-enum ToastLogLevel {
-  off = "off",
-  verbose = "verbose",
-  debug = "debug",
-  info = "info",
-  warning = "warning",
-  error = "error",
-}
-
-const toastLevelToLogLevel = (toastLogLevel: ToastLogLevel): XRayLogLevel => {
-  if (R.isNil(toastLogLevel)) {
-    return XRayLogLevel.off;
-  }
-
-  switch (toastLogLevel) {
-    case ToastLogLevel.verbose:
-      return XRayLogLevel.verbose;
-    case ToastLogLevel.debug:
-      return XRayLogLevel.debug;
-    case ToastLogLevel.info:
-      return XRayLogLevel.info;
-    case ToastLogLevel.error:
-      return XRayLogLevel.error;
-    default:
-      return XRayLogLevel.off;
-  }
-};
-
-const PLUGIN_IDENTIFIER = "xray_logging_plugin";
-
-const wrapInObject = (obj, name) => {};
-
-const applyConditions = (wrappedObj) => {};
-
-const sanitizeEventPayload = () => {};
+const wrapInObject = (_ctx: unknown, _key: string) => {};
 
-const __isRunningRepoTests = () => {};
-
-const isWeb = () => {};
-
-const isDOMApp = () => {};
-
-const isBrowser = () => {};
-
-const eventAllowed = () => {};
+const applyConditions = (_fn: unknown) => {};
 
 /**
  * This is the mocked version of XRayLogger
@@ -90,34 +45,21 @@ export default class XRayLogger {
     );
   };
 
-  log = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  log = (_event) => {};
 
-  debug = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  debug = (_event) => {};
 
-  info = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  info = (_event) => {};
 
-  warning = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  warning = (_event) => {};
 
-  warn = (event: string | XRayEventData) => {
+  warn = (_event) => {
     this.warning(event);
   };
 
-  error = (event: Error | XRayEventData) => {
-    const logEvent: XRayEventData =
-      event instanceof Error
-        ? { exception: event as Error, message: event.message }
-        : (event as XRayEventData);
-  };
+  error = (_event) => {};
 
-  sendEvent = (event, eventData) => {};
+  sendEvent = (_event, _eventData) => {};
 
   // To be used by QuickBrick Hook events
   sendAudienceEvent = (event, eventData = null) => {

package/manifestUtils/__tests__/createConfig.test.js

@@ -78,8 +78,6 @@ describe("createConfig", () => {
       extend: "styles",
     })(props);
 
-    console.log(mockGenerators.styles.mock.calls);
-
     expect(mockGenerators.styles).toBeCalledWith(props);
   });
 

package/navigationUtils/index.ts

@@ -644,8 +644,8 @@ export const getScreenId = (
   fallbackRiver: ZappRiver
 ) => {
   return screenData?.targetScreen
-    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    ? (screenData?.targetScreen?.id ?? fallbackRiver.id)
     : "screen_id" in screenData
-    ? screenData.screen_id
-    : fallbackRiver.id;
+      ? screenData.screen_id
+      : fallbackRiver.id;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.5428512514",
+  "version": "13.0.0-alpha.5771418585",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.5428512514",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5771418585",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/cell-click/__tests__/index.test.js

@@ -25,6 +25,11 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
   }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useTargetScreenData: jest.fn(() => ({})),
+  useCurrentScreenData: jest.fn(() => ({})),
+}));
+
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   ...jest.requireActual(
     "@applicaster/zapp-react-native-ui-components/Contexts"

package/reactHooks/cell-click/index.ts

@@ -16,6 +16,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
+import { useCurrentScreenData } from "../screen";
 
 /**
  * If onCellTap is defined execute the function and
@@ -44,6 +45,7 @@ export const useCellClick = ({
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const screenData = useCurrentScreenData();
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -78,7 +80,10 @@ export const useCellClick = ({
       logOnPress(selectedItem, pathname, component, onCellTap);
 
       if (selectedItem) {
-        await actionExecutor?.handleEntryActions(selectedItem);
+        await actionExecutor?.handleEntryActions(selectedItem, {
+          component,
+          screenData,
+        });
       }
 
       if (selectedItem?.type?.value === "action") {
@@ -111,6 +116,7 @@ export const useCellClick = ({
       pathname,
       push,
       sendAnalyticsOnPress,
+      screenData,
     ]
   );
 

package/reactHooks/feed/useFeedLoader.tsx

@@ -87,7 +87,7 @@ export const useFeedLoader = ({
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data]);
+  }, [callableFeedUrl, currentFeed?.data?.next]);
 
   useEffect(() => {
     if (

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -121,10 +123,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +158,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +256,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

package/reactHooks/navigation/useGetTabBarHeight.ts

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

package/reactHooks/navigation/useProfilerLogging.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );

package/reactHooks/player/TVSeekControlller/TVSeekController.ts

@@ -23,7 +23,7 @@ export enum SEEK_STRATEGY {
 }
 
 const CONFIG_TAP_SEEK = {
-  CLICKS_BEFORE_PAUSE: 0,
+  CLICKS_BEFORE_PAUSE: 1,
 };
 
 const CONFIG_LONG_PRESS = {
@@ -93,6 +93,8 @@ export class TVSeekController
       this.isPlayerInitiallyPaused = this.playerController.isPaused();
     }
 
+    log_debug(`handleStartSeek: seekType: ${seekType}, initiallyPaused: ${this.isPlayerInitiallyPaused}, isPlayerPaused: ${this.playerController.isPaused()}`);
+
     this.clearLongPressThresholdTimeout();
     this.clearSeekCompleteTimeout();
     this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
@@ -105,27 +107,36 @@ export class TVSeekController
   };
 
   onForwardPress = (): boolean => {
+    log_debug("onForwardPress:");
+
     this.handleStartSeek(SEEK_TYPE.FORWARD);
 
     return true;
   };
 
   onRewindPress = (): boolean => {
+    log_debug("onRewindPress:");
+
     this.handleStartSeek(SEEK_TYPE.REWIND);
 
     return true;
   };
 
   onSeekEnd = () => {
+    log_debug("onSeekEnd: Seek ended");
     this.clearLongPressThresholdTimeout();
     this.currentSeekController.onSeekEnd();
   };
 
   onRewindPressOut = () => {
+    log_debug("onRewindPressOut:");
+
     this.onSeekEnd();
   };
 
   onForwardPressOut = () => {
+    log_debug("onForwardPressOut:");
+
     this.onSeekEnd();
   };
 
@@ -138,7 +149,9 @@ export class TVSeekController
   };
 
   handleDelayedSeek = (offset: number = 0) => {
-    this.handlePlayerPause();
+    if (this.delayedSeekPosition === null) {
+      void this.handlePlayerPause();
+    }
 
     const currentPos =
       this.delayedSeekPosition === null
@@ -174,36 +187,46 @@ export class TVSeekController
       }
     }
 
+    log_debug(`handleDelayedSeek: currentPos: ${currentPos} targetPos:${targetPos}, initiallyPaused: ${this.isPlayerInitiallyPaused}`);
+
     this.delayedSeekPosition = targetPos;
     this.delayedSeekProgressSubject.next(targetPos);
   };
 
-  handleSeekTo = (newPosition: number) => {
-    this.playerController.seekTo(newPosition);
+  handleSeekTo = async (newPosition: number) => {
+    await this.playerController.seekTo(newPosition);
+
+    log_debug(
+      `handleSeekTo: isPlayerInitiallyPaused: ${this.isPlayerInitiallyPaused}  CallPlayerPlay: ${this.isPlayerInitiallyPaused ? "NO" : "YES"}`
+    );
 
     if (!this.isPlayerInitiallyPaused) {
-      this.playerController.play();
+      await this.playerController.play();
     }
   };
 
-  handleSeek = (offset: number) => {
-    this.playerController[this.currentSeekType](offset);
+  handleSeek = async (offset: number) => {
+    await this.playerController[this.currentSeekType](offset);
+
+    log_debug(
+      `handleSeek: isPlayerInitiallyPaused: ${this.isPlayerInitiallyPaused} CallPlayerPlay: ${this.isPlayerInitiallyPaused ? "NO" : "YES"}`
+    );
 
     if (!this.isPlayerInitiallyPaused) {
-      this.playerController.play();
+      await this.playerController.play();
     }
   };
 
   handleSeekComplete = () => {
     this.clearSeekCompleteTimeout();
 
-    this.seekEndTimeout = setTimeout(() => {
+    this.seekEndTimeout = setTimeout(async () => {
       if (this.delayedSeekPosition !== null) {
-        this.handleSeekTo(this.delayedSeekPosition);
+        await this.handleSeekTo(this.delayedSeekPosition);
       }
 
       log_debug(
-        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}. Reset all states and seek position.`
+        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}, playerPaused: ${this.playerController.isPaused()}. Reset all states and seek position.`
       );
 
       this.resetAll();
@@ -214,12 +237,16 @@ export class TVSeekController
     return this.delayedSeekPosition !== null;
   };
 
-  handlePlayerPause = () => {
+  handlePlayerPause = async () => {
+    log_debug(
+      `handleSeek: handlePlayerPause isPlayerPaused: ${this.playerController.isPaused()}`
+    );
+
     if (this.playerController.isPaused()) {
       return;
     }
 
-    this.playerController.pause();
+    await this.playerController.pause();
   };
 
   clearSeekCompleteTimeout = () => {

package/reactHooks/player/TVSeekControlller/TapSeekController.ts

@@ -12,6 +12,8 @@ interface TapPressConfig {
 
 export class TapSeekController implements ISeekController {
   readonly title = "TapSeek";
+  private lastFastSeekExit = 0;
+
   constructor(
     private seekControllerDelegate: ISeekControllerDelegate,
     private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
@@ -23,13 +25,18 @@ export class TapSeekController implements ISeekController {
 
     const skipTime = this.seekIncrementalStrategy.getSkipTime();
     const seekMultiplier = this.seekIncrementalStrategy.getSkipMultiplier();
+    const cooldown = Date.now() - this.lastFastSeekExit > 1000;
 
     if (seekMultiplier > this.config.CLICKS_BEFORE_PAUSE) {
       log_debug(
         `${this.title}: handle delayed seek type:${seekType} - skipTime: ${skipTime}, seekMultiplier: ${seekMultiplier}.`
       );
 
-      this.seekControllerDelegate.handleDelayedSeek(skipTime);
+      if (cooldown) {
+        this.seekControllerDelegate.handleDelayedSeek(skipTime);
+      } else {
+        this.seekControllerDelegate.handleSeek(skipTime);
+      }
     } else {
       log_debug(
         `${this.title}: handle seek type:${seekType} - skipTime: ${skipTime}.`
@@ -46,8 +53,8 @@ export class TapSeekController implements ISeekController {
   };
 
   reset = () => {
-    log_debug("{this.title}: Reset states");
-
+    log_debug(`${this.title}: Reset states`);
+    this.lastFastSeekExit = Date.now();
     this.seekIncrementalStrategy.reset();
   };
 }

package/reactHooks/state/useRefWithInitialValue.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+/**
+ * returns a ref with an initial value that is lazily evaluated once
+ * */
+export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
+  const ref = React.useRef<T>(null);
+
+  if (ref.current === null) {
+    ref.current = initialValueGetter();
+  }
+
+  return ref;
+};

package/reactHooks/state/useStateFromSubscribe.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import type { Subject } from "rxjs";
+
+export const useStateFromSubscribe = <T, U>(
+  subject: Subject<T>,
+  onUpdate: (
+    observerValue: T,
+    next: React.Dispatch<React.SetStateAction<U>>
+  ) => void,
+  initialValue: U
+) => {
+  const [state, setState] = useState<U>(initialValue);
+
+  useEffect(() => {
+    const subscription = subject.subscribe((observer) =>
+      onUpdate(observer, setState)
+    );
+
+    return () => subscription.unsubscribe();
+  }, [subject]);
+
+  return state;
+};

package/reactHooks/usePluginConfiguration.ts

@@ -91,7 +91,7 @@ export function useLayoutConfiguration<
   S extends unknown,
   G extends unknown,
   R extends unknown,
-  L extends unknown
+  L extends unknown,
 >(layoutData, manifest, options: Options = {}) {
   const keys = options.keys || [
     "assets",

package/reactHooks/useSubscriberFor.ts

@@ -4,9 +4,10 @@ import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
 const subscriberObjects = Object.create({});
 
 interface UseSubscriberFor {
-  (eventName: string, handler?: (...args: unknown[]) => void): (
-    ...args: unknown[]
-  ) => ReturnType<typeof subscriber>;
+  (
+    eventName: string,
+    handler?: (...args: unknown[]) => void
+  ): (...args: unknown[]) => ReturnType<typeof subscriber>;
 }
 
 /**