@applicaster/zapp-react-native-utils 13.0.0-alpha.3322736490 → 13.0.0-alpha.3332871333

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,36 @@ 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,
+    "es-LA": "es",
+    "en-UK": "en-gb",
+  };
+
+  if (map[code] === null) {
+    return "en";
+  } else if (map[code]) {
+    return map[code];
+  } else {
+    return code;
+  }
+};
+
 /**
  * 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/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/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,32 @@
+const GROUP = "group-qb";
+const GROUP_INFO = "group-info-qb";
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
+const GALLERY = "gallery-qb";
+
+const SCREEN_PICKER = "screen-picker-qb-tv";
+
+export const isGallery = (item): boolean => item?.component_type === GALLERY;
+
+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;

package/dateUtils/index.ts

@@ -3,6 +3,7 @@ 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);
@@ -10,4 +11,20 @@ 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/localizationUtils/index.ts

@@ -1,4 +1,3 @@
-import * as R from "ramda";
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
@@ -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/player.js

@@ -2555,6 +2555,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/keys.js

@@ -23,6 +23,13 @@ const ZAPPIFEST_FIELDS = {
 
 const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
 
+const MOBILE_PLATFORMS = [
+  "ios",
+  "ios_for_quickbrick",
+  "android",
+  "android_for_quickbrick",
+];
+
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {
     name: `${platform} font family`,
@@ -2083,4 +2090,6 @@ module.exports = {
   TV_CELL_BADGE_FIELDS,
   progressBarFields,
   secondaryImageFields,
+  TV_PLATFORMS,
+  MOBILE_PLATFORMS,
 };

package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -5,6 +5,7 @@ exports[`getNavigationProps returns the props otherwise 1`] = `
   "assets": {
     "appLogo": "appLogo.png",
   },
+  "data": undefined,
   "home": false,
   "nav_items": [
     {

package/navigationUtils/index.ts

@@ -111,6 +111,7 @@ export function getNavigationProps({
   assets: ZappNavBarAssets;
   rules: ZappNavBarRules;
   nav_items: NavBarItem[];
+  data: MenuItemDataProperties;
 } | null {
   const { activeRiver } = navigator;
   const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
@@ -124,7 +125,7 @@ export function getNavigationProps({
     return null;
   }
 
-  const { styles, assets, nav_items, rules } = navigation;
+  const { styles, assets, nav_items, rules, data } = navigation;
 
   return {
     selected,
@@ -134,6 +135,7 @@ export function getNavigationProps({
     assets: assets as ZappNavBarAssets,
     nav_items: nav_items as any as NavBarItem[],
     rules: rules as any as ZappNavBarRules,
+    data: data as MenuItemDataProperties,
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.3322736490",
+  "version": "13.0.0-alpha.3332871333",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.3322736490",
+    "@applicaster/applicaster-types": "13.0.0-alpha.3332871333",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/configurationGenerator.ts

@@ -2557,6 +2557,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/reactHooks/feed/useFeedLoader.tsx

@@ -20,6 +20,7 @@ type Props = {
     silentRefresh?: boolean;
     method?: "get" | "post";
     bodyParams?: Record<string, unknown>;
+    skipLoading?: boolean;
   };
 };
 
@@ -95,7 +96,7 @@ export const useFeedLoader = ({
     if (
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
-      if (callableFeedUrl) {
+      if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
           loadPipesData(callableFeedUrl, {
             ...pipesOptions,
@@ -103,26 +104,33 @@ export const useFeedLoader = ({
             riverId,
           })
         );
-      } else {
+      } else if (!callableFeedUrl) {
         logger.info({
           message:
             "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
           jsOnly: true,
         });
+      } else {
+        logger.info({
+          message:
+            "Loading skipped as per pipesOptions.skipLoading configuration.",
+          data: { url: callableFeedUrl },
+          jsOnly: true,
+        });
       }
     } else {
       logger.info({
         message:
-          "Feed already exist, skipping loading. \nCall reloadData() if you want to refresh data.",
+          "Feed already exists, skipping loading. \nCall reloadData() if you want to refresh data.",
         data: { url: callableFeedUrl },
         jsOnly: true,
       });
     }
   }, []);
 
-  // Reload feed when feedUrl changes
+  // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
-    if (!isInitialRender && callableFeedUrl) {
+    if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
       dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
   }, [callableFeedUrl]);
@@ -158,7 +166,6 @@ export const useFeedLoader = ({
     currentFeed?.data,
     currentFeed?.error,
     currentFeed?.loading,
-
     reloadData,
     loadNext,
   ]);