Open full screen fragment from smaller fragment

Question

I'm trying to do something similar to the YouTube Music app where you can tap on the mini-player at the bottom to open a big player, like in this video:

https://streamable.com/2afyex

I have an Activity with the mini-player as a Fragment, like this:

I'm not sure how to implement the transition to a large player.

public class MainActivity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.main_activity);

        getSupportFragmentManager()
            .beginTransaction()
            .add(R.id.media_player, new PlayerFragment(), "media_player")
            .commit();
    }
}


public class PlayerFragment extends Fragment {

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
        View view = LayoutInflater.from(this).inflate(R.layout.fragment_player, null);

        return view;
    }
}

main_activity:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">     
    
    ...
    
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/media_player"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_gravity="bottom"
    />

</LinearLayout>

fragment_player:

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/player_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:orientation="horizontal">
    
    ...
    
    <ImageView
        android:id="@+id/player_play_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_player_play_image"
        android:padding="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/player_fast_forward"
        app:layout_constraintStart_toEndOf="@+id/player_rewind"
        app:layout_constraintTop_toBottomOf="@+id/player_title" />
    
    ...
    
</androidx.constraintlayout.widget.ConstraintLayout>