@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5353184830 → 12.0.0-alpha.5432134741

package/Components/Image/Image.android.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import FastImage, {
   FastImageProps,
 } from "@applicaster/react-native-fast-image";

package/Components/River/River.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
 import * as R from "ramda";
+import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";
 
 import { FeedLoader } from "../FeedLoader";
 import { ScreenResolver } from "../ScreenResolver";
 
-import type { ZappScreenProps } from "@applicaster/zapp-react-native-flow-types";
-
-import { GeneralContentScreen } from "../GeneralContentScreen";
-
 type Props = ZappScreenProps & {
   feedUrl?: string;
   isInsideContainer?: boolean;
@@ -18,6 +15,12 @@ type Props = ZappScreenProps & {
     | import("react-native").FlatListProps<any>
   ) &
     Record<string, any>;
+  appData: AppDataKeys;
+  screenTitle: string;
+  screenSummary: string;
+  setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
+  screenContext: ZappRiver;
+  river: ZappRiver;
 };
 
 type State = {
@@ -27,7 +30,7 @@ type State = {
 export class RiverComponent extends React.Component<Props, State> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {

package/Components/River/useScreenConfiguration.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { useMemo } from "react";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
@@ -47,7 +47,7 @@ const stylingKeys = [
 
 export function useScreenConfiguration(screenId: string): ScreenConfiguration {
   const { rivers } = usePickFromState(["rivers"]);
-  const { deviceInfo } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   return useMemo(() => {
     const config = {} as ScreenConfiguration;
@@ -56,8 +56,7 @@ export function useScreenConfiguration(screenId: string): ScreenConfiguration {
     if (screenData) {
       const { styles } = screenData;
 
-      const keyPrefix =
-        deviceInfo?.isTablet && styles?.tablet_theme ? "tablet_" : "";
+      const keyPrefix = isTablet && styles?.tablet_theme ? "tablet_" : "";
 
       stylingKeys.forEach(([key, castFn]) => {
         const styleKey = `${keyPrefix}${key}`;

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,15 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
 import { create, act } from "react-test-renderer";
-import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
-
-const mockStore = configureStore();
-
-const plugins = [];
-const store = mockStore({ plugins });
-
-import { ORIENTATIONS } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -124,11 +115,7 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     act(() => {
-      wrapper = create(
-        <Provider store={store}>
-          <Screen {...screenProps} />{" "}
-        </Provider>
-      );
+      wrapper = create(<Screen {...screenProps} />);
     });
 
     it("renders correctly", () => {
@@ -136,24 +123,24 @@ describe("<Screen Component />", () => {
     });
   });
 
-  // describe("when the navbar should be hidden", () => {
-  //   beforeEach(() => {
-  //     mock_navBarVisibleFlag = false;
-  //     wrapper = create(<Screen {...screenProps} />);
-  //   });
+  describe("when the navbar should be hidden", () => {
+    beforeEach(() => {
+      mock_navBarVisibleFlag = false;
+      wrapper = create(<Screen {...screenProps} />);
+    });
 
-  //   afterEach(() => {
-  //     mock_navBarVisibleFlag = true;
-  //   });
+    afterEach(() => {
+      mock_navBarVisibleFlag = true;
+    });
 
-  //   it("renders correctly", () => {
-  //     act(() => {
-  //       wrapper = create(<Screen {...screenProps} />);
-  //     });
+    it("renders correctly", () => {
+      act(() => {
+        wrapper = create(<Screen {...screenProps} />);
+      });
 
-  //     expect(wrapper.toJSON()).toMatchSnapshot();
-  //   });
-  // });
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+  });
 
   // it("invokes the orientation hook when the route changes", () => {
   //   act(() => {

package/Components/Screen/index.tsx

@@ -7,7 +7,6 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenOrientationHandler } from "./orientationHandler";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
-import type { ZappNavigationProps } from "@applicaster/zapp-react-native-flow-types/index";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 

package/Components/VideoLive/LiveImageManager.ts

@@ -379,7 +379,9 @@ export class LiveImageManager implements PlayerLifecycleListener {
   onLiveImageError = (item: LiveImage, error: Error) => {
     item.setMode(LiveImageType.Image);
 
-    if (this.currentlyPlaying === item) {
+    const currentItem = this.currentlyPlaying;
+
+    if (currentItem === item) {
       this.currentlyPlaying = null;
       // TODO: ...Maybe player some other item
     }
@@ -389,8 +391,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
       event: {
         item,
         error,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
+        playerId: currentItem?.playerId,
+        primaryPlayerId: currentItem?.playerId,
       },
     });
   };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -33,6 +33,7 @@ type Props = {
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
+  pip?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
@@ -135,6 +136,7 @@ export const PlayerWrapper = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    pip,
   } = props;
 
   const isTablet = useIsTablet();
@@ -158,7 +160,7 @@ export const PlayerWrapper = (props: Props) => {
     () => ({
       ...baseDimensions,
       width: isInlineModal && docked ? undefined : baseDimensions.width,
-      aspectRatio: !isInlineModal ? getScreenAspectRatio() : 16 / 9,
+      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
     [baseDimensions, isInlineModal]
   );

package/Decorators/RiverResolver/index.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
 
-import type {
-  ZappComponent,
-  ZappRivers,
-} from "@applicaster/zapp-react-native-flow-types";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

package/Decorators/index.tsx

@@ -1,9 +1,5 @@
 import { zappPipesDataConnector } from "./ZappPipesDataConnector";
 import * as R from "ramda";
-import type {
-  ZappComponent,
-  ZappDecorator,
-} from "@applicaster/zapp-react-native-flow-types";
 
 import { withNavigator } from "./Navigator";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.5353184830",
+  "version": "12.0.0-alpha.5432134741",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -29,16 +29,15 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "devDependencies": {
-    "@applicaster/zapp-react-native-flow-types": "1.5.0",
     "@types/react": "17.0.2",
     "@types/react-native": "0.69.6",
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5353184830",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5353184830",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5353184830",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5353184830",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5432134741",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5432134741",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5432134741",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5432134741",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",