@applicaster/zapp-react-native-ui-components 12.0.0-rc.2 → 12.0.0-rc.21

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/GeneralContentScreen/GeneralContentScreen.tsx

@@ -52,13 +52,13 @@ export const GeneralContentScreen = ({
       React.useState(actionsInitialStateSetters.length === 0);
 
     useEffect(() => {
-      log_info(
-        `ScreenContainer: starting to check river action provider ready, current status: ${riverActionProvidersReady}`,
-        { actionsInitialStateSetters }
-      );
-
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
+          log_info(
+            "ScreenContainer: starting to check river action providers to initialize",
+            { actionsInitialStateSetters }
+          );
+
           allSettled(actionsInitialStateSetters).finally(() => {
             log_info(
               "ScreenContainer: action provider ready, completed. Starting to present screen"

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -104,7 +104,7 @@ export function HandlePlayable({
   const [Player, playerModuleProperties] = getPlayer(item, state);
 
   const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins) || {};
+    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);

package/Components/Image/Image.android.tsx

@@ -1,3 +1,34 @@
-import FastImage from "@applicaster/react-native-fast-image";
+import React from "react";
+import FastImage, {
+  FastImageProps,
+} from "@applicaster/react-native-fast-image";
 
-export const QBImage = FastImage;
+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,
+      maxWidth: props.source.maxWidth,
+      maxHeight: props.source.maxHeight,
+    };
+  }, [
+    ...(typeof props.source === "object"
+      ? [
+          props.source?.uri,
+          props.source?.priority,
+          props.source?.cache,
+          props.source?.headers,
+          props.source?.maxWidth,
+          props.source?.maxHeight,
+        ]
+      : []),
+  ]);
+
+  return <FastImage {...props} source={source} />;
+};

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -152,7 +152,6 @@ export const BorderContainerView = (props: Props) => {
     ...updatedPaddings,
     width: updatedWidth,
     height: updatedHeight,
-    ...borderStyleForMissingBorder,
   };
 
   return (

package/Components/MasterCell/DefaultComponents/CellBadge/index.tsx

@@ -1,6 +1,7 @@
 import {
   compact,
   ifElseFocusedSelected,
+  ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { getPositionStyles } from "./utils";
@@ -12,9 +13,15 @@ type Props = {
   value: Function;
   state: string;
   visible?: Boolean;
+  isMobile?: Boolean;
 };
 
-export const CellBadge = ({ value, state, visible = true }: Props) => {
+export const CellBadge = ({
+  value,
+  state,
+  visible = true,
+  isMobile = false,
+}: Props) => {
   if (!value("cell_badge_switch") || !visible) {
     return null;
   }
@@ -45,13 +52,19 @@ export const CellBadge = ({ value, state, visible = true }: Props) => {
         data: [
           {
             func: () => {
-              return ifElseFocusedSelected(
-                state,
-                value("cell_badge_focused"),
-                value("cell_badge_selected"),
-                value("cell_badge_focused_selected"),
-                value("cell_badge_default")
-              );
+              return isMobile
+                ? ifElseSelected(
+                    state,
+                    value("cell_badge_selected"),
+                    value("cell_badge_default")
+                  )
+                : ifElseFocusedSelected(
+                    state,
+                    value("cell_badge_focused"),
+                    value("cell_badge_selected"),
+                    value("cell_badge_focused_selected"),
+                    value("cell_badge_default")
+                  );
             },
             args: [],
             propName: "uri",

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -50,13 +50,17 @@ export const CollapsibleTextContainer = ({
         func: (data) => {
           const value = getValue("background_color");
 
-          // check if value is a reference to an extension
-          if (value.startsWith("extensions")) {
-            return pathOr(value, value.split("."), data);
-          } else {
-            // return default value
-            return additionalStyles.backgroundColor;
+          const valueFromData = pathOr(value, value.split("."), data);
+
+          if (
+            valueFromData &&
+            (valueFromData.startsWith("#") || valueFromData.startsWith("rgba("))
+          ) {
+            return valueFromData;
           }
+
+          // return default value
+          return additionalStyles.backgroundColor;
         },
         propName: "backgroundColor",
       },

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/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

@@ -2,8 +2,6 @@ import * as React from "react";
 import { View } from "react-native";
 import { create, act } from "react-test-renderer";
 
-import { ORIENTATIONS } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
@@ -144,44 +142,44 @@ describe("<Screen Component />", () => {
     });
   });
 
-  it("invokes the orientation hook when the route changes", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
-    // @ts-ignore
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-      plugin_type: "player",
-    });
-
-    act(() => {
-      wrapper.update(
-        <Screen
-          {...screenProps}
-          pathname="/playable"
-          screenData={{
-            id: "player-testId",
-            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-            plugin_type: "player",
-          }}
-        />
-      );
-    });
-
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-    });
-
-    act(() => {
-      wrapper.update(<Screen {...screenProps} />);
-    });
-
-    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-      1,
-      ORIENTATIONS.landscapeSensor
-    );
-  });
+  // it("invokes the orientation hook when the route changes", () => {
+  //   act(() => {
+  //     wrapper = create(<Screen {...screenProps} />);
+  //   });
+
+  //   // @ts-ignore
+  //   useCurrentScreenData.mockReturnValue({
+  //     id: "player-testId",
+  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //     plugin_type: "player",
+  //   });
+
+  //   act(() => {
+  //     wrapper.update(
+  //       <Screen
+  //         {...screenProps}
+  //         pathname="/playable"
+  //         screenData={{
+  //           id: "player-testId",
+  //           general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //           plugin_type: "player",
+  //         }}
+  //       />
+  //     );
+  //   });
+
+  //   useCurrentScreenData.mockReturnValue({
+  //     id: "player-testId",
+  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //   });
+
+  //   act(() => {
+  //     wrapper.update(<Screen {...screenProps} />);
+  //   });
+
+  //   expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
+  //     1,
+  //     ORIENTATIONS.landscapeSensor
+  //   );
+  // });
 });

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/Screen/orientationHandler.ts

@@ -8,7 +8,7 @@ import {
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 

package/Components/TrackedView/index.tsx

@@ -17,9 +17,12 @@ type TrackedViewProps = {
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {
   const children = props.children;
 
-  const onPositionUpdated = useCallback((event: TrackedViewNativeProps) => {
-    props?.onPositionUpdated(event.nativeEvent);
-  }, []);
+  const onPositionUpdated = useCallback(
+    (event: TrackedViewNativeProps) => {
+      props.onPositionUpdated(event.nativeEvent);
+    },
+    [props.onPositionUpdated]
+  );
 
   if (isTV()) {
     return <View {...(props as any)}>{children}</View>;

package/Components/VideoLive/LiveImageManager.ts

@@ -209,6 +209,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
     this.pauseItem(item);
   };
 
+  public onLiveImageCompleted = (item: LiveImage) => {
+    // TODO: Notify listeners that player has died
+    // Do not try look for new playable, otherwise you will restart video finish to play
+  };
+
   public muteAll = () => {
     log_debug("muteAll");
 
@@ -235,6 +240,14 @@ export class LiveImageManager implements PlayerLifecycleListener {
     const playerItem = this.findNextPlayableItem();
 
     if (playerItem) {
+      if (!playerItem.isFullyVisible) {
+        log_error(
+          `checkPlayerPosition: trying to start playback currently invisible item: ${playerInfo(
+            playerItem.player
+          )}`
+        );
+      }
+
       // Will also check if it's item that already playing
       this.playLiveImage(playerItem);
     }
@@ -379,7 +392,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 +404,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/VideoLive/PlayerLiveImageComponent.tsx

@@ -25,12 +25,12 @@ import { loggerLiveImageComponent } from "./loggerHelper";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 import { getAutoplaySettings } from "./utils";
+import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 
 const { log_error } = loggerLiveImageComponent;
 
-const isMeasurement = (item) => {
-  return item.id.startsWith("pre-measurement-");
-};
+const isMeasurement = (item: ZappEntry) =>
+  isString(item.id) && item.id.startsWith("pre-measurement-");
 
 type Props = {
   item: ZappEntry;
@@ -80,6 +80,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       } else {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
         }
 
         setMode(type);
@@ -127,6 +128,10 @@ const PlayerLiveImageComponent = (props: Props) => {
     ref.current = component;
   };
 
+  const onLiveImageCompleted = React.useCallback(() => {
+    LiveImageManager.instance.onLiveImageCompleted(liveImageItem);
+  }, [liveImageItem]);
+
   const onStop = React.useCallback(() => {
     LiveImageManager.instance.pauseLiveImage(liveImageItem);
   }, [liveImageItem]);
@@ -144,9 +149,10 @@ const PlayerLiveImageComponent = (props: Props) => {
 
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
-  }, [liveImageItem, item]);
+  }, [liveImageItem, item, timeoutRef.current]);
 
   React.useEffect(() => {
     if (!player) {
@@ -178,11 +184,12 @@ const PlayerLiveImageComponent = (props: Props) => {
           setMuted(false);
         },
         onPlayerClose: () => {
+          onLiveImageCompleted();
           setIsReady(false);
         },
       },
     });
-  }, [player, onStop]);
+  }, [player, onStop, onLiveImageCompleted, start, end]);
 
   React.useEffect(() => {
     const subscription = AppState.addEventListener(
@@ -233,40 +240,43 @@ const PlayerLiveImageComponent = (props: Props) => {
         };
       }
     }
-  }, [liveImageItem]);
+  }, [liveImageItem, playerId, controller]);
 
-  const onPositionUpdated = (data) => {
-    const normalizedRect = (rect) => {
-      if (!rect) {
-        return null;
-      }
+  const onPositionUpdated = React.useCallback(
+    (data) => {
+      const normalizedRect = (rect) => {
+        if (!rect) {
+          return null;
+        }
 
-      const { left, right, top, bottom } = rect;
+        const { left, right, top, bottom } = rect;
 
-      return {
-        left: left / dimensions.width,
-        right: right / dimensions.width,
-        top: top / dimensions.height,
-        bottom: bottom / dimensions.height,
-        centerX: (left + right) / 2 / dimensions.width,
-        centerY: (top + bottom) / 2 / dimensions.height,
+        return {
+          left: left / dimensions.width,
+          right: right / dimensions.width,
+          top: top / dimensions.height,
+          bottom: bottom / dimensions.height,
+          centerX: (left + right) / 2 / dimensions.width,
+          centerY: (top + bottom) / 2 / dimensions.height,
+        };
       };
-    };
 
-    liveImageItem.position = normalizedRect(data.rect);
+      liveImageItem.position = normalizedRect(data.rect);
 
-    const newIsFullyVisible = !!data.rect;
+      const newIsFullyVisible = !!data.rect;
 
-    if (liveImageItem.isFullyVisible !== newIsFullyVisible) {
-      liveImageItem.isFullyVisible = newIsFullyVisible;
+      if (liveImageItem.isFullyVisible !== newIsFullyVisible) {
+        liveImageItem.isFullyVisible = newIsFullyVisible;
 
-      liveImageItem.isFullyVisible
-        ? LiveImageManager.instance.onViewportEnter(liveImageItem)
-        : LiveImageManager.instance.onViewportLeave(liveImageItem);
-    } else {
-      LiveImageManager.instance.checkPlayerPosition(liveImageItem);
-    }
-  };
+        liveImageItem.isFullyVisible
+          ? LiveImageManager.instance.onViewportEnter(liveImageItem)
+          : LiveImageManager.instance.onViewportLeave(liveImageItem);
+      } else {
+        LiveImageManager.instance.checkPlayerPosition(liveImageItem);
+      }
+    },
+    [liveImageItem, item?.id, playerId, dimensions]
+  );
 
   const platformSpecificProps = isApplePlatform()
     ? { hideNativeControls: true, controls: false }

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,18 +1,24 @@
 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";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 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,14 +29,15 @@ type Configuration = {
 
 type Props = {
   entry: ZappEntry;
-  style: ViewStyle & Dimensions;
+  style: ViewStyle & DimensionsT;
   containerStyle?: ViewStyle;
   inline?: boolean;
   docked?: boolean;
+  pip?: boolean;
   isModal?: boolean;
   fullscreen?: boolean;
   isTabletPortrait?: boolean;
-  children: (playerDimensions: Dimensions) => React.ReactNode;
+  children: (playerDimensions: DimensionsT) => React.ReactNode;
   configuration: Configuration;
 };
 
@@ -52,6 +59,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
@@ -66,34 +82,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,
@@ -115,6 +103,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,
@@ -126,6 +136,7 @@ export const PlayerWrapper = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    pip,
   } = props;
 
   const isTablet = useIsTablet();
@@ -136,40 +147,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 && !pip ? getScreenAspectRatio() : 16 / 9,
+    }),
+    [baseDimensions, isInlineModal, pip]
+  );
+
+  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 (
@@ -190,12 +199,6 @@ export const PlayerWrapper = (props: Props) => {
               defaultStyles.playerContainer,
               containerDimensions,
               containerStyle,
-              {
-                height:
-                  isInlineModal && !docked
-                    ? containerDimensions.height + 10
-                    : containerDimensions.height,
-              },
               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

@@ -35,13 +35,11 @@ exports[`PlayerWrapper renders inline 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 421.875,
-          "width": 300,
+          "aspectRatio": 1.7777777777777777,
+          "height": undefined,
+          "width": "100%",
         },
         Object {},
-        Object {
-          "height": 431.875,
-        },
         Object {},
       ]
     }
@@ -105,13 +103,11 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "zIndex": 200,
         },
         Object {
+          "aspectRatio": undefined,
           "height": 50,
-          "width": 300,
+          "width": "100%",
         },
         Object {},
-        Object {
-          "height": 50,
-        },
         Object {},
       ]
     }
@@ -163,13 +159,11 @@ 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 {
-          "height": 119.6875,
-        },
         Object {},
       ]
     }
@@ -233,13 +227,11 @@ exports[`PlayerWrapper renders properly 1`] = `
           "zIndex": 200,
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "aspectRatio": 1.7786666666666666,
+          "height": undefined,
+          "width": "100%",
         },
         Object {},
-        Object {
-          "height": 800,
-        },
         Object {},
       ]
     }

package/Components/VideoModal/hooks/useModalSize.ts

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

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-rc.2",
+  "version": "12.0.0-rc.21",
   "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-rc.2",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.2",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.2",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.2",
+    "@applicaster/applicaster-types": "12.0.0-rc.21",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.21",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.21",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.21",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",