From 666e6edf5778d3182bc0b53325277385802b94b1 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Wed, 18 Jun 2025 11:31:30 +0530
Subject: [PATCH] Enhance HeroSection with platform-specific blur effects and
 improved button styles

This update introduces platform-specific blur effects in the HeroSection component, utilizing ExpoBlurView for iOS and CommunityBlurView for Android, along with a fallback for StoreClient environments. Additionally, button styles have been refined with overflow properties for better visual consistency. New styles for blur backgrounds have been added to enhance the overall aesthetic of the action buttons.
---
 src/components/metadata/HeroSection.tsx | 72 ++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx
index 2575618..457d56f 100644
--- a/src/components/metadata/HeroSection.tsx
+++ b/src/components/metadata/HeroSection.tsx
@@ -5,10 +5,14 @@ import {
   StyleSheet,
   Dimensions,
   TouchableOpacity,
+  Platform,
 } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Image } from 'expo-image';
+import { BlurView as ExpoBlurView } from 'expo-blur';
+import { BlurView as CommunityBlurView } from '@react-native-community/blur';
+import Constants, { ExecutionEnvironment } from 'expo-constants';
 import Animated, {
   useAnimatedStyle,
   interpolate,
@@ -135,6 +139,21 @@ const ActionButtons = React.memo(({
         onPress={toggleLibrary}
         activeOpacity={0.85}
       >
+        {Platform.OS === 'ios' ? (
+          <ExpoBlurView intensity={80} style={styles.blurBackground} tint="dark" />
+        ) : (
+          Constants.executionEnvironment === ExecutionEnvironment.StoreClient ? (
+            <View style={styles.androidFallbackBlur} />
+          ) : (
+            <CommunityBlurView
+              style={styles.blurBackground}
+              blurType="dark"
+              blurAmount={8}
+              overlayColor="rgba(255,255,255,0.1)"
+              reducedTransparencyFallbackColor="rgba(255,255,255,0.15)"
+            />
+          )
+        )}
         <MaterialIcons
           name={inLibrary ? 'bookmark' : 'bookmark-border'}
           size={24}
@@ -151,6 +170,21 @@ const ActionButtons = React.memo(({
           onPress={handleRatingsPress}
           activeOpacity={0.85}
         >
+          {Platform.OS === 'ios' ? (
+            <ExpoBlurView intensity={80} style={styles.blurBackgroundRound} tint="dark" />
+          ) : (
+            Constants.executionEnvironment === ExecutionEnvironment.StoreClient ? (
+              <View style={styles.androidFallbackBlurRound} />
+            ) : (
+              <CommunityBlurView
+                style={styles.blurBackgroundRound}
+                blurType="dark"
+                blurAmount={8}
+                overlayColor="rgba(255,255,255,0.1)"
+                reducedTransparencyFallbackColor="rgba(255,255,255,0.15)"
+              />
+            )
+          )}
           <MaterialIcons 
             name="assessment" 
             size={24} 
@@ -563,19 +597,19 @@ const styles = StyleSheet.create({
     elevation: 4,
   },
   infoButton: {
-    backgroundColor: 'rgba(255,255,255,0.15)',
     borderWidth: 1.5,
     borderColor: 'rgba(255,255,255,0.7)',
+    overflow: 'hidden',
   },
   iconButton: {
     width: 50,
     height: 50,
     borderRadius: 25,
-    backgroundColor: 'rgba(255,255,255,0.15)',
     borderWidth: 1.5,
     borderColor: 'rgba(255,255,255,0.7)',
     alignItems: 'center',
     justifyContent: 'center',
+    overflow: 'hidden',
   },
   playButtonText: {
     color: '#000',
@@ -614,6 +648,40 @@ const styles = StyleSheet.create({
     opacity: 0.85,
     letterSpacing: 0.1
   },
+  blurBackground: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 20,
+  },
+  androidFallbackBlur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+  },
+  blurBackgroundRound: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 25,
+  },
+  androidFallbackBlurRound: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 25,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+  },
 });
 
 export default React.memo(HeroSection); 
\ No newline at end of file