How to protect your child from garbage on YouTube and make a custom player with a white list of channels

You can argue for a long time on whether to give small children access to tablets and smartphones. Someone says that it is harmful to the eyes or the psyche, someone - that parents should play and read with the children themselves, and not try to isolate themselves from them with gadgets. Which is typical, most often this is said by people who do not have their children. And who do not know what kind of bliss it is - when the child becomes silent for at least half an hour, stops smashing everything around, quietly lies on the sofa and watches cartoons. There is one more argument - the children are sensitively repeat everything after their parents, if the parents are constantly buried in the phone, it is very difficult to explain to the children why the parents can, and they don’t.

In general, you can shower me with rotten tomatoes, but my son, who is now without a couple of days for three years, from time to time lies with the tablet on the couch and looks at the muliki on YouTube.

Unfortunately, I quickly realized that the kids YouTube is just hell TRESH. About this, even on Habré, there was already a translation of the article . Children's channels are some kind of bottomless cesspool filled with vigorous eyes like "unwrap one hundred kinder surprises", "stupid rhymes with poor 3d graphics under noisy music" and "drive cars into Beam NG under foolish comments." For some reason, all this is very attractive for young children who rush to click on such videos as soon as they see them recommended. And YouTube does not allow to manage recommendations. Even after giving my son a tablet with the included "normal" cartoons, after a couple of minutes, I watch him again, after two clicks on the recommendations, again find these damn chocolate eggs and start sticking them again.

Everything, I had enough, I decided. And he began to cut his application for viewing YouTube, allowing you to select a list of channels and showing only the video from these channels. How I did it - under the cut.

Here is one example of treshevideo with which we will fight. Shitty made meaningless 3D animation with stupid music - and 142 million views. For some reason, these videos of children just zombie, they are ready to revise them and revise.

To compare the scale - the coolest movie where Chris Hadfield sings with a guitar on the ISS has only 40 million views, and the wonderful OK GO clip with real weightlessness (no cables and chromakey, only fair weightlessness on board a special aircraft) - only 12 million, ten times less.

By the way, advertisers on YouTube are not happy about the popularity of children's channels , since showing ads on them is a waste of budgets. Children watch ads, sometimes even click, but do not buy anything, and millions of views quickly spend the budget.

Formulation of the problem

At once I will say that I did not set the task to make an application impenetrable for children. There are already such attempts, including here in Habré - everything is cut there so that the child cannot exit the application, buy something, open a browser, etc. There are options with hardware locks, disconnected ports, custom android shells and other difficulties (for example, here's an article for 2012, the project seems to be still alive). But it all makes sense for older children, who are already exploring the full potential of their gadgets. For children of 2-3 years no special protection is needed, they are quite happy to watch the video and from time to time to poke in thumbnails of other videos. The main thing is that these videos should be what you need, and not what YouTube will offer (and it will offer endless chocolate eggs and baby fingers).

From this was born the list of requirements:

• Custom channel list
• Protecting him from change (rather from accidental, because tricky adult children already have a bunch of ways to recognize their passwords)
• The application itself is similar to YouTube, on the left is a video, on the right is a column of thumbnails that can be clicked.
• The main use-case is random poking through the video; in general, a child doesn’t care what it is to watch

At the same time, the work of the application consists of two main parts: search and tune channels using the YouTube Data API and then play the video. Moreover, I currently have two options for playing video within my own application:

YouTube Android Player API

https://developers.google.com/youtube/android/player/

This is the official way to play videos in your android application. To work on the user's device, the official YouTube app should already be installed, which includes some service that can be used from other apps. So this very Player API is a small library interacting with a separately installed application.

At first I used it, but after some time of use, it turned out that he had a critical problem. It is impossible to properly customize the appearance of the player, in particular, to control the buttons (you can only hide everything as a whole, but then you will lose the buttons of the full-screen mode). And on the player control panel there is a bad button "go to viewing on YouTube", which opens the official application (which must be on the device), in which there is already no filtering. And the children easily (accidentally or not) click on it, go to an unfiltered application, and after a few minutes I hear the “baby finger, baby finger where are you” again and see some vigorous eyeshake on the screen.

Another little trash that children find in a couple of clicks. More than 900 million views!

Therefore, I refused the official player, having found a replacement for it in the form of the next library.

Android YouTube Player

https://github.com/PierfrancescoSoffritti/android-youtube-player

The library looks like a wrapper around WebView that manages the web player through its JavaScript API. Of the benefits - the possibility of complete customization of the interface.

Initialization of the player is slightly unclear, especially after switching from the official library:

1. We get our com.pierfrancescosoffritti.androidyoutubeplayer.player.YouTubePlayerView view.
2. Call it initialize (), passing a listener
3. The onInitSuccess (@Nonnull final YouTubePlayer youTubePlayer) method is called on the listener, receiving an instance of the player object. This is the only way to get it. Up to this point, the initialization process was identical to that of the official client.
4. We call the addListener () method on the player, passing another listener to it (more listeners to the listeners god!)
5. The onReady () method is called for this listener - only after this point can you download and show video and use the player. If by mistake you try to load something into onInitSuccess, the library will start spitting out strange errors.

Manage the life cycle of the player (stop playback in onPause () and stuff like that) can be manually or you can register our view as Lifecycle Observer (for which our Activity should be inherited from AppCompatActivity). In this case, the library will take over the entire routine.

Another strange nuance of the library is the lack of support for full-screen mode out of the box. The button for it is by default in the player, but does not do anything. In fact, you have to do the full-screen mode manually — hide the gouy, maximize the player window to full screen, and then restore everything back. This can be quite nontrivial if you have some kind of complex interface around the player. I only had a video list there that is easily hidden by hand.

In the library samples there is a class FullScreenHelper, from which you can take the necessary code. Its use looks something like this:

youTubePlayerView.addFullScreenListener(new YouTubePlayerFullScreenListener() {

            private final View rootLayout = findViewById(R.id.rootLayout);

            @Override
            public void onYouTubePlayerEnterFullScreen() {
                fullScreenHelper.enterFullScreen();
                rootLayout.setPadding(0, 0, 0, 0);
            }

            @Override
            public void onYouTubePlayerExitFullScreen() {
                fullScreenHelper.exitFullScreen();
                rootLayout.setPadding(8, 8, 8, 8);
                youTubePlayerView.getLayoutParams().height = LinearLayout.LayoutParams.MATCH_PARENT;
                  }
        });

FullScreenHelper . ( , ) - , .

- , — . " YouTube", :

youTubePlayerView.getPlayerUIController().showFullscreenButton(true);
youTubePlayerView.getPlayerUIController().showYouTubeButton(false);

, , View .. — .

youTubePlayer.loadVideo(url, startTime);

, YouTube Data API

URL - . YouTube API, . Developer Console .

: . - , "Peppa Pig". id ( id) snippet : , -, .

 YouTube.Search.List searchListByKeywordRequest = youTube.search().list("snippet,id");
 searchListByKeywordRequest.setMaxResults(10L);
 searchListByKeywordRequest.setQ("Peppa Pig");
 searchListByKeywordRequest.setType("channel,playlist");
 searchListByKeywordRequest.setKey("<api key>");
 SearchListResponse response = searchListByKeywordRequest.execute();

( snippet id) . YouTube API : , . - ( , ), . , . .. 5 ( 2 sinppet id). , 6 , 13. 10 , 21 . , .

:

YouTube.Search.List request = youTube.search().list("snippet,id");
request.setChannelId("<channel id>");
request.setType("video");
request.setMaxResults(50L);
request.setKey("<api key>");
SearchListResponse response = request.execute();

, , nextPageToken, — , .

if (response.getNextPageToken() != null) {
    request.setPageToken(response.getNextPageToken());
    response = request.execute();
}

API , , ..

, , . , Google Play . :

1. . . " " ("" " "), - .
2. — . , " ", , .
3. . , , — .
4. . " ", , .
5. .
6. Pinned Mode — , .

- — https://play.google.com/store/apps/details?id=ru.sundogs.youtubekiosk , — . — . , , .

, , , - ( ), . — , . .

UPD: , . — , . Play Market ""

UPD2: , . , , .

UPD3: , : https://channelwhitelist.tilda.ws. , !