@applicaster/zapp-react-native-ui-components 15.0.0-rc.33 → 15.0.0-rc.35

package/Components/Cell/TvOSCellComponent.tsx

@@ -17,6 +17,7 @@ import { CellWithFocusable } from "./CellWithFocusable";
 import { FocusableWrapper } from "./FocusableWrapper";
 
 import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   item: ZappEntry;
@@ -37,6 +38,9 @@ type Props = {
   component: {
     id: number | string;
     component_type: string;
+    styles?: {
+      component_margin_top?: number;
+    };
   };
   selected: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -204,11 +208,16 @@ class TvOSCell extends React.Component<Props, State> {
       const extraAnchorPointYOffset =
         screenLayout?.extraAnchorPointYOffset || 0;
 
+      const componentMarginTop = toNumberWithDefaultZero(
+        component?.styles?.component_margin_top
+      );
+
       const totalOffset =
         headerOffset +
-          (componentAnchorPointY || 0) +
-          extraAnchorPointYOffset -
-          componentsMapOffset || 0;
+        (componentAnchorPointY || 0) +
+        extraAnchorPointYOffset -
+        (componentsMapOffset || 0) +
+        componentMarginTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,62 +1,155 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { Animated, Dimensions } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
 import { useConfiguration } from "../utils";
-import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { isMenuVisible } from "../../Screen/navigationHandler";
+
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+import { PROGRESS_BAR_HEIGHT } from "./utils";
+import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux";
 
 export type ModalAnimationContextT = {
-  yTranslate: React.MutableRefObject<Animated.Value | null>;
+  yTranslate: React.MutableRefObject<Animated.AnimatedInterpolation<number>>;
+  offsetAnimatedValueRef: React.MutableRefObject<Animated.Value>;
+  offset: React.MutableRefObject<number>;
+  heightAboveMinimised: number;
+  gestureTranslationRef: React.MutableRefObject<Animated.Value>;
   minimisedHeight: number;
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
   yTranslate: React.createRef<Animated.Value | null>(),
+  offsetAnimatedValueRef: React.createRef<Animated.Value>(),
+  offset: React.createRef<number>(),
+  heightAboveMinimised: 0,
+  gestureTranslationRef: React.createRef<Animated.Value>(),
   minimisedHeight: 60,
 });
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
+export const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
+
+const bottomTabBarHeight = getTabBarHeight();
+
 const Provider = ({ children }: { children: React.ReactNode }) => {
+  const { height } = Dimensions.get("window");
+
   const yTranslate = React.useRef(
-    new Animated.Value(Dimensions.get("window").height)
+    new Animated.Value(height).interpolate<number>({
+      inputRange: [0, height],
+      outputRange: [0, height],
+    })
   );
 
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
   const {
-    videoModalState: { visible },
+    videoModalState: { visible, mode },
+    currentRoute,
+    screenData,
   } = useNavigation();
 
-  const { minimised_height: minimisedHeight } = useConfiguration();
+  const isTabletPortrait = useAppSelector(
+    (state) => state.appData.isTabletPortrait
+  );
+
+  const plugins = usePlugins();
+
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
+  const frame = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
+
+  const [heightAboveMinimised, setHeightAboveMinimised] = React.useState(0);
+
+  // memoizing heightAboveMinimised value
+  const offset = React.useRef(heightAboveMinimised);
+
+  // Used for memoizing modal y position after start/end of transition
+  const offsetAnimatedValueRef = React.useRef(
+    new Animated.Value(-offset.current)
+  );
+
+  // Used for gesture handling
+  const gestureTranslationRef = React.useRef(new Animated.Value(0));
+
+  const videoModalStateRef = React.useRef({ visible, mode });
+
+  React.useEffect(() => {
+    videoModalStateRef.current = { visible, mode };
+  }, [visible, mode]);
+
+  const translateY = useMemo(() => {
+    const maxRange = heightAboveMinimised;
+
+    const combined: Animated.AnimatedAddition<number> = Animated.add(
+      offsetAnimatedValueRef.current,
+      gestureTranslationRef.current
+    );
+
+    return combined.interpolate({
+      inputRange: [0, maxRange],
+      outputRange: [0, maxRange],
+      extrapolate: "clamp",
+    });
+  }, [visible, heightAboveMinimised]);
+
+  offset.current = heightAboveMinimised;
+  yTranslate.current = translateY;
+
+  React.useEffect(() => {
+    const collapsedHeight =
+      minimisedHeight +
+      (menuVisible ? bottomTabBarHeight : 0) +
+      (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
+      PROGRESS_BAR_HEIGHT;
+
+    const heightAboveMinimised = frame.height - collapsedHeight;
+
+    const isLandscape = frame.width > frame.height;
+
+    const isTablet = getIsTablet();
+
+    const shouldIgnoreLandscape = isTablet ? isTabletPortrait : true;
 
-  const isTabletLandscape = useIsTabletLandscape();
-  const windowDimensions = Dimensions.get("window");
-
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      if (!isTabletLandscape) {
-        // restore to portrait ( in portrait mode height is bigger)
-        if (windowDimensions.height > windowDimensions.width) {
-          yTranslate.current?.setValue(windowDimensions.height);
-        }
-      } else {
-        yTranslate.current?.setValue(windowDimensions.height);
-      }
+    if (
+      heightAboveMinimised !== offset.current &&
+      videoModalStateRef.current.mode !== "PIP" &&
+      videoModalStateRef.current.mode !== "FULLSCREEN"
+    ) {
+      if (isLandscape && shouldIgnoreLandscape) return;
+      setHeightAboveMinimised(heightAboveMinimised);
+      offset.current = heightAboveMinimised;
     }
-  }, [
-    visible,
-    windowDimensions.height,
-    isTabletLandscape,
-    windowDimensions.width,
-  ]);
+  }, [frame.height, insets.bottom, menuVisible, minimisedHeight]);
 
   return (
     <ReactContext.Provider
       value={useMemo(
         () => ({
           yTranslate,
+          offsetAnimatedValueRef,
+          offset,
+          heightAboveMinimised,
           minimisedHeight,
+          gestureTranslationRef,
         }),
-        [minimisedHeight]
+        [minimisedHeight, heightAboveMinimised]
       )}
     >
       {children}

package/Components/VideoModal/VideoModal.tsx

@@ -139,11 +139,7 @@ const VideoModalComponent = () => {
 
           {itemIdHooksFinished === item?.id ? (
             <View pointerEvents="box-none" style={styles.container}>
-              <HandlePlayable
-                item={item}
-                isModal={mode !== "PIP"}
-                mode={mode}
-              />
+              <HandlePlayable item={item} isModal mode={mode} />
             </View>
           ) : (
             <View style={styles.loaderContainer}>

package/Components/VideoModal/utils.ts

@@ -4,6 +4,7 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { create } from "zustand";
 
 export const useConfiguration = () => {
   const {
@@ -52,6 +53,12 @@ export const useConfiguration = () => {
   };
 };
 
+export const useAnimationStateStore = create<{
+  isAnimationInProgress: boolean;
+}>(() => ({
+  isAnimationInProgress: false,
+}));
+
 const fullSize = {
   width: "100%",
   height: "100%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.33",
+  "version": "15.0.0-rc.35",
   "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-rc.33",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.33",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.33",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.33",
+    "@applicaster/applicaster-types": "15.0.0-rc.35",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.35",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.35",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.35",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"