@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4069571733 → 15.0.0-alpha.4368022015

package/Components/PlayerImageBackground/index.tsx

@@ -2,10 +2,6 @@ import React, { PropsWithChildren } from "react";
 import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
@@ -23,7 +19,6 @@ const PlayerImageBackgroundComponent = ({
   style,
   imageStyle,
   imageKey,
-  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, [imageKey]) }),
@@ -34,11 +29,7 @@ const PlayerImageBackgroundComponent = ({
 
   return (
     <View style={style}>
-      <AnimationComponent
-        style={style}
-        animationType={ComponentAnimationType.player}
-        additionalData={defaultImageDimensions}
-      >
+      <View style={style}>
         <ImageBackground
           resizeMode="cover"
           style={imageSize}
@@ -47,7 +38,7 @@ const PlayerImageBackgroundComponent = ({
         >
           {children}
         </ImageBackground>
-      </AnimationComponent>
+      </View>
     </View>
   );
 };

package/Components/VideoModal/ModalAnimation/index.ts

@@ -2,8 +2,6 @@ export { withModalAnimationProvider } from "./ModalAnimationContext";
 
 export { useModalAnimationContext } from "./useModalAnimationContext";
 
-export { AnimationComponent } from "./AnimationComponent";
-
-export { ComponentAnimationType, defaultAspectRatioWidth } from "./utils";
+export { defaultAspectRatioWidth } from "./utils";
 
 export { DURATION_TO_MINIMIZE, DURATION_TO_MAXIMIZE } from "./const";

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -1,16 +1,5 @@
-/* eslint-disable padding-line-between-statements */
-
-export enum ComponentAnimationType {
-  bottomBar = "bottomBar",
-  player = "player",
-  componentFade = "componentFade",
-  componentAppears = "componentAppears",
-  moveUpComponent = "moveUpComponent",
-  moveComponentHorizontal = "moveComponentHorizontal",
-  audioPlayerPaddingHorizontal = "audioPlayerPaddingHorizontal",
-}
-
 export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
+
 export const PROGRESS_BAR_HEIGHT = 3;
 
 export const defaultAspectRatioWidth = (height: number): number =>

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
-import { Edge, SafeAreaView } from "react-native-safe-area-context";
+import {
+  Edge,
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { playerDimensionsHack } from "./utils";
@@ -63,8 +67,12 @@ const PlayerWrapperComponent = (props: Props) => {
     [isInlineModal, isTabletLandscape, tabletWidth]
   );
 
+  const insets = useSafeAreaInsets();
+
   const aspectRatio = React.useMemo(
-    () => calculateAspectRatio(isInlineModal, pip),
+    () => calculateAspectRatio(isInlineModal, pip, insets),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [isInlineModal, pip]
   );
 

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

@@ -46,6 +46,7 @@ jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isTV: jest.fn(() => false),
+  isAndroidPlatform: jest.fn(() => false),
   isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn((props) => props.android),
 }));

package/Components/VideoModal/playerWrapperUtils.ts

@@ -1,6 +1,16 @@
 import { Dimensions, Platform } from "react-native";
 import { Edge } from "react-native-safe-area-context";
 
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const MIN_SUPPORTED_ANDROID_API = 34;
+
+export const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API);
+
 export type DimensionsT = {
   width: number | string;
   height: number | string | undefined;
@@ -31,11 +41,15 @@ export const getMinWindowDimension = () => {
   return Math.min(width, height);
 };
 
-export const getScreenAspectRatio = () => {
+export const getScreenAspectRatio = (insets?: {
+  top: number;
+  bottom: number;
+}) => {
   const longEdge = getMaxWindowDimension();
   const shortEdge = getMinWindowDimension();
 
-  return longEdge / shortEdge;
+  // subtract insets to get correct aspect ratio on devices with notches
+  return longEdge / (shortEdge - ((insets?.top ?? 0) + (insets?.bottom ?? 0)));
 };
 
 export const getEdges = (
@@ -64,9 +78,12 @@ export const getBaseDimensions = (
 
 export const calculateAspectRatio = (
   isInlineModal: boolean,
-  pip?: boolean
+  pip?: boolean,
+  insets?: { top: number; bottom: number }
 ): number => {
-  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
+  return !isInlineModal && !pip
+    ? getScreenAspectRatio(isOldAndroidDevice ? insets : undefined)
+    : 16 / 9;
 };
 
 export const getPlayerDimensions = (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.4069571733",
+  "version": "15.0.0-alpha.4368022015",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4069571733",
+    "@applicaster/applicaster-types": "15.0.0-alpha.4368022015",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4368022015",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4368022015",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4368022015",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-
-type Props = {
-  animationType: string;
-  children: React.ReactNode;
-  style?: Record<string, any>;
-  additionalData?: { [key: string]: any };
-};
-
-export const AnimationComponent = (props: Props) => {
-  const { style } = props;
-
-  const Component = style ? View : React.Fragment;
-
-  return <Component {...props}>{props.children}</Component>;
-};