@applicaster/zapp-react-native-utils 13.0.0-alpha.3437883854 → 13.0.0-alpha.3454305619

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 (70) hide show
  1. package/README.md +0 -10
  2. package/analyticsUtils/AnalyticsEvents/sendHeaderClickEvent.ts +1 -1
  3. package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts +2 -1
  4. package/analyticsUtils/currentScreenProperities.ts +6 -4
  5. package/analyticsUtils/index.tsx +3 -4
  6. package/analyticsUtils/manager.ts +1 -1
  7. package/appUtils/HooksManager/Hook.ts +2 -2
  8. package/appUtils/HooksManager/index.ts +1 -1
  9. package/appUtils/HooksManager/types.ts +2 -2
  10. package/appUtils/accessibilityManager/index.ts +12 -19
  11. package/appUtils/contextKeysManager/contextResolver.ts +6 -2
  12. package/appUtils/contextKeysManager/index.ts +2 -2
  13. package/appUtils/contextKeysManager/utils/index.ts +2 -1
  14. package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap +1 -0
  15. package/appUtils/focusManager/index.ts +11 -12
  16. package/appUtils/keyCodes/index.ts +11 -7
  17. package/appUtils/orientationHelper.ts +0 -1
  18. package/appUtils/platform/platformUtils.ts +30 -3
  19. package/appUtils/playerManager/index.ts +1 -1
  20. package/appUtils/playerManager/player.ts +2 -2
  21. package/equalUtils/__tests__/isEqual/combination.test.ts +263 -0
  22. package/equalUtils/index.ts +49 -30
  23. package/focusManager/FocusManager.ts +11 -1
  24. package/focusManager/index.ts +41 -4
  25. package/functionUtils/index.ts +21 -8
  26. package/manifestUtils/__tests__/createConfig.test.js +0 -2
  27. package/manifestUtils/fonts/index.js +5 -6
  28. package/manifestUtils/sharedConfiguration/screenPicker/__tests__/utils.test.js +304 -0
  29. package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js +875 -0
  30. package/manifestUtils/sharedConfiguration/screenPicker/utils.js +130 -0
  31. package/navigationUtils/index.ts +3 -3
  32. package/numberUtils/index.ts +7 -5
  33. package/package.json +4 -9
  34. package/reactHooks/app/useAppState.ts +2 -2
  35. package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx +5 -7
  36. package/reactHooks/autoscrolling/useTrackedView.ts +12 -1
  37. package/reactHooks/feed/__tests__/useBatchLoading.test.tsx +39 -88
  38. package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js +1 -1
  39. package/reactHooks/layout/useDimensions/useDimensions.ts +8 -0
  40. package/reactHooks/navigation/__mocks__/useNavigation.ts +3 -0
  41. package/reactHooks/navigation/__tests__/index.test.tsx +6 -17
  42. package/reactHooks/navigation/index.ts +12 -24
  43. package/reactHooks/navigation/useGetTabBarHeight.ts +1 -3
  44. package/reactHooks/navigation/useProfilerLogging.ts +15 -0
  45. package/reactHooks/state/useRefWithInitialValue.ts +14 -0
  46. package/reactHooks/state/useStateFromSubscribe.ts +23 -0
  47. package/reactHooks/usePluginConfiguration.ts +1 -1
  48. package/reactHooks/useSubscriberFor.ts +4 -3
  49. package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap +16 -4
  50. package/reactUtils/__tests__/reactUtils.test.js +1 -19
  51. package/reactUtils/__tests__/reactUtilsHelpers.test.js +72 -71
  52. package/reactUtils/createContext/__tests__/__snapshots__/helpers.test.js.snap +6 -72
  53. package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap +3 -28
  54. package/reactUtils/createContext/__tests__/__snapshots__/withConsumer.test.js.snap +3 -4
  55. package/reactUtils/createContext/__tests__/__snapshots__/withProvider.test.js.snap +7 -3
  56. package/reactUtils/createContext/__tests__/helpers.test.js +107 -121
  57. package/reactUtils/createContext/__tests__/{index.test.js → index.test.ts} +2 -2
  58. package/reactUtils/createContext/__tests__/provider.test.js +4 -6
  59. package/reactUtils/createContext/__tests__/withConsumer.test.js +12 -12
  60. package/reactUtils/createContext/__tests__/withProvider.test.js +4 -4
  61. package/reactUtils/createContext/helpers.ts +6 -1
  62. package/reactUtils/createContext/index.ts +11 -25
  63. package/reactUtils/index.ts +0 -11
  64. package/screenState/index.ts +24 -10
  65. package/testUtils/index.tsx +7 -18
  66. package/theme/index.ts +1 -1
  67. package/time/Timer.ts +4 -1
  68. package/zappFrameworkUtils/presentPluginOneTime.ts +2 -3
  69. package/reactUtils/createContext/__tests__/index-no-react.test.js +0 -27
  70. /package/reactUtils/createContext/__tests__/__snapshots__/{index.test.js.snap → index.test.ts.snap} +0 -0
package/README.md CHANGED
@@ -376,16 +376,6 @@ useEffect(() => {
376
376
  }, []);
377
377
  ```
378
378
 
379
- ### testUtils
380
-
381
- `@applicaster/zapp-react-native-utils/testUtils`
382
-
383
- - `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
384
-
385
- ```javascript
386
- wrapper.findWhere(testIDEquals("text"));
387
- ```
388
-
389
379
  ### appUtils - contextKeysManager
390
380
 
391
381
  `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`
@@ -4,7 +4,7 @@ import { postAnalyticEvent } from "../manager";
4
4
  import { ANALYTICS_CORE_EVENTS } from "../events";
5
5
 
6
6
  type SendHeaderClickEventProps = {
7
- extraProps: ExtraProps;
7
+ extraProps: Record<string, any>;
8
8
  component?: ZappUIComponent;
9
9
  zappPipesData?: ZappPipesData;
10
10
  item?: ZappEntry;
@@ -1,10 +1,11 @@
1
+ /// <reference types="../../" />
1
2
  import { log_error, log_debug } from "../logger";
2
3
  import { replaceAnalyticsPropsNils } from "./helper";
3
4
  import { postAnalyticEvent } from "../manager";
4
5
 
5
6
  import { ANALYTICS_CORE_EVENTS } from "../events";
6
7
 
7
- declare type AnalyticsDefaultHelperProperties = {
8
+ type AnalyticsDefaultHelperProperties = {
8
9
  analyticsScreenData: AnalyticsScreenProperties;
9
10
  extraProps: any;
10
11
  props;
@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
72
72
  screenData
73
73
  ): AnalyticsScreenProperties => {
74
74
  return {
75
- screen_name: screenData?.targetScreen?.name,
75
+ screen_name: screenData?.targetScreen?.name || screenData?.name,
76
76
  screen_entry_title: screenData?.title,
77
77
  screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
78
- screen_layout_id: screenData?.targetScreen?.id,
79
- screen_type: screenData?.targetScreen?.type,
80
- home_screen: screenData?.targetScreen?.home,
78
+ screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
79
+ screen_type: screenData?.targetScreen?.type || screenData?.type,
80
+ home_screen: !R.isNil(screenData?.targetScreen?.home)
81
+ ? screenData?.targetScreen?.home
82
+ : screenData?.home,
81
83
  };
82
84
  };
83
85
 
@@ -1,4 +1,3 @@
1
- /// <reference types="@applicaster/zapp-react-native-utils" />
2
1
  import * as R from "ramda";
3
2
  import * as React from "react";
4
3
  import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
31
30
  import { noop } from "../functionUtils";
32
31
 
33
32
  type ComponentWithChildrenProps = {
34
- children: React.ReactChildren;
33
+ children: React.ReactElement;
35
34
  };
36
35
 
37
36
  export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
120
119
  export const AnalyticsContext =
121
120
  React.createContext<GetAnalyticsFunctions>(noop);
122
121
 
123
- export function AnalyticsProvider(props: ComponentWithChildrenProps) {
122
+ export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
124
123
  return (
125
124
  // @ts-ignore - this is a valid context provider
126
125
  <AnalyticsContext.Provider value={getAnalyticsFunctions}>
127
- {props?.children}
126
+ {children}
128
127
  </AnalyticsContext.Provider>
129
128
  );
130
129
  }
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable @typescript-eslint/no-use-before-define */
2
2
  import * as R from "ramda";
3
3
  import { NativeModules } from "react-native";
4
- import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
4
+ import { ANALYTICS_CORE_EVENTS } from "./events";
5
5
 
6
6
  import { analyticsUtilsLogger } from "./logger";
7
7
 
@@ -16,7 +16,7 @@ const BASE_HOOK_PROPERTIES = ["screen_id", "identifier", "weight"];
16
16
  * @returns {number} index
17
17
  */
18
18
  const hookState: (
19
- arg0: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS]
19
+ arg0: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS]
20
20
  ) => number = R.indexOf(R.__, R.values(HOOKS_EVENTS));
21
21
 
22
22
  /**
@@ -62,7 +62,7 @@ export class Hook implements HookInterface {
62
62
  * @param {Array<Any>} args variadic arguments to invoke the handler with
63
63
  */
64
64
  setStateAndNotify(
65
- event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
65
+ event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
66
66
  ...args
67
67
  ) {
68
68
  this.state = hookState(event);
@@ -84,7 +84,7 @@ export function HooksManager({
84
84
  plugins,
85
85
  startUpHooksData = {},
86
86
  }: HookManagerArgs): HookManager {
87
- hooksManagerLogger.addContext({ targetScreen });
87
+ hooksManagerLogger.addContext({ targetScreenId: targetScreen.id });
88
88
 
89
89
  function logHookEvent(func, message, data) {
90
90
  func({
@@ -103,7 +103,7 @@ export interface Hook<T extends HookModule = HookModule> {
103
103
  identifier: string;
104
104
  configuration: T["configuration"];
105
105
  setStateAndNotify(
106
- event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
106
+ event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
107
107
  opts: {
108
108
  error?: typeof Error;
109
109
  route?: string;
@@ -112,7 +112,7 @@ export interface Hook<T extends HookModule = HookModule> {
112
112
  }
113
113
  );
114
114
  general?: {
115
- transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
115
+ transition_type: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS];
116
116
  allow_screen_plugin_presentation: boolean;
117
117
  is_flow_blocker: boolean;
118
118
  };
@@ -111,29 +111,22 @@ export class AccessibilityManager {
111
111
  textToRead = localizedMessage;
112
112
  }
113
113
 
114
- const readHeadings = () => {
115
- if (this.headingQueue.length > 0) {
116
- const heading = this.headingQueue.shift()!; // Get the next heading
114
+ if (this.headingQueue.length > 0) {
115
+ const heading = this.headingQueue.shift()!;
116
+ this.ttsManager?.readText(heading);
117
117
 
118
- this.ttsManager?.readText(heading); // Read the heading
119
-
120
- if (this.headingTimeout) {
121
- clearTimeout(this.headingTimeout);
122
- }
118
+ if (this.headingTimeout) {
119
+ clearTimeout(this.headingTimeout);
120
+ }
123
121
 
124
- const pauseTime = this.calculateReadingTime(heading); // Calculate pause time based on the heading
122
+ const pauseTime = this.calculateReadingTime(heading);
125
123
 
126
- // Set a timeout to read the next heading
127
- this.headingTimeout = setTimeout(() => {
128
- readHeadings(); // Call the function recursively to read the next heading
129
- }, pauseTime);
130
- } else {
131
- // No more headings to read, read the main text
124
+ this.headingTimeout = setTimeout(() => {
132
125
  this.ttsManager?.readText(textToRead);
133
- }
134
- };
135
-
136
- readHeadings(); // Start reading headings
126
+ }, pauseTime);
127
+ } else {
128
+ this.ttsManager?.readText(textToRead);
129
+ }
137
130
 
138
131
  this.announcements$.next({
139
132
  message: textToRead,
@@ -42,12 +42,16 @@ export const resolveObjectValues = async (
42
42
 
43
43
  const resolvedEntries = await Promise.all(
44
44
  entries.map(async ([key, value]) => {
45
- const regex = /@{([^/]+)\/([^}]*)}/;
46
-
47
45
  if (typeof value !== "string") {
48
46
  return [key, value];
49
47
  }
50
48
 
49
+ if (!value.startsWith("@")) {
50
+ return [key, value];
51
+ }
52
+
53
+ const regex = /@{([^/]+)\/([^}]*)}/;
54
+
51
55
  const match = (value as string).match(regex);
52
56
 
53
57
  if (match) {
@@ -16,12 +16,12 @@ import {
16
16
 
17
17
  export { StorageLevel };
18
18
 
19
- type KeyNameObj = {
19
+ export type KeyNameObj = {
20
20
  namespace: string;
21
21
  key: string;
22
22
  };
23
23
 
24
- type KeyName = string | KeyNameObj;
24
+ export type KeyName = string | KeyNameObj;
25
25
 
26
26
  type ParsedKeyAndNamespace = {
27
27
  namespace?: string;
@@ -1,10 +1,11 @@
1
1
  import * as R from "ramda";
2
2
  import { DEFAULT_NAMESPACE } from "../consts";
3
+ import { KeyName, KeyNameObj } from "../index";
3
4
 
4
5
  const lastDotRegex = /\.([^.]+)$/;
5
6
  const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
6
7
 
7
- export function getNamespaceAndKey(namespacedKey) {
8
+ export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
8
9
  if (typeof namespacedKey !== "string") return namespacedKey;
9
10
 
10
11
  const namespacedKeyProps = namespacedKey.includes(".")
@@ -28,6 +28,7 @@ exports[`focusManager should be defined 1`] = `
28
28
  "moveFocus": [Function],
29
29
  "on": [Function],
30
30
  "press": [Function],
31
+ "pressIn": [Function],
31
32
  "pressOut": [Function],
32
33
  "recoverFocus": [Function],
33
34
  "register": [Function],
@@ -13,6 +13,7 @@ import {
13
13
  import { subscriber } from "../../functionUtils";
14
14
  import { coreLogger } from "../../logger";
15
15
  import { ACTION } from "./utils/enums";
16
+
16
17
  const logger = coreLogger.addSubsystem("focusManager");
17
18
 
18
19
  const isFocusEnabled = (focusableItem): boolean => {
@@ -325,8 +326,6 @@ export const focusManager = (function () {
325
326
  },
326
327
  });
327
328
 
328
- currentFocusNode = focusCandidate;
329
-
330
329
  focusableItem && setFocus(focusCandidate.id, null);
331
330
 
332
331
  return { success: true };
@@ -335,15 +334,14 @@ export const focusManager = (function () {
335
334
  return { success: false };
336
335
  }
337
336
 
338
- function treeLoaded(val, node) {
339
- logger.log({
340
- message: "treeLoaded",
341
- data: {
342
- val,
343
- node,
344
- currentFocusNode,
345
- },
346
- });
337
+ function treeLoaded(_val, _node) {}
338
+
339
+ function pressIn() {
340
+ const currentFocusable = getCurrentFocus();
341
+
342
+ if (currentFocusable) {
343
+ currentFocusable.pressIn(null);
344
+ }
347
345
  }
348
346
 
349
347
  /**
@@ -477,7 +475,7 @@ export const focusManager = (function () {
477
475
  function isCurrentFocusOnTheTopScreen() {
478
476
  const routes = R.pathOr([], ["root", "children"], focusableTree);
479
477
 
480
- if (routes.length <= 1) {
478
+ if (currentFocusNode && routes.length <= 1) {
481
479
  // there is only one or zero routes
482
480
  return true;
483
481
  }
@@ -553,6 +551,7 @@ export const focusManager = (function () {
553
551
  invokeHandler,
554
552
  removeHandler,
555
553
  longPress,
554
+ pressIn,
556
555
  pressOut,
557
556
  enableFocus,
558
557
  setInitialFocus,
@@ -1,5 +1,3 @@
1
- import * as R from "ramda";
2
-
3
1
  // more keys can be added here. Simply make sure
4
2
  // the key matches the code value
5
3
 
@@ -34,12 +32,18 @@ export function keyCode(key) {
34
32
  keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
35
33
  */
36
34
 
37
- const matches = R.compose(
38
- R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
39
- R.when(R.is(String), R.prop(R.__, KEYS))
40
- );
35
+ const matches = (compareKey) => {
36
+ // If compareKey is a string, look it up in KEYS object
37
+ const keyToCompare =
38
+ typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
39
+
40
+ // Compare either code or keyCode properties
41
+ return (
42
+ keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
43
+ );
44
+ };
41
45
 
42
- const matchesAny = (...args) => R.any(matches, args);
46
+ const matchesAny = (...args) => args.some(matches);
43
47
 
44
48
  const direction = () =>
45
49
  matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;
@@ -1,4 +1,3 @@
1
- /// <reference types="@types/react-native" />
2
1
  import * as ReactNative from "react-native";
3
2
  import { isTV, platformSelect } from "../reactUtils";
4
3
  import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
@@ -77,13 +77,22 @@ export class ClosedCaptioningManager {
77
77
 
78
78
  private constructor() {
79
79
  this.initialize();
80
+
81
+ window["vizioDebug"] = {
82
+ setCCEnabled: (isCCEnabled: boolean) => {
83
+ this.ccState$.next(isCCEnabled);
84
+ },
85
+ };
80
86
  }
81
87
 
82
88
  static getInstance(): ClosedCaptioningManager {
83
89
  if (!ClosedCaptioningManager.ccManagerInstance) {
90
+ log_debug("ClosedCaptioningManager: Creating new instance");
84
91
  ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
85
92
  }
86
93
 
94
+ log_debug("ClosedCaptioningManager: Returning existing instance");
95
+
87
96
  return ClosedCaptioningManager.ccManagerInstance;
88
97
  }
89
98
 
@@ -92,23 +101,41 @@ export class ClosedCaptioningManager {
92
101
  PLATFORM_KEYS.deviceClosedCaptioningEnabled
93
102
  );
94
103
 
95
- log_debug("Initializing closed captioning manager", { existingState });
96
-
97
104
  if (existingState !== null) {
105
+ log_debug(
106
+ `ClosedCaptioningManager: Setting initial state to ${existingState}`
107
+ );
108
+
98
109
  this.ccState$.next(existingState === "true" || existingState === true);
110
+ } else {
111
+ log_debug("ClosedCaptioningManager: No existing state found");
99
112
  }
100
113
 
101
114
  if (hasVizioAPIs()) {
115
+ log_debug("ClosedCaptioningManager: Setting closed captioning handler");
116
+
102
117
  window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
103
- log_debug("CC state changed", { isCCEnabled });
118
+ log_debug(
119
+ "ClosedCaptioningManager: There was a change in the CC state",
120
+ { isCCEnabled }
121
+ );
104
122
 
105
123
  sessionStorage.setItem(
106
124
  PLATFORM_KEYS.deviceClosedCaptioningEnabled,
107
125
  isCCEnabled
108
126
  );
109
127
 
128
+ log_debug(
129
+ "ClosedCaptioningManager: Saved CC state to session storage",
130
+ { isCCEnabled }
131
+ );
132
+
110
133
  this.ccState$.next(isCCEnabled);
111
134
  });
135
+ } else {
136
+ log_debug(
137
+ "ClosedCaptioningManager: Vizio APIs are not available, skipping setup"
138
+ );
112
139
  }
113
140
  }
114
141
 
@@ -452,7 +452,7 @@ export class PlayerManager {
452
452
  if (this.castingReceiver) {
453
453
  this.castingReceiver.closeNativePlayer();
454
454
  } else {
455
- this.getActivePlayer().closeNativePlayer();
455
+ this.getActivePlayer()?.closeNativePlayer();
456
456
  this.invokeHandler("close");
457
457
  }
458
458
  }
@@ -154,8 +154,8 @@ export class Player {
154
154
  this.isSeeking()
155
155
  ? this.playerState.seekPosition
156
156
  : this.playerState.adState
157
- ? this.playerState.adState.adPosition
158
- : this.playerState.contentPosition;
157
+ ? this.playerState.adState.adPosition
158
+ : this.playerState.contentPosition;
159
159
 
160
160
  getEntry = (): ZappEntry | null => this.entry;
161
161