@applicaster/zapp-react-native-utils 14.0.0-alpha.7900711229 → 14.0.0-alpha.9567513212

package/playerUtils/configurationUtils.ts

@@ -1,6 +1,50 @@
 import { parseJsonIfNeeded } from "../functionUtils";
 import * as R from "ramda";
 
+import { getNativeName as nativeNameUtil } from "../localizationUtils/localeLanguage";
+
+export const modifyDefaultConfigValues = (
+  configuration: ConfigurationKeys,
+  mapping: ConfigValuesMapping
+): DefaultConfiguration => {
+  return R.mapObjIndexed((value, key) => {
+    const isFieldlessKey = key === "custom_configuration_fields";
+    const keyMapping = mapping[key];
+    const fields = value?.fields || value;
+
+    if (!keyMapping) {
+      return value;
+    }
+
+    const mapper = (obj) => {
+      if (obj.fields) {
+        return R.mergeLeft({ fields: R.map(mapper)(obj.fields) })(obj);
+      }
+
+      return R.mergeLeft(keyMapping?.[obj.key])(obj);
+    };
+
+    const mappedFields = R.map(mapper)(fields);
+
+    return R.unless(() => isFieldlessKey, R.objOf("fields"))(mappedFields);
+  })(configuration);
+};
+
+export function nativeName(localeCode) {
+  try {
+    const {
+      getNativeName,
+    } = require("@applicaster/zapp-react-native-utils/localizationUtils/localeLanguage");
+
+    return getNativeName(localeCode);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn("Could not load localeLanguage utils from QB", error);
+
+    return nativeNameUtil(localeCode);
+  }
+}
+
 const setTrackType = R.curry(
   (
     type: QuickBrickPlayer.TrackType,

package/playerUtils/index.ts

@@ -5,8 +5,7 @@ import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getBoolFromConfigValue } from "../configurationUtils";
-
-export { getPlayerActionButtons } from "./getPlayerActionButtons";
+import { Dimensions } from "react-native";
 
 /**
  * Gets duration value from player manager, and from extensions
@@ -97,3 +96,53 @@ export const isAudioItem = (item: Option<ZappEntry>) => {
 export const isInlineTV = (screenData) => {
   return isTV() && isFilledArray(screenData?.ui_components);
 };
+
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
+type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+export const getTabletWidth = (
+  tablet_landscape_sidebar_width,
+  dimensions: DimensionsT
+) => {
+  const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+
+  const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return widthValue * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return widthValue * 0.65;
+  }
+
+  return widthValue - sidebarWidth;
+};

package/playerUtils/useValidatePlayerConfig.tsx

@@ -1,37 +1,34 @@
 import * as React from "react";
+import * as R from "ramda";
+import generateConfiguration from "./configurationGenerator";
 import { createLogger } from "../logger";
-import { createConfig } from "../manifestUtils/createConfig";
-import { getAllFields, getConfigurationDiff } from "./_internals";
 
 export const logger = createLogger({
   category: "useValidatePlayerConfig",
   subsystem: "useValidatePlayerConfig",
 });
 
-/** Default Player Configuration */
-const {
-  styles,
-  general,
-  localizations,
-  custom_configuration_fields,
-}: DefaultConfiguration = createConfig(
-  () => {
-    return {};
-  },
-  { extend: "player" }
-) as any;
-
-const QBPlayerConfigFields = getAllFields(
-  styles,
-  general,
-  localizations,
-  custom_configuration_fields
-);
+const configuration = generateConfiguration();
 
 export const useValidatePlayerConfig = (config) => {
   React.useEffect(() => {
     try {
-      const diff = getConfigurationDiff(QBPlayerConfigFields, config);
+      const QBPlayerConfigFields = R.compose(
+        R.map(R.prop("key")),
+        R.flatten,
+        R.map(R.compose(R.when(R.propEq("group", true), R.prop("fields")))),
+        R.concat
+      )(
+        configuration.styles.fields,
+        configuration.general.fields,
+        configuration.localizations.fields,
+        configuration.custom_configuration_fields
+      );
+
+      const diff = R.compose(
+        R.difference(QBPlayerConfigFields),
+        R.keys
+      )(config);
 
       logger.log_info(
         "Missing following configuration properties. Some elements of the player may not work correctly. Check QuickBrickPlayerPlugin for the configuration reference https://github.com/applicaster/QuickBrick/tree/main/plugins/zapp-react-native-default-player/manifests",

package/reactHooks/cell-click/index.ts

@@ -16,8 +16,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData, useScreenContext } from "../screen";
-import { useScreenStateStore } from "../navigation/useScreenStateStore";
+import { useCurrentScreenData } from "../screen";
 
 /**
  * If onCellTap is defined execute the function and
@@ -43,12 +42,10 @@ export const useCellClick = ({
 }: Props): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-  const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
-  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -86,9 +83,6 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
-          screenState,
-          screenRoute: pathname,
-          screenStateStore,
         });
       }
 
@@ -123,7 +117,6 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
-      screenState,
     ]
   );
 

package/reactHooks/feed/__tests__/useFeedLoader.test.tsx

@@ -138,11 +138,6 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
-        resolvers: {
-          screen: {
-            screenStateStore: undefined,
-          },
-        },
       });
 
       const store2 = mockStore({
@@ -184,11 +179,6 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
-        resolvers: {
-          screen: {
-            screenStateStore: undefined,
-          },
-        },
       });
 
       const store2 = mockStore({
@@ -238,11 +228,6 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
           clearCache: true,
           silentRefresh: true,
-          resolvers: {
-            screen: {
-              screenStateStore: undefined,
-            },
-          },
         });
 
         loadPipesDataSpy.mockRestore();
@@ -282,11 +267,6 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(nextUrl, {
           parentFeed: feedUrlWithNext,
           silentRefresh: true,
-          resolvers: {
-            screen: {
-              screenStateStore: undefined,
-            },
-          },
         });
 
         loadPipesDataSpy.mockRestore();

package/reactHooks/feed/useBatchLoading.ts

@@ -144,11 +144,11 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [feedUrls, feeds]);
+  }, [feedUrls]);
 
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/useFeedLoader.tsx

@@ -8,7 +8,6 @@ import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
-import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -52,7 +51,6 @@ export const useFeedLoader = ({
   const isInitialRender = useIsInitialRender();
   const dispatch = useDispatch();
   const { screenData } = useRoute();
-  const resolvers = useScreenResolvers();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
@@ -71,12 +69,11 @@ export const useFeedLoader = ({
             silentRefresh,
             callback,
             riverId,
-            resolvers,
           })
         );
       }
     },
-    [callableFeedUrl, resolvers]
+    [callableFeedUrl]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
@@ -89,12 +86,11 @@ export const useFeedLoader = ({
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
-            resolvers,
           })
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
+  }, [callableFeedUrl, currentFeed?.data?.next]);
 
   useEffect(() => {
     if (
@@ -106,7 +102,6 @@ export const useFeedLoader = ({
             ...pipesOptions,
             clearCache: true,
             riverId,
-            resolvers,
           })
         );
       } else if (!callableFeedUrl) {
@@ -131,16 +126,14 @@ export const useFeedLoader = ({
         jsOnly: true,
       });
     }
-  }, [resolvers]);
+  }, []);
 
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(
-        loadPipesData(callableFeedUrl, { ...pipesOptions, riverId, resolvers })
-      );
+      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
-  }, [callableFeedUrl, resolvers]);
+  }, [callableFeedUrl]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/reactHooks/navigation/useRoute.ts

@@ -28,19 +28,14 @@ const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useRoute = (
-  useLegacy = true
-): {
+export const useRoute = (): {
   screenData: VariousScreenData;
   pathname: string;
 } => {
   const pathname = usePathname() || "";
   const navigator = useNavigation();
-  const screenContext = useContext(ScreenDataContext);
 
-  const screenDataContext = useLegacy
-    ? legacyScreenData(screenContext)
-    : screenContext;
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",

package/utils/index.ts

@@ -2,15 +2,4 @@ export { chunk } from "./chunk";
 
 export { times } from "./times";
 
-export {
-  cloneDeep as clone,
-  flatten,
-  drop,
-  size,
-  isNil,
-  isEmpty,
-  get,
-  has,
-  flatMap,
-  difference,
-} from "lodash";
+export { cloneDeep as clone, flatten, drop, size, isNil } from "lodash";

package/actionsExecutor/ScreenActions.ts

@@ -1,163 +0,0 @@
-// import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-
-import { log_error, log_info } from "./ActionExecutorContext";
-import { ActionResult } from "./ActionExecutor";
-import { get } from "lodash";
-
-import { onMaxTagsReached } from "./StorageActions";
-import { ScreenMultiSelectProvider } from "../storage/ScreenStateMultiSelectProvider";
-import { ScreenSingleValueProvider } from "../storage/ScreenSingleValueProvider";
-
-export const screenSetVariable = async (
-  screenRoute: string,
-  screenStateStore: ScreenStateStore,
-  context: Record<string, any>,
-  action: ActionType
-): Promise<ActionResult> => {
-  if (!context) {
-    log_error("handleAction: screenSetVariable action missing context");
-
-    return ActionResult.Error;
-  }
-
-  const entry = context?.entry as ZappEntry;
-
-  if (!entry) {
-    log_error(
-      "handleAction: screenSetVariable action missing entry. Entry is required to get the value."
-    );
-
-    return ActionResult.Error;
-  }
-
-  const tag = action.options?.selector
-    ? get(entry, action.options.selector)
-    : (entry.extensions?.tag ?? entry.id);
-
-  const keyNamespace = action.options?.key;
-
-  if (!keyNamespace) {
-    log_error("handleAction: screenSetVariable action missing key namespace", {
-      keyNamespace,
-    });
-
-    return ActionResult.Error;
-  }
-
-  if (!tag) {
-    log_error(
-      "handleAction: screenSetVariable action could not determine tag",
-      { selector: action.options?.selector, value: action.options?.value }
-    );
-
-    return ActionResult.Error;
-  }
-
-  try {
-    const singleValueProvider = ScreenSingleValueProvider.getProvider(
-      keyNamespace,
-      screenRoute,
-      screenStateStore
-    );
-
-    const currentValue = await singleValueProvider.getValueAsync();
-
-    log_info(
-      `handleAction: screenSetVariable setting value: ${tag} for keyNamespace: ${keyNamespace}, previous value: ${currentValue}`
-    );
-
-    await singleValueProvider.setValue(String(tag));
-
-    log_info(
-      `handleAction: screenSetVariable successfully set value: ${tag} for keyNamespace: ${keyNamespace}`
-    );
-
-    return ActionResult.Success;
-  } catch (error) {
-    log_error("handleAction: screenSetVariable failed to set value", {
-      keyNamespace,
-      tag,
-      error,
-    });
-
-    return ActionResult.Error;
-  }
-};
-
-export const screenToggleFlag = async (
-  screenRoute: string,
-  screenStateStore: ScreenStateStore,
-  context: Record<string, any>,
-  action: ActionType
-) => {
-  if (!context) {
-    log_error("handleAction: screenToggleFlag action missing context");
-
-    return ActionResult.Error;
-  }
-
-  const entry = context?.entry as ZappEntry;
-
-  if (!entry) {
-    log_error(
-      "handleAction: screenToggleFlag action missing entry. Entry is required to get the tag."
-    );
-
-    return ActionResult.Error;
-  }
-
-  const tag = action.options?.selector
-    ? get(entry, action.options.selector)
-    : (entry.extensions?.tag ?? entry.id);
-
-  const keyNamespace = action.options?.key;
-
-  if (keyNamespace && tag) {
-    const multiSelectProvider = ScreenMultiSelectProvider.getProvider(
-      keyNamespace,
-      screenRoute,
-      screenStateStore
-    );
-
-    const selectedItems = await multiSelectProvider.getSelectedAsync();
-    const isTagInSelectedItems = selectedItems.includes(tag);
-
-    log_info(
-      `handleAction: screenToggleFlag event will ${
-        isTagInSelectedItems ? "remove" : "add"
-      } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
-    );
-
-    if (selectedItems.includes(tag)) {
-      await multiSelectProvider.removeItem(tag);
-    } else {
-      const maxItems = action.options?.max_items;
-
-      if (maxItems && selectedItems.length >= maxItems) {
-        log_info(
-          `handleAction: screenToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
-        );
-
-        await onMaxTagsReached({
-          selectedItems,
-          maxItems,
-          tag,
-          keyNamespace,
-        });
-
-        return ActionResult.Cancel;
-      }
-
-      await multiSelectProvider.addItem(tag);
-    }
-  } else {
-    log_error(
-      "handleAction: screenToggleFlag event missing keyNamespace or tag",
-      { keyNamespace, tag }
-    );
-
-    return ActionResult.Error;
-  }
-
-  return ActionResult.Success;
-};

package/actionsExecutor/StorageActions.ts

@@ -1,110 +0,0 @@
-import { ActionResult } from "./ActionExecutor";
-import { get } from "lodash";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
-import { log_error, log_info } from "./ActionExecutorContext";
-import { postEvent } from "../reactHooks/useSubscriberFor";
-import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
-import { StorageType } from "../appUtils/contextKeysManager/consts";
-
-// send all data just in case (like for message string formatting)
-// Type is not exported for now
-type MaxTagsReachedEvent = {
-  selectedItems: string[];
-  maxItems: number;
-  tag: string;
-  keyNamespace: string;
-};
-
-export async function onMaxTagsReached(data: MaxTagsReachedEvent) {
-  postEvent(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, [data]);
-}
-
-export async function storageToggleFlag(
-  context: Record<string, any>,
-  action: ActionType,
-  storageType: StorageType
-) {
-  if (!context) {
-    log_error("handleAction: localStorageToggleFlag action missing context");
-
-    return ActionResult.Error;
-  }
-
-  const entry = context?.entry as ZappEntry;
-
-  if (!entry) {
-    log_error(
-      "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
-    );
-
-    return ActionResult.Error;
-  }
-
-  const tag = action.options?.selector
-    ? get(entry, action.options.selector)
-    : (entry.extensions?.tag ?? entry.id);
-
-  const keyNamespace = action.options?.key;
-
-  if (keyNamespace && tag) {
-    const multiSelectProvider = StorageMultiSelectProvider.getProvider(
-      keyNamespace,
-      storageType
-    );
-
-    const selectedItems = await multiSelectProvider.getSelectedAsync();
-    const isTagInSelectedItems = selectedItems.includes(tag);
-
-    log_info(
-      `handleAction: localStorageToggleFlag event will ${
-        isTagInSelectedItems ? "remove" : "add"
-      } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
-    );
-
-    if (selectedItems.includes(tag)) {
-      await multiSelectProvider.removeItem(tag);
-    } else {
-      const maxItems = action.options?.max_items;
-
-      if (maxItems && selectedItems.length >= maxItems) {
-        log_info(
-          `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
-        );
-
-        await onMaxTagsReached({
-          selectedItems,
-          maxItems,
-          tag,
-          keyNamespace,
-        });
-
-        return ActionResult.Cancel;
-      }
-
-      await multiSelectProvider.addItem(tag);
-    }
-  } else {
-    log_error(
-      "handleAction: localStorageToggleFlag event missing keyNamespace or tag",
-      { keyNamespace, tag }
-    );
-
-    return ActionResult.Error;
-  }
-
-  return ActionResult.Success;
-}
-
-export async function sessionStorageToggleFlag(
-  context: Record<string, any>,
-  action: ActionType
-) {
-  return storageToggleFlag(context, action, StorageType.session);
-}
-
-export async function localStorageToggleFlag(
-  context: Record<string, any>,
-  action: ActionType
-) {
-  return storageToggleFlag(context, action, StorageType.local);
-}