[Feature]: Add an option to disable the dark overlay when controls are visible (Android)

[valeriiamykhalova]

Description

When controls are visible, the current dark overlay is quite intense on Android. When a video starts playing in fullscreen, the controls are automatically shown for the first ~5 seconds with this dark overlay, making the content barely visible for users with low brightness settings on their phones. It would be great to have an option to disable this dark overlay or make it lighter, similar to how the native Android gallery video player looks.

With controls (and overlay):

Why it is needed ?

We're migrating from expo-av which doesn't have this overlay at all. So, having the option to disable this would help provide a consistent experience for developers migrating from expo-av. In addition, it adds more flexibility to match the native Android gallery player user experience.

Possible implementation

No response

Code sample

It might be added to controlsStyles prop:

 <Video 
  source={...}
  controls={true}
  controlsStyles={{
    showOverlay: false // this removes the dark overlay completely
  }}
/>

[github-actions]

Thanks for the feature request! Check out our roadmap here. If your request is already there – great! If not, give us some time, and we'll get back to you with information on when TheWidlarzGroup can address it as part of our free open-source support. Alternatively, contact us to discuss ways to speed up the process.

[rohitbindal]

While we wait for this to be added, I found a workaround for those who need it now (like me):

• Open /node_modules/react-native-video/android/src/main/res/layout/exo_legacy_player_control_view.xml.
• Remove android:background="@color/midnight_black" from the first <LinearLayout/>.

Before:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="ltr"
    android:background="@color/midnight_black" // --> Remove this
    android:orientation="vertical">

After:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="ltr"
    android:orientation="vertical">

• Create a patch: npx patch-package react-native-video.
• Rebuild and rerun.

Edit

Make sure you add a patch script in your package.json to auto apply the patch while installing npm packages.

• Open package.json
• Add "postinstall": "npx patch-package" (I use npx so that I don't have to install it as a dependency). "postinstall": "patch-package" will also work if you install patch-package as a dev dependency.

[valeriiamykhalova]

Thank you, @rohitbindal. That works, and is super helpful!

[rohitbindal]

Great, I also found a way to implement this natively. So, I can work on this feature if needed.

@valeriiamykhalova I have updated my previous comment to add the patch script. This will ensure the patch is applied every time some runs npm install.

[valeriiamykhalova]

@rohitbindal Great! Having it in one of the upcoming releases would be nice if you have time for PR. I appreciate your help!

[freeboub]

another patch can be done in your app.
you can override <color name="midnight_black">#CC000000</color> in the app android folder to make it transparent.
I think this is a valid long term solution. (nobody will ned to manipulate overlay color dynamically I hope)

[freeboub]

I push a PR to clarify the feature. It makes sense to remove it on master branch as the behavior is not coherent between android & ios