Open wu-claudia opened 8 years ago
Also, I was stuck trying to initialize YouTubePlayerView. What is the exact series of steps needed to use YouTube's API? Thanks!
Here are the steps for setting up YoutubePlayerView. With working sample code here
How could you extend the YouTubeBaseActivity simultaneously with the AppCompatActivity
You can't unfortunately. When you extend from YouTubeBaseActivity
you can't extend from AppCompatActivity
so the activity does not have support features enabled. Is that causing you issues?
Let me know if you are able to get it working with the resources above.
Hi Nathan,
I'll give that a try later tonight and let you know how that works. Maybe I don't need to use AppCombatActivity and just do YoutubePlayerView. Thanks for your help though!
Claudia
On Friday, June 17, 2016, Nathan Esquenazi notifications@github.com wrote:
Also, I was stuck trying to initialize YouTubePlayerView. What is the exact series of steps needed to use YouTube's API? Thanks!
Here are the steps for setting up YoutubePlayerView http://guides.codepath.com/android/Streaming-Youtube-Videos-with-YouTubePlayerView. With working sample code here https://github.com/codepath/AndroidYoutubeVideoDemo
How could you extend the YouTubeBaseActivity simultaneously with the AppCompatActivity
You can't unfortunately. When you extend from YouTubeBaseActivity you can't extend from AppCompatActivity so the activity does not have support features enabled. Is that causing you issues?
Let me know if you are able to get it working with the resources above.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226917274, or mute the thread https://github.com/notifications/unsubscribe/AIF2KxowWEjKAp8rp2kyHeqVYCB5xRPgks5qM1pSgaJpZM4I42K5 .
Ok great let me know if you run into any other issues, be sure to check Tip #9 in the project 2 hints as well!
Hi Nathan,
So I tried everything out, but I'm still running into issues with trying to get the video key from Youtube. 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? 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? Sorry to bother you on the weekend, I just really want to know how this works :)
On Fri, Jun 17, 2016 at 8:03 PM, Nathan Esquenazi notifications@github.com wrote:
Ok great let me know if you run into any other issues, be sure to check Tip #9 in the project 2 hints http://courses.codepath.com/courses/android_university_fast_track/unit/4#!hints as well!
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226918239, or mute the thread https://github.com/notifications/unsubscribe/AIF2KyQrT_H5UOTRN8nmkHMwQq1u4onSks5qM1_9gaJpZM4I42K5 .
Hi Claudia,
So I tried everything out, but I'm still running into issues with trying to get the video key from Youtube.
Sure, I can understand that. Happy to try to help.
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 but inside the detail activity and going to this other endpoint to get the video keys.
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 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:
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 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.
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.
Getting the Video
When the "play video" image is clicked on the detail view, we'd have to then do the following:
So if you recall back to this videos endpoint, you need to send a request out to get the video for a particular movie. You would send out a network call to this url using the same approach you already did here but inside the detail activity.
That will return back the keys for the videos:
{
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. This corresponds to a video on youtube
Playing the Video
Then you could create a third activity that just has a Youtube player and pass along the video key "CmOZOk9j0Sk" from above to an that third activity in your app that looks something like this one.
In this activity, you'd tell youtube to play the key you gave it and then the trailer would start.
I want to restate again that 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 at all that everyone (or even most) would start or complete this story. If you are committed to getting it working, I am confident you can do it if you keep working at it and asking questions but you should definitely not feel obligated to do so.
Okay, I think I'm going to keep working on it using your instructions and the CodepPath guides, and I'll definitely keep reaching out if I have more questions. Thanks for your help!
On Saturday, June 18, 2016, Nathan Esquenazi notifications@github.com wrote:
I want to restate again that 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 at all that everyone would start or complete these story. Please feel free to keep asking follow up questions if you'd like. If you are committed to getting it working, I am confident you can do it if you keep working at it and asking questions but you definitely not feel obligated to do so.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226959379, or mute the thread https://github.com/notifications/unsubscribe/AIF2K9w77g0tsJ--candyPozRmXUH_8Oks5qNEBmgaJpZM4I42K5 .
Ok sounds good! I've moved the suggestions above to this page here for easier viewing. I just typed that up, so if anything in there needs more clarification just let me know and I'll add that back into that page until you are able to get it working.
I think I have mostly everything done, but I'm still confused on how to set up the OnClickListener since it's supposed to be for an ImageView rather than a ListView like before. I created another Activity that would open upon clicking, but can't figure out how exactly to get the video id. I attached a few screenshots of the areas I'm having the most problems with. I'm also trying to grab the video_key in the Movies.java class with [ this.video_key = jsonObject.getString("key"); ], but am I not supposed to do that? I'm going to push to github as well if that is easier to look at the code from. Thanks!
On Sat, Jun 18, 2016 at 12:10 PM, Nathan Esquenazi <notifications@github.com
wrote:
Ok sounds good! I've moved the suggestions above to this page here https://hackmd.io/s/r10N2f7H for easier viewing. I just typed that up, so if anything in there needs more clarification just let me know and I'll add that back into that page until you are able to get it working.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226959809, or mute the thread https://github.com/notifications/unsubscribe/AIF2K6vHsIVRnJoobqdcHS7ph90CvzW9ks5qNEKjgaJpZM4I42K5 .
Nice, you are getting really close!
I'm still confused on how to set up the OnClickListener since it's supposed to be for an ImageView
We can setup a click on an imageview the same as on a button if you recall back to that. Outlined here in this guide as well at the top.
I attached a few screenshots of the areas I'm having the most problems with.
Since we are corresponding through github. You'd need to go here https://github.com/wu-claudia/MyFlixsterRepo/issues/1 and drag and drop the screenshots into this issue for me to see them.
I'm going to push to github as well if that is easier to look at the code from.
Ok here's what you'll want to modify:
videoKey
from the model for now and any methods or calls to the key from the Movie
object. You were right to put it there but for now it will overcomplicate. String videoKey;
client.get(url, new JsonHttpResponseHandler(){
@Override
public void onSuccess(int statusCode, Header[] headers, JSONObject response) {
JSONArray movieJsonResults = null;
try {
movieJsonResults = response.getJSONArray("results"); // gets the results array
JSONObject result = movieJsonResults.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);
}
});
Now here pass along that key stored above through the intent
See if you can get it working with that, if not, push up your code again and ask followups, and we can keep iterating until it works. You are 80% of the way there!
Okay, I think I hopefully have all of the steps done, but now when I click on the backdrop image, instead of going to the next page I have set up with the video, Flixster stops and closes out of that page. What could be the reason for this happening? I already pushed to Github, so it's up-to-date.
On Sat, Jun 18, 2016 at 1:17 PM, Nathan Esquenazi notifications@github.com wrote:
See if you can get it working with that, if not, push up your code again and ask followups, and we can keep iterating until it works. You are 80% of the way there!
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226962773, or mute the thread https://github.com/notifications/unsubscribe/AIF2K_1-ibFR7SNKUGZEjazpOBT3LchRks5qNFJagaJpZM4I42K5 .
Hi Claudia,
Just checked out your code and congrats on the progress, you are now 90% there.
First, you should start learning about how to handle crashes. When Flixster stops, that means there was an exception. Watch this video to learn more about how to read the log and set breakpoints.
In your case one of the exceptions is:
Whenever you get a crash (i.e stopped), try to get in the habit of tracking down the stacktrace in Android Monitor. Scroll upwards until you see FATAL EXCEPTION and then track down which line it's happening at and the message. For example for the error above, the important stuff is
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String android.content.Intent.getStringExtra(java.lang.String)' on a null object reference
and (VideoActivity.java:13)
This means the error is a null object that shouldn't be null somewhere in VideoActivity on line 13. Try doing this every time you get a "stopped" error.
Now for the hints on everything left to do to get this working!
https://api.themoviedb.org/3/movie/MOVIE_ID/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed
and if you breakpoint you'll see it looks currently like: https://api.themoviedb.org/3/movie/0videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed
which is invalid.getIntent()
have to happen inside onCreate or later and can't be out here. Do something like final String videoKey = getIntent().getStringExtra("video_key");
inside onCreate
. Also have to make sure the keys are the same when passing it in. I've made those changes and ran it and it works!
Also, when I'm overlaying the play icon over the image, is there a way to make them perfectly aligned in the xml file or do I have to just play around with it?
On Sat, Jun 18, 2016 at 1:41 PM, Claudia Wu wclaudia888@gmail.com wrote:
Okay, I think I hopefully have all of the steps done, but now when I click on the backdrop image, instead of going to the next page I have set up with the video, Flixster stops and closes out of that page. What could be the reason for this happening? I already pushed to Github, so it's up-to-date.
On Sat, Jun 18, 2016 at 1:17 PM, Nathan Esquenazi < notifications@github.com> wrote:
See if you can get it working with that, if not, push up your code again and ask followups, and we can keep iterating until it works. You are 80% of the way there!
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226962773, or mute the thread https://github.com/notifications/unsubscribe/AIF2K_1-ibFR7SNKUGZEjazpOBT3LchRks5qNFJagaJpZM4I42K5 .
@wu-claudia yes, you can use nested layouts to center the overlay on the image. For example, go to the text view and replace the ImageView with something like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<!-- THIS PART REPLACES THE IMAGEVIEW -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ivPoster" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_play_icon"
android:id="@+id/ivPlayIcon" />
</RelativeLayout>
See how both the poster AND the play icon are inside a layout together? Notice how the play icon is then centered android:layout_centerHorizontal
and android:layout_centerVertical
It works!!! I saw the mistakes I made with the names of all the keys, I must have gotten confused after changing everything so many times :) I just want to thank you again for guiding me through all the steps, I could not have done it without you! I also learned a lot working through everything in one sitting, I think everything makes a lot more sense with respect to how Activities work together and how sending requests to the Internet for data operates. I'm just so happy and excited to finally have an app that can stream Youtube Videos, thank you so much for all your help!
On Sat, Jun 18, 2016 at 2:07 PM, Nathan Esquenazi notifications@github.com wrote:
@wu-claudia https://github.com/wu-claudia yes, you can use nested layouts to center the overlay on the image. For example, go to the text view and replace the ImageView with something like https://github.com/wu-claudia/MyFlixsterRepo/blob/master/app/src/main/res/layout/more_info.xml :
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/ivPoster" /> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/ic_play_icon" android:id="@+id/ivPlayIcon" /> </RelativeLayout>
See how both the poster AND the play icon are inside a layout together? Notice how the play icon is then centered android:layout_centerHorizontal and android:layout_centerVertical
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226964870, or mute the thread https://github.com/notifications/unsubscribe/AIF2KwBA9egk9F7kr4-kOkwO7oGIWWfNks5qNF4DgaJpZM4I42K5 .
👍 Yay!! That's great news, really happy you got it working and had the tenacity to push through to get things all connected correctly, hopefully you were able to learn a lot from this exercise. Few takeaways to keep with you going forward:
FATAL EXCEPTION
as outlined here. Often this is something being null that shouldn't be null. Find the line number and use that to diagnose where the problem is. Use the message to try to figure out what the problem is.getIntent()
or getContext()
at the top of the file will return null. Instead define the variable at the top String foo
and then always assign the variable foo = <thing>
inside the onCreate
when in an activity.Let me know if that all makes sense and if you have any follow up questions. Congrats on getting it working. Have a great rest of the weekend and we'll see you Monday!
Thanks! I have one quick follow-up question, it seems like I can't play any of the trailers except for the first movie, does this have to do with the fact that JSONObject result = movieJsonResults.getJSONObject(0); is calling only the first movie? It says there's a problem with playing.
On Sat, Jun 18, 2016 at 2:43 PM, Nathan Esquenazi notifications@github.com wrote:
👍 Yay!! That's great news, really happy you got it working and had the tenacity to push through to get things all connected correctly, hopefully learned a lot from this exercise. Few takeaways to keep with you going forward:
- When things crash, be sure to check the logs for the FATAL EXCEPTION as outlined here https://vimeo.com/73990805. Often this is something being null that shouldn't be null.
- When constructing urls to send to the network especially be extra super careful to make sure the URL is correct. One missing slash and it doesn't work.
- When passing data in intents, be extra super careful about the string being the same on one side as on the other.
- Lots of things have to be done inside onCreate. For example, calling getIntent() or getContext() at the top of the file will return null. Instead define the variable at the top String foo and then always assign the variable foo =
inside the onCreate when in an activity. Let me know if that all makes sense and if you have any follow up questions. Congrats on getting it working. Have a great rest of the weekend and we'll see you Monday!
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226966597, or mute the thread https://github.com/notifications/unsubscribe/AIF2K1X1sjbcz-jwmfhGtnj_VggjD6-yks5qNGZsgaJpZM4I42K5 .
I have one quick follow-up question, it seems like I can't play any of the trailers except for the first movie
Are you saying you can't click into other movies on the list and see the video? Here's what I see using your codebase after fixing the problems we discussed above:
Are you seeing different?
Yes, for some reason, this is what I see
On Sat, Jun 18, 2016 at 2:50 PM, Nathan Esquenazi notifications@github.com wrote:
I have one quick follow-up question, it seems like I can't play any of the trailers except for the first movie
Are you saying you can't click into other movies on the list and see the video? Here's what I see using your codebase after fixing the problems you mentioned:
[image: claud] https://cloud.githubusercontent.com/assets/6511/16173883/027b8d28-3564-11e6-9626-3807cfa53ad8.gif
Are you seeing different?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226966986, or mute the thread https://github.com/notifications/unsubscribe/AIF2K-HcVpRKUfdT4ujkH5TGfODiIzKaks5qNGg_gaJpZM4I42K5 .
I can't see any of the images you send via email unless you go to https://github.com/wu-claudia/MyFlixsterRepo/issues/1 and drag and drop them into the issue, so I don't know what you are seeing.
Just downloaded the latest version of your app from github and it seemed to be working for me on any movie. Can you try the app on your device if you have it? Open up the Play Store and try updating Youtube if there are any updates. Maybe try restarting the emulator or device?
As I mentioned, I just downloaded the latest version of your app from github and it seemed to be working for me on any movie.
Can you try the app on your device if you have it? Also, open up the Play Store on device or emulator and try updating Youtube app if there are any updates.
Alternatively, you may need to setup a lollipop (API 21) emulator in genymotion with Play Store rather than API 19. Another student ran into an issue with the older emulator as well.
Good news is the issue is with the emulator in this case and not the app :)
Okay, wait never mind, it works perfectly now! I had to update YouTube and then everything was fine :) Thanks again!
Oh ok great, even better! By the way, since you asked earlier this line JSONObject result = movieJsonResults.getJSONObject(0);
actually relates to which video will be played for a movie. See this endpoint: https://api.themoviedb.org/3/movie/246655/videos?api_key=a07e22bc18f5cb106bfe4cc1f83ad8ed. Notice how there's 2 videos there? We set it up to always play the first one.
Oh, okay, that makes sense
One more thing, since a lot of students are running into issues debugging their crashes, I put this detailed guide together inspired by your app and exception. It's meant to be a general guide on how to diagnose and fix crashes as they come up. Can you read through this for me and let me know if it makes sense, can you try this next time you have a crash: http://guides.codepath.com/android/Debugging-Exceptions-within-your-App. Any feedback is welcome so I can continue to improve the guide. Thanks!
So I followed through all the steps on the guide you just sent me, and I think the flow is very good. You start with a very broad overview of what's going to happen, then dissect it into smaller parts. Having the gifs also really helped because it clearly shows where everything is. I think it would be helpful to add a section about debugging, specifically using the log console to identify areas of trouble. Other than that, the guide is very thorough and well done!
Thanks for taking a look at the first half! I liked your suggestion, so I added the second half on how to investigate your app. Again inspired by the issues you ran into used tell a story of debugging and to show off logging, breakpoints and toasts. See what you think!
Of course! It's the least I could do after having you help me for so long ;) Now, hopefully, other people will be able to diagnose and solve any problems that arise for them quickly. The guide on doing toasts, logs, and break points is very good! Not being really familiar with these tools in Android Studio myself, I feel like the written instructions and the videos made it seem simple and doable. Good job! :)
On Saturday, June 18, 2016, Nathan Esquenazi notifications@github.com wrote:
Thanks for taking a look at the first half! I liked your suggestion, so I added the second half on how to investigate your app http://guides.codepath.com/android/Debugging-Exceptions-within-your-App#investigation-methodologies. Again inspired by the issues you ran into to show off logging, breakpoints and toasts. See what you think!
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wu-claudia/MyFlixsterRepo/issues/1#issuecomment-226972283, or mute the thread https://github.com/notifications/unsubscribe/AIF2KzcxvLDWJc_V6ZWtwK7YHhK4Rw4Oks5qNItmgaJpZM4I42K5 .
Great thanks, that's what I'm hoping for. Debugging and investigating unexpected situations is one of the most important skills to develop as a developer regardless of platform or what you are building. Hope these resources help everyone sharpen those abilities when developing Android apps.
:+1: Nice work Claudia.
We hope you learned a lot this week with the Flicks app. This is a much more complex app than the initial Todo app as it includes a lot of new concepts. We really appreciate that you completed optionals in addition to the required stories. This is a great way to get the most out of the class. The optionals provide a lot of really good learning opportunities.
We have provided a detailed Flicks Feedback Guide here which covers the most common points we see for this project. Read through the feedback guide point-by-point to determine other ways you could improve your submission. You should consider going back and implementing applicable feedback as well. Keep in mind that one of the most important parts of Android development is learning the correct patterns and conventions.
Hopefully this project has given you a better sense of working with RelativeLayout which is a very flexible layout system, probably one of the most powerful responsive-first layout systems available across web and mobile platforms. This assignment also gave us our first introduction to networking, working with APIs and loading remote images. The next assignment will introduce new concept such as accepting user input and navigating between activities but will also reinforce important concepts such as networking, using APIs, and handling remote images.
If you have any particular questions about the assignment, feel free to reply here or or email us support@codepath.com.
My Flixster app is complete, please review /cc @codepathreview @codepath
Also, I was stuck trying to initialize YouTubePlayerView. What is the exact series of steps needed to use YouTube's API and how could you extend the YouTubePlayActivity simultaneously with the AppCompatActivity? Thanks!