@applicaster/zapp-react-native-utils 13.0.0-alpha.4244205068 → 13.0.0-alpha.4244246222

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

@@ -97,7 +97,7 @@ export class Player {
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
-
+    this.onAdBreakEnd = this.onAdBreakEnd.bind(this);
     this.entryObservable = null;
   }
 
@@ -154,8 +154,8 @@ export class Player {
     this.isSeeking()
       ? this.playerState.seekPosition
       : this.playerState.adState
-      ? this.playerState.adState.adPosition
-      : this.playerState.contentPosition;
+        ? this.playerState.adState.adPosition
+        : this.playerState.contentPosition;
 
   getEntry = (): ZappEntry | null => this.entry;
 
@@ -201,17 +201,25 @@ export class Player {
         adPosition: currentTime,
       };
     } else {
-      if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
-        this.playerState.seekableDuration = seekableDuration;
-      }
+      this.updateContentDuration({ seekableDuration, duration, currentTime });
+    }
+  };
 
-      if (!isEmptyOrNil(duration) && duration >= 0) {
-        this.playerState.contentDuration = duration;
-      }
+  protected updateContentDuration = ({
+    seekableDuration = null,
+    duration = null,
+    currentTime = null,
+  }) => {
+    if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
+      this.playerState.seekableDuration = seekableDuration;
+    }
 
-      if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
-        this.playerState.contentPosition = currentTime;
-      }
+    if (!isEmptyOrNil(duration) && duration >= 0) {
+      this.playerState.contentDuration = duration;
+    }
+
+    if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
+      this.playerState.contentPosition = currentTime;
     }
   };
 
@@ -559,7 +567,7 @@ export class Player {
     });
   };
 
-  onAdBreakEnd = (event) => {
+  onAdBreakEnd(event) {
     this.playerState.adState = null;
     this.playerState.isInAdBreak = false;
 
@@ -567,7 +575,7 @@ export class Player {
       callbackName: SharedPlayerCallBacksKeys.OnAdBreakEnd,
       event,
     });
-  };
+  }
 
   onAdEnd = (event) => {
     this.playerState.adState = null;
@@ -736,6 +744,10 @@ export class Player {
     return null;
   };
 
+  public hasResumePosition() {
+    return false;
+  }
+
   public getConfig = () => this.config;
 
   // TODO: replace with enum of supported orientations

package/appUtils/playerManager/playerNative.ts

@@ -54,6 +54,10 @@ export class PlayerNative extends Player {
     });
   }
 
+  public hasResumePosition() {
+    return true;
+  }
+
   getContentPosition = () => {
     return this.playerState.contentPosition;
   };
@@ -221,11 +225,13 @@ export class PlayerNative extends Player {
   };
 
   onVideoLoad = (event) => {
-    if (this.startPosition) {
-      this.seekTo(this.startPosition);
-      this.startPosition = null;
+    this.updateContentDuration(event);
 
+    if (this.startPosition && !this.playerState.isInAdBreak) {
       super.onVideoLoad({ ...event, ignoreContinueWatching: true });
+
+      this.seekTo(this.startPosition);
+      this.startPosition = null;
     } else {
       super.onVideoLoad(event);
     }
@@ -249,6 +255,15 @@ export class PlayerNative extends Player {
     }
   };
 
+  onAdBreakEnd = (event) => {
+    super.onAdBreakEnd(event);
+
+    if (this.startPosition) {
+      this.seekTo(this.startPosition);
+      this.startPosition = null;
+    }
+  };
+
   // This function is called when native player used directly without wrapped component,
   // Since event from native comes with wrapped in NativeEvent property
   getNativeViewListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {

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,42 +31,59 @@ 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) {
-      const undeclaredKeys = R.difference(
-        [...byValue, ...byReference, byComparator.keys],
-        Object.keys(prev)
-      );
+      const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+
+      const declaredKeys = new Set([
+        ...byValue,
+        ...byReference,
+        ...byComparator.keys,
+      ]);
 
-      const isRestKeysEqualAllBySameValue = undeclaredKeys.every((key) =>
-        Object.is(prev[key], next[key])
-      );
+      for (const key of Array.from(allKeys)) {
+        if (!declaredKeys.has(key) && !Object.is(prev[key], next[key])) {
+          if (debug) console.log({ isRestKeysEqualAllBySameValue: false });
 
-      return (
-        isEqualByValue &&
-        isEqualByReference &&
-        isEqualByComparator &&
-        isRestKeysEqualAllBySameValue
-      );
+          return false;
+        }
+      }
+    }
+
+    // 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/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/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,50 @@ 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 hasNoUIComponents = isNilOrEmpty(component?.ui_components);
+
+  const hasDataError = !!zappPipesData?.error;
+
+  const hasEmptyGroup = shouldShowEmptyGroup(component);
+
+  const isGallery = component?.component_type === "gallery-qb";
+
+  const isGroup = component?.component_type === "group-qb";
+
+  const isHiddenDueToEmptyData =
+    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+
+  const isEmptyGroup = isGroup && hasNoUIComponents;
+
+  const defaultFocusableLogic =
+    componentCellsFocusable &&
+    (!hasNoData || !hideIfDataEmpty) &&
+    !isEmptyGroup;
+
   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,
+  ]);
 };

package/functionUtils/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 /**
  *
@@ -9,31 +9,44 @@ import { useRef } from "react";
  */
 export const useThrottle = (callback: () => void, delay: number) => {
   const lastCallRef = useRef<number>(0);
-  const timeoutRef = useRef<any | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef<() => void>(callback);
 
-  const throttledFunction = () => {
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const throttledFunction = useCallback(() => {
     const now = Date.now();
 
     if (now - lastCallRef.current >= delay) {
-      callback();
+      callbackRef.current();
       lastCallRef.current = now;
     } else if (!timeoutRef.current) {
       const remainingTime = delay - (now - lastCallRef.current);
 
       timeoutRef.current = setTimeout(() => {
-        callback();
+        callbackRef.current();
         lastCallRef.current = Date.now();
         timeoutRef.current = null;
       }, remainingTime);
     }
-  };
+  }, [delay]);
 
-  const cancel = () => {
+  const cancel = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   return { throttledFunction, cancel };
 };

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);
+    });
+  });
+});