@applicaster/zapp-react-native-ui-components 12.0.0-rc.5 → 12.0.0-rc.6

package/Components/AnimatedInOut/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Animated, EasingFunction, StyleProp, ViewStyle } from "react-native";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle =
@@ -35,11 +36,16 @@ function getAnimation(config: AnimatedInConfig, phase: "in" | "out") {
   return config[phase] || config;
 }
 
-export function AnimatedInOut(props: Props) {
-  const { visible, animationConfig, children } = props;
-
+export function AnimatedInOut({
+  visible,
+  animationConfig,
+  staticStyles = {},
+  children,
+}: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(null);
+  const [animating, setAnimating] = React.useState(undefined);
+
+  const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
   function startAnimation(toValue, config) {
     if (animating) {
@@ -55,7 +61,7 @@ export function AnimatedInOut(props: Props) {
       delay,
       useNativeDriver: true,
     }).start(() => {
-      setAnimating(null);
+      setAnimating(undefined);
       onAnimationEnd();
     });
 
@@ -63,12 +69,14 @@ export function AnimatedInOut(props: Props) {
   }
 
   React.useEffect(() => {
-    if (visible) {
+    if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
-    } else {
+    }
+
+    if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, animating]);
+  }, [visible, previousVisible]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -77,7 +85,7 @@ export function AnimatedInOut(props: Props) {
   return (
     <Animated.View
       renderToHardwareTextureAndroid={animating}
-      style={[styles(animatedValue), props?.staticStyles || {}]}
+      style={[styles(animatedValue), staticStyles]}
     >
       {children}
     </Animated.View>

package/Components/Image/Image.android.tsx

@@ -15,6 +15,8 @@ export const QBImage = (props: FastImageProps) => {
       headers: props.source.headers,
       priority: props.source.priority,
       cache: props.source.cache,
+      maxWidth: props.source.maxWidth,
+      maxHeight: props.source.maxHeight,
     };
   }, [
     ...(typeof props.source === "object"
@@ -23,6 +25,8 @@ export const QBImage = (props: FastImageProps) => {
           props.source?.priority,
           props.source?.cache,
           props.source?.headers,
+          props.source?.maxWidth,
+          props.source?.maxHeight,
         ]
       : []),
   ]);

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -4,7 +4,6 @@ import { Text, TextStyle, View, ViewStyle } from "react-native";
 
 import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 
@@ -26,10 +25,10 @@ const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
   textAlign: "center",
 });
 
-const errorStyles = ({ width, height, backgroundColor }): ViewStyle => ({
+const errorStyles = ({ backgroundColor }): ViewStyle => ({
   flex: 1,
-  width,
-  height,
+  width: "100%",
+  height: "100%",
   justifyContent: "center",
   alignItems: "center",
   position: "absolute",
@@ -41,8 +40,6 @@ export function ErrorDisplayComponent({
   styles,
   remoteConfigurations: { localizations },
 }: Props) {
-  const { width, height } = useDimensions("window");
-
   const theme = useTheme();
   const backgroundColor = theme?.app_background_color;
 
@@ -53,7 +50,7 @@ export function ErrorDisplayComponent({
   const appStyles = R.prop(styleKeys.style_namespace, styles);
 
   return (
-    <View style={errorStyles({ width, height, backgroundColor })}>
+    <View style={errorStyles({ backgroundColor })}>
       <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
     </View>
   );

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { Platform, StyleSheet, View, ViewStyle } from "react-native";
+import {
+  Dimensions,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -7,12 +13,12 @@ import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/dev
 import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
-type Dimensions = {
-  width: number;
-  height: number;
+type DimensionsT = {
+  width: number | string;
+  height: number | string;
+  aspectRatio?: number;
 };
 
 type Configuration = {
@@ -23,25 +29,20 @@ type Configuration = {
 
 type Props = {
   entry: ZappEntry;
-  style: ViewStyle & Dimensions;
+  style: ViewStyle & DimensionsT;
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
-  children: (playerDimensions: Dimensions) => React.ReactNode;
+  children: (playerDimensions: DimensionsT) => React.ReactNode;
   configuration: Configuration;
 };
 
 const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
   playerDetails: { flex: 1, paddingTop: 20 },
-  inlinePlayerContainerDimensions: {
-    aspectRatio: 16 / 9,
-    width: "100%",
-    height: undefined,
-  },
 });
 
 const orientationStyles = StyleSheet.create({
@@ -57,6 +58,15 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
   return orientationStyles.portrait;
 };
 
+const getScreenAspectRatio = () => {
+  const { width, height } = Dimensions.get("screen");
+
+  const longEdge = Math.max(width, height);
+  const shortEdge = Math.min(width, height);
+
+  return longEdge / shortEdge;
+};
+
 const safeAreaStyles = (
   configuration: Configuration,
   isTablet: boolean
@@ -71,34 +81,6 @@ const safeAreaStyles = (
   };
 };
 
-const getTabletWidth = (
-  configuration: Configuration,
-  dimensions: Dimensions
-) => {
-  const tablet_landscape_sidebar_width =
-    configuration?.tablet_landscape_sidebar_width;
-
-  const { width } = dimensions;
-
-  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
-
-  if (tablet_landscape_sidebar_width?.includes("%")) {
-    return width * (1 - sidebarWidth / 100);
-  }
-
-  if (Number.isNaN(sidebarWidth)) {
-    return width * 0.65;
-  }
-
-  return width - sidebarWidth;
-};
-
-export const defaultAspectRatioHeight = (width: number): number =>
-  (width / 16) * 9;
-
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
-
 const getEdges = (
   isTablet: boolean,
   docked: boolean,
@@ -120,6 +102,28 @@ const getEdges = (
   return ["top"];
 };
 
+const getTabletWidth = (
+  configuration: Configuration,
+  dimensions: DimensionsT
+) => {
+  const tablet_landscape_sidebar_width =
+    configuration?.tablet_landscape_sidebar_width;
+
+  const { width } = dimensions;
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return Number(width) * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return Number(width) * 0.65;
+  }
+
+  return Number(width) - sidebarWidth;
+};
+
 export const PlayerWrapper = (props: Props) => {
   const {
     entry,
@@ -141,40 +145,38 @@ export const PlayerWrapper = (props: Props) => {
 
   const tabletWidth = getTabletWidth(configuration, style);
 
-  const { width: screenWidth } = useDimensions("screen");
-
-  const containerDimensions: Dimensions = React.useMemo(
+  const baseDimensions: DimensionsT = React.useMemo(
     () => ({
       width:
-        isInlineModal && !docked && isTabletLandscape
-          ? tabletWidth
-          : style.width,
-      height:
-        isInlineModal && !docked
-          ? defaultAspectRatioHeight(
-              isTabletLandscape ? tabletWidth : screenWidth
-            )
-          : style.height,
+        isInlineModal && !docked && isTabletLandscape ? tabletWidth : "100%",
+      height: isInlineModal && docked ? style.height : undefined,
     }),
-    [isInlineModal, docked, isTabletLandscape, tabletWidth, style, screenWidth]
+    [isInlineModal, tabletWidth, style.height, docked]
   );
 
-  const playerDimensions: Dimensions = React.useMemo(
+  const playerDimensions: DimensionsT = React.useMemo(
     () => ({
-      width:
-        isInlineModal && docked
-          ? defaultAspectRatioWidth(containerDimensions.height)
-          : containerDimensions.width,
-      height: containerDimensions.height,
+      ...baseDimensions,
+      width: isInlineModal && docked ? undefined : baseDimensions.width,
+      aspectRatio: !isInlineModal ? getScreenAspectRatio() : 16 / 9,
+    }),
+    [baseDimensions, isInlineModal]
+  );
+
+  const containerDimensions: DimensionsT = React.useMemo(
+    () => ({
+      ...baseDimensions,
+      aspectRatio:
+        isInlineModal && docked ? undefined : playerDimensions.aspectRatio,
     }),
-    [isInlineModal, docked, containerDimensions]
+    [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
   );
 
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
   const childrenStyles = React.useMemo(
     () => ({ ...playerDimensions, ...playerDimesionsHack }),
-    [playerDimensions, playerDimesionsHack]
+    [containerDimensions, playerDimesionsHack]
   );
 
   return (
@@ -195,9 +197,6 @@ export const PlayerWrapper = (props: Props) => {
               defaultStyles.playerContainer,
               containerDimensions,
               containerStyle,
-              isInlineModal && !docked && !isTabletLandscape
-                ? defaultStyles.inlinePlayerContainerDimensions
-                : {},
               playerDimesionsHack,
             ]}
           >

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

@@ -50,7 +50,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
 
 jest.mock("../utils", () => ({ playerDimesionsHack: {} }));
 
-const { PlayerWrapper, defaultAspectRatioWidth } = require("../PlayerWrapper");
+const { PlayerWrapper } = require("../PlayerWrapper");
 
 jest.useFakeTimers();
 const children = jest.fn(() => {});
@@ -110,7 +110,8 @@ describe("PlayerWrapper", () => {
 
     const expectDimensions = {
       ...dimensions,
-      width: defaultAspectRatioWidth(dimensions.height),
+      width: undefined,
+      aspectRatio: 16 / 9,
     };
 
     expect(element).toMatchSnapshot();

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

@@ -34,17 +34,13 @@ exports[`PlayerWrapper renders inline 1`] = `
           "position": "relative",
           "zIndex": 200,
         },
-        Object {
-          "height": 421.875,
-          "width": 300,
-        },
-        Object {},
         Object {
           "aspectRatio": 1.7777777777777777,
           "height": undefined,
           "width": "100%",
         },
         Object {},
+        Object {},
       ]
     }
     testID="test-player-container"
@@ -107,12 +103,12 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "zIndex": 200,
         },
         Object {
+          "aspectRatio": undefined,
           "height": 50,
-          "width": 300,
+          "width": "100%",
         },
         Object {},
         Object {},
-        Object {},
       ]
     }
     testID="test-player-container"
@@ -163,12 +159,12 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 109.6875,
+          "aspectRatio": 1.7777777777777777,
+          "height": undefined,
           "width": 195,
         },
         Object {},
         Object {},
-        Object {},
       ]
     }
     testID="test-player-container"
@@ -231,12 +227,12 @@ exports[`PlayerWrapper renders properly 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "aspectRatio": 1.7786666666666666,
+          "height": undefined,
+          "width": "100%",
         },
         Object {},
         Object {},
-        Object {},
       ]
     }
     testID="test-player-container"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.5",
+  "version": "12.0.0-rc.6",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -35,10 +35,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.5",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.5",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.5",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.5",
+    "@applicaster/applicaster-types": "12.0.0-rc.6",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.6",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.6",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.6",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",