style

src/components/player/GlobalAudioPlayer.js

@@ -4,8 +4,9 @@ import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { icons, img } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
 import usePlayer from "../../hooks/usePlayer";
-import { Palette } from "../../styles";
+import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 
 const formatDuration = (ms) => {
@@ -50,14 +51,24 @@ const GlobalAudioPlayer = () => {
     }
   };
 
+  const TAB_BAR_HEIGHT = 64;
+  const GAP_WITH_TAB = 8;
+  const bottomOffset = (isWeb ? gutters : 3) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
+
   return (
-    <View pointerEvents="box-none" style={styles.host}>
+    <View
+      pointerEvents="box-none"
+      style={[styles.host, { bottom: bottomOffset }]}
+    >
       <BlurView
         intensity={40}
         // tint="dark"
         blurReductionFactor={2}
         // tint="dark"
-        style={[styles.container]}
+        style={[
+          styles.container,
+          { paddingVertical: Math.max(4, insets.bottom / 6) },
+        ]}
         experimentalBlurMethod="dimezisBlurView"
       >
         <Image source={artworkSource} style={styles.cover} />
@@ -91,21 +102,19 @@ const GlobalAudioPlayer = () => {
 const styles = StyleSheet.create({
   host: {
     position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
+    alignSelf: "center",
+    width: "90%",
+    maxWidth: 500,
     pointerEvents: "box-none",
   },
   container: {
-    marginHorizontal: 16,
-    marginBottom: 80,
+    width: "100%",
     borderRadius: 12,
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
     overflow: "hidden",
     paddingHorizontal: 4,
-    paddingVertical: 4,
     // backgroundColor: "rgba(18, 11, 29, 0.85)",
     // borderWidth: 1,
     // borderColor: "#372152",