@applicaster/zapp-react-native-ui-components 15.0.0-alpha.2691570618 → 15.0.0-alpha.2835124704

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/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -32,6 +32,7 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -48,7 +49,10 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
   });
 
   const onError = React.useCallback(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import { equals, omit } from "ramda";
+import { equals } from "ramda";
 
 import { useImageSource } from "./hooks";
 
@@ -25,11 +25,19 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -49,7 +57,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...omit(["source"], otherProps)}
+      {...otherProps}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/Image.web.tsx

@@ -23,9 +23,17 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   const updatedSource = source ? withDimensions(source) : { uri: "" };
 

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -7,13 +6,16 @@ import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
 
-const getSourceContext = path(["source", "context"]);
-const getSourceUri = path(["source", "uri"]);
-const getState = path(["state"]);
+const getSourceContext = (source) => source?.context;
+const getSourceUri = (source) => source?.uri;
 
-export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+export const useImageSource = ({
+  uri,
+  entry,
+  otherProps: { source, state },
+}): Return => {
+  const uriContext = getSourceContext(source);
+  const uriState = state;
 
   const action = useActions(uriContext);
 
@@ -38,7 +40,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -47,7 +49,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, otherProps) => {
+const getSource = (uri, showDefault, placeholderImage, source) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -60,7 +62,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -74,10 +76,10 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps,
+  otherProps: { state, source },
 }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+  const uriContext = getSourceContext(source);
+  const uriState = state;
 
   const action = useActions(uriContext);
 
@@ -98,5 +100,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, otherProps);
+  return getSource(uri, showDefault, placeholderImage, source);
 };

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/playerWrapperUtils.ts

@@ -79,7 +79,7 @@ export const getPlayerDimensions = (
 ): ViewStyle => ({
   ...(baseDimensions as any),
   width: baseDimensions.width,
-  aspectRatio: aspectRatio,
+  aspectRatio,
 });
 
 export const getContainerDimensions = (
@@ -87,5 +87,5 @@ export const getContainerDimensions = (
   aspectRatio?: string | number
 ): ViewStyle => ({
   ...baseDimensions,
-  aspectRatio: aspectRatio,
+  aspectRatio,
 });

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/Decorators/ZappPipesDataConnector/resolvers/StaticFeedResolver.tsx

@@ -76,7 +76,7 @@ export function StaticFeedResolver({
 
   const zappPipesDataProps = useMemo(
     () => ({
-      zappPipesData: { url, loading, data, error },
+      zappPipesData: { url, loading, data, error }, // todo: add applyItemLimit
       reloadData,
       loadNextData: undefined, // Static resolver doesn't support pagination
     }),

package/Helpers/DataSourceHelper/index.js

@@ -3,6 +3,10 @@ import * as R from "ramda";
 export function itemLimitForData(entry = [], component) {
   const itemLimitValue = Number(R.path(["rules", "item_limit"], component));
 
+  if (!itemLimitValue) {
+    return entry;
+  }
+
   const itemLimit =
     itemLimitValue && itemLimitValue > 0
       ? itemLimitValue

package/package.json

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