@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3021004521 → 12.0.0-alpha.4534459584

package/Components/AnimatedInOut/index.tsx

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

package/Components/Image/Image.android.tsx

@@ -1,3 +1,31 @@
-import FastImage from "@applicaster/react-native-fast-image";
+import React from "react";
 
-export const QBImage = FastImage;
+import FastImage, {
+  FastImageProps,
+} from "@applicaster/react-native-fast-image";
+
+export const QBImage = (props: FastImageProps) => {
+  const source = React.useMemo(() => {
+    if (typeof props.source === "number") {
+      return props.source;
+    }
+
+    return {
+      uri: props.source.uri,
+      headers: props.source.headers,
+      priority: props.source.priority,
+      cache: props.source.cache,
+    };
+  }, [
+    ...(typeof props.source === "object"
+      ? [
+          props.source?.uri,
+          props.source?.priority,
+          props.source?.cache,
+          props.source?.headers,
+        ]
+      : []),
+  ]);
+
+  return <FastImage {...props} source={source} />;
+};

package/Components/VideoModal/PlayerWrapper.tsx

@@ -37,6 +37,11 @@ type Props = {
 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({
@@ -190,12 +195,9 @@ export const PlayerWrapper = (props: Props) => {
               defaultStyles.playerContainer,
               containerDimensions,
               containerStyle,
-              {
-                height:
-                  isInlineModal && !docked
-                    ? containerDimensions.height + 10
-                    : containerDimensions.height,
-              },
+              isInlineModal && !docked && !isTabletLandscape
+                ? defaultStyles.inlinePlayerContainerDimensions
+                : {},
               playerDimesionsHack,
             ]}
           >

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

@@ -40,7 +40,9 @@ exports[`PlayerWrapper renders inline 1`] = `
         },
         Object {},
         Object {
-          "height": 431.875,
+          "aspectRatio": 1.7777777777777777,
+          "height": undefined,
+          "width": "100%",
         },
         Object {},
       ]
@@ -109,9 +111,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "width": 300,
         },
         Object {},
-        Object {
-          "height": 50,
-        },
+        Object {},
         Object {},
       ]
     }
@@ -167,9 +167,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           "width": 195,
         },
         Object {},
-        Object {
-          "height": 119.6875,
-        },
+        Object {},
         Object {},
       ]
     }
@@ -237,9 +235,7 @@ exports[`PlayerWrapper renders properly 1`] = `
           "width": 300,
         },
         Object {},
-        Object {
-          "height": 800,
-        },
+        Object {},
         Object {},
       ]
     }

package/Components/VideoModal/hooks/useModalSize.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Dimensions } from "react-native";
 import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import {
@@ -39,22 +39,13 @@ export const useModalSize = (): Size => {
     MODAL_SIZE_FOR_PORTRAIT
   );
 
-  const setNewModalSize = React.useCallback((newSize, log) => {
-    setModalSize((oldSize) => {
-      if (
-        oldSize.height === newSize.height &&
-        oldSize.width === newSize.width
-      ) {
-        return oldSize;
-      }
-
-      return newSize;
-    });
+  const setNewModalSize = (size, log) => {
+    setModalSize(size);
 
     logger.debug({
       message: log,
     });
-  }, []);
+  };
 
   const isTabletLandscape = useIsTabletLandscape();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.3021004521",
+  "version": "12.0.0-alpha.4534459584",
   "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-alpha.3021004521",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3021004521",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3021004521",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3021004521",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4534459584",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4534459584",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4534459584",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4534459584",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",