# Project 1 - Flix - Implementing YouTube Player

Source: https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226962198

> I'm not really sure how to do an API call
using /movie/id/translations, does this happen within the
DetailsActivity.java or the MoviesActivity?

You send network requests using the same [approach you did here](https://github.com/wu-claudia/MyFlixsterRepo/blob/master/app/src/main/java/com/claudiawu/flixster/MoviesActivity.java#L100-L117) but inside the detail activity and going to [this other endpoint to get the video keys](https://api.themoviedb.org/3/movie/246655/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed).

> Also, the sample video keeps
showing up on top of my movie image, how would you make it so that the
image itself has a play icon and is the video?

What you would do is not have the YoutubePlayer inside of the detail activity. Instead you'd have an ImageView which displays the backdrop image for the movie with another [play icon](https://www.youtube.com/yt/brand/media/image/YouTube-icon-full_color.png) image overlayed ontop of the backdrop image in the center. When the image is clicked, we need to setup a click handler on that image which then triggers the video to play.

> Sorry to bother you on the weekend, I just really want to know how this works :)

No problem at all. You should keep in mind this is by far the most advanced stretch story this week and it's totally alright if you don't feel confident implementing this story. It's definitely an involved process and it was not expected that every student would complete these story. That said, I am happy to try to provide a more detailed explanation below for you. Please feel free to keep asking follow up questions. If you are committed to getting it working, I am confident you can if you keep working at it but don't feel obligated to do so.

The steps to get this working are as follows:

1. Add the id field to the movie model
2. Load an imageview into the detail view with movie backdrop
3. Create a new video player activity that just has youtube player
4. When user clicks the play imageview in the detail view
- send a network request to get the youtube key for the video
- start the youtube player activity passing that video key

I've broken it down further below:

**Understanding the Movie ID**

So this all starts with the `Movie` object. First, you need to make sure you are getting the "id" field for the movie. When you look at the [JSON from now playing](https://api.themoviedb.org/3/movie/now_playing?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed) which you get your movies from in the app, you'll see stuff like this for each movie:

{
  poster_path: "/zSouWWrySXshPCT4t3UKCQGayyo.jpg",
  overview: "Since the dawn of civilization",
  release_date: "2016-05-18",
  id: 246655
}

Notice the "id" field there `246655`. We'll keep that number in mind as we move forward.

**Get the Movie ID**

First, we need to add a field to our `Movie.java` and then get the "id" just as you [get these other attributes](https://github.com/wu-claudia/MyFlixsterRepo/blob/master/app/src/main/java/com/claudiawu/flixster/models/Movie.java#L42).

**Load the Play Image in Detail View**

Now that you have the ID for any movie, we can use that to help us play video. So here's how it would work.

1. The user taps on the movie in the list and loads the detail view (passing id, and other details)
2. In the detail view, you'd have an ImageView which displays the backdrop image for the movie with another [play icon](https://www.youtube.com/yt/brand/media/image/YouTube-icon-full_color.png) image overlayed ontop of the backdrop image in the center.
3. When the image is clicked, we need to setup a click handler on that image which then triggers the video to play.

**Getting the Video**

When the "play video" image is clicked on the detail view, we'd have to then do the following:

1. Send out a [request to get the videos](https://api.themoviedb.org/3/movie/246655/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed) for the movie being viewed based on the movie's id from above
2. Get the "key" from inside the JSON of the videos endpoint
3. Use the video key to start playing the Youtube video in a new activity

So if you recall [back to this videos endpoint](http://docs.themoviedb.apiary.io/#reference/movies/movieidvideos/get), you need to send a request out to get the video for a particular movie to the URL "https://api.themoviedb.org/3/movie/MOVIE_ID/videos" with the id being the "246655" value we saw above.

The endpoint returns back the keys for the videos in an array that looks partially like this:

{
  id: "5751ba3e9251413be8001351",
  key: "CmOZOk9j0Sk",
  name: "Official Trailer",
  site: "YouTube",
  size: 1080,
  type: "Trailer"
}

In this case, the trailer key above is "CmOZOk9j0Sk" as [you can see here in the full request](https://api.themoviedb.org/3/movie/246655/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed). This key "CmOZOk9j0Sk" corresponds to a [video on youtube](https://www.youtube.com/watch?v=CmOZOk9j0Sk) at `https://www.youtube.com/watch?v=CmOZOk9j0Sk`.

So we would send out a network call [to that url](https://api.themoviedb.org/3/movie/246655/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed) using the same [approach you already did here](https://github.com/wu-claudia/MyFlixsterRepo/blob/master/app/src/main/java/com/claudiawu/flixster/MoviesActivity.java#L100-L117) but inside the detail activity and then inside onSuccess parse the "key" value from the JSON with something like:

// Storing the fetched key for the video
String videoKey;

client.get(url, new JsonHttpResponseHandler(){
    @Override
    public void onSuccess(int statusCode, Header[] headers, JSONObject response) {
        JSONArray movieJsonResults = null;

        try {
            // See https://api.themoviedb.org/3/movie/246655/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed
            JSONArray videoJsonResults = response.getJSONArray("results"); // gets the results array
            JSONObject result = videoJsonResults.getJSONObject(0); // get the first json object for video
           // STORE the KEY for later use
           videoKey = result.getString("key"); // "-k4knGRY8jA" <---- youtube key!
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onFailure(int statusCode, Header[] headers, String responseString, Throwable throwable) {
        super.onFailure(statusCode, headers, responseString, throwable);
    }
});

**Playing the Video**

Then you could create a third activity that just has a Youtube player and pass along that `videoKey` "CmOZOk9j0Sk" from above to an [that third activity in your app that looks something like this](https://github.com/codepath/AndroidYoutubeVideoDemo/blob/master/app/src/main/java/com/codepath/youtubeplayerdemo/PlayYoutubeActivity.java) one.

In this activity, you'd tell youtube to play the key you gave it and then the trailer would start.