@applicaster/quick-brick-player 15.0.0-rc.1 → 15.0.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-rc.1",
+  "version": "15.0.0-rc.3",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.56",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.60",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-rc.1",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.1",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.1",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-rc.3",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.3",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.3",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, ReactElement } from "react";
+import React, { ReactElement, useRef } from "react";
 
-import { StyleSheet, Animated, Pressable, ViewStyle } from "react-native";
+import { Animated, Pressable, StyleSheet, ViewStyle } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
@@ -19,6 +19,7 @@ import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-comp
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
+import { PlayerDetailsWrapperHeightContext } from "./context";
 
 const orientationStyles = StyleSheet.create({
   landscape: { flexDirection: "row" },
@@ -163,6 +164,20 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
+  const [playerDetailsWrapperHeight, setPlayerDetailsWrapperHeight] =
+    React.useState(0);
+
+  const onScrollViewLayout = React.useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }) => {
+      setPlayerDetailsWrapperHeight(height);
+    },
+    []
+  );
+
   return (
     <PanGestureHandler
       enabled={enabled}
@@ -217,12 +232,17 @@ export function VideoPlayerModal({
                 contentContainerStyle={{
                   paddingBottom: insets.bottom,
                 }}
+                onLayout={onScrollViewLayout}
                 style={[
                   styles.extraContentScrollView,
                   { opacity: expandedOpacity },
                 ]}
               >
-                {extraContent || null}
+                <PlayerDetailsWrapperHeightContext.Provider
+                  value={playerDetailsWrapperHeight}
+                >
+                  {extraContent}
+                </PlayerDetailsWrapperHeightContext.Provider>
               </GestureAnimatedScrollView>
             ) : null}
           </Animated.View>

package/src/Player/PlayerModal/context/index.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const PlayerDetailsWrapperHeightContext = React.createContext(null);
+
+export const usePlayerDetailsWrapperHeight = () =>
+  React.useContext(PlayerDetailsWrapperHeightContext);