@applicaster/quick-brick-player 13.0.0-rc.120 → 13.0.0-rc.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.120",
+  "version": "13.0.0-rc.121",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.120",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.120",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.120",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.120",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.121",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.121",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.121",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -24,6 +24,10 @@ import {
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+
+const bottomTabBarHeight = getTabBarHeight();
 
 type Props = {
   entry: ZappEntry;
@@ -88,10 +92,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const backgroundColorStyle = (value: GetValue): ViewStyle => ({
-  backgroundColor: value("docked_player_background_color"),
-});
-
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
@@ -208,6 +208,10 @@ export const DockedControls = (props: Props) => {
     []
   );
 
+  const dockedBackgroundColor = value("docked_player_background_color");
+
+  const insets = useSafeAreaInsets();
+
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -219,7 +223,9 @@ export const DockedControls = (props: Props) => {
           isActiveGesture || layoutState.docked,
           progressBarHeight
         ),
-        { height: minimisedHeight },
+        {
+          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+        },
       ]}
     >
       {!playerState.isLive &&
@@ -261,7 +267,12 @@ export const DockedControls = (props: Props) => {
                 )}
               />
             )}
-            <View style={[styles.contentInfo, backgroundColorStyle(value)]}>
+            <View
+              style={[
+                styles.contentInfo,
+                { backgroundColor: dockedBackgroundColor },
+              ]}
+            >
               <ContentInfo
                 content={{ ...entry, title, summary }}
                 value={value}
@@ -275,7 +286,7 @@ export const DockedControls = (props: Props) => {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            backgroundColorStyle(value),
+            { backgroundColor: dockedBackgroundColor },
           ]}
         >
           <Controls
@@ -297,6 +308,12 @@ export const DockedControls = (props: Props) => {
           />
         </View>
       </View>
+      <View
+        style={{
+          height: insets.bottom + bottomTabBarHeight,
+          backgroundColor: dockedBackgroundColor,
+        }}
+      />
     </AnimationComponent>
   );
 };