Fix: Youtube video blur on isBlur

Author: Gurdeep99

android/src/main/java/com/video/PlayerCore.kt

@@ -19,6 +19,7 @@ import android.webkit.RenderProcessGoneDetail
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import android.widget.FrameLayout
+import androidx.annotation.RequiresApi
 import androidx.media3.common.C
 import androidx.media3.common.MediaItem
 import androidx.media3.common.MediaMetadata
@@ -109,15 +110,15 @@ object PlayerCore {
   private var blurType = "dark"
 
   /**
-   * Real-time blur of the actual PlayerView, not an overlay above it — a
-   * `RenderEffect` composited by the GPU directly onto the view that's
-   * rendering the video, so it blurs a live TextureView the way a bitmap-
-   * snapshot blur library can't.
+   * Real-time blur of the actual video output, not an overlay above it — a
+   * `RenderEffect` composited by the GPU directly onto whichever engine's
+   * view is currently active (the PlayerView, or the YouTube engine's plain
+   * WebView — both are ordinary Views a RenderEffect blurs the same way), so
+   * it blurs a live TextureView the way a bitmap-snapshot blur library can't.
    *
    * API 31+ only: `RenderEffect` doesn't exist below Android 12, and there's
    * no reasonable fallback that would actually blur (vs. just covering) the
-   * video, so this is a silent no-op there — same as it already is for the
-   * WebView (YouTube) engine, which has no PlayerView to blur at all.
+   * video, so this is a silent no-op there.
    *
    * `blurAmount` (0-100) maps to the blur radius; `blurType` tints the blur
    * (`"dark"` a black tint, `"light"`/`"xlight"` white at decreasing
@@ -132,17 +133,29 @@ object PlayerCore {
   }
 
   /**
-   * Re-applied whenever the PlayerView is (re)created — [setBlurred] can be
-   * called before the view exists yet (e.g. before the first attach), and
-   * the desired state must survive that.
+   * Re-applied whenever the PlayerView/WebView is (re)created, and whenever
+   * the active engine changes (a `RenderEffect` lives on one specific View
+   * instance, so switching from url <-> youtube must move it) — see the
+   * calls to this from [ensurePlayerView], [ensureWebView] and [attachTo].
+   * [setBlurred] can also be called before either view exists yet (e.g.
+   * before the first attach), and the desired state must survive that.
    */
   private fun applyBlur() {
     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) return
-    val view = playerView ?: return
-    if (!blurred) {
-      view.setRenderEffect(null)
-      return
+    val effect = if (blurred) buildBlurEffect() else null
+    // Always clear the inactive engine's view too, or a stale blur would
+    // reappear with no explicit setBlurred call if the engine switches back.
+    if (engine == Engine.WEB) {
+      webView?.setRenderEffect(effect)
+      playerView?.setRenderEffect(null)
+    } else {
+      playerView?.setRenderEffect(effect)
+      webView?.setRenderEffect(null)
     }
+  }
+
+  @RequiresApi(Build.VERSION_CODES.S)
+  private fun buildBlurEffect(): RenderEffect {
     // Radius 0 renders as a no-op blur but a jarring instant tint pop-in, so
     // floor it slightly once "blurred" is true at all.
     val radius = (blurAmount.coerceIn(0.0, 100.0) / 100.0 * 25.0).coerceAtLeast(1.0).toFloat()
@@ -152,11 +165,10 @@ object PlayerCore {
       "xlight" -> Color.argb(60, 255, 255, 255)
       else -> Color.argb(120, 0, 0, 0) // "dark"
     }
-    val tinted = RenderEffect.createColorFilterEffect(
+    return RenderEffect.createColorFilterEffect(
       PorterDuffColorFilter(tint, PorterDuff.Mode.SRC_OVER),
       blur
     )
-    view.setRenderEffect(tinted)
   }
 
   // Second engine: a re-parentable WebView running the YouTube IFrame API.
@@ -425,6 +437,7 @@ object PlayerCore {
       }
     }
     webView = wv
+    applyBlur()
     return wv
   }
 
@@ -961,6 +974,9 @@ setInterval(function(){if(player&&player.getCurrentTime){post({type:'time',posit
     if (engine == Engine.EXO) {
       playerView?.let { rebindPlayerToView(it, surfaceId, container) }
     }
+    // Keeps the blur (if any) on whichever engine's view is now active —
+    // `view` above may be a different engine's view than last time.
+    applyBlur()
     listener?.onAttach(surfaceId)
   }
 

ios/VideoPlayerCore.swift

@@ -74,9 +74,11 @@ public final class VideoPlayerCore: NSObject {
   private let hostView = VideoHostView()
 
   // --- blur (real-time, over the actual video output — see setBlurred) ---
-  // A real UIVisualEffectView layered over the host view. Unlike a bitmap-
-  // snapshot blur, this composites at the system level and reliably blurs
-  // the live AVPlayerLayer content underneath, on every iOS version.
+  // A real UIVisualEffectView, moved onto whichever engine view is active
+  // (see attachBlurViewIfNeeded). Unlike a bitmap-snapshot blur, this
+  // composites at the system level and reliably blurs the live content
+  // underneath — the native player's AVPlayerLayer, or the YouTube engine's
+  // WKWebView — on every iOS version.
   private lazy var blurView: UIVisualEffectView = {
     let view = UIVisualEffectView(effect: nil)
     view.isUserInteractionEnabled = false
@@ -86,6 +88,9 @@ public final class VideoPlayerCore: NSObject {
   /// Retained so the effect it applies via `fractionComplete` (below) isn't
   /// reverted by deallocation.
   private var blurAnimator: UIViewPropertyAnimator?
+  /// Guards `attachBlurViewIfNeeded` so it stays a no-op (no lazy `blurView`
+  /// creation, no extra subview) until `setBlurred` has actually been used.
+  private var blurEverUsed = false
 
   // Second engine: a re-parentable WKWebView running the YouTube IFrame API.
   private enum Engine { case exo, web }
@@ -866,21 +871,35 @@ public final class VideoPlayerCore: NSObject {
     }
   }
 
+  /// Moves the blur subview onto whichever engine view is currently active
+  /// (the native player's `hostView`, or the YouTube engine's `WKWebView`) —
+  /// both are plain `UIView`s, so a `UIVisualEffectView` blurs either one
+  /// the same way. Called from `setBlurred` and, so the blur keeps following
+  /// the video across an engine switch (`url` \<-\> `youtube`) or a re-parent
+  /// even without a fresh `setBlurred` call, from `attachTo` too.
+  private func attachBlurViewIfNeeded() {
+    guard blurEverUsed else { return }
+    let parent = activeView
+    guard blurView.superview !== parent else { return }
+    blurView.removeFromSuperview()
+    parent.addSubview(blurView)
+    NSLayoutConstraint.activate([
+      blurView.leadingAnchor.constraint(equalTo: parent.leadingAnchor),
+      blurView.trailingAnchor.constraint(equalTo: parent.trailingAnchor),
+      blurView.topAnchor.constraint(equalTo: parent.topAnchor),
+      blurView.bottomAnchor.constraint(equalTo: parent.bottomAnchor),
+    ])
+  }
+
   /// `amount` is 0-100 intensity, mapped onto the blur via the standard
   /// `UIViewPropertyAnimator.fractionComplete` trick (a real, partial-way-
   /// applied blur, not a faked opacity fade). `type` picks the system blur
   /// style — matching @react-native-community/blur's naming for familiarity,
   /// though this is this library's own implementation, not that package.
+  /// Works for both engines — see `attachBlurViewIfNeeded`.
   @objc public func setBlurred(_ blurred: Bool, amount: Double, type: String) {
-    if blurView.superview !== hostView {
-      hostView.addSubview(blurView)
-      NSLayoutConstraint.activate([
-        blurView.leadingAnchor.constraint(equalTo: hostView.leadingAnchor),
-        blurView.trailingAnchor.constraint(equalTo: hostView.trailingAnchor),
-        blurView.topAnchor.constraint(equalTo: hostView.topAnchor),
-        blurView.bottomAnchor.constraint(equalTo: hostView.bottomAnchor),
-      ])
-    }
+    blurEverUsed = true
+    attachBlurViewIfNeeded()
     blurAnimator?.stopAnimation(true)
     blurAnimator = nil
     guard blurred else {
@@ -965,6 +984,9 @@ public final class VideoPlayerCore: NSObject {
     view.frame = container.bounds
     view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
     container.addSubview(view)
+    // Keeps the blur (if any) following the video across an engine switch —
+    // `view` above may now be a different engine's view than last time.
+    attachBlurViewIfNeeded()
     currentSurfaceId = surfaceId
     pendingSurfaceId = nil
     delegate?.onAttach(surfaceId)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-provider",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Singleton-engine video library for React Native (one native player, many surfaces)",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

src/NativeVideo.ts

@@ -135,10 +135,12 @@ export interface Spec extends TurboModule {
    * `blurAmount` is 0-100 intensity; `blurType` is `"dark"` | `"light"` |
    * `"xlight"` (naming matches @react-native-community/blur for familiarity).
    *
-   * Android: a `RenderEffect` composited onto the PlayerView — API 31+ only
-   * (silent no-op below that, and for the YouTube/WebView engine, which has
-   * no video output view to blur). iOS: a `UIVisualEffectView` layered over
-   * the video output, supported on every version.
+   * Works for both engines — the native player AND YouTube (WebView) — and
+   * keeps following the video across an engine switch or a surface re-parent.
+   *
+   * Android: a `RenderEffect` composited onto whichever engine's view is
+   * currently active — API 31+ only (silent no-op below that). iOS: a
+   * `UIVisualEffectView` layered the same way, supported on every version.
    */
   setBlurred(blurred: boolean, blurAmount: number, blurType: string): void;
 

src/components/VideoPlayer.tsx

@@ -147,9 +147,15 @@ export interface VideoPlayerProps extends ViewProps {
    * directly onto the video output, not an overlay drawn above it — so it
    * blurs the actual picture, not just whatever's on top of it.
    *
-   * Android needs `useTextureView` (which this library defaults to `true`)
-   * AND API 31+ (Android 12) — below that, `isBlur` is a silent no-op and
-   * the video stays unblurred. iOS supports every version.
+   * Works for both a native `url` source and YouTube alike, and keeps
+   * following the video across an engine switch, fullscreen, or floating.
+   *
+   * Android needs API 31+ (Android 12) — below that, `isBlur` is a silent
+   * no-op and the video stays unblurred. A native (non-YouTube) source also
+   * needs `useTextureView` (which this library defaults to `true`) — a
+   * SurfaceView renders on a separate hardware layer the blur can't reach,
+   * so with `useTextureView: false` the video shows through unblurred. iOS
+   * supports every version, for both engines.
    */
   isBlur?: boolean;
   /** Blur tint. Default `'dark'` (black). */