@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5830601313 → 15.0.0-alpha.5918085834

package/Components/VideoModal/playerWrapperStyle.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { playerDimensionsHack } from "./utils";
+import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  getBaseDimensions,
+  calculateAspectRatio,
+  getPlayerDimensions,
+  getContainerDimensions,
+} from "./playerWrapperUtils";
+
+export const defaultStyles = StyleSheet.create({
+  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
+});
+
+export const useStyle = ({
+  style,
+  inline,
+  isModal,
+  isTabletPortrait,
+  configuration,
+  pip,
+}) => {
+  const isTablet = useIsTablet();
+
+  const isInlineModal = inline && isModal;
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
+
+  const baseDimensions: ViewStyle = React.useMemo(
+    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
+    [isInlineModal, isTabletLandscape, tabletWidth]
+  );
+
+  const aspectRatio = React.useMemo(
+    () => calculateAspectRatio(isInlineModal, pip),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInlineModal, pip]
+  );
+
+  return React.useMemo(() => {
+    const playerDimensions: ViewStyle = getPlayerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const containerDimensions: ViewStyle = getContainerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const childrenStyles = {
+      ...playerDimensions,
+      ...playerDimensionsHack,
+    };
+
+    return StyleSheet.create({
+      containerDimensions,
+      childrenStyles,
+    });
+  }, [baseDimensions, aspectRatio]);
+};

package/Components/VideoModal/playerWrapperUtils.ts

@@ -1,4 +1,4 @@
-import { Dimensions, Platform } from "react-native";
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
 import { Edge } from "react-native-safe-area-context";
 
 export type DimensionsT = {
@@ -13,6 +13,10 @@ export type Configuration = {
   tablet_landscape_player_container_background_color?: string;
 };
 
+// This is safe, remembering screen dimensions once as they do not change during runtime
+// TODO: consider sharing screen orientation as a shared function for the app
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
 export const getWindowDimensions = () => {
   const { width, height } = Dimensions.get("window");
 
@@ -31,15 +35,11 @@ export const getMinWindowDimension = () => {
   return Math.min(width, height);
 };
 
-export const getScreenAspectRatio = (insets?: {
-  top: number;
-  bottom: number;
-}) => {
-  const longEdge = getMaxWindowDimension();
-  const shortEdge = getMinWindowDimension();
+export const getScreenAspectRatio = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
 
-  // subtract insets to get correct aspect ratio on devices with notches
-  return longEdge / (shortEdge - ((insets?.top ?? 0) + (insets?.bottom ?? 0)));
+  return longEdge / shortEdge;
 };
 
 export const getEdges = (
@@ -60,33 +60,32 @@ export const getEdges = (
 export const getBaseDimensions = (
   isInlineModal: boolean,
   isTabletLandscape: boolean,
-  tabletWidth: number | string
-): DimensionsT => ({
+  tabletWidth: DimensionValue
+): ViewStyle => ({
   width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
   height: undefined,
 });
 
 export const calculateAspectRatio = (
   isInlineModal: boolean,
-  pip?: boolean,
-  insets?: { top: number; bottom: number }
+  pip?: boolean
 ): number => {
-  return !isInlineModal && !pip ? getScreenAspectRatio(insets) : 16 / 9;
+  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
 };
 
 export const getPlayerDimensions = (
-  baseDimensions: DimensionsT,
+  baseDimensions: ViewStyle,
   aspectRatio: number
-): DimensionsT => ({
-  ...baseDimensions,
+): ViewStyle => ({
+  ...(baseDimensions as any),
   width: baseDimensions.width,
   aspectRatio,
 });
 
 export const getContainerDimensions = (
-  baseDimensions: DimensionsT,
-  playerAspectRatio?: number
-): DimensionsT => ({
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
   ...baseDimensions,
-  aspectRatio: playerAspectRatio,
+  aspectRatio,
 });

package/Components/VideoModal/utils.ts

@@ -1,31 +1,35 @@
 import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  useContentTypes,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { create } from "zustand";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { selectPluginConfigurationsByPluginId } from "@applicaster/zapp-react-native-redux";
 
 export const useConfiguration = () => {
   const {
     videoModalState: { item },
   } = useNavigation();
 
-  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
-    "rivers",
-    "contentTypes",
-    "pluginConfigurations",
-  ]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
-  const pluginConfiguration =
-    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
+  const { configuration_json } = useAppSelector((state) =>
+    selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
+  );
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
   const config = mergeRight(playerPluginConfig, {
-    ...pluginConfiguration,
+    ...configuration_json,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
   });
@@ -52,6 +56,12 @@ export const useConfiguration = () => {
   };
 };
 
+export const useAnimationStateStore = create<{
+  isAnimationInProgress: boolean;
+}>(() => ({
+  isAnimationInProgress: false,
+}));
+
 const fullSize = {
   width: "100%",
   height: "100%",

package/Decorators/Analytics/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { getAnalyticsFunctions } from "@applicaster/zapp-react-native-utils/analyticsUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
@@ -21,11 +20,13 @@ type ComponentProps = {
 
 function withAnalytics(Component) {
   return function WithAnalytics(props: ComponentProps) {
-    const { appData } = usePickFromState(["appData"]);
-
     const analyticsFunctions = React.useMemo(
-      () => getAnalyticsFunctions({ props, appData }),
-      [props, appData]
+      () =>
+        getAnalyticsFunctions({
+          component: props.component,
+          zappPipesData: props.zappPipesData,
+        } as any),
+      [props.component, props.zappPipesData]
     );
 
     return (

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -2,7 +2,7 @@
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React from "react";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { ResolverSelector } from "./ResolverSelector";
@@ -23,7 +23,7 @@ export function zappPipesDataConnector(
 ) {
   return function WrappedWithZappPipesData(props: Props) {
     const { screenData } = useRoute();
-    const { plugins } = usePickFromState(["plugins"]);
+    const plugins = usePlugins();
     const screenContextData = useScreenContext();
 
     const {

package/Decorators/ZappPipesDataConnector/resolvers/StaticFeedResolver.tsx

@@ -76,7 +76,7 @@ export function StaticFeedResolver({
 
   const zappPipesDataProps = useMemo(
     () => ({
-      zappPipesData: { url, loading, data, error },
+      zappPipesData: { url, loading, data, error }, // todo: add applyItemLimit
       reloadData,
       loadNextData: undefined, // Static resolver doesn't support pagination
     }),

package/Helpers/DataSourceHelper/__tests__/itemLimitForData.test.ts

@@ -0,0 +1,80 @@
+import { itemLimitForData } from "..";
+
+describe("itemLimitForData (no mocks)", () => {
+  test("returns full array when item_limit is undefined (default Infinity)", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: undefined },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("enforces positive numeric item_limit", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3, 4], {
+      rules: { item_limit: 2 },
+    });
+
+    expect(result).toEqual([1, 2]);
+  });
+
+  test("returns empty array when entry is empty", () => {
+    const result = itemLimitForData([], {
+      rules: { item_limit: 3 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("defaults entry to empty array when it is undefined", () => {
+    const result = itemLimitForData(undefined, {
+      rules: { item_limit: 5 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("handles missing component", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], undefined);
+    // missing component → item_limit = undefined → fallback to Infinity
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("handles missing rules object", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], {});
+
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("non-positive item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: -10 },
+    });
+
+    // -10 → invalid → fallback to Infinity → no limit
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("zero item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: 0 },
+    });
+
+    // 0 → invalid → fallback to Infinity
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("NaN item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: NaN },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+});

package/Helpers/DataSourceHelper/index.ts

@@ -0,0 +1,19 @@
+import { toPositiveNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export function itemLimitForData(
+  entry: ZappEntry[],
+  component: {
+    rules?: { item_limit?: number | string };
+  }
+) {
+  if (!component?.rules?.item_limit) {
+    return entry;
+  }
+
+  const itemLimit = toPositiveNumberWithDefault(
+    Infinity,
+    component?.rules?.item_limit
+  );
+
+  return (entry || []).slice(0, itemLimit);
+}

package/index.d.ts

@@ -228,6 +228,12 @@ declare type TabsSelectionContextType = {
   selectedEntryIndex: number;
 };
 
+declare type TabsAccessibility = {
+  announcement?: string;
+  selectedHint?: string;
+  hint?: string;
+};
+
 declare type TabsProps = {
   entry: ZappEntry[];
   groupId: string;
@@ -235,6 +241,7 @@ declare type TabsProps = {
   focused?: boolean;
   parentFocus?: ParentFocus;
   style?: ReactViewStyle;
+  accessibility?: TabsAccessibility;
 };
 
 declare type TabContentProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.5830601313",
+  "version": "15.0.0-alpha.5918085834",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.5830601313",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.5830601313",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.5830601313",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.5830601313",
+    "@applicaster/applicaster-types": "15.0.0-alpha.5918085834",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.5918085834",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.5918085834",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.5918085834",
+    "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-type Props = {
-  animationType: string;
-  children: React.ReactNode;
-  style?: Record<string, any>;
-  additionalData?: { [key: string]: any };
-};
-
-export const AnimationComponent = (props: Props) => {
-  const { style } = props;
-
-  const Component = style ? View : React.Fragment;
-
-  return <Component {...props}>{props.children}</Component>;
-};

package/Helpers/DataSourceHelper/index.js

@@ -1,19 +0,0 @@
-import * as R from "ramda";
-
-export function itemLimitForData(entry = [], component) {
-  const itemLimitValue = Number(R.path(["rules", "item_limit"], component));
-
-  const itemLimit =
-    itemLimitValue && itemLimitValue > 0
-      ? itemLimitValue
-      : Number.MAX_SAFE_INTEGER;
-
-  const isInRange = (min, max) => R.both(R.gte(R.__, min), R.lt(R.__, max));
-
-  const entryShouldBeSliced = (entry) =>
-    isInRange(0, R.length(entry))(itemLimit);
-
-  const sliceEntriesUpToItemLimit = R.slice(0, itemLimit);
-
-  return R.when(entryShouldBeSliced, sliceEntriesUpToItemLimit)(entry);
-}