In this lecture, we will finish the clip page by dynamically rendering these sections of the page,
including the player on this page.
We are rendering the title upload or name, date and video.
This information is available on the clip object from our resolver.
Let's grab this data and your editor.
Open the clip component class file.
Next, we should store the data locally in the class, create an optional property called Clip annotated
with the I clip model.
Afterward, we can remove the ID property from the component.
The purpose of storing the ID was to demonstrate how to retrieve a root parameter.
It's safe to remove this property.
The subscription inside the nji on init function can be removed to.
In its place, we are going to subscribe to the this dot root dot data property.
Result data get stored in the data property, the data property is an observable that our component
can subscribe to.
Let's subscribe to the observable with a function to handle the subscription.
Be sure to accept the data in the function after defining the function, let's begin updating the clip
property with the data resolved by our resolver in the function.
Set the clip property to the data clip object.
We can reference the data resolved by our service through the name we gave it in the roots.
In this case, we are storing it under a property called Clip.
TypeScript will throw an error at us because it isn't sure if this property exists on the data object.
This is completely normal.
By default, the data argument is annotated with the data type.
It doesn't have the clip object added as a known property on the object.
We need to assert the I clip type on the property before assignments.
After giving our component access to the data, we can move on to the next step.
The video player is going to need the source of the video.
At the moment, we're playing the same video.
We can dynamically update this source by calling the player question mark that source function.
This function accepts an object of options for the new source.
There are two properties we're going to add.
The first property we'll add is called source with the value of this not clip dot URL.
The You Are property is where we are storing the URL to the video.
The second property is called type.
This property will have a value of video.
MP for.
We are exclusively working with MP for files.
The type will always be video slash MP for after making these changes.
We can start modifying the template, open the clip template file.
We're going to start from the top and work our way down.
First, we have the title, you can find the title inside the H1 tags.
Initially, we were outputting the ID.
However, the ID has been removed or replaced the expression with the following value clip question
mark that title.
The clip property will not always contain the data from the document.
Keep in mind, we are returning no from our resolver.
It's possible this property can be empty whenever we use the clip property.
We will add the optional chain operator next.
We have the name and date.
Replace the static name with the following expression clip.
Question mark.
Dot display name.
As for the date, we can replace the static date with the following expression clip.
Question mark.
Dot.
Time stamp.
We should apply the FBI time stamp type to the output of this expression.
The pipe is going to fail.
It's because we are injecting the date pipe into this pipe, the pipe is not injectable, at least not
in our component.
We need to make it injectable by adding it to the provider's array.
Switch back to the class file at the top of the file.
Import the date pipe from the angular slash common package.
Next, and the providers array to the object inside this array.
Add the date pipe.
By making our pipe injectable, the custom pipe should be able to format the time stamp.
Let's move back to the template.
We're not in the clear yet.
The FBI timestamp pipe is throwing another error, it states the clip object may be empty to fix this
issue.
We should check if the value is empty in the pipe.
Open the FBI timestamp file.
In the transform function, we're going to modify the value argument by adding a union type, the second
type will be called undefined.
Afterward, create a conditional statement at the top of the function.
We are going to check if the value argument is empty.
If it is, we will return an empty string.
By checking the value argument for empty values, we can prevent our app from throwing an error.
Let's go back to the clip template.
We can move on to updating the video player.
We've updated the player with an external source.
Earlier in the course, we encountered an issue with Cross Origin Resources.
The browser will not allow us to play the video unless we add the cross origin attribute to the video
tag.
Lastly, we can remove these source tag, we are dynamically loading the source, so it's not necessary
to keep this tag around.
That's the last step.
Try testing the player, try viewing any clip in the browser.
Magic happen once again, they were able to play any clip we desire.
We can even click on another clip to change the current source, regardless of what we're watching.
The page will always be updated with the correct information.
We're finished with the application in the next couple of lectures.
We're going to add some final touches before deployment.
They're small things we overlooked during the development of the app.
When you're ready, I'll see you in the next lecture.