Clicking on player covers all other content on screen

[Bradleycorn]

Issue
If you have a StyledPlayerView with height=wrap_content that is shown "inline" with other views, the Player takes over the entire screen whenever the controls are displayed, and does not honor the wrap_content height. See below for a link to a github repo that contains a demo app that can be used to reproduce the issue

URI to test content for reproduction
Video URL: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
Demo App Github URL: https://github.com/Bradleycorn/InlineExoplayer

ExoPlayer version number: 2.13.2
Android version: 29
Android device: Pixel 4XL

I am new to ExoPlayer, so forgive me if there is some way to mitigate this problem. I could not find anything in the samples, guides, issues list, stackoverflow, etc.

Steps to Reproduce

1. Create an app that uses the following layout, and wire it up to play a video in the StyledPlayerView when opened. (or use the demo app in the github repo linked above)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainFragment">

    <com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/video_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:background="#ff0000"
        android:textColor="#ffffff"
        android:text="Another View"
        android:textAlignment="center"
        android:gravity="center" />

</androidx.constraintlayout.widget.ConstraintLayout>

The desired result is a video that plays "inline", above some other content, as seen in this screen shot from the attached demo app. When the video is clicked to display it's controls, it should remain "inline" and the controls displayed without covering or obscuring the other screen content.

2. When the video plays, click anywhere on the video to display the controls.

Actual Result
When the controls are displayed, the player view covers up the view below and seems to fill the entire screen. See the attached video that shows the problem:

Desired Result
When the app loads, the video should be displayed "inline" above the other content, and not take over the entire screen. Also, when the video is clicked and the controls are displayed, the video should remain "inline" above the other content on the screen, and show the controls over the playing video, without taking over the entire screen.

[AquilesCanta]

@ojw28, can you take a look at this or re-triage?

[Bradleycorn]

@ojw28, let me know if I can provide any additional information. it seems like a fairly basic/common use case, so maybe I'm just doing something wrong?

[ojw28]

I can reproduce the issue. It's caused by the view with ID exo_controls_background in exo_styled_player_control_view.xml, which uses "match_parent", which is problematic if the view is included using "warp_content" in application code. I agree the current behaviour is strange, and let's use this issue to track fixing it.

I'm not sure to what extent I think android:layout_height="wrap_content" is a common use case. The problem with this approach is that until the video has loaded, the aspect ratio is not known. As a result, when sizing the player view in this way, you'll see its height change at the point where playback is prepared and the aspect ratio of the video becomes known. This change is unlikely to be a good user experience. I think a more common approach would be to set the height to a fixed value, which you could do in code using a calculation based on the available width and your desired aspect ratio. It's a tiny bit like how using wrap_content doesn't make sense for the scrolling direction of a scrolling view, although it's a lot less clear cut!

[Bradleycorn]

Thanks @ojw28 . My use case is similar to the demo project, with a few significant differences ... My containing Fragment view is a MotionLayout, and in its initial state the player isn't displayed at all (it's gone). Then, upon some event (user clicks a button), we load a video stream and transition the MotionLayout to show the player. The stream that gets loaded can vary somewhat (though most are either 16:9 or 4:3), which precludes me from setting a fixed height. And while I can calculate the height easily enough, MotionLayout does not give me a way (that I know of) to set transition states dynamically at runtime.

FWIW, I tried copying the exo_styled_player_view.xml and exo_styled_player_control_view.xml and making my own versions with wrap_content on the various elements to no avail.

[ojw28]

This is fixed in the dev-v2 branch by the commit referenced above. It will be included in the 2.14.0 release, which is tentatively scheduled for the beginning of May. It is likely to also be included in future 2.13.X minor releases, if we do any.