@applicaster/zapp-react-native-utils 14.0.0-alpha.4111088201 → 14.0.0-alpha.4385101226

package/focusManager/FocusManager.ts

@@ -176,18 +176,30 @@ class FocusManager {
     }
   }
 
-  registerFocusable(
-    component: FocusManager.TouchableReactRef,
-    parentFocusable: FocusManager.TouchableReactRef,
-    isFocusableCell: boolean
-  ) {
-    const focusableId = getFocusableId(component);
+  registerFocusable({
+    touchableRef,
+    parentFocusableRef,
+    isFocusableCell,
+    parentFocusableId,
+  }: {
+    touchableRef: FocusManager.TouchableReactRef;
+    parentFocusableRef: FocusManager.TouchableReactRef;
+    isFocusableCell: boolean;
+    parentFocusableId: string;
+  }) {
+    const focusableId = getFocusableId(touchableRef);
+
     const focusableComponent = FocusManager.findFocusable(focusableId);
 
-    if (!focusableComponent && component) {
-      this.focusableComponents.push(component);
+    if (!focusableComponent && touchableRef) {
+      this.focusableComponents.push(touchableRef);
 
-      this.tree.add(component, parentFocusable, isFocusableCell);
+      this.tree.add(
+        touchableRef,
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId
+      );
     } else {
       logger.warning("Focusable component already registered", {
         id: focusableId,
@@ -243,12 +255,10 @@ class FocusManager {
   }
 
   blurPrevious(options?: FocusManager.Android.CallbackOptions) {
-    if (options) {
-      FocusManager.instance.prevFocused?.onBlur?.(
-        FocusManager.instance.prevFocused,
-        options
-      );
-    }
+    FocusManager.instance.prevFocused?.onBlur?.(
+      FocusManager.instance.prevFocused,
+      options ?? {} // Adding fallback to avoid potential regression caused by #7509
+    );
   }
 
   onDisableFocusChange = (id) => {
@@ -269,7 +279,7 @@ class FocusManager {
 
       if (nextFocus) {
         // HACK: hack to fix the hack below
-        // HACK: putting call to the end of the event loop so the next component has a chane to be registered
+        // HACK: putting call to the end of the event loop so the next component has a chance to be registered
         setTimeout(() => {
           FocusManager.instance.setFocus(nextFocus, {
             direction: "down",

package/focusManager/Tree.ts

@@ -8,37 +8,41 @@ export class Tree {
     this.tree = focusManagerTree;
   }
 
-  add(component, parentFocusable, isFocusableCell) {
-    const focusableId = getFocusableId(component);
-    const parentId = getFocusableId(parentFocusable);
+  add(
+    touchableRef: FocusManager.TouchableReactRef,
+    parentFocusableRef: FocusManager.TouchableReactRef,
+    isFocusableCell: boolean,
+    parentFocusableId: string
+  ) {
+    const focusableId = getFocusableId(touchableRef);
+    const parentId = getFocusableId(parentFocusableRef) || parentFocusableId;
     const focusableComponentInTree = this.find(focusableId);
 
     // update node if it already exists
     if (focusableComponentInTree) {
-      focusableComponentInTree.updateNode(component);
+      focusableComponentInTree.updateNode(touchableRef);
     }
 
-    if (parentFocusable?.current) {
-      if (!this.find(parentId)) {
-        this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
-      }
+    if (!this.find(parentId)) {
+      // create temporary node to the root of the tree
+      this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
+    }
 
-      const parentNode = this.find(parentId);
+    const parentNode = this.find(parentId);
 
-      if (parentNode) {
-        if (focusableComponentInTree) {
-          focusableComponentInTree.isFocusableCell = isFocusableCell;
-          focusableComponentInTree.parentId = parentNode.id;
+    if (parentNode) {
+      if (focusableComponentInTree) {
+        focusableComponentInTree.isFocusableCell = isFocusableCell;
+        focusableComponentInTree.parentId = parentNode.id;
 
-          parentNode.addChild(focusableComponentInTree);
+        parentNode.addChild(focusableComponentInTree);
 
-          // remove root object from the list
-          this.tree = this.tree.filter(
-            (node) => node !== focusableComponentInTree
-          );
-        } else {
-          parentNode.addChild(component, focusableId, isFocusableCell);
-        }
+        // remove root object from the list
+        this.tree = this.tree.filter(
+          (node) => node !== focusableComponentInTree
+        );
+      } else {
+        parentNode.addChild(touchableRef, focusableId, isFocusableCell);
       }
     }
   }

package/focusManager/__tests__/FocusManager.test.ts

@@ -1,5 +1,8 @@
 import { focusManager } from "../FocusManager";
 
+const isFocusableCell = true;
+const parentFocusableId = "parentFocusableId";
+
 const group = {
   current: {
     props: {
@@ -62,13 +65,47 @@ jest.useFakeTimers();
 
 describe("FocusManager", () => {
   beforeAll(() => {
-    focusManager.registerFocusable(group, { current: null });
-    focusManager.registerFocusable(child1, group);
-    focusManager.registerFocusable(child2, group);
-    focusManager.registerFocusable(child3, child2);
-
-    focusManager.registerFocusable(child4, child2);
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: group,
+      parentFocusableRef: { current: null },
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child1,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child2,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child3,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child4,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
   });
 
   it("focusManager should be defined", () => {
@@ -199,7 +236,12 @@ describe("FocusManager", () => {
   });
 
   it("focusManager registerFocusable should register", () => {
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
 
     expect(
       focusManager.isFocusableChildOf(child5.current.props.id, child2)

package/index.d.ts

@@ -137,12 +137,3 @@ declare type AccessibilityState = {
   reduceMotionEnabled: boolean;
   boldTextEnabled: boolean;
 };
-
-declare type AccessibilityProps = {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  "aria-label"?: string;
-  "aria-description"?: string;
-  accessibilityRole?: string;
-  "aria-role"?: string;
-};

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -2985,6 +2985,14 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             default: "",
           },
+          {
+            key: "audio_player_background_image_overlay",
+            label: "Background Image Overlay",
+            label_tooltip:
+              "Add a semi-transparent color overlay to improve text readability over the background image.",
+            type: "color_picker_rgba",
+            initial_value: "rgba(17, 17, 17, 0.5)",
+          },
           {
             type: "text_input",
             label: "Item Image Key",

package/navigationUtils/__tests__/mapContentTypesToRivers.test.ts

@@ -0,0 +1,130 @@
+import { mapContentTypesToRivers } from "../index";
+
+describe("mapContentTypesToRivers", () => {
+  it("should return the correct content types mapped to rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should return null if contentTypes is undefined", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      // contentTypes is missing
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toBeNull();
+  });
+
+  it("should skip content types whose screen does not exist in rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+        "content-type-2": {
+          screen_id: "river-2", // river-2 does not exist
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+
+    // result is not null, but may be undefined for missing keys
+    expect(result && result["content-type-2"]).toBeUndefined();
+  });
+
+  it("should use 'type' if 'plugin_type' is not present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          type: "custom-type",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "custom-type",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should skip content types if neither plugin_type nor type is present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          // no plugin_type or type
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+
+  it("should handle empty contentTypes object", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {},
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+});

package/navigationUtils/index.ts

@@ -13,6 +13,7 @@ import {
   isPlayable,
   isV2River,
 } from "./itemTypeMatchers";
+import { RootState } from "@applicaster/zapp-react-native-redux/store";
 
 type PathAttribute = {
   screenType: string;
@@ -377,10 +378,11 @@ export const usesVideoModal = (
   return targetScreenConfiguration?.styles?.use_video_modal;
 };
 
-export const mapContentTypesToRivers = ({
-  rivers,
-  contentTypes,
-}): ZappContentTypesMapped | null => {
+export const mapContentTypesToRivers = (
+  state: Partial<RootState>
+): ZappContentTypesMapped | null => {
+  const { rivers, contentTypes } = state;
+
   if (!contentTypes) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.4111088201",
+  "version": "14.0.0-alpha.4385101226",
   "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": "14.0.0-alpha.4111088201",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4385101226",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -38,7 +38,6 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
     "uglify-js": "*",

package/playerUtils/getPlayerActionButtons.ts

@@ -1,4 +1,4 @@
-import { take, map, trim } from "lodash";
+import { map, take, trim } from "../utils";
 import { selectActionButtons } from "../conf/player/selectors";
 
 /**

package/playerUtils/index.ts

@@ -5,6 +5,7 @@ import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getBoolFromConfigValue } from "../configurationUtils";
+import { Dimensions } from "react-native";
 
 export { getPlayerActionButtons } from "./getPlayerActionButtons";
 
@@ -97,3 +98,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/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -23,7 +23,9 @@ jest.mock(
 
 jest.useFakeTimers();
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
 
 const mockStore = configureStore();
 

package/reactHooks/feed/useBatchLoading.ts

@@ -1,8 +1,10 @@
 import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
-import { useDispatch } from "react-redux";
 import * as React from "react";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import {
+  ZappPipes,
+  useAppDispatch,
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import {
@@ -10,7 +12,7 @@ import {
   getSearchContext,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { useScreenContext } from "../screen/useScreenContext";
+import { useScreenContext } from "../screen";
 
 type Options = {
   initialBatchSize?: number;
@@ -63,7 +65,7 @@ export const useBatchLoading = (
   componentsToRender: { data?: ZappDataSource; component_type: string }[],
   options: Options
 ) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screen: screenContext, entry: entryContext } = useScreenContext();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
@@ -118,7 +120,7 @@ export const useBatchLoading = (
     []
   );
 
-  const feeds = useZappPipesFeeds(feedUrls);
+  const feeds = useZappPipesFeed(feedUrls);
 
   // dispatch loadPipesData for each feed that is not loaded
   const runBatchLoading = React.useCallback(() => {
@@ -139,7 +141,7 @@ export const useBatchLoading = (
         if (mappedFeedUrl) {
           // 4. load data
           return dispatch(
-            loadPipesData(mappedFeedUrl, { riverId: options.riverId })
+            ZappPipes.loadPipesData(mappedFeedUrl, { riverId: options.riverId })
           );
         }
       }

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
 
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  ZappPipes,
+  useAppDispatch,
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 
 import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
@@ -49,7 +51,7 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData } = useRoute();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
@@ -64,7 +66,7 @@ export const useFeedLoader = ({
     (silentRefresh = true, callback) => {
       if (callableFeedUrl) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             clearCache: true,
             silentRefresh,
             callback,
@@ -82,7 +84,7 @@ export const useFeedLoader = ({
 
       if (nextFeed) {
         dispatch(
-          loadPipesData(nextFeed, {
+          ZappPipes.loadPipesData(nextFeed, {
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
@@ -98,7 +100,7 @@ export const useFeedLoader = ({
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             ...pipesOptions,
             clearCache: true,
             riverId,
@@ -131,7 +133,9 @@ export const useFeedLoader = ({
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      dispatch(
+        ZappPipes.loadPipesData(callableFeedUrl, { ...pipesOptions, riverId })
+      );
     }
   }, [callableFeedUrl]);
 

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { useDispatch } from "react-redux";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 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/useRoute";
+import { useRoute } from "../navigation";
+import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
  * reset river components cache when screen is unmounted
@@ -13,7 +13,7 @@ import { useRoute } from "../navigation/useRoute";
  * @param {Array} riverComponents list of UI components
  */
 export const usePipesCacheReset = (riverId, riverComponents) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
 

package/reactHooks/flatList/useSequentialRenderItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View } from "react-native";
+import { View, ViewStyle } from "react-native";
 
 import { platformSelect } from "../../reactUtils";
 
@@ -49,13 +49,13 @@ export const useSequentialRenderItem = (data: Data) => {
         const readyToDisplay =
           index === 0 ? true : arePreviousComponentsReady(index);
 
-        const displayStyle = {
+        const displayStyle: ViewStyle = {
           display: readyToDisplay ? "flex" : "none",
         };
 
         const readyStyle = {
           visibility: readyToDisplay ? "visible" : "hidden",
-        };
+        } as ViewStyle;
 
         const style = platformSelect({
           tvos: readyStyle,

package/reactHooks/layout/__tests__/index.test.tsx

@@ -42,15 +42,17 @@ jest.mock("react-native-safe-area-context", () => ({
 }));
 
 jest.mock("../../../reactUtils", () => ({
+  ...jest.requireActual("../../../reactUtils"),
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => mock_tv_flag),
 }));
 
 jest.mock("../../navigation", () => ({
-  useNavigation: () => null,
   useIsScreenActive: () => true,
 }));
 
+jest.mock("../../navigation/useNavigation");
+
 const { Dimensions } = require("react-native");
 const { useDimensions } = require("..");