@applicaster/zapp-react-native-utils 14.0.0-alpha.8419134002 → 14.0.0-alpha.9848043301

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/feed/useBatchLoading.ts

@@ -10,7 +10,7 @@ import {
   getSearchContext,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { useScreenContext } from "../screen";
+import { useScreenContext } from "../screen/useScreenContext";
 
 type Options = {
   initialBatchSize?: number;
@@ -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/usePipesCacheReset.ts

@@ -5,7 +5,7 @@ import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/D
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
 import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
-import { useRoute } from "../navigation";
+import { useRoute } from "../navigation/useRoute";
 
 /**
  * reset river components cache when screen is unmounted

package/reactHooks/navigation/useIsScreenActive.ts

@@ -1,4 +1,3 @@
-import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
@@ -7,14 +6,11 @@ export const useIsScreenActive = () => {
   const pathname = usePathname();
   const { currentRoute, videoModalState } = useNavigation();
 
-  if (videoModalState.visible) {
-    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
-      return true;
-    }
-
-    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
-      return false;
-    }
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
   }
 
   return pathname === currentRoute;

package/reactHooks/screen/useScreenContext.ts

@@ -2,7 +2,7 @@ import { useContext, useMemo } from "react";
 
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { useNavigation } from "../navigation";
+import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";

package/reactHooks/state/__tests__/ZStoreProvider.test.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable no-console */
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import { Text } from "react-native";
-import { useZStore, ZStoreProvider } from "../ZStoreProvider";
+import { ZStoreProvider, useZStore } from "../ZStoreProvider";
 import { useStore } from "zustand";
 
 interface TestState {

package/riverComponetsMeasurementProvider/index.tsx

@@ -3,7 +3,7 @@ import { NativeModules, StyleSheet, View } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
 import { isApplePlatform, isWeb } from "../reactUtils";
-import { useRivers } from "../reactHooks";
+import { useRivers } from "../reactHooks/state";
 
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({

package/services/js2native.ts

@@ -496,7 +496,6 @@ async function removeStorageListenerHandler(payload: { listenerId?: string }) {
 function log({ level, messages }) {
   try {
     const parsedMessages = parseJsonIfNeeded(messages);
-    // eslint-disable-next-line no-console
     const logFn = console[level] || console.log;
 
     if (Array.isArray(parsedMessages)) {

package/time/BackgroundTimer.ts

@@ -13,15 +13,13 @@ class BackgroundTimer {
 
     const EventEmitter = platformSelect({
       android: DeviceEventEmitter,
-      android_tv: DeviceEventEmitter,
-      amazon: DeviceEventEmitter, // probably does not exist and uses android_tv
+      ios: undefined,
       default: undefined,
     });
 
     EventEmitter?.addListener("BackgroundTimer.timer.fired", (id: number) => {
-      const callback = this.callbacks[id];
-
-      if (callback) {
+      if (this.callbacks[id]) {
+        const callback = this.callbacks[id];
         delete this.callbacks[id];
         callback();
       }

package/utils/index.ts

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

package/arrayUtils/__tests__/isEmptyArray.test.ts

@@ -1,63 +0,0 @@
-import { isEmptyArray } from "..";
-
-describe("isEmptyArray", () => {
-  it("non-empty array is not empty", () => {
-    const value = [1, 2, 3];
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("empty array is empty", () => {
-    const value = [];
-
-    expect(isEmptyArray(value)).toBe(true);
-  });
-
-  it("number is not array", () => {
-    const value = 123;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("string is not array", () => {
-    const value = "vfnjdk";
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("empty string is not array", () => {
-    const value = "";
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("NaN is not array", () => {
-    const value = NaN;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("object is not array", () => {
-    const value = { test: 1 };
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("empty object is not array", () => {
-    const value = {};
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("undefined is not array", () => {
-    const value = undefined;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-
-  it("null is not array", () => {
-    const value = null;
-
-    expect(isEmptyArray(value)).toBe(false);
-  });
-});

package/audioPlayerUtils/__tests__/getArtworkImage.test.ts

@@ -1,144 +0,0 @@
-import { getArtworkImage } from "..";
-import { DEFAULT_IMAGE } from "../assets";
-
-describe("getArtworkImage", () => {
-  const entryWithImage = {
-    media_group: [
-      {
-        type: "image",
-        media_item: [
-          { key: "artwork_key", src: "image_from_entry" },
-          { key: "other_key", src: "other_image" },
-        ],
-      },
-    ],
-    extensions: {
-      artwork_key: "artwork_key",
-    },
-  };
-
-  const entryWithoutImage = {
-    media_group: [
-      {
-        type: "image",
-        media_item: [{ key: "other_key", src: "other_image" }],
-      },
-    ],
-    extensions: {
-      artwork_key: "artwork_key",
-    },
-  };
-
-  const pluginConfigWithImage = {
-    artwork_key: "plugin_artwork_key",
-  };
-
-  it("returns image from entry extensions key", () => {
-    const result = getArtworkImage({
-      key: "artwork_key",
-      entry: entryWithImage,
-      plugin_configuration: {},
-    });
-
-    expect(result).toBe("image_from_entry");
-  });
-
-  it("returns image from plugin configuration key if not in entry", () => {
-    const entryNoMatch = {
-      ...entryWithoutImage,
-      extensions: { artwork_key: "not_found_key" },
-    };
-
-    const pluginConfig = {
-      artwork_key: "plugin_artwork_key",
-    };
-
-    const entryWithPluginImage = {
-      ...entryNoMatch,
-      media_group: [
-        {
-          type: "image",
-          media_item: [{ key: "plugin_artwork_key", src: "image_from_plugin" }],
-        },
-      ],
-    };
-
-    const result = getArtworkImage({
-      key: "artwork_key",
-      entry: entryWithPluginImage,
-      plugin_configuration: pluginConfig,
-    });
-
-    expect(result).toBe("image_from_plugin");
-  });
-
-  it("returns DEFAULT_IMAGE if neither entry nor plugin configuration has image", () => {
-    const entryNoImage = {
-      media_group: [
-        {
-          type: "image",
-          media_item: [{ key: "other_key", src: "other_image" }],
-        },
-      ],
-      extensions: { artwork_key: "not_found_key" },
-    };
-
-    const pluginConfig = { artwork_key: "not_found_key" };
-
-    const result = getArtworkImage({
-      key: "artwork_key",
-      entry: entryNoImage,
-      plugin_configuration: pluginConfig,
-    });
-
-    expect(result).toBe(DEFAULT_IMAGE);
-  });
-
-  it("handles undefined key gracefully", () => {
-    const result = getArtworkImage({
-      key: undefined,
-      entry: entryWithImage,
-      plugin_configuration: pluginConfigWithImage,
-    });
-
-    expect(result).toBe(DEFAULT_IMAGE);
-  });
-
-  it("handles missing entry or plugin_configuration gracefully", () => {
-    const result = getArtworkImage({
-      key: "artwork_key",
-      entry: undefined,
-      plugin_configuration: undefined,
-    });
-
-    expect(result).toBe(DEFAULT_IMAGE);
-  });
-
-  it("handles empty media_group", () => {
-    const entryEmptyMedia = {
-      media_group: [],
-      extensions: { artwork_key: "artwork_key" },
-    };
-
-    const result = getArtworkImage({
-      key: "artwork_key",
-      entry: entryEmptyMedia,
-      plugin_configuration: pluginConfigWithImage,
-    });
-
-    expect(result).toBe(DEFAULT_IMAGE);
-  });
-
-  it("handles missing extensions/config keys", () => {
-    const entryNoExt = { media_group: [], extensions: {} };
-    const pluginConfig = {};
-
-    const result = getArtworkImage({
-      key: "artwork_key",
-      entry: entryNoExt,
-      plugin_configuration: pluginConfig,
-    });
-
-    expect(result).toBe(DEFAULT_IMAGE);
-  });
-});

package/audioPlayerUtils/__tests__/getBackgroundImage.test.ts

@@ -1,72 +0,0 @@
-import { getBackgroundImage } from "..";
-import { DEFAULT_IMAGE } from "../assets";
-
-describe("getBackgroundImage", () => {
-  const entryBase = {
-    media_group: [
-      {
-        media_item: [
-          { key: "image_key_1", src: "image_src_1" },
-          { key: "image_key_2", src: "image_src_2" },
-        ],
-        type: "image",
-      },
-    ],
-    extensions: {},
-  };
-
-  const pluginConfigBase = {};
-
-  it("returns image from entry.extensions.image_key if present", () => {
-    const entry = {
-      ...entryBase,
-      extensions: { image_key: "image_key_2" },
-    };
-
-    const result = getBackgroundImage({
-      entry,
-      plugin_configuration: pluginConfigBase,
-    });
-
-    expect(result).toBe("image_src_2");
-  });
-
-  it("returns audio_player_background_image from entry.extensions if present and no image_key image", () => {
-    const entry = {
-      ...entryBase,
-      extensions: { audio_player_background_image: "audio_img_ext" },
-    };
-
-    const result = getBackgroundImage({
-      entry,
-      plugin_configuration: pluginConfigBase,
-    });
-
-    expect(result).toBe("audio_img_ext");
-  });
-
-  it("returns image from plugin_configuration.audio_player_image_key if present and not found in entry.extensions", () => {
-    const entry = { ...entryBase };
-    const plugin_configuration = { audio_player_image_key: "image_key_1" };
-    const result = getBackgroundImage({ entry, plugin_configuration });
-    expect(result).toBe("image_src_1");
-  });
-
-  it("returns audio_player_background_image from plugin_configuration if present and not found in entry/extensions", () => {
-    const entry = { ...entryBase };
-
-    const plugin_configuration = {
-      audio_player_background_image: "audio_img_conf",
-    };
-
-    const result = getBackgroundImage({ entry, plugin_configuration });
-    expect(result).toBe("audio_img_conf");
-  });
-
-  it("returns DEFAULT_IMAGE if nothing is found", () => {
-    const entry = { media_group: [], extensions: {} };
-    const plugin_configuration = {};
-    const result = getBackgroundImage({ entry, plugin_configuration });
-    expect(result).toBe(DEFAULT_IMAGE);
-  });
-});