Details & Recommended Movies

[00:00:00]
>> All right, so we've got our hero component on the page, and now we wanna get some information about the movie, and we wanna show that trailer if one exists for the page. First thing we'll do is create a new column, And we'll make it a grid. And if we have a trailer, we're gonna put the YouTube embed in the left-hand spot.

[00:00:48]
Right, so there's our iframe, we just need to add all the attributes that is gonna turn it into a YouTube embed. The source of the iframe is gonna be the YouTube URL, youtube.com/embed. And then the trailer object has a key property, which will uniquely identify that video. And you can see that it is now showing the Super Mario video in there, but we need to add a few more things before it's gonna look nice.

[00:01:25]
We need to add a title so that people using assistive technologies know what is in the iframe. We're gonna get rid of that ugly frameborder. The YouTube documentation says that, in order for this to work, we need to get rid of, or we need to allow various properties, we need to allow the accelerometer.

[00:01:48]
I'm not sure why we need this stuff, and I haven't tested to see if it actually is necessary, but I'm just gonna copy the documentation for now. And don't worry if you're not keeping up with this part, the code is available on GitHub, and so you can copy and paste as needed.

[00:02:16]
And finally, we'll allowfullscreen so that the full screen button in the iframe works, okay? On the right-hand side, we're gonna have a list of data about the movie, things like the release date, the box office revenue, the genre, and so on. A good element to use for this is the dl element, which stands for data list.

[00:02:46]
I'm gonna give it some children, which are dt and dd elements, that's data type and data data, maybe. I'm not sure, we would have to ask NDN. Each of these is a key value pair, where the dt is the key and the dd is the pair. I'm not sure who named these things.

[00:03:14]
Data.movie.release_date is one of the properties available, so we'll use that. And you can see that it's now showing that. But it's showing it in the wrong place, we want this to be to the right-hand side of the trailer. So let's start adding some styles. That grid should obviously have a display value of grid.

[00:03:42]
And it's gonna have a max-width, Of the column width because we already have the column class. Give it some vertical padding by applying a margin, and we'll put some spacing between the elements inside the grid as well by using gap. That iframe there is gonna have an aspect ratio of 16/9, that's the standard aspect ratio for these things, and it's gonna have a width of 100%, so it fills its grid area.

[00:04:25]
On large-enough screens, we want this to be a side-by-side situation. So we'll add a media query, Then add some columns to our grid using grid-template-columns. 1fr 1fr just means one fraction, one fraction and they'll be equally sized. If we save that now, hopefully, we're gonna see that the iframe is on the left and all the data is on the right.

[00:05:09]
We'll make the dl element a grid as well. And we want the left-hand column of this grid to just be the maximum of whatever the content in that column is, and we can do that with the max-content rule. And we'll give this a gap as well so that the dt and the dd don't butt right up against each other.

[00:05:46]
And we'll add some styles to the dt text-transform uppercase, we'll bump the font size down a little bit. Do let's say 0.8 rems, and we'll drop the color back a tiny bit as well. The dd currently has that outrageous margin to the left, so we're gonna get rid of that.

[00:06:12]
That looks a little bit nicer, I'm just gonna slightly offset the dt element there, So that things are essentially aligned. We can add some more data now, we're gonna add the movie's runtime. I'm at the age where the runtime is the first thing I look at when I'm evaluating whether to commit to a movie.

[00:06:44]
And the runtime is gonna be expressed in minutes. Super Mario Brothers is a nice and short 92 minutes. We're gonna specify minutes in the text there. It's expanding to fill the vertical height available, so we're just gonna tell it to not do that by targeting the dl and giving a height of 0, we'll add the rest of the data.

[00:07:19]
We're gonna add the movie's budget. And it expresses that as the actual number of dollars, which is kinda difficult to read. So I'm gonna divide that by a million and round it. And it's in US dollars, so stick a dollar sign in front of it and an M at the end for million.

[00:08:01]
A $100 million for a Super Mario Brothers movie, remarkable. And then we'll find out how much revenue it made, I'm just gonna copy that.
>> I remember when video games were niche.
>> [LAUGH] Yeah, My God, the Super Mario Brothers movie made $420 million, that is massive. All right, and the final piece of data that we're gonna add is the genre.

[00:08:42]
Every time I see that word, I think of the viral Alex Trebek video, the supercut of him saying genre in various different [LAUGH] ways. Look it up if you haven't seen it, it's well worth the watch. So genres is an array of objects with an ID property, which is just an arbitrary number that corresponds to this API, and also a name property.

[00:09:04]
So we can just list out the genres that apply to this movie. data.movie.genres.map g g.name, I'm gonna join those with a comma separator. Okay, you see that the Mario Bros movie is an animation adventure family fantasy comedy movie. Okay, so we're almost done with our movie page, the last thing that we want to add is a list of recommendations.

[00:09:42]
So we have this on the, here's one I made, earlier version of this app. You might also like all of these movies. If you like one movie, then the movie database has some recommendations for other movies that you might like. And because in our page load function we asked to append recommendations to the response.

[00:10:02]
We actually have a list of movie recommendations that we can just add them with the carousel component to the movie page. So let's do that now. In our page.svelte, we'll add the Carousel component. The movies = data.movie.recommendations.results. And that Carousel component, it needs to receive a view object and an href.

[00:10:47]
We're gonna make these two things optional because we don't have a view for this. And we don't have an href either because they don't have a full results page for the recommendations. So that is already inside an if block, so we don't need to change anything there. And this view object, you remember it has a title and an endpoint.

[00:11:15]
The only thing that we care about inside the Carousel component is the title. So I'm gonna cheat a little bit and do view =, and I'm just gonna pass in an object that says, You might also like. And then just to keep tight scripts happy, I'll give it an empty endpoint.

[00:11:47]
Right, it looks like I managed to introduce a syntax error here. And Vite is very helpfully telling me in the browser instead of burying the message somewhere in my terminal. Okay, VS Code has made a right hole to this, so let me just clean this up, get rid of that quote.

[00:12:14]
And then we need to pass in the movies, of course. All right, let's see if that worked. Turns out we don't have any recommendations for Super Mario Bros. So let's put this inside an if block. If data.movie.recommendations.results.length is greater than 0, we'll render that component, otherwise we won't.

[00:12:50]
All right, if we go back to our page and look at say, Quantumania, then it's gonna say that you might also like. And I would expect to see a bunch of other Marvel films in here, although it's actually giving us a commendably broad array of viewing recommendations.