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

package/analyticsUtils/currentScreenProperities.ts

@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
   screenData
 ): AnalyticsScreenProperties => {
   return {
-    screen_name: screenData?.targetScreen?.name,
+    screen_name: screenData?.targetScreen?.name || screenData?.name,
     screen_entry_title: screenData?.title,
     screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
-    screen_layout_id: screenData?.targetScreen?.id,
-    screen_type: screenData?.targetScreen?.type,
-    home_screen: screenData?.targetScreen?.home,
+    screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
+    screen_type: screenData?.targetScreen?.type || screenData?.type,
+    home_screen: !R.isNil(screenData?.targetScreen?.home)
+      ? screenData?.targetScreen?.home
+      : screenData?.home,
   };
 };
 

package/appUtils/keyCodes/index.ts

@@ -1,5 +1,3 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
@@ -34,12 +32,18 @@ export function keyCode(key) {
   keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
   */
 
-  const matches = R.compose(
-    R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
-    R.when(R.is(String), R.prop(R.__, KEYS))
-  );
+  const matches = (compareKey) => {
+    // If compareKey is a string, look it up in KEYS object
+    const keyToCompare =
+      typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
+
+    // Compare either code or keyCode properties
+    return (
+      keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
+    );
+  };
 
-  const matchesAny = (...args) => R.any(matches, args);
+  const matchesAny = (...args) => args.some(matches);
 
   const direction = () =>
     matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;

package/appUtils/playerManager/index.ts

@@ -452,7 +452,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
-      this.getActivePlayer().closeNativePlayer();
+      this.getActivePlayer()?.closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/appUtils/playerManager/player.ts

@@ -98,7 +98,6 @@ export class Player {
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
 
-    this.isPaused = this.isPaused.bind(this);
     this.entryObservable = null;
   }
 
@@ -254,9 +253,9 @@ export class Player {
     return this.playerState.seekPosition !== null;
   };
 
-  isPaused() {
+  isPaused = () => {
     return !!this.playerState.isPaused;
-  }
+  };
 
   isPlaying = () => {
     return !!this.playerState.isPaused === false;
@@ -291,11 +290,11 @@ export class Player {
   };
 
   // Methods to call actions on the player
-  seekTo = async (_position: number) => {};
+  seekTo = (_position: number) => {};
 
-  forward = async (_deltaTime: number) => {};
+  forward = (_deltaTime: number) => {};
 
-  rewind = async (_deltaTime: number) => {};
+  rewind = (_deltaTime: number) => {};
 
   /**
    * Determine whether content is live using three checks
@@ -702,8 +701,8 @@ export class Player {
     onPlayerAttached: this.onPlayerAttached,
   });
 
-  play = async () => {};
-  pause = async () => {};
+  play = () => {};
+  pause = () => {};
   disableBufferAnimation = (): boolean => true;
 
   setPlaybackRate = (_rate) => {};

package/appUtils/playerManager/playerNative.ts

@@ -95,7 +95,7 @@ export class PlayerNative extends Player {
   };
 
   // Methods to call actions on the player
-  seekTo = async (position: number) => {
+  seekTo = (position: number) => {
     if (!this.playerState.seekableDuration) {
       log_warning("seekTo: Can not seek, video is not seekable");
 
@@ -123,7 +123,7 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.seekTo, { position });
   };
 
-  forward = async (deltaTime: number) => {
+  forward = (deltaTime: number) => {
     if (isEmptyOrNil(this.playerState.contentPosition)) {
       return;
     }
@@ -139,7 +139,7 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.forward, { deltaTime });
   };
 
-  rewind = async (deltaTime: number) => {
+  rewind = (deltaTime: number) => {
     if (isEmptyOrNil(this.playerState.contentPosition)) {
       return;
     }
@@ -155,13 +155,13 @@ export class PlayerNative extends Player {
     this.logState(PlayerModuleFuncNames.rewind, { deltaTime });
   };
 
-  play = async () => {
+  play = () => {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.play)) {
       this.currentPlayerComponent()?.[PlayerModuleFuncNames.play]?.();
     }
   };
 
-  pause = async () => {
+  pause = () => {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.pause)) {
       this.currentPlayerComponent()?.[PlayerModuleFuncNames.pause]?.();
     }

package/equalUtils/__tests__/isEqual/combination.test.ts

@@ -0,0 +1,263 @@
+import { isEqual } from "../..";
+
+const array = [1, 2, 3];
+const sameProp = "sameProp";
+
+describe("isEqual - comprehensive tests", () => {
+  describe("all conditions together", () => {
+    it("all conditions checked and not equal", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp1: 123,
+        extraProp2: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "different",
+        extraProp1: 456,
+        extraProp2: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+      })(prev, next);
+
+      expect(result).toBe(false);
+
+      expect(customComparator).toHaveBeenCalledWith(
+        prev.byComparatorProp,
+        next.byComparatorProp
+      );
+    });
+
+    it("all conditions pass with exact remaining keys check", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+      })(prev, next);
+
+      expect(result).toBe(true);
+
+      expect(customComparator).toHaveBeenCalledWith(
+        prev.byComparatorProp,
+        next.byComparatorProp
+      );
+    });
+
+    it("byReference check fails first (early return)", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: [1, 2, 3],
+        byComparatorProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).not.toHaveBeenCalled();
+    });
+
+    it("byValue check fails after byReference passes", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 3 },
+        byRefProp: array,
+        byComparatorProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).not.toHaveBeenCalled();
+    });
+
+    it("byComparator check fails after other checks pass", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "different",
+      };
+
+      const customComparator = jest.fn().mockReturnValue(false);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+
+      expect(customComparator).toHaveBeenCalledWith(
+        prev.byComparatorProp,
+        next.byComparatorProp
+      );
+    });
+
+    it("remaining keys comparison fails", () => {
+      const sharedArray = [1, 2, 3];
+
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: sharedArray,
+        byComparatorProp: "test",
+        extraProp: "original",
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: sharedArray,
+        byComparatorProp: "different",
+        extraProp: "changed",
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).toHaveBeenCalled();
+    });
+
+    it("with debug flag", () => {
+      const consoleSpy = jest.spyOn(console, "log").mockImplementation();
+
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "test",
+        extraProp: sameProp,
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: array,
+        byComparatorProp: "different",
+        extraProp: sameProp,
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+        compareRemainingKeysBySameValue: true,
+        debug: true,
+      })(prev, next);
+
+      expect(result).toBe(true);
+      expect(consoleSpy).toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+
+    it("handles missing properties", () => {
+      const prev = {
+        byValueProp: { a: 1, b: 2 },
+        byRefProp: [1, 2, 3],
+      };
+
+      const next = {
+        byValueProp: { a: 1, b: 2 },
+        byComparatorProp: "test",
+      };
+
+      const customComparator = jest.fn().mockReturnValue(true);
+
+      const result = isEqual({
+        byValue: ["byValueProp"],
+        byReference: ["byRefProp"],
+        byComparator: {
+          comparator: customComparator,
+          keys: ["byComparatorProp"],
+        },
+      })(prev, next);
+
+      expect(result).toBe(false);
+      expect(customComparator).not.toHaveBeenCalled();
+    });
+  });
+});

package/equalUtils/index.ts

@@ -1,6 +1,8 @@
 /* eslint no-console: off */
 
-import * as R from "ramda";
+import { equals } from "ramda";
+
+const alwaysTrue = () => true;
 
 export const isParentFocusEqual = (
   prevParentFocus: ParentFocus,
@@ -18,7 +20,7 @@ export const isEqual =
   ({
     byValue = [],
     byReference = [],
-    byComparator = { comparator: R.always(true), keys: [] },
+    byComparator = { comparator: alwaysTrue, keys: [] },
     debug = false,
     compareRemainingKeysBySameValue = false,
   }: {
@@ -29,23 +31,28 @@ export const isEqual =
     compareRemainingKeysBySameValue?: boolean;
   }) =>
   (prev, next) => {
-    const isEqualByValue = R.isEmpty(byValue)
-      ? true
-      : R.all((key) => R.equals(prev[key], next[key]), byValue);
+    for (const key of byReference) {
+      if (prev[key] !== next[key]) {
+        if (debug) console.log({ isEqualByReference: false });
 
-    const isEqualByReference = R.isEmpty(byReference)
-      ? true
-      : R.all((key) => prev[key] === next[key], byReference);
+        return false;
+      }
+    }
 
-    const isEqualByComparator = R.isEmpty(byComparator.keys)
-      ? true
-      : R.all(
-          (key) => byComparator.comparator(prev[key], next[key]),
-          byComparator.keys
-        );
+    for (const key of byValue) {
+      if (!equals(prev[key], next[key])) {
+        if (debug) console.log({ isEqualByValue: false });
 
-    if (debug) {
-      console.log({ isEqualByValue, isEqualByReference, isEqualByComparator });
+        return false;
+      }
+    }
+
+    for (const key of byComparator.keys) {
+      if (!byComparator.comparator(prev[key], next[key])) {
+        if (debug) console.log({ isEqualByComparator: false });
+
+        return false;
+      }
     }
 
     if (compareRemainingKeysBySameValue) {
@@ -57,21 +64,26 @@ export const isEqual =
         ...byComparator.keys,
       ]);
 
-      const undeclaredKeys = Array.from(allKeys).filter(
-        (key) => !declaredKeys.has(key)
-      );
+      for (const key of Array.from(allKeys)) {
+        if (!declaredKeys.has(key) && !Object.is(prev[key], next[key])) {
+          if (debug) console.log({ isRestKeysEqualAllBySameValue: false });
 
-      const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>
-        Object.is(prev[key], next[key])
-      );
+          return false;
+        }
+      }
+    }
 
-      return (
-        isEqualByValue &&
-        isEqualByReference &&
-        isEqualByComparator &&
-        isRestKeysEqualAllBySameValue
-      );
+    // if we made it here, everything matched
+    if (debug) {
+      console.log({
+        isEqualByValue: true,
+        isEqualByReference: true,
+        isEqualByComparator: true,
+        isRestKeysEqualAllBySameValue: compareRemainingKeysBySameValue
+          ? true
+          : undefined,
+      });
     }
 
-    return isEqualByValue && isEqualByReference && isEqualByComparator;
+    return true;
   };

package/focusManager/index.ts

@@ -8,6 +8,8 @@ import { isNilOrEmpty } from "../reactUtils/helpers";
 import { isAndroidTVPlatform } from "../reactUtils";
 import { noop } from "../functionUtils";
 
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
 export function useFocusManager() {
   return focusManager;
 }
@@ -74,6 +76,14 @@ export function useFocusEffect(onFocus, focusWatcher) {
   }, focusWatcher);
 }
 
+export function shouldShowEmptyGroup(component) {
+  return (
+    component?.ui_components?.filter(
+      ({ component_type }) => component_type === EMPTY_GROUP_COMPONENT
+    )?.length > 0
+  );
+}
+
 export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
   R.tryCatch(
     R.compose(
@@ -101,15 +111,42 @@ export const useIsFocusable = (props: Props): void => {
     component.rules.hide_component_if_data_is_empty
   );
 
+  const isLoadingData = !!zappPipesData?.loading;
+
   const hasNoData =
     isNilOrEmpty(zappPipesData?.data) ||
     isNilOrEmpty(zappPipesData?.data?.entry);
 
+  const hasDataError = !!zappPipesData?.error;
+
+  const hasEmptyGroup = shouldShowEmptyGroup(component);
+
+  const isGallery = component?.component_type === "gallery-qb";
+
+  const isHiddenDueToEmptyData =
+    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+
+  const defaultFocusableLogic =
+    componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
+
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
-      setIsFocusable(
-        componentCellsFocusable && (!hasNoData || !hideIfDataEmpty)
-      );
+      let isFocusableNew = false;
+
+      if (isGallery) {
+        isFocusableNew = true;
+      } else if (isFocusable(component)) {
+        isFocusableNew = defaultFocusableLogic;
+      }
+
+      setIsFocusable(isFocusableNew);
     }
-  }, [setIsFocusable, componentCellsFocusable, hasNoData]);
+  }, [
+    defaultFocusableLogic,
+    isHiddenDueToEmptyData,
+    isGallery,
+    setIsFocusable,
+    hasDataError,
+    hasEmptyGroup,
+  ]);
 };