[BUG]: resizeMode="cover" got overlap when place videos next to each other on Android

[hohoaisan]

Version

6.6.2 (can preproduce with any version)

What platforms are you having the problem on?

Android

System Version

Any android version

On what device are you experiencing the issue?

Real device, Simulator

Architecture

Old architecture

What happened?

On Android, when videos with resizeMode="cover" place next to each other, the part of video that out of view still got rendered when touching another video views and overlap them, setting overflow: hidden on parent does not fully hide the out of view part.

iOS does not have this kind of bug.

Reproduction Link

https://github.com/hohoaisan/react-native-video-resize-cover-android-bug

Reproduction

Step to reproduce this bug are:

• Place 2 videos with resizeMode="cover" next to each other

[github-actions]

Thank you for your bug report. We will review it and get back to you if we need more information.

There is a newer version of the library available. You are using version 6.6.2 (can preproduce with any version), while the latest stable version is 6.6.2. Please update to the latest version and check if the issue still exists.

Note: If the issue still exists, please update the issue report with the latest information.

[hohoaisan]

Based on this bug report #1142
Using viewType="textureView" solved the issue, but what if I want to use DRM video, because

if drm prop is provided, the suface will be transformed to a SurfaceView.

why can't SurfaceView able to achieve the same behavior?

[ali-aala]

I have installed latest version 6.6.2 but still i got this issue.
Any Update regarding this issue?

[hohoaisan]

Can react-native-video do something with clipToOutline = true with ExoPlayer as suggested here.
Seem this is the issue androidx/media#1107 (comment)

[freeboub]

@hohoaisan Good try, but it doesn't work, see the result

Clipping the view put some white zones which covering other videos ...

[freeboub]

The patch I put in ExoplayerView.java for memory

--- a/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.java
+++ b/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.java
@@ -16,12 +16,14 @@ import androidx.media3.common.util.Assertions;
 import androidx.media3.exoplayer.ExoPlayer;
 import androidx.media3.ui.SubtitleView;
 
+import android.graphics.Rect;
 import android.util.TypedValue;
 import android.view.Gravity;
 import android.view.SurfaceView;
 import android.view.TextureView;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.ViewOutlineProvider;
 import android.widget.FrameLayout;
 
 import com.brentvatne.common.api.ResizeMode;
@@ -165,6 +167,10 @@ public final class ExoPlayerView extends FrameLayout implements AdViewProvider {
         } else {
             DebugLog.wtf(TAG, "wtf is this texture " + viewType);
         }
+        surfaceView.setClipToOutline(true);
+        surfaceView.setClipBounds(new Rect(getLeft(), getTop(), getRight(), getBottom()));
+        surfaceView.setOutlineProvider(ViewOutlineProvider.BACKGROUND);
+
         if (viewNeedRefresh) {
             surfaceView.setLayoutParams(layoutParams);
 
@@ -253,6 +259,7 @@ public final class ExoPlayerView extends FrameLayout implements AdViewProvider {
     }
 
     private final Runnable measureAndLayout = () -> {
+        surfaceView.setClipBounds(new Rect(getLeft(), getTop(), getRight(), getBottom()));
         measure(
                 MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                 MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));