1 00:00:00,150 --> 00:00:03,990 In this lecture, we're going to load the courses for our video player. 2 00:00:04,200 --> 00:00:06,030 We've got the packages installed. 3 00:00:06,330 --> 00:00:10,470 They come bundled with CSIS for our video player for this course. 4 00:00:10,560 --> 00:00:12,840 I've also added additional CSIS. 5 00:00:13,110 --> 00:00:17,420 We're going to consolidate everything into a single file in your editor. 6 00:00:17,430 --> 00:00:19,560 Open the clip style sheet file. 7 00:00:22,070 --> 00:00:25,130 There are two files that we need to import for the player. 8 00:00:25,370 --> 00:00:28,220 The first file can be found with the following path. 9 00:00:28,550 --> 00:00:33,750 VIDEO J.S. slash dynasty slash video. 10 00:00:33,770 --> 00:00:36,230 Dash G6's. 11 00:00:38,800 --> 00:00:41,650 This file contains the core styles for the player. 12 00:00:42,010 --> 00:00:52,330 The second file has the following path at video J.S. slash thiem's slash DST slash forest slash index 13 00:00:52,330 --> 00:00:53,440 dot CSRTs. 14 00:00:55,950 --> 00:00:59,640 There is one last set of CSIS rules I want to add to this file. 15 00:00:59,880 --> 00:01:03,150 It's the customs CSIS I created for this application. 16 00:01:03,420 --> 00:01:08,550 You can find it by opening these styles access file in the source directory. 17 00:01:11,040 --> 00:01:16,890 You can find these styles by searching for a comment that says videogames ceased start. 18 00:01:19,400 --> 00:01:22,130 Theoretically, we could leave these styles alone. 19 00:01:22,490 --> 00:01:28,310 Our player will work, whether these styles are in the global style sheet or component style sheet for 20 00:01:28,310 --> 00:01:29,330 maintainability. 21 00:01:29,510 --> 00:01:32,510 I recommend moving them to the component style sheet. 22 00:01:32,870 --> 00:01:36,040 It's very likely the player is going to experience changes. 23 00:01:36,410 --> 00:01:40,400 Maintaining styles will be more manageable from a single file. 24 00:01:40,760 --> 00:01:45,560 Mingling B video player styles with the global styles can be challenging to read. 25 00:01:46,190 --> 00:01:48,380 Let's cut everything under this comment. 26 00:01:48,620 --> 00:01:55,400 We are going to grab everything until we reach another comment that says Video dot ciusss and. 27 00:01:57,940 --> 00:02:03,520 Next, go back to the component style sheet and paste the code under the important statements. 28 00:02:06,040 --> 00:02:07,720 Those are the final changes. 29 00:02:07,900 --> 00:02:10,180 Let's try viewing the player in the browser. 30 00:02:12,690 --> 00:02:18,510 The player appears on the page, however, the appearance is not what we were aiming for, the play 31 00:02:18,510 --> 00:02:19,320 button is gone. 32 00:02:19,590 --> 00:02:22,440 As a result, we're unable to play the video. 33 00:02:22,680 --> 00:02:24,240 So what's the problem? 34 00:02:26,840 --> 00:02:32,090 The problems with view encapsulation, here's a topic we covered in an earlier section. 35 00:02:32,360 --> 00:02:34,100 Let's review it one more time. 36 00:02:34,310 --> 00:02:39,500 Behind the scenes, Angular will take a component C assess and encapsulate it. 37 00:02:39,920 --> 00:02:43,130 Here's an example of encapsulation on the left. 38 00:02:43,250 --> 00:02:46,550 We have our CSS code during compilation. 39 00:02:46,760 --> 00:02:49,310 Elements in your template are given a unique ID. 40 00:02:49,880 --> 00:02:56,330 If you selectors are selecting a specific element in the template, Angular will modify the selector 41 00:02:56,330 --> 00:02:56,990 with the ID. 42 00:02:57,620 --> 00:03:02,360 The purpose of this behavior is to prevent your styles from leaking to other components. 43 00:03:02,630 --> 00:03:07,100 For example, you may be using paragraph elements in another component. 44 00:03:07,400 --> 00:03:11,750 You wouldn't want CIUSSS from one component to affect the other component. 45 00:03:12,080 --> 00:03:14,090 We've benefited from this behavior. 46 00:03:14,240 --> 00:03:16,220 It keeps our styles in isolation. 47 00:03:16,490 --> 00:03:18,710 Unfortunately, the tables have turned. 48 00:03:19,010 --> 00:03:21,170 This feature is not always reliable. 49 00:03:21,410 --> 00:03:24,410 Some CIUSSS can't be perfectly encapsulated. 50 00:03:24,710 --> 00:03:28,530 The video package does not have the best access. 51 00:03:28,760 --> 00:03:35,180 We have the option of fixing the CIUSSS, but there's an easier way we can turn off view encapsulation. 52 00:03:35,540 --> 00:03:39,770 By doing so, Angular will not add unique IDs to our elements. 53 00:03:42,200 --> 00:03:47,720 We can disable view encapsulation by configuring the components options, for this example. 54 00:03:47,930 --> 00:03:51,710 We are going to disable view encapsulation on the clip component. 55 00:03:52,100 --> 00:03:54,560 Open this components class in your editor. 56 00:03:57,120 --> 00:04:03,630 At the top of the file, we're going to import the view encapsulation enumerator from the angular core 57 00:04:03,630 --> 00:04:04,260 package. 58 00:04:06,770 --> 00:04:10,310 Enumerators are a feature we haven't had the chance to discuss yet. 59 00:04:10,640 --> 00:04:15,020 You can think of them as a special type of object for storing a list of values. 60 00:04:15,410 --> 00:04:20,300 Enumerators are popular for restricting values to a specific list of values. 61 00:04:20,660 --> 00:04:27,170 Let's look at how an enumerator can help us inside the components configuration object at a property 62 00:04:27,170 --> 00:04:28,550 called encapsulation. 63 00:04:31,090 --> 00:04:35,170 Its value will be the view encapsulation nonmember. 64 00:04:37,600 --> 00:04:44,080 The encapsulation property has three possible values, the value we're using is called none, which 65 00:04:44,080 --> 00:04:50,680 will disable encapsulation angular uses enumerators to prevent us from accidentally using an invalid 66 00:04:50,680 --> 00:04:51,220 value. 67 00:04:51,490 --> 00:04:54,070 Let's try refreshing the page in the browser. 68 00:04:56,560 --> 00:05:02,950 The buttons for the player are appearing on the player by removing encapsulation angular will not all 69 00:05:02,950 --> 00:05:03,850 our styles. 70 00:05:04,060 --> 00:05:07,090 It was causing an issue with our players functionality. 71 00:05:07,420 --> 00:05:09,040 The player is not perfect yet. 72 00:05:09,310 --> 00:05:13,000 The width of the player appears outside the bounds of the container. 73 00:05:13,300 --> 00:05:15,910 Let's fix this issue in the next lecture.