react-native-blur-vibe 0.1.5 → 0.1.7

package/android/src/main/java/com/blurvibe/BlurVibeView.kt

@@ -1,230 +1,258 @@
 package com.blurvibe
 
 import android.content.Context
-import android.graphics.Bitmap
-import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Outline
-import android.graphics.Paint
-import android.graphics.Rect
-import android.graphics.RectF
 import android.util.TypedValue
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
+import android.view.ViewTreeObserver
 import androidx.core.graphics.toColorInt
-import com.facebook.react.views.view.ReactViewGroup
+import com.qmdeve.blurview.base.BaseBlurViewGroup
+import com.qmdeve.blurview.widget.BlurViewGroup
 
 /**
- * BlurVibeView — CSS backdrop-filter: blur() for React Native / Android
+ * BlurVibeView — Android backdrop blur implementation
  *
- * Extends ReactViewGroup so it can host React Native children correctly
- * (Yoga layout, touch events, z-ordering all work out of the box).
+ * Extends QmBlurView's BlurViewGroup — a high-performance blur library
+ * that correctly implements CSS backdrop-filter: blur() semantics:
+ *   - Blurs content BEHIND the view, not the view itself
+ *   - Hardware accelerated via native blur algorithms
+ *   - Handles scroll, animation, zIndex, absolute positioning correctly
+ *   - Never causes draw loops or bitmap capture on the JS thread
  *
- * Blur is produced by BlurCaptureCoordinator — a singleton per root view that
- * captures + blurs the root ONCE per vsync and shares the result to every
- * registered BlurVibeView. N blur views on screen = same cost as 1.
+ * Uses reflection to redirect the blur capture root from the activity
+ * decor view to the nearest ReactRootView or react-native-screens Screen,
+ * preventing full-screen blur and navigation transition artifacts.
  *
- * Each view clips the shared blurred bitmap to its own screen-space rect in
- * onDraw(), then draws the overlay color on top.
+ * Credit: approach adapted from sbaiahmed1/react-native-blur
  */
-class BlurVibeView(context: Context) : ReactViewGroup(context) {
+class BlurVibeView(context: Context) : BlurViewGroup(context, null) {
 
-  // ── State ──────────────────────────────────────────────────────────────────
+  private var currentBlurRadius = DEFAULT_BLUR_RADIUS
+  private var currentOverlayColor = Color.TRANSPARENT
+  private var currentCornerRadius = 0f
+  private var isBlurInitialized = false
 
-  private var blurRadius     = DEFAULT_BLUR_RADIUS
-  private var overlayColor   = Color.TRANSPARENT
-  private var cornerRadiusPx = 0f
-
-  // ── Coordinator ───────────────────────────────────────────────────────────
-
-  private var coordinator: BlurCaptureCoordinator? = null
-
-  // ── Draw state (main thread only) ─────────────────────────────────────────
-
-  @Volatile private var latestBitmap: Bitmap? = null
-  private val bitmapPaint  = Paint(Paint.FILTER_BITMAP_FLAG)
-  private val overlayPaint = Paint()
-  private val srcRect      = Rect()
-  private val dstRect      = RectF()
-
-  // ── Init ───────────────────────────────────────────────────────────────────
+  companion object {
+    private const val DEFAULT_BLUR_RADIUS = 10f
+    private const val MIN_BLUR_AMOUNT = 0f
+    private const val MAX_BLUR_AMOUNT = 100f
+    private const val MAX_BLUR_RADIUS = 25f  // QmBlurView Gaussian kernel designed for 0-25
+
+    // Maps 0–100 blurAmount to 0–25 QmBlurView radius range.
+    // Uses a squared curve so low values (0–30) stay subtle and mid-high values
+    // (50–100) produce the strong frosted-glass spread seen in CSS backdrop-blur-md/lg/xl.
+    private fun mapBlurAmountToRadius(amount: Float): Float {
+      val t = amount.coerceIn(MIN_BLUR_AMOUNT, MAX_BLUR_AMOUNT) / MAX_BLUR_AMOUNT // 0.0–1.0
+      return t * t * MAX_BLUR_RADIUS  // quadratic: more spread at higher values
+    }
+  }
 
   init {
-    setWillNotDraw(false)
-    super.setBackgroundColor(Color.TRANSPARENT)
+    super.setBackgroundColor(currentOverlayColor)
+    clipChildren = true
     clipToOutline = true
+    blurRounds = 2          // 2 passes = smooth Gaussian spread (frosted glass quality)
+    super.setDownsampleFactor(4.0f)  // 1/4 res — eliminates pixelation, still fast
   }
 
-  // ── Lifecycle ──────────────────────────────────────────────────────────────
-
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
-    attachToCoordinator()
+    if (isBlurInitialized) return
+    swapBlurRootToOptimalAncestor()
+    initializeBlur()
   }
 
   override fun onDetachedFromWindow() {
-    coordinator?.unregister(this)
-    coordinator = null
     super.onDetachedFromWindow()
+    isBlurInitialized = false
   }
 
-  // ── Coordinator attachment ─────────────────────────────────────────────────
+  private var frameScheduled = false
 
-  private fun attachToCoordinator() {
-    coordinator?.unregister(this)
-    val root = findBlurRoot() ?: return
-    val coord = BlurCaptureCoordinator.forRoot(root).also {
-      it.blurRadius = blurRadius
-      coordinator   = it
-    }
-    coord.register(this)
+  private val frameCallback = android.view.Choreographer.FrameCallback {
+    frameScheduled = false
+    try { invalidate() } catch (_: Exception) {}
   }
 
-  /** Called by coordinator on main thread when a new blurred bitmap is ready. */
-  fun onBlurReady(bitmap: Bitmap) {
-    latestBitmap = bitmap
-    invalidate()
-  }
-
-  // ── Drawing ────────────────────────────────────────────────────────────────
+  /**
+   * Redirects QmBlurView's internal preDrawListener from the old root to [newRoot].
+   * Also wraps it in a Choreographer gate so blur work fires at most ONCE per vsync,
+   * even when many views invalidate simultaneously (scroll, animation, etc).
+   */
+  private fun swapBlurRootToOptimalAncestor() {
+    val newRoot = findNearestScreenAncestor() ?: findNearestReactRootView() ?: return
+
+    try {
+      val blurViewGroupClass = BlurViewGroup::class.java
+      val baseField = blurViewGroupClass.getDeclaredField("mBaseBlurViewGroup")
+      baseField.isAccessible = true
+      val baseBlurViewGroup = baseField.get(this) ?: return
+
+      val baseClass = BaseBlurViewGroup::class.java
+
+      val decorViewField = baseClass.getDeclaredField("mDecorView")
+      decorViewField.isAccessible = true
+      val oldDecorView = decorViewField.get(baseBlurViewGroup) as? View
+
+      val preDrawListenerField = baseClass.getDeclaredField("preDrawListener")
+      preDrawListenerField.isAccessible = true
+      val preDrawListener = preDrawListenerField.get(baseBlurViewGroup)
+        as? ViewTreeObserver.OnPreDrawListener
+
+      if (oldDecorView != null && preDrawListener != null) {
+        // Remove listener from old root
+        oldDecorView.viewTreeObserver.removeOnPreDrawListener(preDrawListener)
+
+        // Set new root
+        decorViewField.set(baseBlurViewGroup, newRoot)
+
+        // Wrap in Choreographer gate: fires at most once per vsync regardless of
+        // how many child invalidations happen in the same frame
+        val gatedListener = ViewTreeObserver.OnPreDrawListener {
+          if (!frameScheduled) {
+            frameScheduled = true
+            android.view.Choreographer.getInstance().postFrameCallback(frameCallback)
+          }
+          true  // never block the draw pass
+        }
 
-  override fun onDraw(canvas: Canvas) {
-    val bitmap = latestBitmap?.takeIf { !it.isRecycled } ?: return
-    val root   = findBlurRoot() ?: return
+        // Add gated listener to new root (NOT the original raw listener)
+        newRoot.viewTreeObserver.addOnPreDrawListener(gatedListener)
 
-    // compute this view's offset within the blur root
-    val myLoc   = IntArray(2);   getLocationInWindow(myLoc)
-    val rootLoc = IntArray(2);   root.getLocationInWindow(rootLoc)
+        // Update mDifferentRoot flag
+        val differentRootField = baseClass.getDeclaredField("mDifferentRoot")
+        differentRootField.isAccessible = true
+        differentRootField.setBoolean(baseBlurViewGroup, newRoot.rootView != this.rootView)
 
-    val l = myLoc[0] - rootLoc[0]
-    val t = myLoc[1] - rootLoc[1]
+        // Force redraw
+        val forceRedrawField = baseClass.getDeclaredField("mForceRedraw")
+        forceRedrawField.isAccessible = true
+        forceRedrawField.setBoolean(baseBlurViewGroup, true)
+      }
+    } catch (e: Exception) {
+      // Reflection failed — QmBlurView internals changed
+      // Fall back gracefully to default decor view blur root
+    }
+  }
 
-    // the blurred bitmap is at 1/DOWNSAMPLE_FACTOR resolution — scale coords
-    val f = BlurCaptureCoordinator.DOWNSAMPLE_FACTOR
-    srcRect.set(
-      (l / f).toInt().coerceAtLeast(0),
-      (t / f).toInt().coerceAtLeast(0),
-      ((l + width)  / f).toInt().coerceAtMost(bitmap.width),
-      ((t + height) / f).toInt().coerceAtMost(bitmap.height)
-    )
-    dstRect.set(0f, 0f, width.toFloat(), height.toFloat())
+  private fun findNearestScreenAncestor(): ViewGroup? {
+    var current = parent
+    while (current != null) {
+      if (current.javaClass.name == "com.swmansion.rnscreens.Screen") {
+        return current as? ViewGroup
+      }
+      current = current.parent
+    }
+    return null
+  }
 
-    if (!srcRect.isEmpty) canvas.drawBitmap(bitmap, srcRect, dstRect, bitmapPaint)
+  private fun findNearestReactRootView(): ViewGroup? {
+    var current = parent
+    while (current != null) {
+      if (current.javaClass.name == "com.facebook.react.ReactRootView") {
+        return current as? ViewGroup
+      }
+      current = current.parent
+    }
+    return null
+  }
 
-    if (Color.alpha(overlayColor) > 0) {
-      overlayPaint.color = overlayColor
-      canvas.drawRect(dstRect, overlayPaint)
+  private fun initializeBlur() {
+    if (isBlurInitialized) return
+    try {
+      super.setBlurRadius(currentBlurRadius)
+      super.setOverlayColor(currentOverlayColor)
+      updateCornerRadius()
+      isBlurInitialized = true
+    } catch (e: Exception) {
+      // Ignore — view may not be fully attached yet
     }
   }
 
-  // ── Public setters (ViewManager → UI thread) ──────────────────────────────
+  // MARK: - Public setters
 
   fun setBlurAmount(amount: Float) {
-    blurRadius = (amount.coerceIn(0f, 100f) / 100f) * 25f
-    coordinator?.blurRadius = blurRadius
+    currentBlurRadius = mapBlurAmountToRadius(amount)
+    try { super.setBlurRadius(currentBlurRadius) } catch (e: Exception) {}
   }
 
-  fun applyOverlayColor(colorString: String?) {
-    overlayColor = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
-    invalidate()
+  fun setOverlayColor(colorString: String?) {
+    currentOverlayColor = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
+    try {
+      super.setBackgroundColor(currentOverlayColor)
+      super.setOverlayColor(currentOverlayColor)
+    } catch (e: Exception) {}
   }
 
-  /**
-   * blurRadius prop: Android downsample factor (1–8).
-   * Higher = faster + softer. Sets the global factor on the coordinator.
-   */
-  fun applyBlurRadius(factor: Int) {
-    BlurCaptureCoordinator.DOWNSAMPLE_FACTOR = factor.coerceIn(2, 16).toFloat()
-    // re-attach so coordinator picks up new factor
-    attachToCoordinator()
+  fun setReducedTransparencyFallbackColor(colorString: String?) {
+    // Stored for future use — QmBlurView handles accessibility fallback internally
   }
 
-  fun applyBorderRadius(radiusDp: Float) {
-    cornerRadiusPx = TypedValue.applyDimension(
-      TypedValue.COMPLEX_UNIT_DIP, radiusDp, context.resources.displayMetrics
-    )
-    updateOutline()
+  fun setBlurRadius(radius: Int) {
+    // blurRadius is the Android downscale factor — map to QmBlurView's downsample factor
+    val downsample = radius.coerceIn(1, 8).toFloat()
+    try { super.setDownsampleFactor(downsample) } catch (e: Exception) {}
   }
 
-  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") color: String?) {
-    // iOS-only concept — no-op on Android
+  fun setBorderRadius(radius: Float) {
+    currentCornerRadius = radius
+    updateCornerRadius()
   }
 
-  // ── Corner radius / outline ────────────────────────────────────────────────
-
-  private fun updateOutline() {
-    if (cornerRadiusPx > 0f) {
-      outlineProvider = object : ViewOutlineProvider() {
-        override fun getOutline(view: View, outline: Outline) {
-          outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
-        }
+  private fun updateCornerRadius() {
+    val radiusPx = TypedValue.applyDimension(
+      TypedValue.COMPLEX_UNIT_DIP,
+      currentCornerRadius,
+      context.resources.displayMetrics
+    )
+    outlineProvider = object : ViewOutlineProvider() {
+      override fun getOutline(view: View, outline: Outline) {
+        outline.setRoundRect(0, 0, view.width, view.height, radiusPx)
       }
-      clipToOutline = true
-    } else {
-      outlineProvider = ViewOutlineProvider.BACKGROUND
-      clipToOutline   = false
     }
-    invalidate()
+    clipToOutline = true
+    try { super.setCornerRadius(radiusPx) } catch (e: Exception) {}
   }
 
-  // ── React Native layout passthrough ───────────────────────────────────────
-
+  // React Native handles layout — prevent superclass from interfering
   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-    // Yoga owns layout — calling super would run ReactViewGroup's layout which is correct,
-    // but we must NOT call FrameLayout super here (ReactViewGroup handles it internally).
+    // No-op: layout handled by React Native's Yoga engine
   }
 
-  // ── Blur root finder ──────────────────────────────────────────────────────
-  //
-  // Priority: react-native-screens Screen → ReactRootView → window root
-  // The root is what gets captured — use the narrowest stable ancestor.
-
-  private fun findBlurRoot(): ViewGroup? {
-    var p = parent
-    while (p != null) {
-      if ((p as? View)?.javaClass?.name == "com.swmansion.rnscreens.Screen")
-        return p as? ViewGroup
-      p = (p as? View)?.parent
+  // MARK: - Color parser
+  // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
+  private fun parseHexColor(colorString: String): Int? {
+    val s = colorString.trim()
+    if (s.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
+    if (!s.startsWith("#")) {
+      return try { s.toColorInt() } catch (e: Exception) { null }
     }
-    p = parent
-    while (p != null) {
-      if ((p as? View)?.javaClass?.name == "com.facebook.react.ReactRootView")
-        return p as? ViewGroup
-      p = (p as? View)?.parent
-    }
-    return rootView as? ViewGroup
-  }
-
-  // ── Color parser ──────────────────────────────────────────────────────────
-  // Handles: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA", named colors
-
-  private fun parseHexColor(s: String): Int? {
-    val t = s.trim()
-    if (t.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
-    if (!t.startsWith("#")) return try { t.toColorInt() } catch (_: Exception) { null }
-    val hex = t.removePrefix("#")
+    val hex = s.removePrefix("#")
     return try {
       when (hex.length) {
-        3    -> Color.argb(255,
-                  hex[0].toString().repeat(2).toInt(16),
-                  hex[1].toString().repeat(2).toInt(16),
-                  hex[2].toString().repeat(2).toInt(16))
-        6    -> Color.argb(255,
-                  hex.substring(0, 2).toInt(16),
-                  hex.substring(2, 4).toInt(16),
-                  hex.substring(4, 6).toInt(16))
-        8    -> Color.argb(
-                  hex.substring(6, 8).toInt(16),   // alpha LAST in #RRGGBBAA
-                  hex.substring(0, 2).toInt(16),
-                  hex.substring(2, 4).toInt(16),
-                  hex.substring(4, 6).toInt(16))
+        3 -> Color.argb(
+          255,
+          hex[0].toString().repeat(2).toInt(16),
+          hex[1].toString().repeat(2).toInt(16),
+          hex[2].toString().repeat(2).toInt(16)
+        )
+        6 -> Color.argb(
+          255,
+          hex.substring(0, 2).toInt(16),
+          hex.substring(2, 4).toInt(16),
+          hex.substring(4, 6).toInt(16)
+        )
+        8 -> Color.argb(
+          hex.substring(6, 8).toInt(16), // AA is last in #RRGGBBAA
+          hex.substring(0, 2).toInt(16),
+          hex.substring(2, 4).toInt(16),
+          hex.substring(4, 6).toInt(16)
+        )
         else -> null
       }
-    } catch (_: NumberFormatException) { null }
-  }
-
-  companion object {
-    private const val DEFAULT_BLUR_RADIUS = 2.5f   // blurAmount=10 → 2.5
+    } catch (e: NumberFormatException) { null }
   }
 }