@applicaster/zapp-react-native-ui-components 15.0.0-alpha.6750855753 → 15.0.0-alpha.6835718972

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

@@ -33,8 +33,12 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
 const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION) &&
+  !isAndroidTablet();
 
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();
@@ -42,7 +46,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 +61,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/playerWrapperStyle.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+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";
+import {
+  getBaseDimensions,
+  calculateAspectRatio,
+  getPlayerDimensions,
+  getContainerDimensions,
+} from "./playerWrapperUtils";
+
+export const defaultStyles = StyleSheet.create({
+  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
+});
+
+export const useStyle = ({
+  style,
+  inline,
+  isModal,
+  isTabletPortrait,
+  configuration,
+  pip,
+}) => {
+  const isTablet = useIsTablet();
+
+  const isInlineModal = inline && isModal;
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
+
+  const baseDimensions: ViewStyle = React.useMemo(
+    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
+    [isInlineModal, isTabletLandscape, tabletWidth]
+  );
+
+  const aspectRatio = React.useMemo(
+    () => calculateAspectRatio(isInlineModal, pip),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInlineModal, pip]
+  );
+
+  return React.useMemo(() => {
+    const playerDimensions: ViewStyle = getPlayerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const containerDimensions: ViewStyle = getContainerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const childrenStyles = {
+      ...playerDimensions,
+      ...playerDimensionsHack,
+    };
+
+    return StyleSheet.create({
+      containerDimensions,
+      childrenStyles,
+    });
+  }, [baseDimensions, aspectRatio]);
+};

package/Components/VideoModal/playerWrapperUtils.ts

@@ -0,0 +1,91 @@
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
+import { Edge } from "react-native-safe-area-context";
+
+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;
+};
+
+// This is safe, remembering screen dimensions once as they do not change during runtime
+// TODO: consider sharing screen orientation as a shared function for the app
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
+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 = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  return longEdge / shortEdge;
+};
+
+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: DimensionValue
+): ViewStyle => ({
+  width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
+  height: undefined,
+});
+
+export const calculateAspectRatio = (
+  isInlineModal: boolean,
+  pip?: boolean
+): number => {
+  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
+};
+
+export const getPlayerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio: number
+): ViewStyle => ({
+  ...(baseDimensions as any),
+  width: baseDimensions.width,
+  aspectRatio,
+});
+
+export const getContainerDimensions = (
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
+  ...baseDimensions,
+  aspectRatio,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.6750855753",
+  "version": "15.0.0-alpha.6835718972",
   "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.6750855753",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.6750855753",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.6750855753",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.6750855753",
+    "@applicaster/applicaster-types": "15.0.0-alpha.6835718972",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.6835718972",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.6835718972",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.6835718972",
     "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>
-  );
-};

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,417 +0,0 @@
-import React from "react";
-import { Animated, StyleSheet, View } from "react-native";
-
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-import {
-  NativeViewGestureHandler,
-  PanGestureHandler,
-  State,
-  TapGestureHandler,
-} from "react-native-gesture-handler";
-
-import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
-import {
-  PlayerAnimationStateEnum,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-
-import {
-  resetScrollAnimatedValues,
-  setScrollModalAnimatedValue,
-} from "./utils";
-
-import { DURATION_TO_MINIMIZE } from "./const";
-
-const getAnimatedConfig = (toValue) => {
-  return {
-    toValue,
-    duration: DURATION_TO_MINIMIZE,
-    useNativeDriver: true,
-  };
-};
-
-const generalStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
-type Props = {
-  children: React.ReactNode;
-};
-
-const activeOffsetY = [-5, 5] as [number, number];
-
-export const AnimatedScrollModalComponent = ({ children }: Props) => {
-  const {
-    isActiveGesture,
-    playerAnimationState,
-    setPlayerAnimationState,
-    resetPlayerAnimationState,
-    animatedValues: {
-      lastScrollY,
-      dragScrollY,
-      dragVideoPlayerY,
-      translateYOffset,
-    },
-    lastScrollYValue,
-    scrollPosition,
-    modalSnapPoints,
-    lastSnap,
-    setLastSnap,
-    setStartComponentsAnimation,
-  } = useModalAnimationContext();
-
-  const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
-
-  const { isLanguageOverlayVisible, isSeekBarTouch } = React.useContext(
-    PlayerContainerContext
-  );
-
-  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
-    useNavigation();
-
-  const {
-    mode: videoModalMode,
-    previousMode: previousVideoModalMode,
-    item: videoModalItem,
-  } = videoModalState;
-
-  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
-  const previousItemId = usePrevious(videoModalItem?.id);
-
-  const isNotMinimizeMaximazeAnimation =
-    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximize;
-
-  const isEnablePanGesture =
-    enableGesture &&
-    !isLanguageOverlayVisible &&
-    isNotMinimizeMaximazeAnimation &&
-    !isSeekBarTouch &&
-    (isMaximizedModal || isMinimizedModal);
-
-  const isAudioItem = React.useMemo(
-    () =>
-      videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
-    [videoModalItem]
-  );
-
-  // Refs for components
-  const scrollRef = React.useRef(null);
-  const tapHandlerRef = React.useRef(null);
-  const panHandlerRef = React.useRef(null);
-
-  const onRegisterLastScroll = Animated.event(
-    [{ nativeEvent: { contentOffset: { y: lastScrollY } } }],
-    { useNativeDriver: true }
-  );
-
-  const onGestureEvent = Animated.event(
-    [{ nativeEvent: { translationY: dragScrollY } }],
-    { useNativeDriver: true }
-  );
-
-  const onHandlerStateChange = React.useCallback(
-    ({ nativeEvent }) => {
-      if (
-        nativeEvent.oldState === State.ACTIVE &&
-        scrollPosition.current === 0
-      ) {
-        // eslint-disable-next-line prefer-const
-        const { velocityY, translationY } = nativeEvent;
-        const dragToss = 0.05;
-
-        const preparedTranslationY =
-          Math.abs(translationY) - lastScrollYValue.current;
-
-        if (isMaximizedModal) {
-          const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
-
-          let destSnapPoint = modalSnapPoints[0];
-
-          for (const snapPoint of modalSnapPoints) {
-            const distFromSnap = Math.abs(snapPoint - endOffsetY);
-
-            if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
-              destSnapPoint = snapPoint;
-            }
-          }
-
-          setLastSnap(destSnapPoint);
-
-          if (destSnapPoint === modalSnapPoints[0]) {
-            translateYOffset.extractOffset();
-            translateYOffset.setValue(preparedTranslationY);
-            translateYOffset.flattenOffset();
-            dragScrollY.setValue(0);
-
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
-          } else if (destSnapPoint !== modalSnapPoints[0] && isMaximizedModal) {
-            setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
-          }
-        } else {
-          if (translationY < 0) {
-            // from mini to full
-            setLastSnap(modalSnapPoints[0]);
-
-            translateYOffset.setValue(
-              modalSnapPoints[1] - preparedTranslationY
-            );
-
-            dragScrollY.setValue(0);
-
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
-          } else {
-            resetPlayerAnimationState();
-          }
-        }
-      } else {
-        playerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-          resetPlayerAnimationState();
-      }
-    },
-    [
-      lastSnap,
-      modalSnapPoints,
-      playerAnimationState,
-      isMinimizedModal,
-      isMaximizedModal,
-    ]
-  );
-
-  const onScroll = React.useCallback(({ nativeEvent }) => {
-    scrollPosition.current = nativeEvent.contentOffset.y;
-  }, []);
-
-  // Workaround for onMomentumScrollEnd issue
-  // https://github.com/facebook/react-native/issues/32696#issuecomment-1104217223
-  const canMomentum = React.useRef(false);
-
-  const onMomentumScrollBegin = React.useCallback(() => {
-    canMomentum.current = true;
-  }, []);
-
-  const onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      if (canMomentum.current && !isActiveGesture) {
-        if (nativeEvent.contentOffset.y === 0) {
-          resetScrollAnimatedValues(
-            lastScrollY,
-            lastScrollYValue,
-            dragScrollY,
-            dragVideoPlayerY
-          );
-
-          setIEnableGesture(true);
-        } else {
-          setIEnableGesture(false);
-        }
-
-        canMomentum.current = false;
-      }
-    },
-    [isActiveGesture]
-  );
-
-  React.useEffect(() => {
-    return () => {
-      scrollPosition.current = 0;
-
-      resetScrollAnimatedValues(
-        lastScrollY,
-        lastScrollYValue,
-        dragScrollY,
-        dragVideoPlayerY
-      );
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (
-      videoModalMode === "MAXIMIZED" &&
-      !enableGesture &&
-      scrollPosition.current === 0
-    ) {
-      setIEnableGesture(true);
-    }
-
-    if (
-      videoModalMode === "MINIMIZED" &&
-      previousVideoModalMode === "MAXIMIZED"
-    ) {
-      // set animation to the minimize values if moving from the player to another screen
-      if (playerAnimationState === null) {
-        setScrollModalAnimatedValue(
-          translateYOffset,
-          modalSnapPoints[1],
-          setLastSnap
-        );
-
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-      }
-    } else if (
-      playerAnimationState === null &&
-      ((previousItemId === videoModalItem?.id &&
-        videoModalMode === "MAXIMIZED" &&
-        (previousVideoModalMode === "MINIMIZED" ||
-          previousVideoModalMode === "MAXIMIZED")) ||
-        (previousItemId !== videoModalItem?.id &&
-          videoModalMode !== "FULLSCREEN"))
-    ) {
-      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
-    }
-  }, [videoModalMode, previousVideoModalMode, videoModalItem]);
-
-  React.useEffect(() => {
-    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
-      if (
-        (scrollPosition.current === 0 &&
-          (lastScrollY as any)._value !== 0 &&
-          (dragScrollY as any)._value === 0 &&
-          (dragVideoPlayerY as any)._value === 0) ||
-        (scrollPosition.current !== 0 &&
-          ((dragScrollY as any)._value !== 0 ||
-            (dragVideoPlayerY as any)._value !== 0))
-      ) {
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-      }
-
-      Animated.timing(
-        translateYOffset,
-        getAnimatedConfig(modalSnapPoints[1])
-      ).start(() => {
-        minimiseVideoModal();
-
-        setScrollModalAnimatedValue(
-          translateYOffset,
-          modalSnapPoints[1],
-          setLastSnap
-        );
-
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-
-        resetPlayerAnimationState();
-      });
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
-      Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
-        maximiseVideoModal();
-        setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
-
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
-
-        resetPlayerAnimationState();
-      });
-    }
-  }, [playerAnimationState]);
-
-  React.useEffect(() => {
-    const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
-      lastScrollYValue.current = value;
-    });
-
-    const dragListenerId = dragScrollY.addListener(({ value }) => {
-      const preparedValue =
-        isMinimizedModal && value >= 0
-          ? 0
-          : Math.round(isAudioItem ? Math.abs(value) : value);
-
-      if (
-        preparedValue > 0 &&
-        scrollPosition.current === 0 &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_player &&
-        playerAnimationState !== PlayerAnimationStateEnum.drag_scroll
-      ) {
-        isMinimizedModal && setStartComponentsAnimation(true);
-        setPlayerAnimationState(PlayerAnimationStateEnum.drag_scroll);
-      }
-    });
-
-    return () => {
-      lastScrollY.removeListener(lastScrollYListenerId);
-      dragScrollY.removeListener(dragListenerId);
-    };
-  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
-
-  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
-
-  return (
-    <View style={generalStyles.container}>
-      <TapGestureHandler
-        maxDurationMs={100000}
-        ref={tapHandlerRef}
-        maxDeltaY={lastSnap - modalSnapPoints[0]}
-        numberOfTaps={1}
-      >
-        <View pointerEvents="box-none">
-          <PanGestureHandler
-            enabled={isEnablePanGesture}
-            ref={panHandlerRef}
-            simultaneousHandlers={[scrollRef, tapHandlerRef]}
-            shouldCancelWhenOutside={isMaximizedModal}
-            activeOffsetY={activeOffsetY}
-            onGestureEvent={onGestureEvent}
-            onHandlerStateChange={onHandlerStateChange}
-          >
-            <Animated.View>
-              <NativeViewGestureHandler
-                ref={scrollRef}
-                waitFor={tapHandlerRef}
-                simultaneousHandlers={panHandlerRef}
-              >
-                <Animated.ScrollView
-                  scrollEnabled={scrollEnabled}
-                  bounces={false}
-                  onScrollBeginDrag={onRegisterLastScroll}
-                  onScroll={onScroll}
-                  onMomentumScrollBegin={onMomentumScrollBegin}
-                  onMomentumScrollEnd={onMomentumScrollEnd}
-                  scrollEventThrottle={1}
-                  showsVerticalScrollIndicator={false}
-                >
-                  {children}
-                </Animated.ScrollView>
-              </NativeViewGestureHandler>
-            </Animated.View>
-          </PanGestureHandler>
-        </View>
-      </TapGestureHandler>
-    </View>
-  );
-};
-
-export const AnimatedScrollModal = ({ children }: Props) => {
-  const {
-    videoModalState: { visible },
-  } = useNavigation();
-
-  const Component =
-    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
-
-  return <Component>{children}</Component>;
-};