audio player

src/components/player/GlobalAudioPlayer.js

@@ -1,13 +1,6 @@
 import { BlurView } from "expo-blur";
 import React, { useMemo } from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { icons, img } from "../../assets";
@@ -60,14 +53,12 @@ const GlobalAudioPlayer = () => {
   return (
     <View pointerEvents="box-none" style={styles.host}>
       <BlurView
-        intensity={Platform.OS === "ios" ? 40 : 15}
-        tint="dark"
-        style={[
-          styles.container,
-          {
-            paddingBottom: Math.max(insets.bottom, 12),
-          },
-        ]}
+        intensity={40}
+        // tint="dark"
+        blurReductionFactor={2}
+        // tint="dark"
+        style={[styles.container]}
+        experimentalBlurMethod="dimezisBlurView"
       >
         <Image source={artworkSource} style={styles.cover} />
         <View style={styles.details}>
@@ -79,17 +70,6 @@ const GlobalAudioPlayer = () => {
               {artist}
             </Text>
           )}
-          <View style={styles.progressContainer}>
-            <View style={styles.progressTrack}>
-              <View
-                style={[styles.progressFill, { width: `${progress * 100}%` }]}
-              />
-            </View>
-            <View style={styles.timeContainer}>
-              <Text style={styles.time}>{formatDuration(positionMs)}</Text>
-              <Text style={styles.time}>{formatDuration(durationMs)}</Text>
-            </View>
-          </View>
         </View>
         <View style={styles.actions}>
           <Pressable
@@ -118,26 +98,27 @@ const styles = StyleSheet.create({
   },
   container: {
     marginHorizontal: 16,
-    marginBottom: 12,
-    borderRadius: 20,
+    marginBottom: 80,
+    borderRadius: 12,
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    backgroundColor: "rgba(18, 11, 29, 0.85)",
-    borderWidth: 1,
-    borderColor: "#372152",
+    overflow: "hidden",
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    // backgroundColor: "rgba(18, 11, 29, 0.85)",
+    // borderWidth: 1,
+    // borderColor: "#372152",
   },
   cover: {
-    width: 48,
-    height: 48,
+    width: 40,
+    height: 40,
     borderRadius: 12,
     backgroundColor: "#1f1829",
   },
   details: {
     flex: 1,
-    gap: 6,
+    gap: 3,
   },
   title: {
     color: Palette.white,
@@ -181,7 +162,7 @@ const styles = StyleSheet.create({
     borderRadius: 22,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    // backgroundColor: "rgba(255, 255, 255, 0.1)",
   },
   toggleIcon: {
     width: 24,