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

package/appUtils/focusManager/utils/__tests__/findChild.test.ts

@@ -0,0 +1,35 @@
+import { findChild } from "../index";
+
+describe("findChild", () => {
+  const makeNode = (children = []) => ({ children });
+
+  const child = (preferredFocus: boolean) => ({
+    component: { props: { preferredFocus } },
+  });
+
+  it("returns the child with preferredFocus=true", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(true, node)).toBe(node.children[1]);
+  });
+
+  it("returns the child with preferredFocus=false", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(false, node)).toBe(node.children[0]);
+  });
+
+  it("returns undefined if no child matches preferredFocus", () => {
+    const node = makeNode([child(false), child(false)]);
+    expect(findChild(true, node)).toBeUndefined();
+  });
+
+  it("returns undefined if node has no children", () => {
+    const node = makeNode();
+    expect(findChild(true, node)).toBeUndefined();
+    expect(findChild(false, node)).toBeUndefined();
+  });
+
+  it("returns undefined if children is not an array", () => {
+    const node = { children: null };
+    expect(findChild(true, node)).toBeUndefined();
+  });
+});

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,8 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findChild = (preferredFocus: boolean, node) =>
+  (node?.children || []).find(
+    (child) => child?.component?.props?.preferredFocus === preferredFocus
+  );

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,37 @@ export function getUILanguage() {
   return getLanguageCode();
 }
 
+/**
+ * fallback to en for missing dayjslocalization
+ * converts the locale code to a dayjs compatible locale code
+ * lowercase input code is expected, e.g. "en-GB" => "en-gb"
+ * @param {string} code - locale code, e.g. "en", "fr", "es-LA"
+ * */
+export const toDayJSLocaleMap = (code) => {
+  const map = {
+    hy: "hy-am",
+    fj: null,
+    la: null,
+    no: null,
+    pa: "pa-in",
+    qu: null,
+    sm: null,
+    to: null,
+    xh: null,
+    tt: null,
+    "es-LA": "es",
+    "en-UK": "en-gb",
+  };
+
+  if (map[code] === null) {
+    return "en";
+  } else if (map[code]) {
+    return map[code];
+  } else {
+    return code.toLowerCase();
+  }
+};
+
 /**
  * returns the localization for the app based on the locale. If the locale is null
  * or undefined, or if the given locale doesn't exist in the localizations,

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -12,7 +12,7 @@ import { useThrottle } from "../../../functionUtils";
 export const usePlayerCurrentTime = (
   listenerId: string,
   playerId?: string
-): number | null => {
+): { currentTime: number | null; cancel: () => void } => {
   const [currentTime, setCurrentTime] = useState<number | null>(null);
   const player: Player = usePlayer(playerId);
 
@@ -20,15 +20,17 @@ export const usePlayerCurrentTime = (
     if (player) {
       const newCurrentTime = player.getContentPosition();
 
-      setCurrentTime((prevTime) =>
-        prevTime !== newCurrentTime ? newCurrentTime : prevTime
-      );
+      setCurrentTime(newCurrentTime);
     }
   }, [player]);
 
+  // We update the current time every ~250ms since player can have rate set to 2x.
+  // We update more often than 2x a second to avoid noticiable 'pulsation' in update,
+  //  since native level also updates the current time every ~250ms,
+  //  and combined with assorted delays it creates interference pattern.
   const { throttledFunction: throttledUpdate, cancel } = useThrottle(
     updateCurrentTime,
-    1000
+    1000 / 4
   );
 
   useEffect(() => {
@@ -36,7 +38,9 @@ export const usePlayerCurrentTime = (
       throttledUpdate();
 
       const listeners = {
-        onVideoProgress: throttledUpdate,
+        onVideoProgress: () => {
+          setCurrentTime(player.getContentPosition());
+        },
       };
 
       const id = `${listenerId}_player_current_time`;
@@ -53,5 +57,5 @@ export const usePlayerCurrentTime = (
     }
   }, [player, listenerId, throttledUpdate, cancel]);
 
-  return currentTime;
+  return { currentTime, cancel };
 };

package/appUtils/playerManager/usePlayerTitleSummaryOverlay.tsx

@@ -3,12 +3,18 @@ import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { useFeedLoader } from "../../reactHooks";
 import { usePlayer } from "./usePlayer";
 
+const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
 export const useTitleSummaryOverlay = (
-  feedUrl,
   entry,
   isLive = false,
   interval: number
 ) => {
+  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
+  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
   const player = usePlayer();
   const [title, setTitle] = useState<string | number>(entry?.title || "");
   const [summary, setSummary] = useState<string | number>(entry?.summary || "");

package/cellUtils/index.ts

@@ -2,12 +2,16 @@ import * as R from "ramda";
 import dayjs from "dayjs";
 import validateColor from "validate-color";
 
+import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
+import {
+  capitalize,
+  isString,
+} from "@applicaster/zapp-react-native-utils/stringUtils";
+import { cellUtilsLogger } from "@applicaster/zapp-react-native-utils/cellUtils/logger";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
-import { transformColorCode as fixColorHexCode } from "../transform";
-import { capitalize, isString } from "../stringUtils";
-import { cellUtilsLogger } from "./logger";
-import { isWeb } from "../reactUtils";
-import { isNotNil } from "../reactUtils/helpers";
 
 const CUSTOM_KEY = "other";
 

package/componentsUtils/__tests__/isFirstComponentGallery.test.ts

@@ -0,0 +1,33 @@
+import { isFirstComponentGallery } from "../index";
+
+describe("isFirstComponentGallery", () => {
+  it("should return true if the first component is a gallery", () => {
+    const components = [
+      { component_type: "gallery-qb" },
+      { component_type: "other-component" },
+    ];
+
+    expect(isFirstComponentGallery(components)).toBe(true);
+  });
+
+  it("should return false if the first component is not a gallery", () => {
+    const components = [
+      { component_type: "other-component" },
+      { component_type: "gallery-qb" },
+    ];
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+
+  it("should return false if the components array is empty", () => {
+    const components = [];
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+
+  it("should return false if the components array is undefined", () => {
+    const components = undefined;
+
+    expect(isFirstComponentGallery(components)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isFirstComponentScreenPicker.test.ts

@@ -0,0 +1,33 @@
+import { isFirstComponentScreenPicker } from "..";
+
+describe("isFirstComponentScreenPicker", () => {
+  it("should return true if the first component screen-picker", () => {
+    const items = [{ component_type: "screen-picker-qb-tv" }];
+    expect(isFirstComponentScreenPicker(items)).toBe(true);
+  });
+
+  it("should return false if the first component type is not screen-picker", () => {
+    const items = [{ component_type: "other-component" }];
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const items = [{ component_type: undefined }];
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const items = null;
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const items = undefined;
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const items = {};
+    expect(isFirstComponentScreenPicker(items)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isGallery.test.ts

@@ -0,0 +1,33 @@
+import { isGallery } from "..";
+
+describe("isGallery", () => {
+  it("should return true if the component type is 'gallery-qb'", () => {
+    const item = { component_type: "gallery-qb" };
+    expect(isGallery(item)).toBe(true);
+  });
+
+  it("should return false if the component type is not 'gallery-qb'", () => {
+    const item = { component_type: "other-component" };
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isGallery(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isGallery(item)).toBe(false);
+  });
+});

package/componentsUtils/__tests__/isScreenPicker.test.ts

@@ -0,0 +1,33 @@
+import { isScreenPicker } from "..";
+
+describe("isScreenPicker", () => {
+  it("should return true if the component type is 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "screen-picker-qb-tv" };
+    expect(isScreenPicker(item)).toBe(true);
+  });
+
+  it("should return false if the component type is not 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "other-component" };
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isScreenPicker(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isScreenPicker(item)).toBe(false);
+  });
+});

package/componentsUtils/index.ts

@@ -0,0 +1,39 @@
+const GROUP = "group-qb";
+const GROUP_INFO = "group-info-qb";
+const GROUP_INFO_OLD = "group-info";
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
+const GALLERY = "gallery-qb";
+
+const SCREEN_PICKER = "screen-picker-qb-tv";
+
+const HORIZONTAL_LIST = "horizontal_list_qb";
+
+export const isGallery = (item): boolean => item?.component_type === GALLERY;
+
+export const isHorizontalList = (item): boolean =>
+  item?.component_type === HORIZONTAL_LIST;
+
+export const isScreenPicker = (item): boolean =>
+  item?.component_type === SCREEN_PICKER;
+
+export const isFirstComponentScreenPicker = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isScreenPicker(components?.[0]);
+};
+
+export const isFirstComponentGallery = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isGallery(components?.[0]);
+};
+
+export const isGroup = (item): boolean => item?.component_type === GROUP;
+
+export const isEmptyGroup = (item): boolean =>
+  item?.component_type === EMPTY_GROUP_COMPONENT;
+
+export const isGroupInfo = (item): boolean =>
+  item?.component_type === GROUP_INFO ||
+  item?.component_type === GROUP_INFO_OLD;

package/dateUtils/index.ts

@@ -2,10 +2,29 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
+dayjs.extend(duration);
+
+dayjs.extend(relativeTime, {
+  thresholds: [
+    { l: "s", r: 1 },
+    { l: "m", r: 1 },
+    { l: "mm", r: 59, d: "minute" },
+    { l: "h", r: 1 },
+    { l: "hh", r: 23, d: "hour" },
+    { l: "d", r: 1 },
+    { l: "dd", r: 29, d: "day" },
+    { l: "M", r: 1 },
+    { l: "MM", r: 11, d: "month" },
+    { l: "y", r: 1 },
+    { l: "yy", d: "year" },
+  ],
+});
 
 export { dayjs };

package/focusManager/FocusManager.ts

@@ -227,7 +227,9 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      FocusManager.instance.setFocus(nextNextFocus, options);
+      if (nextNextFocus) {
+        FocusManager.instance.setFocus(nextNextFocus, options);
+      }
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);
 

package/focusManager/index.ts

@@ -8,8 +8,6 @@ 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;
 }
@@ -76,14 +74,6 @@ 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,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -117,33 +108,18 @@ export const useIsFocusable = (props: Props): void => {
     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 isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
 
   const defaultFocusableLogic =
-    componentCellsFocusable &&
-    (!hasNoData || !hideIfDataEmpty) &&
-    !isEmptyGroup;
+    componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
 
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
       let isFocusableNew = false;
 
-      if (isGallery) {
-        isFocusableNew = true;
-      } else if (isFocusable(component)) {
+      if (isFocusable(component)) {
         isFocusableNew = defaultFocusableLogic;
       }
 
@@ -152,9 +128,7 @@ export const useIsFocusable = (props: Props): void => {
   }, [
     defaultFocusableLogic,
     isHiddenDueToEmptyData,
-    isGallery,
     setIsFocusable,
     hasDataError,
-    hasEmptyGroup,
   ]);
 };

package/functionUtils/index.ts

@@ -258,3 +258,28 @@ export const extractDataFromProperty = (property, data): any =>
   );
 
 export const then = (fn) => (promise) => promise.then(fn);
+
+/**
+ * Returns a replacer function for JSON.stringify that handles circular references,
+ * functions, and React context objects
+ * @returns {Function} A replacer function that detects and handles circular references,
+ * functions, and React context objects
+ */
+export const getJsonReplacer = () => {
+  return (_key, value) => {
+    if (typeof value === "function") {
+      return "[Function]";
+    }
+
+    if (
+      typeof value === "object" &&
+      value !== null &&
+      value.Provider &&
+      value.Consumer
+    ) {
+      return "[ReactContext]";
+    }
+
+    return value;
+  };
+};

package/index.d.ts

@@ -105,18 +105,6 @@ declare type NavBarState = {
   title: string;
 };
 
-declare type StorageValuesToAdd = Record<string, NamespaceValues>;
-
-declare type StorageValuesToRemove = {
-  string?: string[];
-};
-
-declare type StorageOwnedValues = {
-  string?: string[];
-};
-
-declare type NamespaceValues = Record<string, string>;
-
 declare type RefreshProps = {
   forceRefresh?: boolean;
 };

package/localizationUtils/index.ts

@@ -1,9 +1,8 @@
-import * as R from "ramda";
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
-import { getUILanguage } from "../appUtils/localizationsHelper";
-import { utilsLogger } from "../logger";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 export {
   getLocale,
@@ -11,7 +10,7 @@ export {
   getCountryCode,
   getLocalizations,
   getUILanguage,
-} from "../appUtils/localizationsHelper";
+} from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
 
 const RTL_LOCALES = [
   "ar", // Arabic
@@ -29,14 +28,16 @@ const RTL_LOCALES = [
   "yi", // Yiddish
 ];
 
-export function useLocalizedStrings({ localizations }) {
+export function useLocalizedStrings({ localizations = {} }) {
   const languageCode = getUILanguage();
 
   // TODO: probably we can call getLocalizations here from localizationsHelper.js
   const result = useMemo(
     () =>
       localizations?.[languageCode] ||
-      R.compose(R.head, R.filter(R.is(Object)), R.values)(localizations) ||
+      Object.values(localizations).find(
+        (value) => typeof value === "object" && value !== null
+      ) ||
       {},
     [languageCode, localizations]
   );
@@ -53,13 +54,7 @@ export function getIsRTL(): boolean {
     return false;
   }
 
-  const [languageCode] = uiLanguage.split("-");
-
-  const lowerCaseLanguageCode = languageCode.toLocaleLowerCase();
-
-  const isRTL = R.contains(lowerCaseLanguageCode, RTL_LOCALES);
-
-  return isRTL;
+  return RTL_LOCALES.includes(uiLanguage.split("-")[0].toLocaleLowerCase());
 }
 
 export function useIsRTL(): boolean {

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -251,6 +251,19 @@ const generalContent = () => ({
         key: "screen_title",
         initial_value: null,
       },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Description",
+        key: "msg_maximum_selection_reached_message",
+        initial_value:
+          "You’ve reached the maximum number of items you can select.",
+      },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Button",
+        key: "msg_maximum_selection_reached_message_ok_button",
+        initial_value: "Got it",
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -42,14 +42,6 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Enable if you want to have adaptive background gradient based on audio background image.",
       },
-      {
-        key: "audio_player_background_image_query",
-        label: "Audio Player Image Query",
-        initial_value: "",
-        type: "text_input",
-        label_tooltip:
-          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
-      },
       {
         key: "audio_player_background_image_default_color",
         label: "Audio Player Background Image Default Color",
@@ -2555,6 +2547,12 @@ function getPlayerConfiguration({ platform }) {
           multiple: false,
           label_tooltip: "Choose the default aspect ratio for the artwork",
         },
+        {
+          key: "audio_player_artwork_border_radius",
+          label: "Audio Player Artwork Corner Radius",
+          type: "number_input",
+          initial_value: 16,
+        },
       ]
     )
   );

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
 
@@ -46,4 +47,5 @@ module.exports = {
   tvProgressBar,
   secondaryImage,
   getUpdatedSecondaryImageKeys,
+  compact,
 };