Embedding Elements in Movie Details

[00:00:00]
>> Maximiliano Firtman: If I now come here and reload, I do have two things, okay, so I have two pages, actually. One is the home page and the other one is the details, still partially also I may have an error somewhere. Yep, because I'm not seeing something, so it says I'm not getting the movie, so it says null.

[00:00:31]
So I need to solve that issue. And by the way, in the meantime, I can also comment. I mean, in the meantime, it's going to be just a few minutes. And I will comment the home page. I'm not going to check the home page,just to see how my details looks like, okay?

[00:00:47]
So let's try to analyze why, in this case, let's get into movie details page. I'm setting the ID because I changed movie, we have idea movie, I change this to ID. So that's why I wasn't getting the movie, okay? So if I refresh, I'm getting the title and the tagline, and I just need to fill the rest, which I will do that, okay?

[00:01:21]
This is how it looks like at this point. And you can see it says YouTube loading. What is that? Well, if I inspect this, it's a YouTube embed element that is not recognized by the browser, but it's actually rendering the text inside. So that's the fallback text that we have here.

[00:01:40]
Well, now I need to fill the rest. For example, lemme do the image part that we'll just take from the movie, the poster URL. We have something similar for the trailer. The trailer is actually the YouTube, but because it's not working, let's work with maybe the overview, overview of the movie.

[00:02:06]
This movie overview. And just because even someone asks about using innerHTML instead of or a template string, for example, we do have a section for metadata. It's called metadata. I could create another component for the metadata, but also I can write it here, as we did before. In this case, I'm not sure if you have ever played with DLs, does anyone know what DL is in HTML, a DL?

[00:02:47]
Data list. Sorry. Data list. It's actually definition list. There is another, another one for data list that is actually an attribute for inputs. It's a definition list that actually works with DTs and DDs. Term and definition, it's like a dictionary, key value, key value, key value, key value, that's the idea, okay?

[00:03:13]
So I'm using that one for metadata because metadata is key value, key value, key value. Like the release year, that year, that information, that year. The score, the popularity, so it's a definition list. So I'm going to just inside the template string, so this is a back tick.

[00:03:30]
I will just say, okay, DT and DD. So we have release year or release date. And for DD, we will use this movie.release_year] <dd>. And then I will have the score on popularity. These are two numbers coming from, also the score is on 10, so we can say something like this, or 2 of 10, 3 of 10, 8 of 10, to set the maximum.

[00:04:19]
So here I'm mixing using the DOM APIs, on some parts, and using just inner HTML and a template string on other side. So, if I say how it looks like, okay, okay, I see the poster. I'm seeing the data here. So, that's the metadata. That's our DL, of course, with CSS, this is design, but just font size and colors, nothing really fancy.

[00:04:47]
So we still need to solve the YouTube part, and maybe, I'm not seeing the overview. So maybe I have a bug there. Anyway, I'm seeing an arrow there, that arrow has to do with, it's from the, origin, because it's local host and the server that we're loading the images complaining, but it works anyway, so it's not really a problem for us.

[00:05:13]
No, the overview is not maybe we don't have an overview on this movie, maybe we'll see. I think it's overview, or maybe I didn't add The overview is a P tag, It's a P tag, yeah, but anyway, it should work anyway, not source. No, the problem it's this one.

[00:05:35]
It's text content, not source. Don't copy and paste, because that happens, okay? By the way, did you see I didn't get an error, and that's something that we mentioned before. So I was changing a property on a paragraph that does not exist because paragraphs don't have a source.

[00:05:58]
The browser says, okay, let's add it. So that's why you can create your custom properties as well, but you are breaking the rules, and you are making this possibly incompatible with the future, because maybe in the future, they will add a source on paragraph wherever, okay? So that's why we need to add data.

[00:06:19]
Okay, make sense? So now we have the text, and then we need to loop through the cast and loop through the keywords, and loop through the genre. Actually, this is just programming, I don't think it worth the time to spend 15 minutes on doing that. I have it here.

[00:06:38]
Okay, it's just genres and cast, I will copy this. It's not a big deal, it's just the same over and over, just to render the rest of the content. So now we can take a look at that. We have a URL for genre, and then we are looping through all the genres and creating an URL for it.

[00:07:03]
And something similar for the casting, which actually is creating images within your HTML, very fine. Do you all know what this operator stands for, double question mark? Ternary operator. It's not a ternary actually, when you have two question mark, it's a binary operator because it has only two parts.

[00:07:30]
The ternary operator is when you have only one, and then you have the column. Null coalescing. Null coalescing operator. And what does that mean? It's actually verifying the condition that we have before. If it's true, it's going to return the second value, and if it's not, it will just do nothing.

[00:07:52]
Okay, so it's like having a ternary operator with similar to an undefined as the last argument, okay? So if I don't have an image URL, it will just use a generic actor JPEG file that we have there, and if not, it's going to take the image from the database.

[00:08:15]
So if I refresh, okay, now we can see the cast, and here we have the genre. Lemme increase the font size a little bit. Okay, so that's the movie details, and of course, we can change from here, no, actually from movie details, the ID. Yeah, we are actually faking the ID, I'm not sure if we have a 140.

[00:08:43]
Maybe we do, yeah, Mr. Peabody and Sherman. So we changed ID and we can see it's loading the data. So that part is kind of working. Of course, we don't have anything happening on those buttons. We will get there at some points later, And we need to solve the YouTube part.

[00:09:03]
Do you have any question? I guess, what happens in other frameworks when an custom element has more elements inside of it. Well, how would you treat those in this case? If you wanted to embed like in here, you're gonna use one element inside another, a custom element that has another element, do you still need to grab it from the definition of the element, grab the inner HTML, and then parse it through?

[00:09:31]
Well, the answer is simpler, because it doesn't matter if it's a custom element or a browser element or a native element, it's just the same. So if you have an element, so in this case, let's say I have a I have an element, a custom element, movie details page that inside is loading a template, and that template has a YouTube embed custom element.

[00:09:54]
And do I need to do anything special because it's a custom element? No, I need to create a custom element that we didn't do that yet, okay, but there is no special treatment. It's just the same, you can use it within your HTML, or you can shape it with JavaScript and AppendChild.

[00:10:09]
So it's up to you, both will work. Does it make sense? So also, our home page, let's go back to our home page. Our home page was also creating a movie item component that was another component. So we already had that situation, where we have, in this case, we are using JavaScript to create that child custom component.

[00:10:33]
In movie details, we are actually using HTML because that child component, even if it's not working yet, it's actually in the HTML, it's YouTube embed. So both will work, so they work exactly the same as native elements. You can use JavaScript or you can use HTML.