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

package/Components/VideoModal/ModalAnimation/utils.ts

@@ -1,332 +1,6 @@
-/* eslint-disable padding-line-between-statements */
-
-import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-
-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 =>
   (height / 9) * 16;
-
-export const getAnimationStyle = (component, animatedValue) => {
-  switch (component) {
-    case ComponentAnimationType.bottomBar: {
-      return { zIndex: 99, transform: [{ translateY: animatedValue }] };
-    }
-
-    case ComponentAnimationType.player: {
-      return { width: animatedValue.x, height: animatedValue.y };
-    }
-
-    case ComponentAnimationType.componentFade:
-    case ComponentAnimationType.componentAppears: {
-      return { opacity: animatedValue };
-    }
-
-    case ComponentAnimationType.moveUpComponent: {
-      return { transform: [{ translateY: animatedValue }] };
-    }
-
-    case ComponentAnimationType.audioPlayerPaddingHorizontal:
-    case ComponentAnimationType.moveComponentHorizontal: {
-      return { transform: [{ translateX: animatedValue }] };
-    }
-
-    default:
-      return null;
-  }
-};
-
-export const getAnimationDefaultValue = (component, bottomTabBarHeight) => {
-  switch (component) {
-    case ComponentAnimationType.bottomBar: {
-      return bottomTabBarHeight;
-    }
-
-    case ComponentAnimationType.player: {
-      return { x: 0, y: 0 };
-    }
-
-    case ComponentAnimationType.componentFade: {
-      return 1;
-    }
-
-    case ComponentAnimationType.audioPlayerPaddingHorizontal:
-    case ComponentAnimationType.moveComponentHorizontal:
-    case ComponentAnimationType.componentAppears:
-    case ComponentAnimationType.moveUpComponent: {
-      return 0;
-    }
-  }
-};
-
-export const calculateAnimationValue = (animationType, dragPosition, data) => {
-  const {
-    isAudioItem,
-    bottomTabBarHeight,
-    minimisedHeight,
-    minimisedWidth,
-    defaultValue,
-    moveUpValue,
-    moveComponentHorizontalValue,
-    isTablet,
-    isTabletLandscape,
-    isRTL,
-    fromMiniPlayer,
-    inlineAudioPlayer,
-  } = data;
-
-  switch (animationType) {
-    case ComponentAnimationType.bottomBar: {
-      if (fromMiniPlayer) {
-        return dragPosition < bottomTabBarHeight
-          ? dragPosition
-          : bottomTabBarHeight;
-      }
-
-      return dragPosition < bottomTabBarHeight
-        ? bottomTabBarHeight - dragPosition
-        : 0;
-    }
-
-    case ComponentAnimationType.player: {
-      const value =
-        isAudioItem && !inlineAudioPlayer
-          ? isTabletLandscape
-            ? fromMiniPlayer
-              ? { forWidth: 4, forHeight: 4.5 }
-              : { forWidth: 3, forHeight: 3 }
-            : { forWidth: 2, forHeight: 2 }
-          : isTabletLandscape
-            ? { forWidth: 8, forHeight: 6.5 }
-            : { forWidth: 3.5, forHeight: 2 };
-
-      const minWidth =
-        isAudioItem && !inlineAudioPlayer ? minimisedHeight : minimisedWidth;
-
-      if (fromMiniPlayer) {
-        const calculationWidth =
-          dragPosition * value.forWidth < minWidth
-            ? minWidth
-            : dragPosition * value.forWidth;
-        const calculationHeight =
-          dragPosition * value.forHeight < minimisedHeight
-            ? minimisedHeight
-            : dragPosition * value.forHeight;
-
-        return {
-          x:
-            calculationWidth < defaultValue.x
-              ? calculationWidth
-              : defaultValue.x,
-          y:
-            calculationHeight < defaultValue.y
-              ? calculationHeight
-              : defaultValue.y,
-        };
-      }
-
-      const calculationWidth = defaultValue.x - dragPosition * value.forWidth;
-
-      const calculationHeight = defaultValue.y - dragPosition * value.forHeight;
-
-      return {
-        x: calculationWidth > minWidth ? calculationWidth : minWidth,
-        y:
-          calculationHeight > minimisedHeight
-            ? calculationHeight
-            : minimisedHeight,
-      };
-    }
-
-    case ComponentAnimationType.componentFade: {
-      if (fromMiniPlayer) {
-        const calculation = dragPosition / (isTablet ? 200 : 150);
-
-        return calculation < 1 ? calculation : 1;
-      }
-
-      const calculation = 1 - dragPosition / (isTablet ? 200 : 150);
-
-      return calculation > 0 ? calculation : 0;
-    }
-
-    case ComponentAnimationType.componentAppears: {
-      if (fromMiniPlayer) {
-        const calculation = 1 - dragPosition / (isTablet ? 200 : 150);
-
-        return calculation > 0 ? calculation : 0;
-      }
-
-      const calculation = dragPosition / (isTablet ? 200 : 150);
-
-      return calculation < 1 ? calculation : 1;
-    }
-
-    case ComponentAnimationType.moveUpComponent: {
-      if (fromMiniPlayer) {
-        const calculation =
-          moveUpValue + dragPosition / (isTabletLandscape ? 1 : 4);
-
-        return calculation < 0 ? calculation : 0;
-      }
-
-      const calculation = 0 - dragPosition / (isTabletLandscape ? 1 : 2);
-
-      return calculation > moveUpValue ? calculation : moveUpValue;
-    }
-
-    case ComponentAnimationType.moveComponentHorizontal: {
-      if (fromMiniPlayer) {
-        const calculation = isRTL
-          ? moveComponentHorizontalValue - dragPosition * 2
-          : moveComponentHorizontalValue + dragPosition * 2;
-        const condition = isRTL ? calculation > 0 : calculation < 0;
-
-        return condition ? calculation : 0;
-      }
-
-      const calculation = isRTL ? dragPosition * 2 : -(dragPosition * 2);
-      const condition = isRTL
-        ? calculation < moveComponentHorizontalValue
-        : calculation > moveComponentHorizontalValue;
-
-      return condition ? calculation : moveComponentHorizontalValue;
-    }
-
-    case ComponentAnimationType.audioPlayerPaddingHorizontal: {
-      const padding = isRTL
-        ? AUDIO_PLAYER_HORIZONTAL_PADDING
-        : -AUDIO_PLAYER_HORIZONTAL_PADDING;
-
-      if (fromMiniPlayer) {
-        const calculation = isRTL
-          ? padding - dragPosition / 5
-          : padding + dragPosition / 5;
-        const condition = isRTL ? calculation > 0 : calculation < 0;
-
-        return condition ? calculation : 0;
-      }
-
-      const calculation = isRTL ? dragPosition / 5 : -(dragPosition / 5);
-      const condition = isRTL ? calculation < padding : calculation > padding;
-
-      return condition ? calculation : padding;
-    }
-  }
-};
-
-export const gestureListenerHelper = (data) => {
-  const {
-    listenerValue,
-    preparedValue,
-    animationType,
-    animatedValue,
-    calculationData,
-    modalSnapPoint,
-    startComponentsAnimationDistance,
-    startComponentsAnimation,
-    setStartComponentsAnimation,
-    getAnimationValue,
-  } = data;
-
-  if (calculationData.fromMiniPlayer) {
-    if (listenerValue <= 0) {
-      if (
-        preparedValue >= 0 &&
-        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
-      ) {
-        !startComponentsAnimation && setStartComponentsAnimation(true);
-
-        animatedValue.setValue(
-          calculateAnimationValue(animationType, preparedValue, calculationData)
-        );
-      } else {
-        animatedValue.setValue(calculationData.defaultValue);
-        startComponentsAnimation && setStartComponentsAnimation(false);
-      }
-    } else {
-      const value = getAnimationValue(
-        animationType,
-        PlayerAnimationStateEnum.minimize
-      ).toValue;
-
-      animatedValue.setValue(value);
-    }
-  } else {
-    if (preparedValue >= startComponentsAnimationDistance) {
-      !startComponentsAnimation && setStartComponentsAnimation(true);
-      const value = Math.round(
-        preparedValue - startComponentsAnimationDistance
-      );
-
-      animatedValue.setValue(
-        calculateAnimationValue(animationType, value, calculationData)
-      );
-    } else {
-      animatedValue.setValue(calculationData.defaultValue);
-      startComponentsAnimation && setStartComponentsAnimation(false);
-    }
-  }
-};
-
-export const setScrollModalAnimatedValue = (
-  animatedValue,
-  value,
-  setLastSnap
-) => {
-  setLastSnap(value);
-  animatedValue.setValue(value);
-};
-
-export const resetScrollAnimatedValues = (
-  lastScrollY,
-  lastScrollYValue,
-  dragScrollY,
-  dragVideoPlayerY
-) => {
-  lastScrollY.setValue(0);
-  lastScrollYValue.current = 0;
-  dragScrollY.setValue(0);
-  dragVideoPlayerY.setValue(0);
-};
-
-export const getMoveUpValue = ({
-  additionalData,
-  insets,
-  isAudioItem,
-  progressBarHeight,
-  isTablet,
-  isTabletLandscape,
-  tabletLandscapePlayerTopPosition,
-}) => {
-  if (additionalData.saveArea) {
-    return -insets.top + (isAudioItem ? 0 : progressBarHeight);
-  }
-
-  if (isAudioItem) {
-    // for any layouts in audioPlayer
-    return -1 * toNumberWithDefaultZero(additionalData?.marginTop);
-  }
-
-  if (isTablet) {
-    if (isTabletLandscape) {
-      return -tabletLandscapePlayerTopPosition + progressBarHeight;
-    } else {
-      return -130;
-    }
-  }
-
-  return -50 + progressBarHeight;
-};

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,30 +1,23 @@
 import * as React from "react";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import {
-  Dimensions,
-  Platform,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from "react-native";
-import { Edge, SafeAreaView } from "react-native-safe-area-context";
+  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";
 import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
-
-type DimensionsT = {
-  width: number | string;
-  height: number | string | undefined;
-  aspectRatio?: number;
-};
-
-type Configuration = {
-  [key: string]: any;
-  tablet_landscape_sidebar_width?: string;
-  tablet_landscape_player_container_background_color?: string;
-};
+import {
+  DimensionsT,
+  Configuration,
+  getEdges,
+  getBaseDimensions,
+  calculateAspectRatio,
+  getPlayerDimensions,
+  getContainerDimensions,
+} from "./playerWrapperUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -45,32 +38,12 @@ const defaultStyles = StyleSheet.create({
   playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
 });
 
-const getScreenAspectRatio = () => {
-  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
-  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
-
-  return longEdge / shortEdge;
-};
-
-const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
-  if (isTablet) {
-    return ["top"];
-  }
-
-  if (!isInlineModal && Platform.OS === "android") {
-    return [];
-  }
-
-  return ["top"];
-};
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
     style,
     containerStyle,
     inline,
-    docked,
     isModal,
     isTabletPortrait,
     configuration,
@@ -90,28 +63,27 @@ const PlayerWrapperComponent = (props: Props) => {
   );
 
   const baseDimensions: DimensionsT = React.useMemo(
-    () => ({
-      width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
-      height: undefined,
-    }),
-    [isInlineModal, tabletWidth, docked]
+    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
+    [isInlineModal, isTabletLandscape, tabletWidth]
   );
 
-  const playerDimensions: DimensionsT = React.useMemo(
-    () => ({
-      ...baseDimensions,
-      width: baseDimensions.width,
-      aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
-    }),
-    [baseDimensions, isInlineModal, pip]
+  const insets = useSafeAreaInsets();
+
+  const aspectRatio = React.useMemo(
+    () => calculateAspectRatio(isInlineModal, pip, insets),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInlineModal, pip]
+  );
+
+  const playerDimensions = React.useMemo(
+    () => getPlayerDimensions(baseDimensions, aspectRatio),
+    [baseDimensions, aspectRatio]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
-    () => ({
-      ...baseDimensions,
-      aspectRatio: playerDimensions.aspectRatio,
-    }),
-    [baseDimensions, isInlineModal, docked, playerDimensions.aspectRatio]
+    () => getContainerDimensions(baseDimensions, playerDimensions.aspectRatio),
+    [baseDimensions, playerDimensions.aspectRatio]
   );
 
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
@@ -121,7 +93,7 @@ const PlayerWrapperComponent = (props: Props) => {
       ...playerDimensions,
       ...playerDimensionsHack,
     }),
-    [containerDimensions, playerDimensionsHack]
+    [playerDimensions]
   );
 
   return (

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/hooks/useModalSize.ts

@@ -42,7 +42,7 @@ export const useModalSize = (): Size => {
   const [modalSize, setModalSize] = React.useState<Size>({
     width: frame.width,
     height: isOldAndroidDevice
-      ? frame.height + StatusBar.currentHeight
+      ? frame.height + (StatusBar.currentHeight ?? 0)
       : frame.height,
   });
 
@@ -57,9 +57,10 @@ export const useModalSize = (): Size => {
 
       return {
         width: newSize.width,
-        height: isOldAndroidDevice
-          ? newSize.height + StatusBar.currentHeight
-          : newSize.height,
+        height:
+          isOldAndroidDevice && newSize.height !== "100%"
+            ? newSize.height + (StatusBar.currentHeight ?? 0)
+            : newSize.height,
       };
     });
 

package/Components/VideoModal/playerWrapperUtils.ts

@@ -0,0 +1,104 @@
+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;
+  aspectRatio?: number;
+};
+
+export type Configuration = {
+  [key: string]: any;
+  tablet_landscape_sidebar_width?: string;
+  tablet_landscape_player_container_background_color?: string;
+};
+
+export const getWindowDimensions = () => {
+  const { width, height } = Dimensions.get("window");
+
+  return { width, height };
+};
+
+export const getMaxWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.max(width, height);
+};
+
+export const getMinWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.min(width, height);
+};
+
+export const getScreenAspectRatio = (insets?: {
+  top: number;
+  bottom: number;
+}) => {
+  const longEdge = getMaxWindowDimension();
+  const shortEdge = getMinWindowDimension();
+
+  // subtract insets to get correct aspect ratio on devices with notches
+  return longEdge / (shortEdge - ((insets?.top ?? 0) + (insets?.bottom ?? 0)));
+};
+
+export const getEdges = (
+  isTablet: boolean,
+  isInlineModal: boolean
+): readonly Edge[] => {
+  if (isTablet) {
+    return ["top"];
+  }
+
+  if (!isInlineModal && Platform.OS === "android") {
+    return [];
+  }
+
+  return ["top"];
+};
+
+export const getBaseDimensions = (
+  isInlineModal: boolean,
+  isTabletLandscape: boolean,
+  tabletWidth: number | string
+): DimensionsT => ({
+  width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
+  height: undefined,
+});
+
+export const calculateAspectRatio = (
+  isInlineModal: boolean,
+  pip?: boolean,
+  insets?: { top: number; bottom: number }
+): number => {
+  return !isInlineModal && !pip
+    ? getScreenAspectRatio(isOldAndroidDevice ? insets : undefined)
+    : 16 / 9;
+};
+
+export const getPlayerDimensions = (
+  baseDimensions: DimensionsT,
+  aspectRatio: number
+): DimensionsT => ({
+  ...baseDimensions,
+  width: baseDimensions.width,
+  aspectRatio,
+});
+
+export const getContainerDimensions = (
+  baseDimensions: DimensionsT,
+  playerAspectRatio?: number
+): DimensionsT => ({
+  ...baseDimensions,
+  aspectRatio: playerAspectRatio,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.3514407021",
+  "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.3514407021",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.3514407021",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.3514407021",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3514407021",
+    "@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/AnimatedPlayerModalWrapper.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import { Animated, ViewStyle } from "react-native";
-
-import {
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-type Props = {
-  style: ViewStyle[];
-  children: React.ReactNode;
-};
-
-export const AnimatedPlayerModalWrapper = (props: Props) => {
-  const {
-    playerAnimationState,
-    animatedValues: { lastScrollY, dragScrollY, translateYOffset },
-    modalSnapPoints,
-    setStartComponentsAnimation,
-  } = useModalAnimationContext();
-
-  const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
-    () => ({
-      inputRange: modalSnapPoints,
-      outputRange: modalSnapPoints,
-      extrapolate: "clamp",
-    }),
-    [modalSnapPoints]
-  );
-
-  let translateY;
-
-  if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
-    translateY = translateYOffset.interpolate(interpolateConfig);
-  } else {
-    const reverseLastScrollY = Animated.multiply(
-      new Animated.Value(-1),
-      lastScrollY
-    );
-
-    translateY = Animated.add(
-      translateYOffset,
-      Animated.add(dragScrollY, reverseLastScrollY)
-    ).interpolate(interpolateConfig);
-  }
-
-  React.useEffect(() => {
-    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
-      setStartComponentsAnimation(true);
-  }, [playerAnimationState]);
-
-  return (
-    <Animated.View
-      style={[props.style, { transform: [{ translateY: translateY }] }]}
-    >
-      {props.children}
-    </Animated.View>
-  );
-};