@applicaster/zapp-react-native-ui-components 13.0.5-rc.0 → 14.0.0-alpha.1101330035

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -21,87 +21,27 @@ exports[`PlayerWrapper renders inline 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-      <View
-        animationType="componentFade"
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      >
-        <View
-          configuration={
-            {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            {
-              "id": "test",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -127,57 +67,27 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": undefined,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": undefined,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -203,103 +113,27 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "red",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "row",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7777777777777777,
-              "height": undefined,
-              "width": 195,
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      >
-        <View
-          additionalData={
-            {
-              "disableAnimatedComponent": false,
-              "resetAnimationValue": undefined,
-              "useLayoutMeasure": true,
-            }
-          }
-          animationType="moveUpComponent"
-          style={
-            {
-              "flex": 1,
-            }
-          }
-        />
-      </View>
-      <View
-        animationType="componentFade"
-        style={
-          {
-            "flex": 1,
-          }
-        }
-      >
-        <View
-          configuration={
-            {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            {
-              "id": "test",
-            }
-          }
-          isTablet={true}
-          isTabletLandscape={true}
-          style={
-            {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;
@@ -325,57 +159,27 @@ exports[`PlayerWrapper renders properly 1`] = `
         "top": "additive",
       }
     }
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-        },
-        {
-          "height": 800,
-          "width": 300,
-        },
-        {},
-      ]
-    }
+    style={{}}
   >
     <View
-      additionalData={
-        {
-          "saveArea": true,
-        }
-      }
-      animationType="moveUpComponent"
       style={
         [
           {
-            "flexDirection": "column",
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
           },
+          {},
           {
-            "flex": 1,
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
           },
+          {},
         ]
       }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "position": "relative",
-              "zIndex": 200,
-            },
-            {
-              "aspectRatio": 1.7786666666666666,
-              "height": undefined,
-              "width": "100%",
-            },
-            {},
-            {},
-          ]
-        }
-        testID="test-player-container"
-      />
-    </View>
+      testID="test-player-container"
+    />
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
 `;

package/Components/VideoModal/hooks/index.ts

@@ -1,5 +1,3 @@
-export { useBackgroundColor } from "./useBackgroundColor";
-
 export { useDelayedPlayerDetails } from "./useDelayedPlayerDetails";
 
 export { useInitialPlayerState } from "./useInitialPlayerState";

package/Components/VideoModal/hooks/useModalSize.ts

@@ -9,6 +9,12 @@ import {
 
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { StatusBar } from "react-native";
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 
 const { Logger } = getXray();
 
@@ -27,12 +33,17 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
 
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
-    height: frame.height,
+    height: isOldAndroidDevice
+      ? frame.height + StatusBar.currentHeight
+      : frame.height,
   });
 
   const setNewModalSize = React.useCallback((newSize, log) => {
@@ -44,7 +55,12 @@ export const useModalSize = (): Size => {
         return oldSize;
       }
 
-      return newSize;
+      return {
+        width: newSize.width,
+        height: isOldAndroidDevice
+          ? newSize.height + StatusBar.currentHeight
+          : newSize.height,
+      };
     });
 
     logger.debug({

package/Components/VideoModal/utils.ts

@@ -34,6 +34,9 @@ export const useConfiguration = () => {
     minimised_height = 0,
     minimised_height_tablet = 0,
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    screen_background_color,
+    audio_player_background_color,
   } = config;
 
   const minimisedHeight = useIsTablet()
@@ -43,6 +46,9 @@ export const useConfiguration = () => {
   return {
     minimised_height: Number(minimisedHeight),
     modal_background_color,
+    tablet_landscape_player_container_background_color,
+    audio_player_background_color,
+    screen_background_color,
   };
 };
 

package/Components/Viewport/VisibilitySensor/VisibilitySensor.tsx

@@ -4,8 +4,8 @@ which helps in detecting whether a given component is visible within the viewpor
 It is useful for implementing lazy loading or triggering specific actions when a component comes into view.
 */
 
-import React, { useEffect, useState, useRef, ReactNode, FC } from "react";
-import { View, Dimensions } from "react-native";
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import { Dimensions, View } from "react-native";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -78,7 +78,7 @@ const VisibilitySensorComponent: FC<Props> = ({
   };
 
   const stopWatching = () => {
-    interval = clearInterval(interval);
+    clearInterval(interval);
   };
 
   const isInViewPort = () => {

package/Components/default-cell-renderer/viewTrees/tv/DefaultCell/index.ts

@@ -1,10 +1,10 @@
 import {
-  getColor,
   ACTIVE_COLOR,
   BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
   FOCUSED_TEXT_COLOR,
-} from "../../../colors/index";
+  getColor,
+  MAIN_TEXT_COLOR,
+} from "../../../colors";
 
 const Image = "Image";
 const View = "View";

package/Decorators/RiverFeedLoader/index.tsx

@@ -13,6 +13,7 @@ import {
   loadDatasources,
   usePipesContexts,
 } from "./utils";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 type RiverProps = {
   dispatch: DispatchProp;
@@ -25,7 +26,7 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
   return function WrappedWithRiverFeedLoader(props: RiverProps) {
     const { river } = props;
     const { screenData, pathname } = useRoute();
-
+    const resolvers = useScreenResolvers();
     const pipesContexts = usePipesContexts(river.id, pathname);
 
     const componentsToLoad = ignoreComponentsWithClearCacheFlag(
@@ -49,7 +50,12 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
         item?.filter((item2) => item2 !== undefined)
       );
 
-      loadDatasources(nonEmptyDataSources, river?.id, props.dispatch);
+      loadDatasources(
+        nonEmptyDataSources,
+        river?.id,
+        props.dispatch,
+        resolvers
+      );
     }, []);
 
     return <Component {...props} />;

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -12,11 +12,16 @@ export { getDatasourceUrl } from "./getDatasourceUrl";
 
 export const DATASOURCE_CHUNKS = 10;
 
-export async function loadDatasources(urls: string[][], riverId, dispatch) {
+export async function loadDatasources(
+  urls: string[][],
+  riverId,
+  dispatch,
+  resolvers
+) {
   return reducePromises<string, void>(
     mapPromises<string, void>((url) => {
       if (url) {
-        return dispatch(loadPipesData(url, { riverId }));
+        return dispatch(loadPipesData(url, { riverId, resolvers }));
       }
     }),
     undefined,

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -19,7 +19,11 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
-import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
+import {
+  subscribeForUrlContextKeyChanges,
+  subscribeForUrlScreenKeyChanges,
+} from "@applicaster/zapp-pipes-v2-client";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 type Props = {
   component: ZappUIComponent;
@@ -204,7 +208,9 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { screenData, pathname } = useRoute();
+    const screenStateStore = useScreenStateStore();
+
     const { plugins } = usePickFromState(["plugins"]);
 
     const screenContextData = useScreenContext();
@@ -286,6 +292,18 @@ export function zappPipesDataConnector(
       componentIndex
     );
 
+    useEffect(() => {
+      if (!(dataSourceUrl?.includes("pipesv2://") && reloadData)) {
+        return subscribeForUrlScreenKeyChanges(
+          dataSourceUrl,
+          pathname,
+          screenStateStore,
+          {},
+          reloadData
+        );
+      }
+    }, [dataSourceUrl, reloadData]);
+
     useEffect(() => {
       if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
         const addListener = getListenerFromPlugin(dataSourceUrl, plugins);

package/index.d.ts

@@ -24,7 +24,6 @@ type GeneralContentScreenProps = {
   } & Record<string, any>;
   focused?: boolean;
   parentFocus?: ParentFocus;
-  extraOffset?: number;
   containerHeight?: number;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.5-rc.0",
+  "version": "14.0.0-alpha.1101330035",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,16 +27,12 @@
     "url": "https://github.com/applicaster/quickbrick/issues"
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
-  "devDependencies": {
-    "redux-mock-store": "^1.5.3"
-  },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.5-rc.0",
-    "@applicaster/zapp-react-native-bridge": "13.0.5-rc.0",
-    "@applicaster/zapp-react-native-redux": "13.0.5-rc.0",
-    "@applicaster/zapp-react-native-utils": "13.0.5-rc.0",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1101330035",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1101330035",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1101330035",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1101330035",
     "promise": "^8.3.0",
-    "react-router-native": "^5.1.2",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -1,10 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useConfiguration } from "../utils";
-
-export const useBackgroundColor = (): string => {
-  const { modal_background_color: modalBackgroundColor } = useConfiguration();
-
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  return modalBackgroundColor || theme?.status_background_color;
-};

package/Decorators/Navigator/__tests__/react-router-native-mock.js

@@ -1,11 +0,0 @@
-import React from "react";
-
-const reactRouter = jest.genMockFromModule("react-router-native");
-
-function withRouter(Component) {
-  return (props) => <Component {...props} />; // eslint-disable-line react/display-name
-}
-
-reactRouter.withRouter = withRouter;
-
-module.exports = reactRouter;