1
00:00:00,150 --> 00:00:06,300
In this lecture, we will finish the clip page by dynamically rendering these sections of the page,

2
00:00:06,480 --> 00:00:09,000
including the player on this page.

3
00:00:09,120 --> 00:00:13,440
We are rendering the title upload or name, date and video.

4
00:00:13,770 --> 00:00:17,940
This information is available on the clip object from our resolver.

5
00:00:18,180 --> 00:00:20,760
Let's grab this data and your editor.

6
00:00:20,910 --> 00:00:23,460
Open the clip component class file.

7
00:00:25,920 --> 00:00:33,000
Next, we should store the data locally in the class, create an optional property called Clip annotated

8
00:00:33,000 --> 00:00:34,650
with the I clip model.

9
00:00:37,200 --> 00:00:41,280
Afterward, we can remove the ID property from the component.

10
00:00:41,610 --> 00:00:46,650
The purpose of storing the ID was to demonstrate how to retrieve a root parameter.

11
00:00:47,010 --> 00:00:48,990
It's safe to remove this property.

12
00:00:49,350 --> 00:00:54,360
The subscription inside the nji on init function can be removed to.

13
00:00:56,930 --> 00:01:03,050
In its place, we are going to subscribe to the this dot root dot data property.

14
00:01:05,580 --> 00:01:12,150
Result data get stored in the data property, the data property is an observable that our component

15
00:01:12,150 --> 00:01:13,410
can subscribe to.

16
00:01:13,770 --> 00:01:18,210
Let's subscribe to the observable with a function to handle the subscription.

17
00:01:20,820 --> 00:01:27,450
Be sure to accept the data in the function after defining the function, let's begin updating the clip

18
00:01:27,450 --> 00:01:32,040
property with the data resolved by our resolver in the function.

19
00:01:32,220 --> 00:01:36,060
Set the clip property to the data clip object.

20
00:01:38,690 --> 00:01:43,430
We can reference the data resolved by our service through the name we gave it in the roots.

21
00:01:43,760 --> 00:01:47,540
In this case, we are storing it under a property called Clip.

22
00:01:47,990 --> 00:01:54,710
TypeScript will throw an error at us because it isn't sure if this property exists on the data object.

23
00:01:55,070 --> 00:01:56,510
This is completely normal.

24
00:01:56,750 --> 00:02:01,040
By default, the data argument is annotated with the data type.

25
00:02:01,400 --> 00:02:05,810
It doesn't have the clip object added as a known property on the object.

26
00:02:06,350 --> 00:02:10,880
We need to assert the I clip type on the property before assignments.

27
00:02:13,400 --> 00:02:17,960
After giving our component access to the data, we can move on to the next step.

28
00:02:18,320 --> 00:02:21,380
The video player is going to need the source of the video.

29
00:02:21,650 --> 00:02:24,080
At the moment, we're playing the same video.

30
00:02:24,380 --> 00:02:30,350
We can dynamically update this source by calling the player question mark that source function.

31
00:02:32,910 --> 00:02:36,660
This function accepts an object of options for the new source.

32
00:02:36,960 --> 00:02:39,270
There are two properties we're going to add.

33
00:02:39,630 --> 00:02:46,560
The first property we'll add is called source with the value of this not clip dot URL.

34
00:02:49,230 --> 00:02:53,280
The You Are property is where we are storing the URL to the video.

35
00:02:53,610 --> 00:02:55,740
The second property is called type.

36
00:02:56,100 --> 00:02:58,710
This property will have a value of video.

37
00:02:59,230 --> 00:03:00,090
MP for.

38
00:03:02,620 --> 00:03:05,680
We are exclusively working with MP for files.

39
00:03:05,920 --> 00:03:11,390
The type will always be video slash MP for after making these changes.

40
00:03:11,410 --> 00:03:15,790
We can start modifying the template, open the clip template file.

41
00:03:18,370 --> 00:03:21,190
We're going to start from the top and work our way down.

42
00:03:21,430 --> 00:03:26,520
First, we have the title, you can find the title inside the H1 tags.

43
00:03:26,770 --> 00:03:28,990
Initially, we were outputting the ID.

44
00:03:29,560 --> 00:03:36,160
However, the ID has been removed or replaced the expression with the following value clip question

45
00:03:36,160 --> 00:03:37,600
mark that title.

46
00:03:40,240 --> 00:03:44,140
The clip property will not always contain the data from the document.

47
00:03:44,440 --> 00:03:47,910
Keep in mind, we are returning no from our resolver.

48
00:03:48,310 --> 00:03:53,290
It's possible this property can be empty whenever we use the clip property.

49
00:03:53,320 --> 00:03:56,920
We will add the optional chain operator next.

50
00:03:56,920 --> 00:03:58,760
We have the name and date.

51
00:03:59,170 --> 00:04:03,210
Replace the static name with the following expression clip.

52
00:04:03,220 --> 00:04:04,150
Question mark.

53
00:04:04,180 --> 00:04:05,710
Dot display name.

54
00:04:08,190 --> 00:04:13,560
As for the date, we can replace the static date with the following expression clip.

55
00:04:13,740 --> 00:04:14,620
Question mark.

56
00:04:14,640 --> 00:04:15,170
Dot.

57
00:04:15,180 --> 00:04:15,990
Time stamp.

58
00:04:18,519 --> 00:04:23,050
We should apply the FBI time stamp type to the output of this expression.

59
00:04:25,670 --> 00:04:27,230
The pipe is going to fail.

60
00:04:27,920 --> 00:04:34,640
It's because we are injecting the date pipe into this pipe, the pipe is not injectable, at least not

61
00:04:34,640 --> 00:04:35,600
in our component.

62
00:04:35,870 --> 00:04:39,650
We need to make it injectable by adding it to the provider's array.

63
00:04:39,980 --> 00:04:43,370
Switch back to the class file at the top of the file.

64
00:04:43,460 --> 00:04:47,390
Import the date pipe from the angular slash common package.

65
00:04:49,860 --> 00:04:54,420
Next, and the providers array to the object inside this array.

66
00:04:54,450 --> 00:04:55,920
Add the date pipe.

67
00:04:58,420 --> 00:05:03,490
By making our pipe injectable, the custom pipe should be able to format the time stamp.

68
00:05:04,000 --> 00:05:05,680
Let's move back to the template.

69
00:05:06,100 --> 00:05:07,270
We're not in the clear yet.

70
00:05:07,510 --> 00:05:14,200
The FBI timestamp pipe is throwing another error, it states the clip object may be empty to fix this

71
00:05:14,200 --> 00:05:14,710
issue.

72
00:05:14,740 --> 00:05:17,470
We should check if the value is empty in the pipe.

73
00:05:17,830 --> 00:05:20,080
Open the FBI timestamp file.

74
00:05:22,610 --> 00:05:29,000
In the transform function, we're going to modify the value argument by adding a union type, the second

75
00:05:29,000 --> 00:05:30,950
type will be called undefined.

76
00:05:33,590 --> 00:05:37,440
Afterward, create a conditional statement at the top of the function.

77
00:05:37,790 --> 00:05:40,910
We are going to check if the value argument is empty.

78
00:05:43,340 --> 00:05:45,920
If it is, we will return an empty string.

79
00:05:48,480 --> 00:05:53,820
By checking the value argument for empty values, we can prevent our app from throwing an error.

80
00:05:54,150 --> 00:05:56,250
Let's go back to the clip template.

81
00:05:56,790 --> 00:05:59,370
We can move on to updating the video player.

82
00:05:59,580 --> 00:06:02,100
We've updated the player with an external source.

83
00:06:02,370 --> 00:06:07,110
Earlier in the course, we encountered an issue with Cross Origin Resources.

84
00:06:07,380 --> 00:06:13,710
The browser will not allow us to play the video unless we add the cross origin attribute to the video

85
00:06:13,710 --> 00:06:14,220
tag.

86
00:06:16,660 --> 00:06:22,990
Lastly, we can remove these source tag, we are dynamically loading the source, so it's not necessary

87
00:06:22,990 --> 00:06:24,490
to keep this tag around.

88
00:06:24,730 --> 00:06:25,960
That's the last step.

89
00:06:26,290 --> 00:06:30,370
Try testing the player, try viewing any clip in the browser.

90
00:06:31,800 --> 00:06:36,270
Magic happen once again, they were able to play any clip we desire.

91
00:06:36,480 --> 00:06:42,250
We can even click on another clip to change the current source, regardless of what we're watching.

92
00:06:42,270 --> 00:06:45,720
The page will always be updated with the correct information.

93
00:06:46,020 --> 00:06:50,410
We're finished with the application in the next couple of lectures.

94
00:06:50,460 --> 00:06:53,820
We're going to add some final touches before deployment.

95
00:06:54,150 --> 00:06:57,970
They're small things we overlooked during the development of the app.

96
00:06:58,230 --> 00:07:01,260
When you're ready, I'll see you in the next lecture.