@bluebillywig/react-native-bb-player 8.42.7 → 8.42.9

package/android/src/main/java/com/bluebillywig/bbplayer/BBPlayerView.kt

@@ -4,7 +4,12 @@ import android.app.Activity
 import android.os.Handler
 import android.os.Looper
 import android.util.Log
+import android.view.Choreographer
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
 import android.widget.FrameLayout
+import com.facebook.react.modules.core.ReactChoreographer
 import androidx.collection.ArrayMap
 import androidx.mediarouter.app.MediaRouteButton
 import com.bluebillywig.bbnativeplayersdk.BBNativePlayer
@@ -31,8 +36,30 @@ private inline fun debugLog(tag: String, message: () -> String) {
 /**
  * React Native View for Blue Billywig Native Player
  *
- * Uses FrameLayout as base for proper native Android layout handling.
- * Events are sent via React Native's RCTEventEmitter.
+ * This view wraps the native BBNativePlayerView and handles the integration with
+ * React Native's view system. The key challenge is that React Native uses Yoga for
+ * layout, which can interfere with native Android views that have their own layout
+ * and touch handling requirements (like ExoPlayer's StyledPlayerView with controlbar).
+ *
+ * ## Native Layout Integration
+ *
+ * To ensure the native player controls work correctly, this view:
+ *
+ * 1. **Overrides onLayout()** - Explicitly layouts child views to fill the container,
+ *    which is necessary because React Native's Yoga layout doesn't automatically
+ *    propagate layout to native child views.
+ *
+ * 2. **Overrides onInterceptTouchEvent()** - Returns false to ensure touch events
+ *    always reach the child BBNativePlayerView, allowing the player's controlbar
+ *    to respond to taps.
+ *
+ * ## Why This Is Necessary
+ *
+ * React Native's Yoga layout system is designed for flexbox-based UI, not for native
+ * views with complex internal view hierarchies. The BBNativePlayerView contains an
+ * ExoPlayer StyledPlayerView which has its own gesture detectors and controlbar that
+ * need to receive touch events directly. Without these overrides, React Native's
+ * touch handling system intercepts events before they reach the native player controls.
  */
 class BBPlayerView(private val reactContext: ThemedReactContext) : FrameLayout(reactContext),
     BBNativePlayerViewDelegate {
@@ -51,23 +78,104 @@ class BBPlayerView(private val reactContext: ThemedReactContext) : FrameLayout(r
     private var wasLandscapeFullscreen = false
     private var savedOrientation: Int? = null
 
+    // ==================================================================================
+    // NATIVE LAYOUT INTEGRATION
+    // ViewGroupManager.needsCustomLayoutForChildren() = true tells React Native
+    // that this view handles its own child layout, allowing ExoPlayer's controlbar
+    // to work correctly.
+    //
+    // This uses the ReactChoreographer pattern from react-native-screens:
+    // https://github.com/software-mansion/react-native-screens
+    // See also: https://github.com/facebook/react-native/issues/17968
+    // ==================================================================================
+
+    private var isLayoutEnqueued = false
+    // Flag to prevent requestLayout during super constructor
+    private var constructorComplete = false
+
+    private val layoutCallback = Choreographer.FrameCallback {
+        isLayoutEnqueued = false
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        )
+        layout(left, top, right, bottom)
+    }
+
     init {
         // Default to black background (playout data may override with bgColor)
         setBackgroundColor(android.graphics.Color.BLACK)
+        // Remove any padding
+        setPadding(0, 0, 0, 0)
+        // Allow children to render slightly outside bounds (helps with margin artifacts)
+        clipToPadding = false
+        clipChildren = false
+        // Mark constructor complete - enables requestLayout Choreographer callback
+        constructorComplete = true
+    }
+
+    /**
+     * Override requestLayout to ensure layout propagates to children using ReactChoreographer.
+     *
+     * This is the proper React Native pattern for native views that need layout updates.
+     * Using NATIVE_ANIMATED_MODULE queue catches the current looper loop instead of
+     * enqueueing the update in the next loop, preventing one-frame delays.
+     *
+     * Combined with ViewGroupManager.needsCustomLayoutForChildren() = true, this ensures
+     * the native player view and controlbar layout correctly without margin artifacts.
+     */
+    override fun requestLayout() {
+        super.requestLayout()
+        // Guard against calls during super constructor (before properties are initialized)
+        if (!constructorComplete) return
+        if (!isLayoutEnqueued) {
+            isLayoutEnqueued = true
+            ReactChoreographer.getInstance()
+                .postFrameCallback(
+                    ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+                    layoutCallback
+                )
+        }
     }
 
     /**
-     * Override onLayout to ensure child views receive proper bounds.
-     * This is critical for React Native Fabric where layout isn't automatically propagated.
+     * Override onLayout to explicitly position child views to fill the container.
+     *
+     * React Native's Yoga layout calculates positions but doesn't automatically apply
+     * them to native child views.
      */
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
         super.onLayout(changed, left, top, right, bottom)
-        // Explicitly layout all children to fill the container
+        // Layout all children to fill the entire container
+        val w = right - left
+        val h = bottom - top
         for (i in 0 until childCount) {
-            getChildAt(i)?.layout(0, 0, right - left, bottom - top)
+            getChildAt(i)?.layout(0, 0, w, h)
         }
     }
 
+    /**
+     * Never intercept touch events - let them pass through to child views.
+     *
+     * This is CRITICAL for the player controlbar to work. React Native's gesture
+     * handling system can intercept touch events before they reach native views.
+     * By always returning false, we ensure:
+     *
+     * 1. Single taps reach the PlayerView to toggle the controlbar
+     * 2. Double taps reach the PlayerView for seek functionality
+     * 3. Swipes and other gestures work for any interactive elements
+     *
+     * The BBNativePlayerView handles its own touch events internally through
+     * ExoPlayer's StyledPlayerView and custom gesture detectors.
+     */
+    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
+        return false
+    }
+
+    // ==================================================================================
+    // END NATIVE LAYOUT INTEGRATION
+    // ==================================================================================
+
     // Timer for periodic time updates (opt-in for performance)
     private val timeUpdateHandler = Handler(Looper.getMainLooper())
     private var timeUpdateRunnable: Runnable? = null
@@ -162,13 +270,99 @@ class BBPlayerView(private val reactContext: ThemedReactContext) : FrameLayout(r
         debugLog("BBPlayerView") { "Creating BBNativePlayerView with factory method" }
         playerView = BBNativePlayer.createPlayerView(currentActivity, jsonUrl, options)
         playerView.delegate = this@BBPlayerView
+        // Remove any padding from playerView
+        playerView.setPadding(0, 0, 0, 0)
 
         addView(playerView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
 
+        // Set ExoPlayer's resize mode to FILL to prevent letterboxing margins
+        // This addresses top/bottom margin issues caused by AspectRatioFrameLayout
+        postDelayed({
+            setExoPlayerResizeMode(playerView, RESIZE_MODE_FILL)
+        }, 1000)
+
         playerSetup = true
         debugLog("BBPlayerView") { "Player setup complete with URL: $jsonUrl" }
     }
 
+    companion object {
+        // AspectRatioFrameLayout resize mode constants
+        private const val RESIZE_MODE_FILL = 3
+    }
+
+    /**
+     * Recursively find ExoPlayer's PlayerView or AspectRatioFrameLayout and set resize mode.
+     * Uses reflection since media3 classes aren't directly available in RN module classpath.
+     * This fixes top/bottom margin issues caused by AspectRatioFrameLayout letterboxing.
+     */
+    private fun setExoPlayerResizeMode(view: View, resizeMode: Int): Boolean {
+        // Try Media3 AspectRatioFrameLayout via reflection
+        try {
+            val aspectRatioClass = Class.forName("androidx.media3.ui.AspectRatioFrameLayout")
+            if (aspectRatioClass.isInstance(view)) {
+                val method = aspectRatioClass.getMethod("setResizeMode", Int::class.javaPrimitiveType)
+                method.invoke(view, resizeMode)
+                return true
+            }
+        } catch (_: ClassNotFoundException) {
+            // Media3 not available
+        } catch (_: Exception) {
+            // Failed to set resize mode
+        }
+
+        // Try Media3 PlayerView via reflection
+        try {
+            val playerViewClass = Class.forName("androidx.media3.ui.PlayerView")
+            if (playerViewClass.isInstance(view)) {
+                val method = playerViewClass.getMethod("setResizeMode", Int::class.javaPrimitiveType)
+                method.invoke(view, resizeMode)
+                // Continue searching - there might be an AspectRatioFrameLayout inside
+            }
+        } catch (_: ClassNotFoundException) {
+            // Media3 PlayerView not available
+        } catch (_: Exception) {
+            // Failed to set resize mode
+        }
+
+        // Try legacy ExoPlayer2 AspectRatioFrameLayout via reflection
+        try {
+            val legacyAspectRatioClass = Class.forName("com.google.android.exoplayer2.ui.AspectRatioFrameLayout")
+            if (legacyAspectRatioClass.isInstance(view)) {
+                val method = legacyAspectRatioClass.getMethod("setResizeMode", Int::class.javaPrimitiveType)
+                method.invoke(view, resizeMode)
+                return true
+            }
+        } catch (_: ClassNotFoundException) {
+            // ExoPlayer2 not available
+        } catch (_: Exception) {
+            // Failed to set resize mode
+        }
+
+        // Try legacy ExoPlayer2 StyledPlayerView via reflection
+        try {
+            val styledPlayerViewClass = Class.forName("com.google.android.exoplayer2.ui.StyledPlayerView")
+            if (styledPlayerViewClass.isInstance(view)) {
+                val method = styledPlayerViewClass.getMethod("setResizeMode", Int::class.javaPrimitiveType)
+                method.invoke(view, resizeMode)
+            }
+        } catch (_: ClassNotFoundException) {
+            // StyledPlayerView not available
+        } catch (_: Exception) {
+            // Failed to set resize mode
+        }
+
+        // Recursively search children
+        if (view is ViewGroup) {
+            for (i in 0 until view.childCount) {
+                if (setExoPlayerResizeMode(view.getChildAt(i), resizeMode)) {
+                    return true
+                }
+            }
+        }
+
+        return false
+    }
+
     /**
      * Load content from a JSON URL into the existing player.
      * Extracts IDs from the URL and uses the native SDK's loadWithXxxId methods.

package/android/src/main/java/com/bluebillywig/bbplayer/BBPlayerViewManager.kt

@@ -2,11 +2,29 @@ package com.bluebillywig.bbplayer
 
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 
-class BBPlayerViewManager : SimpleViewManager<BBPlayerView>() {
+/**
+ * ViewGroupManager for BBPlayerView.
+ *
+ * Uses ViewGroupManager instead of SimpleViewManager because BBPlayerView contains
+ * child views (BBNativePlayerView with ExoPlayer). The needsCustomLayoutForChildren()
+ * override tells React Native that this view handles its own child layout, which is
+ * necessary for ExoPlayer's controlbar to work correctly.
+ *
+ * See: https://github.com/facebook/react-native/issues/17968
+ * See: https://github.com/reactwg/react-native-new-architecture/discussions/52
+ */
+class BBPlayerViewManager : ViewGroupManager<BBPlayerView>() {
+
+    /**
+     * Tell React Native that this view handles its own child layout.
+     * This prevents Yoga from interfering with native child view layout,
+     * which is necessary for ExoPlayer's controlbar to work.
+     */
+    override fun needsCustomLayoutForChildren(): Boolean = true
 
     override fun getName(): String = REACT_CLASS
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluebillywig/react-native-bb-player",
-  "version": "8.42.7",
+  "version": "8.42.9",
   "description": "Blue Billywig Native Video Player for React Native - iOS AVPlayer and Android ExoPlayer integration",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",