@applicaster/zapp-react-native-ui-components 13.0.11-alpha.5714428013 → 13.0.11-alpha.6727579127

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -268,12 +268,7 @@ function ComponentsMapComponent(props: Props) {
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
   return (
-    <View
-      style={styles.container}
-      ref={(ref) => {
-        flatListWrapperRef.current = ref;
-      }}
-    >
+    <View style={styles.container} ref={flatListWrapperRef}>
       <ComponentsMapHeightContext.Provider value={flatListHeight}>
         <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
           <ScreenLoadingMeasurements

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -43,6 +43,8 @@ type Props = {
   children: React.ReactNode;
 };
 
+const activeOffsetY = [-5, 5];
+
 export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const {
     isActiveGesture,
@@ -372,17 +374,17 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         maxDeltaY={lastSnap - modalSnapPoints[0]}
         numberOfTaps={1}
       >
-        <View pointerEvents="box-none" style={generalStyles.container}>
+        <View pointerEvents="box-none">
           <PanGestureHandler
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximizedModal}
+            activeOffsetY={activeOffsetY}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
-            activeOffsetY={[-5, 5]}
           >
-            <Animated.View style={generalStyles.container}>
+            <Animated.View>
               <NativeViewGestureHandler
                 ref={scrollRef}
                 waitFor={tapHandlerRef}
@@ -397,7 +399,6 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}
-                  contentContainerStyle={generalStyles.container}
                 >
                   {children}
                 </Animated.ScrollView>

package/Components/VideoModal/PlayerDetails.tsx

@@ -13,7 +13,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
-const styles = StyleSheet.create({ flex1: { flex: 1 } });
 
 type Configuration = {
   [key: string]: any;
@@ -93,7 +92,6 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
-        styles.flex1,
         {
           // workaround for avoid wrong text-height after going back to portrait rotation
           // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useContext } from "react";
 import {
   Dimensions,
   Platform,
@@ -131,6 +132,11 @@ const getTabletWidth = (
   return widthValue - sidebarWidth;
 };
 
+const PlayerDetailsWrapperHeightContext = React.createContext(null);
+
+export const usePlayerDetailsWrapperHeight = () =>
+  useContext(PlayerDetailsWrapperHeightContext);
+
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -146,6 +152,20 @@ const PlayerWrapperComponent = (props: Props) => {
     pip,
   } = props;
 
+  const [playerDetailsWrapperHeight, setPlayerDetailsWrapperHeight] =
+    React.useState(0);
+
+  const onLayout = React.useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }) => {
+      setPlayerDetailsWrapperHeight(height);
+    },
+    []
+  );
+
   const isTablet = useIsTablet();
 
   const isInlineModal = inline && isModal;
@@ -238,22 +258,28 @@ const PlayerWrapperComponent = (props: Props) => {
             </AnimatedVideoPlayerComponent>
           </AnimationComponent>
         </View>
-        <AnimatedScrollModal>
-          {isShowPlayerDetails ? (
-            <AnimationComponent
-              animationType={ComponentAnimationType.componentFade}
-              style={defaultStyles.flex}
-            >
-              <PlayerDetails
-                configuration={configuration}
-                style={defaultStyles.playerDetails}
-                entry={entry}
-                isTabletLandscape={isTabletLandscape}
-                isTablet={isTablet}
-              />
-            </AnimationComponent>
-          ) : null}
-        </AnimatedScrollModal>
+        <View style={defaultStyles.flex} onLayout={onLayout}>
+          <PlayerDetailsWrapperHeightContext.Provider
+            value={playerDetailsWrapperHeight}
+          >
+            <AnimatedScrollModal>
+              {isShowPlayerDetails ? (
+                <AnimationComponent
+                  animationType={ComponentAnimationType.componentFade}
+                  style={defaultStyles.flex}
+                >
+                  <PlayerDetails
+                    configuration={configuration}
+                    style={defaultStyles.playerDetails}
+                    entry={entry}
+                    isTabletLandscape={isTabletLandscape}
+                    isTablet={isTablet}
+                  />
+                </AnimationComponent>
+              ) : null}
+            </AnimatedScrollModal>
+          </PlayerDetailsWrapperHeightContext.Provider>
+        </View>
       </AnimationComponent>
     </WrapperView>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.11-alpha.5714428013",
+  "version": "13.0.11-alpha.6727579127",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.11-alpha.5714428013",
-    "@applicaster/zapp-react-native-bridge": "13.0.11-alpha.5714428013",
-    "@applicaster/zapp-react-native-redux": "13.0.11-alpha.5714428013",
-    "@applicaster/zapp-react-native-utils": "13.0.11-alpha.5714428013",
+    "@applicaster/applicaster-types": "13.0.11-alpha.6727579127",
+    "@applicaster/zapp-react-native-bridge": "13.0.11-alpha.6727579127",
+    "@applicaster/zapp-react-native-redux": "13.0.11-alpha.6727579127",
+    "@applicaster/zapp-react-native-utils": "13.0.11-alpha.6727579127",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",