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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-rc.1",
+  "version": "15.0.0-rc.11",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "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/quick-brick-mobile-transport-controls": "15.0.0-rc.8",
+    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.11",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-rc.11",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.11",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.11",
     "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);

package/src/Player/index.tsx

@@ -50,6 +50,7 @@ import { TVPlayerView } from "./PlayerView/TVPlayerView";
 import PlayerModal, { VideoPlayerModal } from "./PlayerModal";
 import { DockedControls } from "./AudioLayer/Layout/DockedControls";
 import { FlexImage } from "./AudioLayer/Layout/PlayerImage/FlexImage";
+import { PlayerError } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -416,9 +417,12 @@ export default class VideoPlayer extends React.Component<
 
   // TODO: Should be unified on both platform
   onVideoError = ({ nativeEvent }) => {
-    const { message } = nativeEvent;
+    const description = nativeEvent.message;
+    const error = nativeEvent.error || nativeEvent.exception || "Unknown error"; // Android only fallback
 
-    return this.props?.listener?.onError(new Error(message));
+    const newError = new PlayerError(error, description);
+
+    return this.props?.listener?.onError(newError);
   };
 
   onPlayerPause = ({ nativeEvent = null }) => {