@applicaster/zapp-react-native-utils 14.0.0-alpha.4111088201 → 14.0.0-alpha.4385101226

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/actionsExecutor/ActionExecutorContext.tsx +1 -1
  2. package/analyticsUtils/AnalyticsEvents/helper.ts +81 -0
  3. package/analyticsUtils/AnalyticsEvents/sendOnClickEvent.ts +14 -4
  4. package/analyticsUtils/__tests__/analyticsUtils.test.js +14 -0
  5. package/analyticsUtils/events.ts +8 -0
  6. package/appUtils/HooksManager/Hook.ts +4 -4
  7. package/appUtils/HooksManager/index.ts +11 -1
  8. package/appUtils/accessibilityManager/index.ts +5 -5
  9. package/appUtils/focusManager/treeDataStructure/Tree/index.js +1 -1
  10. package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts +0 -15
  11. package/appUtils/playerManager/useChapterMarker.tsx +0 -1
  12. package/appUtils/playerManager/usePlayerControllerSetup.tsx +16 -0
  13. package/arrayUtils/index.ts +1 -1
  14. package/componentsUtils/__tests__/isTabsScreen.test.ts +38 -0
  15. package/componentsUtils/index.ts +4 -1
  16. package/configurationUtils/__tests__/manifestKeyParser.test.ts +547 -0
  17. package/configurationUtils/manifestKeyParser.ts +57 -32
  18. package/focusManager/FocusManager.ts +26 -16
  19. package/focusManager/Tree.ts +25 -21
  20. package/focusManager/__tests__/FocusManager.test.ts +50 -8
  21. package/index.d.ts +0 -9
  22. package/manifestUtils/defaultManifestConfigurations/player.js +8 -0
  23. package/navigationUtils/__tests__/mapContentTypesToRivers.test.ts +130 -0
  24. package/navigationUtils/index.ts +6 -4
  25. package/package.json +2 -3
  26. package/playerUtils/getPlayerActionButtons.ts +1 -1
  27. package/playerUtils/index.ts +51 -0
  28. package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx +3 -1
  29. package/reactHooks/feed/useBatchLoading.ts +9 -7
  30. package/reactHooks/feed/useFeedLoader.tsx +12 -8
  31. package/reactHooks/feed/usePipesCacheReset.ts +3 -3
  32. package/reactHooks/flatList/useSequentialRenderItem.tsx +3 -3
  33. package/reactHooks/layout/__tests__/index.test.tsx +3 -1
  34. package/reactHooks/layout/isTablet/index.ts +12 -5
  35. package/reactHooks/layout/useDimensions/__tests__/useDimensions.test.ts +34 -36
  36. package/reactHooks/layout/useDimensions/useDimensions.ts +2 -3
  37. package/reactHooks/layout/useLayoutVersion.ts +5 -5
  38. package/reactHooks/navigation/index.ts +7 -5
  39. package/reactHooks/navigation/useIsScreenActive.ts +9 -5
  40. package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx +4 -0
  41. package/reactHooks/screen/useScreenContext.ts +1 -1
  42. package/reactHooks/state/__tests__/ZStoreProvider.test.tsx +2 -1
  43. package/reactHooks/state/useRivers.ts +7 -8
  44. package/riverComponetsMeasurementProvider/index.tsx +1 -1
  45. package/services/js2native.ts +1 -0
  46. package/time/BackgroundTimer.ts +6 -4
  47. package/utils/index.ts +5 -0
@@ -1,21 +1,28 @@
1
1
  import { NativeModules, Platform } from "react-native";
2
2
 
3
+ export const isAndroidTablet = () => {
4
+ const { initialProps } = NativeModules.QuickBrickCommunicationModule;
5
+
6
+ return initialProps?.is_tablet;
7
+ };
8
+
3
9
  /**
4
10
  * Determines wether the given device is a tablet based on dimensions, orientation, and platform
5
11
  * @param {Object} dimensions - Dimensions object passed to the function
6
12
  * @param {String} orientation - Orientation enum passed to the function
7
13
  * @returns {Boolean} isTablet - returns whether the given device is a tablet
8
14
  */
9
- export const isTablet = (dimensions, orientation) => {
15
+ export const isTablet = (
16
+ dimensions?: { width: number; height: number },
17
+ orientation?: string
18
+ ) => {
10
19
  if (Platform?.OS === "ios") {
11
20
  return Platform?.isPad;
12
21
  } else if (Platform?.OS === "android") {
13
- const { initialProps } = NativeModules.QuickBrickCommunicationModule;
14
-
15
- return initialProps?.is_tablet;
22
+ return isAndroidTablet();
16
23
  }
17
24
 
18
- const { width } = dimensions;
25
+ const { width } = dimensions || {};
19
26
 
20
27
  if (width < 600) return false;
21
28
  if (width >= 600 && width < 840) return orientation === "portrait";
@@ -1,46 +1,48 @@
1
1
  import { renderHook } from "@testing-library/react-hooks";
2
2
  import { Dimensions, StatusBar } from "react-native";
3
+ import { useDimensions } from "../useDimensions";
4
+ import { usePickFromState } from "@applicaster/zapp-react-native-redux";
3
5
 
4
- const mockUsePickFromState = jest.fn();
5
- const mockUseIsScreenActive = jest.fn();
6
- const mockGetInitialDimensions = jest.fn();
7
- const mockGetDeviceInfo = jest.fn();
6
+ import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
8
7
 
9
- jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
10
- ...(jest.requireActual("@applicaster/zapp-react-native-redux/hooks") as {}),
11
- usePickFromState: mockUsePickFromState,
12
- }));
13
-
14
- jest.mock("../../../navigation", () => ({
15
- useIsScreenActive: mockUseIsScreenActive,
16
- }));
8
+ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
9
+ return {
10
+ ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
11
+ usePickFromState: jest.fn(),
12
+ };
13
+ });
17
14
 
18
- jest.mock("../helpers", () => ({
19
- getInitialDimensions: mockGetInitialDimensions,
15
+ jest.mock(
16
+ "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
17
+ () => ({
18
+ useIsScreenActive: jest.fn().mockReturnValue(true),
19
+ })
20
+ );
21
+
22
+ jest.doMock("../helpers", () => ({
23
+ getInitialDimensions: jest
24
+ .fn()
25
+ .mockReturnValue({ width: 100, height: 200, scale: 1, fontScale: 1 }),
20
26
  }));
21
27
 
22
28
  jest.mock("../../getDeviceInfo", () => ({
23
- getDeviceInfo: mockGetDeviceInfo,
29
+ getDeviceInfo: jest.fn().mockReturnValue({ deviceInfo: "testDeviceInfo" }),
24
30
  }));
25
31
 
26
- const { useDimensions } = require("../useDimensions");
32
+ const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
33
+
34
+ Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
35
+
36
+ Dimensions.addEventListener = jest.fn().mockReturnValue({
37
+ remove: jest.fn(),
38
+ });
27
39
 
28
40
  describe("useDimensions", () => {
29
- const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
30
41
  const mockAppData = { someData: "test" };
31
42
 
32
43
  beforeEach(() => {
33
- jest.clearAllMocks();
34
- Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
35
-
36
- Dimensions.addEventListener = jest.fn().mockReturnValue({
37
- remove: jest.fn(),
38
- });
39
-
40
- mockUsePickFromState.mockReturnValue({ appData: mockAppData });
41
- mockUseIsScreenActive.mockReturnValue(true);
42
- mockGetInitialDimensions.mockReturnValue(mockDimensions);
43
- mockGetDeviceInfo.mockReturnValue({ deviceInfo: "testDeviceInfo" });
44
+ StatusBar.currentHeight = 20;
45
+ (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
44
46
  });
45
47
 
46
48
  it("returns correct initial dimensions", () => {
@@ -48,12 +50,9 @@ describe("useDimensions", () => {
48
50
  useDimensions("window", { fullDimensions: false })
49
51
  );
50
52
 
51
- expect(result.current).toEqual({
52
- ...mockDimensions,
53
+ expect(result.current).toMatchObject({
53
54
  statusBarHeight: StatusBar.currentHeight,
54
55
  });
55
-
56
- expect(mockGetInitialDimensions).toHaveBeenCalledWith("window");
57
56
  });
58
57
 
59
58
  it("calls handler on mount", () => {
@@ -70,7 +69,7 @@ describe("useDimensions", () => {
70
69
  useDimensions("window", { fullDimensions: false })
71
70
  );
72
71
 
73
- mockUseIsScreenActive.mockReturnValue(false);
72
+ (useIsScreenActive as jest.Mock).mockReturnValue(false);
74
73
  rerender();
75
74
 
76
75
  expect(Dimensions.addEventListener).toHaveBeenCalledWith(
@@ -84,8 +83,7 @@ describe("useDimensions", () => {
84
83
  useDimensions("window", { fullDimensions: true })
85
84
  );
86
85
 
87
- expect(result.current).toEqual({
88
- ...mockDimensions,
86
+ expect(result.current).toMatchObject({
89
87
  scale: 1,
90
88
  fontScale: 1,
91
89
  statusBarHeight: StatusBar.currentHeight,
@@ -98,7 +96,7 @@ describe("useDimensions", () => {
98
96
  );
99
97
 
100
98
  expect(result.current.height).toBe(
101
- mockDimensions.height - StatusBar.currentHeight ?? 0
99
+ mockDimensions.height - (StatusBar?.currentHeight ?? 0)
102
100
  );
103
101
  });
104
102
 
@@ -10,7 +10,7 @@ import { isTV } from "../../../reactUtils";
10
10
  import { Options, UseDimensions } from "../types";
11
11
  import { getDeviceInfo } from "../getDeviceInfo";
12
12
  import { getInitialDimensions } from "./helpers";
13
- import { useIsScreenActive } from "../../navigation";
13
+ import { useIsScreenActive } from "../../navigation/useIsScreenActive";
14
14
 
15
15
  function compensateForScaleIfNeeded(context) {
16
16
  return function () {
@@ -24,8 +24,6 @@ const applyScaleToDimensions = R.unless(R.propEq("scale", 1), (dimensions) => ({
24
24
  scale: 1,
25
25
  }));
26
26
 
27
- const statusBarHeight = StatusBar?.currentHeight;
28
-
29
27
  /**
30
28
  * Returns React-native Dimensions object and updates it on any dimension change
31
29
  * @param {('screen'|'window')} [context=window] - Dimensions context passed to Dimensions.get method
@@ -37,6 +35,7 @@ export const useDimensions: UseDimensions = (
37
35
  context = "window",
38
36
  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
39
37
  ) => {
38
+ const statusBarHeight = StatusBar?.currentHeight;
40
39
  const isActive = useIsScreenActive();
41
40
  const { appData } = usePickFromState(["appData"]);
42
41
 
@@ -1,6 +1,8 @@
1
1
  /* eslint-disable no-redeclare */
2
- import { useSelector } from "react-redux";
3
- import * as R from "ramda";
2
+ import {
3
+ useAppSelector,
4
+ selectLayoutVersion,
5
+ } from "@applicaster/zapp-react-native-redux";
4
6
 
5
7
  export function useLayoutVersion(): ZappLayoutVersions;
6
8
 
@@ -23,9 +25,7 @@ export function useLayoutVersion({
23
25
  isV2?: boolean;
24
26
  isV1?: boolean;
25
27
  } = {}): boolean | ZappLayoutVersions {
26
- const layoutVersion = useSelector<any, ZappLayoutVersions>(
27
- R.path(["appData", "layoutVersion"])
28
- );
28
+ const layoutVersion = useAppSelector(selectLayoutVersion);
29
29
 
30
30
  if (isV2) {
31
31
  return layoutVersion === "v2";
@@ -14,7 +14,7 @@ import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
14
14
  import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
15
15
  import { useConnectionInfo } from "../connection";
16
16
 
17
- import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
17
+ import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
18
18
  import { useNavbarState } from "../screen";
19
19
 
20
20
  export { useNavigation } from "./useNavigation";
@@ -127,11 +127,13 @@ export function isNavBarVisible(
127
127
 
128
128
  export const useBackHandler = (cb: () => boolean) => {
129
129
  useEffect(() => {
130
- const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
130
+ if (!isWeb()) {
131
+ const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
131
132
 
132
- return () => {
133
- unsubscribe.remove();
134
- };
133
+ return () => {
134
+ unsubscribe.remove();
135
+ };
136
+ }
135
137
  }, [cb]);
136
138
  };
137
139
 
@@ -1,3 +1,4 @@
1
+ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
1
2
  import { useNavigation } from "./useNavigation";
2
3
  import { usePathname } from "./usePathname";
3
4
 
@@ -6,11 +7,14 @@ export const useIsScreenActive = () => {
6
7
  const pathname = usePathname();
7
8
  const { currentRoute, videoModalState } = useNavigation();
8
9
 
9
- if (
10
- videoModalState.visible &&
11
- ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
12
- ) {
13
- return false;
10
+ if (videoModalState.visible) {
11
+ if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
12
+ return true;
13
+ }
14
+
15
+ if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
16
+ return false;
17
+ }
14
18
  }
15
19
 
16
20
  return pathname === currentRoute;
@@ -14,6 +14,10 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
14
14
 
15
15
  jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
16
16
 
17
+ jest.mock(
18
+ "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
19
+ );
20
+
17
21
  const { useCellResolver } = require("../useCellResolver");
18
22
 
19
23
  describe("cellResolver", () => {
@@ -2,7 +2,7 @@ import { useContext, useMemo } from "react";
2
2
 
3
3
  import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
4
4
  import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
5
- import { useNavigation } from "../navigation/useNavigation";
5
+ import { useNavigation } from "../navigation";
6
6
 
7
7
  import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
8
8
  import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
@@ -1,7 +1,8 @@
1
+ /* eslint-disable no-console */
1
2
  import React from "react";
2
3
  import { render, screen } from "@testing-library/react-native";
3
4
  import { Text } from "react-native";
4
- import { ZStoreProvider, useZStore } from "../ZStoreProvider";
5
+ import { useZStore, ZStoreProvider } from "../ZStoreProvider";
5
6
  import { useStore } from "zustand";
6
7
 
7
8
  interface TestState {
@@ -1,9 +1,8 @@
1
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
1
+ import {
2
+ useAppSelector,
3
+ selectRivers,
4
+ } from "@applicaster/zapp-react-native-redux";
2
5
 
3
- const riversSelector = ["rivers"];
4
-
5
- export const useRivers = () => {
6
- const { rivers } = usePickFromState(riversSelector as any);
7
-
8
- return rivers;
9
- };
6
+ export function useRivers(): Record<string, ZappRiver> {
7
+ return useAppSelector(selectRivers);
8
+ }
@@ -3,7 +3,7 @@ import { NativeModules, StyleSheet, View } from "react-native";
3
3
  import { getXray } from "@applicaster/zapp-react-native-utils/logger";
4
4
 
5
5
  import { isApplePlatform, isWeb } from "../reactUtils";
6
- import { useRivers } from "../reactHooks/state";
6
+ import { useRivers } from "../reactHooks";
7
7
 
8
8
  const layoutReducer = (state, { payload }) => {
9
9
  return state.map((item, index, _state) => ({
@@ -496,6 +496,7 @@ async function removeStorageListenerHandler(payload: { listenerId?: string }) {
496
496
  function log({ level, messages }) {
497
497
  try {
498
498
  const parsedMessages = parseJsonIfNeeded(messages);
499
+ // eslint-disable-next-line no-console
499
500
  const logFn = console[level] || console.log;
500
501
 
501
502
  if (Array.isArray(parsedMessages)) {
@@ -11,15 +11,17 @@ class BackgroundTimer {
11
11
  this.uniqueId = 0;
12
12
  this.callbacks = {};
13
13
 
14
- const EventEmitter = platformSelect({
14
+ const EventEmitter: typeof DeviceEventEmitter | undefined = platformSelect({
15
15
  android: DeviceEventEmitter,
16
- ios: undefined,
16
+ android_tv: DeviceEventEmitter,
17
+ amazon: DeviceEventEmitter, // probably does not exist and uses android_tv
17
18
  default: undefined,
18
19
  });
19
20
 
20
21
  EventEmitter?.addListener("BackgroundTimer.timer.fired", (id: number) => {
21
- if (this.callbacks[id]) {
22
- const callback = this.callbacks[id];
22
+ const callback = this.callbacks[id];
23
+
24
+ if (callback) {
23
25
  delete this.callbacks[id];
24
26
  callback();
25
27
  }
package/utils/index.ts CHANGED
@@ -13,4 +13,9 @@ export {
13
13
  has,
14
14
  flatMap,
15
15
  difference,
16
+ take,
17
+ pick,
18
+ map,
19
+ trim,
20
+ toString,
16
21
  } from "lodash";