@applicaster/zapp-react-native-ui-components 13.0.0-rc.99 → 14.0.0-alpha.1216545755

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -309,7 +309,6 @@ export const getMoveUpValue = ({
   progressBarHeight,
   isTablet,
   isTabletLandscape,
-  inlineAudioPlayer,
   tabletLandscapePlayerTopPosition,
 }) => {
   if (additionalData.saveArea) {
@@ -322,17 +321,12 @@ export const getMoveUpValue = ({
   }
 
   if (isTablet) {
-    if (
-      isTabletLandscape &&
-      (!isAudioItem || (isAudioItem && inlineAudioPlayer))
-    ) {
+    if (isTabletLandscape) {
       return -tabletLandscapePlayerTopPosition + progressBarHeight;
+    } else {
+      return -130;
     }
-
-    // for audioPlayer(tablet/isTabletPortrait) in docked mode
-    return -130;
   }
 
-  // for audioPlayer(mobile) in docked mode
   return -50 + progressBarHeight;
 };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -74,20 +74,6 @@ const getScreenAspectRatio = () => {
   return longEdge / shortEdge;
 };
 
-const safeAreaStyles = (
-  configuration: Configuration,
-  isTablet: boolean
-): ViewStyle => {
-  const tablet_landscape_player_container_background_color =
-    configuration?.tablet_landscape_player_container_background_color;
-
-  return {
-    backgroundColor: isTablet
-      ? tablet_landscape_player_container_background_color
-      : "transparent",
-  };
-};
-
 const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   if (isTablet) {
     return ["top"];
@@ -156,6 +142,7 @@ const PlayerWrapperComponent = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    fullscreen,
     pip,
   } = props;
 
@@ -211,14 +198,17 @@ const PlayerWrapperComponent = (props: Props) => {
     [containerDimensions, playerDimensionsHack]
   );
 
+  const wrapperViewStyle: ViewStyle = {
+    backgroundColor:
+      isTablet && !fullscreen
+        ? configuration?.tablet_landscape_player_container_background_color
+        : "transparent",
+  };
+
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimensionsHack,
-      ]}
+      style={[wrapperViewStyle, style, playerDimensionsHack]}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}

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

@@ -71,6 +71,36 @@ exports[`PlayerWrapper renders inline 1`] = `
         }
         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>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -239,6 +269,36 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 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>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,19 +1,9 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
-import { showDetails } from "../utils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
-  withTimeout$: jest.fn(),
-}));
-
-jest.mock("../utils", () => ({
-  showDetails: jest.fn(),
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useIsTablet: jest.fn(),
+  useIsTablet: jest.fn().mockReturnValue(false),
 }));
 
 describe("useDelayedPlayerDetails", () => {
@@ -21,69 +11,41 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() }),
-    });
-
+  it("should return true initially", () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
-    expect(result.current).toBe(false);
+    expect(result.current).toBe(true);
   });
 
-  it("should return true if showDetails returns true", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(true);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isPip is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: true })
     );
 
-    expect(result.current).toBe(true);
+    expect(result.current).toBe(false);
   });
 
-  it("should return false if showDetails returns false", () => {
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: (callback) => {
-        callback.next();
-
-        return { unsubscribe: jest.fn() };
-      },
-    });
-
-    (showDetails as jest.Mock).mockReturnValue(false);
-    (useIsTablet as jest.Mock).mockReturnValue(false);
-
+  it("should return false when isDocked is true", () => {
     const { result } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+      useDelayedPlayerDetails({ isInline: true, isDocked: true, isPip: false })
     );
 
     expect(result.current).toBe(false);
   });
 
-  it("should unsubscribe on unmount", () => {
-    const unsubscribeMock = jest.fn();
+  it("should return true for tablet regardless of other flags", () => {
+    (useIsTablet as jest.Mock).mockReturnValue(true);
 
-    (withTimeout$ as jest.Mock).mockReturnValue({
-      subscribe: jest.fn().mockReturnValue({ unsubscribe: unsubscribeMock }),
-    });
-
-    const { unmount } = renderHook(() =>
-      useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
+    const { result } = renderHook(() =>
+      useDelayedPlayerDetails({
+        isInline: false,
+        isDocked: false,
+        isPip: false,
+      })
     );
 
-    unmount();
-
-    expect(unsubscribeMock).toHaveBeenCalled();
+    expect(result.current).toBe(true);
   });
 });

package/Components/VideoModal/hooks/useDelayedPlayerDetails.ts

@@ -1,13 +1,23 @@
-import * as React from "react";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 import { showDetails } from "./utils";
 
-const TIMEOUT = 100; // ms
-
 type Props = { isInline: boolean; isDocked: boolean; isPip: boolean };
 
+const showPlayerDetails = (
+  isInline: boolean,
+  isDocked: boolean,
+  isPip: boolean,
+  isTablet: boolean
+) => {
+  return showDetails({
+    isMobile: !isTablet,
+    isInline,
+    isDocked,
+    isPip,
+  });
+};
+
 /**
  * Custom hook to determine whether to show player details with a delay.
  *
@@ -22,28 +32,7 @@ export const useDelayedPlayerDetails = ({
   isDocked,
   isPip,
 }: Props): boolean => {
-  const [shouldShowDetails, setShouldShowDetails] = React.useState(false);
-
   const isTablet = useIsTablet();
 
-  React.useEffect(() => {
-    const subscription = withTimeout$(TIMEOUT).subscribe({
-      next: () => {
-        setShouldShowDetails(() => {
-          return showDetails({
-            isMobile: !isTablet,
-            isInline,
-            isDocked,
-            isPip,
-          });
-        });
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [isDocked, isTablet, isInline, isPip]);
-
-  return shouldShowDetails;
+  return showPlayerDetails(isInline, isDocked, isPip, isTablet);
 };

package/Contexts/ScreenDataContext/index.tsx

@@ -11,6 +11,8 @@ export const withScreenDataContextProvider = (Component: any) => {
     // use only initial activeRiver as this context should only be used for "Home", initial route
     const screenData = React.useMemo(() => ({ screen: activeRiver }), []);
 
+    console.log("withScreenDataContextProvider", { screenData, activeRiver });
+
     return (
       <ScreenDataContext.Provider value={screenData}>
         <Component {...props} />

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.0-rc.99",
+  "version": "14.0.0-alpha.1216545755",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,12 +31,11 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.99",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.99",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.99",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1216545755",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.1216545755",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.1216545755",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.1216545755",
     "promise": "^8.3.0",
-    "react-router-native": "^5.1.2",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },

package/Components/AudioPlayer/Artwork.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { View, Image } from "react-native";
-
-type Props = {
-  srcImage: string;
-  config?: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-  };
-};
-
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
-
-export function Artwork({ srcImage }: Props) {
-  return (
-    <View style={containerStyles}>
-      <Image
-        fadeDuration={0}
-        source={{ uri: srcImage }}
-        style={imageStyles}
-        resizeMode="cover"
-      />
-    </View>
-  );
-}

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AudioPlayerLayout /> renders correctly 1`] = `
-<View
-  pointerEvents="none"
-  style={
-    {
-      "backgroundColor": "transparent",
-      "overflow": "hidden",
-    }
-  }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "opacity": 0,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <View
-      accessibilityIgnoresInvertColors={true}
-      style={
-        {
-          "flex": 1,
-        }
-      }
-    >
-      <Image
-        resizeMode="cover"
-        source={
-          {
-            "uri": "https://example.com",
-          }
-        }
-        style={
-          [
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "height": undefined,
-              "width": undefined,
-            },
-            undefined,
-          ]
-        }
-      />
-      <View
-        style={
-          {
-            "backgroundColor": "transparent",
-            "overflow": "hidden",
-          }
-        }
-      />
-    </View>
-  </View>
-</View>
-`;

package/Components/AudioPlayer/__tests__/audioPlayerLayout.test.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
-
-import { AudioPlayerLayout } from "../AudioPlayerLayout";
-
-const audioPlayerLayoutProps = {
-  artwork: "string",
-  config: {
-    titleColor: "white",
-    summaryColor: "white",
-    backgroundColor: "black",
-    backgroundImage: "https://example.com",
-    isRTL: true,
-  },
-  children: [],
-};
-
-describe("<AudioPlayerLayout />", () => {
-  it("renders correctly", () => {
-    const { toJSON } = render(
-      <AudioPlayerLayout {...audioPlayerLayoutProps} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/Components/AudioPlayer/index.ts

@@ -1 +0,0 @@
-export { AudioPlayer } from "./AudioPlayer";

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;

package/Components/AudioPlayer/{__tests__ → tv/__tests__}/__snapshots__/Runtime.test.js.snap

@@ -20,7 +20,7 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-start",
         "opacity": 0.8,
-        "textAlign": "right",
+        "textAlign": "left",
       }
     }
   >
@@ -49,7 +49,7 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
         "fontSize": 20,
         "justifyContent": "flex-end",
         "opacity": 0.8,
-        "textAlign": "left",
+        "textAlign": "right",
       }
     }
   >