[sample app] Bug in Viewpager example

[fdcgica]

There is a bug in your viewpager example which is also existing in my current project, i used loadvideo in your viewpager example and every time i swipe fast to the next page the previous video plays its audio in the background.

[PierfrancescoSoffritti]

I am able to reproduce, i think it's just a matter of calling the method at the right time. Feel free to send a pull request if you have a fix :)

[fdcgica]

i am working on a fix but it seems i cant get it right, i am hoping for your help on this bug :)

[fdcgica]

Hello, is there someone who can help me on this issue (Java)

[jsqi2009]

I also face the same issue, hope someone can help fix it

[Serkali-sudo]

I looked at the sample code and the reason this happens is probably because sometimes initializedYouTubePlayer variable is null and it simply cant call pause().
initializedYouTubePlayer is sometimes null because the variable is assigned inside onReady callback and the callback doesnt get fired immediately but setMenuVisibility callback probably does, So it tries to pause it before it was assigned.
And everytime you swipe the the fragment fires onCreateView which doesnt help.
To fix it in the simplest way:

• Create a global boolean variable named isMenuVisible in the fragment and assign it to boolean comes from setMenuVisibility. Use the boolean inside onReady, if it is true call loadVideo() if not call cueVideo. Then inside setMenuVisibility do the same thing but call pause or play according to the boolean.
  (Btw i didnt test this code there might be some syntax issues)

public class ViewPagerFragment extends Fragment {

    private final String videoId = VideoIdsProvider.getNextVideoId();
    private boolean isMenuVisible;
    private YouTubePlayer initializedYouTubePlayer;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ViewGroup view = (ViewGroup) inflater.inflate(R.layout.fragment_view_pager, container, false);
        
        YouTubePlayerView youTubePlayerView = view.findViewById(R.id.youtube_player_view);

        getLifecycle().addObserver(youTubePlayerView);

        youTubePlayerView.addYouTubePlayerListener(new AbstractYouTubePlayerListener() {
            @Override
            public void onReady(@NonNull YouTubePlayer youTubePlayer) {
                if (!isMenuVisible) {
                    youTubePlayer.cueVideo(videoId, 0);
                } else {
                    youTubePlayer.loadVideo(videoId, 0);
                }
                initializedYouTubePlayer = youTubePlayer;
            }
        });

        return view;
    }

    // pause when fragment goes offscreen
    @Override
    public void setMenuVisibility(final boolean visible) {
        super.setMenuVisibility(visible);
        isMenuVisible = visible;
        if (initializedYouTubePlayer != null) {
            if (!isMenuVisible) {
                initializedYouTubePlayer.pause();
            } else {
                initializedYouTubePlayer.play();
            }
        }
    }
}

You can also use viewpager2 instead of viewpager. It supports recyclerview adapter and is better than regular old viewpager.

[fdcgica]

This is perfect! Is there an implementation using viewpager, i am making similar to tiktok but while the video is playing and going to another fragment is audio still plays in the background, does the fix above makes my current onpause, onresume redundant?

[Serkali-sudo]

@fdcgica
The code above is edited version of viewpager sample code from this library. So if you are using the sample code, replacing or implementing my changes to original code should be enough.

If you are using getLifecycle().addObserver(youTubePlayerView); you dont need to call pause in onPause or other way around since this line gives your player ability to observe lifecycle and the player will automacially call it for you. But if you are not using that line you will have to call them manually.

And if you are trying to make an app similar to tiktok that has vertical scrolling. I recommend you to use ViewPager2 instead of regular Viewpager. Because ViewPager2 natively supports vertical scrolling and you can even use recyclerview adapter as viewapger 2 adapter.