android tv leanback - how to have an exoplayer with a card list row at the top of it?

Question

I want to have exo player (plays only mp3, no video) with a card list row at the top of the screen, see attached image.

when I try to extend VideoFragment I can't add the row. when I try to extend DetailsFragment, I can't add the player.

this is my code but then the player and the list are in different screens as the player is in the background. How can I achieve the look as the attached image? Even show me some rows adapter that can add the card list row and the player without filling the card list row or the player

public class VideoConsumptionExampleWithExoPlayerFragment2 extends DetailsFragment implements OnItemViewClickedListener, OnItemViewSelectedListener {
public static final String TAG = "player_log";
public static final String TRANSITION_NAME = "t_for_transition";
private static final long ACTION_PLAY = 1;
private static final long ACTION_RELATED = 4;

private VideoMediaPlayerGlue<ExoPlayerAdapter> mMediaPlayerGlue;
private ArrayObjectAdapter mRowsAdapter;
private DetailedCard data;
private final DetailsFragmentBackgroundController mDetailsBackground = new DetailsFragmentBackgroundController(this);

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setupUi();
    setupEventListeners();
}

private void setupUi() {
    String json = Utils.inputStreamToString(getResources().openRawResource(R.raw.detail_example));
    data = new Gson().fromJson(json, DetailedCard.class);

    FullWidthDetailsOverviewRowPresenter rowPresenter = new FullWidthDetailsOverviewRowPresenter(new DetailsDescriptionPresenter(getActivity())) {

        @Override
        protected RowPresenter.ViewHolder createRowViewHolder(ViewGroup parent) {
            RowPresenter.ViewHolder viewHolder = super.createRowViewHolder(parent);

            View actionsView = viewHolder.view.findViewById(R.id.details_overview_actions_background);
            actionsView.setBackgroundColor(getActivity().getResources().getColor(R.color.detail_view_actionbar_background));

            View detailsView = viewHolder.view.findViewById(R.id.details_frame);
            detailsView.setBackgroundColor(getResources().getColor(R.color.detail_view_background));
            return viewHolder;
        }
    };

    FullWidthDetailsOverviewSharedElementHelper mHelper = new FullWidthDetailsOverviewSharedElementHelper();
    mHelper.setSharedElementEnterTransition(getActivity(), TRANSITION_NAME);
    rowPresenter.setListener(mHelper);
    rowPresenter.setParticipatingEntranceTransition(false);
    prepareEntranceTransition();

    ListRowPresenter shadowDisabledRowPresenter = new ListRowPresenter();
    shadowDisabledRowPresenter.setShadowEnabled(false);

    ClassPresenterSelector rowPresenterSelector = new ClassPresenterSelector();
    rowPresenterSelector.addClassPresenter(DetailsOverviewRow.class, rowPresenter);
    rowPresenterSelector.addClassPresenter(CardListRow.class, shadowDisabledRowPresenter);
    rowPresenterSelector.addClassPresenter(ListRow.class, new ListRowPresenter());
    mRowsAdapter = new ArrayObjectAdapter(rowPresenterSelector);

    ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(new CardPresenterSelector(getActivity()));
    for (Card characterCard : data.getCharacters()) {
        characterCard.setTitle("Piano");
        characterCard.setImageUrl("https://play-lh.googleusercontent.com/vSCTK1RKYYvw2bRXg3FnD0drtFIxJhgjshwdelcrK3vKMvPxfhHzsfr877qfs6Uu_g");
        listRowAdapter.add(characterCard);
    }
    mRowsAdapter.add(new CardListRow(null, listRowAdapter, null));

    setAdapter(mRowsAdapter);
    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            startEntranceTransition();
        }
    }, 500);
    initializeBackground();
}

private void initializeBackground() {
    mDetailsBackground.enableParallax();

    Card card = getActivity().getIntent().getParcelableExtra(getString(R.string.clicked_songbook_song));
    ExoPlayerAdapter playerAdapter = new ExoPlayerAdapter(getActivity());
    playerAdapter.setAudioStreamType(C.STREAM_TYPE_MUSIC);
    mMediaPlayerGlue = new VideoMediaPlayerGlue(getActivity(), playerAdapter);
    mMediaPlayerGlue.setTitle(card.getTitle());
    mMediaPlayerGlue.setSubtitle(card.getDescription());
    mMediaPlayerGlue.getPlayerAdapter().setDataSource(Uri.parse(card.getBgUrl()));
//        PlaybackSeekDiskDataProvider.setDemoSeekProvider(mMediaPlayerGlue);
//        playWhenReady(mMediaPlayerGlue);

    mDetailsBackground.setupVideoPlayback(mMediaPlayerGlue);
}


private void playMainVideoOnBackground() {
    VideoMediaPlayerGlue<MediaPlayerAdapter> playerGlue = new VideoMediaPlayerGlue(getActivity(), new MediaPlayerAdapter(getActivity()));

    mDetailsBackground.setupVideoPlayback(playerGlue);
    playerGlue.setTitle(data.getTitle() + " (Main Video)");
    playerGlue.setSubtitle(data.getDescription());
    playerGlue.getPlayerAdapter().setDataSource(Uri.parse(data.getVideoUrl()));
    PlaybackSeekDiskDataProvider.setDemoSeekProvider(playerGlue);

    mDetailsBackground.switchToVideo();
}

private void setupEventListeners() {
    setOnItemViewSelectedListener(this);
    setOnItemViewClickedListener(this);
}

@Override
public void onItemClicked(Presenter.ViewHolder itemViewHolder, Object item, RowPresenter.ViewHolder rowViewHolder, Row row) {
    if (!(item instanceof Action)) return;
    Action action = (Action) item;
    long id = action.getId();

    if (action.getId() == ACTION_PLAY) {
        Log.d("play_log", "play");
        playMainVideoOnBackground();
    } else if (action.getId() == ACTION_RELATED) {
        setSelectedPosition(1);
    } else {
        Toast.makeText(getActivity(), getString(R.string.action_cicked), Toast.LENGTH_LONG).show();
    }
}

@Override
public void onItemSelected(Presenter.ViewHolder itemViewHolder, Object item,
                           RowPresenter.ViewHolder rowViewHolder, Row row) {
    if (mRowsAdapter.indexOf(row) > 0) {
        int backgroundColor = getResources().getColor(R.color.detail_view_related_background);
        getView().setBackgroundColor(backgroundColor);
    } else {
        getView().setBackground(null);
    }
}

}