WEBVTT 00:07.500 --> 00:13.380 In this video you're going to add some changes to your code so that you can serve certain file types 00:13.650 --> 00:15.050 in the correct way. 00:15.060 --> 00:17.450 So let's start with BDA files. 00:17.490 --> 00:23.430 So you want to display PDA files in the browser instead of prompting the user to download them. 00:24.300 --> 00:29.250 So let's have a quick look at how it works at the moment. 00:29.250 --> 00:33.380 So I'm gonna go to purchase books and try this PDA. 00:33.390 --> 00:41.910 File so you can see those it is already showing inline and this is exactly what we want it now in certain 00:41.910 --> 00:48.320 scenarios it could have prompted us to download the file where we can see that it with our code. 00:48.390 --> 00:51.420 Other moments it works and it's inline. 00:51.480 --> 00:54.130 Now what if it wasn't in line. 00:54.810 --> 01:00.510 You could change that chain us by adding something in the head is so 01:04.400 --> 01:08.370 right after this line it's odd. 01:08.430 --> 01:11.760 All our specific scenarios. 01:11.910 --> 01:14.880 So for a PDA file 01:17.750 --> 01:20.950 meaning the extension name is PDA. 01:21.110 --> 01:27.820 So let's have a quick look arts what we used for extension so file details those extensions. 01:28.420 --> 01:35.550 So if file details those extension name equals PDA. 01:36.380 --> 01:46.890 Meaning we want a PDA file to serve then you can add a header called contents 01:49.290 --> 01:49.890 disposition 01:53.950 --> 01:59.080 like this and you can send that to in line. 01:59.500 --> 02:05.220 And this will make sure that your PDA file is displayed inline in the browser. 02:05.230 --> 02:13.300 Now if you choose to display to make it downloadable then you change this to 02:16.120 --> 02:16.810 attachments 02:19.930 --> 02:25.100 and you specify the file name. 02:25.140 --> 02:26.500 So for example this call is 02:35.730 --> 02:36.950 file those PDA. 02:38.540 --> 02:39.360 So let's try this 02:44.150 --> 02:51.570 and you can see that now it is being downloaded and its name is file. 02:51.960 --> 02:52.790 It's gonna be filed. 02:52.800 --> 02:53.350 That's PDA. 02:53.610 --> 02:59.450 Because we only see file because we hiding the extension. 03:00.030 --> 03:05.250 So for now I'm going to keep the first line instead of the second one. 03:05.250 --> 03:05.500 All right. 03:05.520 --> 03:11.860 Now let's move to the next file type which is audio and video. 03:12.850 --> 03:18.360 So in this scenario we want to stream in arranges. 03:18.610 --> 03:23.420 So let's have a quick look at how it works at the moment. 03:23.420 --> 03:24.550 So if I go to 03:29.950 --> 03:40.280 media and then try one of these videos then if I try to search the video it actually doesn't work. 03:40.610 --> 03:44.390 So I can see that the video is being downloaded while I'm watching it. 03:44.390 --> 03:47.720 But if I can't go right there 03:50.880 --> 03:53.740 so we want to fix that. 03:53.910 --> 03:56.850 So let's start by writing our if statement 04:01.600 --> 04:13.060 so the file type is going to be an audio if the name audio or the string audio can be found inside the 04:13.750 --> 04:18.580 mind available and we can do that's an easy way using a rejects 04:24.200 --> 04:35.340 which will take audio as a parameter and we're gonna use the test method to which we pass the mime back. 04:35.450 --> 04:39.870 So let's just check that we call this mime yes. 04:39.900 --> 04:45.800 That's right so it does for audio and 04:49.450 --> 04:50.650 this is for video 04:54.560 --> 05:03.950 so to get started we are going to compare the response of this request with the response of the same 05:03.950 --> 05:06.800 request coming from the final websites. 05:06.830 --> 05:15.180 So if I go to media and then go to Ocean total and the final Web site you can actually search. 05:16.020 --> 05:26.730 So I'm going to copy both those you are else in postman and we will compare the output of each one. 05:27.630 --> 05:37.850 So let's start with this one you see there and is get that one and paste that. 05:38.310 --> 05:40.100 So let's send this one first. 05:46.000 --> 05:54.950 So these are the headers which we received and let's try with our current progress and let's check the 05:54.950 --> 06:00.080 headers as well. 06:00.220 --> 06:04.350 All right so now we've got only four headers here and you got seven headers. 06:04.350 --> 06:04.650 Now 06:08.100 --> 06:10.210 so let's check the difference. 06:10.320 --> 06:12.480 So you got one extra header right there. 06:12.690 --> 06:18.770 It's called except ranges and it's set to voice so accepts ranges means. 06:18.780 --> 06:26.230 Does your server supports partial requests and the value that you give to. 06:26.280 --> 06:32.640 In our case bytes will indicate what units can be used to define a range. 06:33.660 --> 06:41.520 So every partial request is going to be made following a range. 06:41.730 --> 06:48.920 And the units used in the range is going to be bytes in our case and one of the advantages of using 06:48.950 --> 06:56.990 accepts ranges is that you can resume uninterrupted download for example rather than starting from the 06:56.990 --> 06:58.130 beginning. 06:58.220 --> 07:00.800 Let's add except ranges to 07:07.380 --> 07:08.100 0 headings 07:13.050 --> 07:22.530 so head elements of key accepts ranges will be set to bytes 07:25.640 --> 07:34.460 now at least check something inside the header objects and stories inside a variable and there's gonna 07:34.460 --> 07:40.690 be requests not headers those arrange and this is the range we were talking about. 07:41.030 --> 07:43.290 So let's console the log. 07:43.340 --> 07:44.000 The range 07:46.940 --> 07:49.720 can see what happens 07:56.160 --> 08:01.630 so we can see that the range is undefined at the beginning and then it changes here. 08:02.070 --> 08:06.750 So of course these thoughts might which is this one and we don't have the N1. 08:07.350 --> 08:14.680 So if we go back to postman and check the results 08:17.370 --> 08:19.140 of the final version 08:22.370 --> 08:24.260 we can only see one snapshot. 08:24.290 --> 08:32.460 And this is the response or the response headers which because for the first requests. 08:32.610 --> 08:39.240 Now as you can see we've got range appearing twice here meaning that we had more than one requests now 08:39.240 --> 08:41.670 for our video to work properly. 08:41.670 --> 08:45.360 We will need to add two more headers 08:50.770 --> 08:53.380 which are going to be the contents range 08:56.860 --> 09:04.310 and the content length. 09:04.330 --> 09:11.080 Now you really need these two headers for your video to work properly so that you can search and so 09:11.080 --> 09:17.530 on and this will also make the video work on mobile phones. 09:17.530 --> 09:19.570 So let's start with the contents range. 09:19.570 --> 09:30.140 So you gonna go to our head object and we're gonna set contents range to something that looks like this. 09:30.190 --> 09:34.360 So you're going to have bytes. 09:34.650 --> 09:44.380 This is our units for the access ranges and then you're going to have a start if for example our stars. 09:44.380 --> 09:47.930 There is no go. 09:48.130 --> 09:54.440 So I'm gonna put a random number for now and then minus sine the end 09:57.190 --> 10:06.050 for example and then fourth slice the size of your video 10:09.610 --> 10:11.280 so let's call it file size for now. 10:12.130 --> 10:19.030 So this is how it looks like now you really need a way to get those numbers. 10:19.030 --> 10:21.480 We know the file size is something easy. 10:21.580 --> 10:23.990 You need that and that's. 10:24.020 --> 10:36.550 And then the contents length corresponds to how many bytes can be found in your range. 10:36.830 --> 10:41.010 In this example is going to be that's 1 minus. 10:41.540 --> 10:49.860 That's 1 so the end minus the size and you aren't one because you want to count also the last might. 10:49.980 --> 10:57.440 And one more thing you need to do in this scenario you need to change the status code which you said 10:57.440 --> 11:03.480 to two hundred to the beginning of two hundred. 11:03.480 --> 11:14.870 You need to change that to two hundred six and that's what you do when dreaming in arrangers like this. 11:14.950 --> 11:17.760 What we're missing here is the start and end. 11:17.770 --> 11:20.820 We need to find a way to calculate them or to find them. 11:20.980 --> 11:23.140 The file size is pretty straightforward. 11:23.140 --> 11:37.520 You can use the FS module to get that so you can try for example f s start sync which you apply to the 11:37.520 --> 11:41.020 for static path. 11:41.210 --> 11:52.880 No you need to take care off the error handling in a place it is inside a try catch. 11:52.970 --> 11:53.630 Statements 11:59.240 --> 12:10.580 instead of concepts will just change the value of sorts which we will create or declare before the try 12:10.580 --> 12:10.850 catch. 12:10.850 --> 12:11.270 Statements 12:28.460 --> 12:30.020 so it's against the file size 12:34.280 --> 12:41.650 that's going to be starts notes size all right. 12:41.710 --> 12:44.380 Now let's move to the start and end. 12:44.440 --> 12:53.660 So as you might might have guessed we need to get that from our range so here we of course only the 12:53.690 --> 12:59.380 start was in other circumstances you would get both the start and the end. 12:59.840 --> 13:04.640 But in some scenarios you get undefined like at the beginning right there. 13:05.130 --> 13:06.210 So what we need to do 13:09.270 --> 13:16.100 we will need to check if the range is undefined or not. 13:16.230 --> 13:29.630 So if it's not undefined then we are going to carry on with this code and we can add the headers etc. 13:29.670 --> 13:34.000 change these is code and so on. 13:34.040 --> 13:42.870 Otherwise if the range is undefined then we'll just carry on as normal as we did for the other files. 13:42.920 --> 13:46.770 Normally happens with the first request when you start playing the video. 13:47.220 --> 13:56.390 If range is not undefined then range is going to be in the following format so it's copy this something 13:56.390 --> 14:01.600 like last and you would expect the end as well if it's there. 14:01.670 --> 14:06.020 So what you need is the start and the end. 14:06.020 --> 14:11.020 So let's go ahead and write on javascript code which will get us both those values. 14:11.030 --> 14:20.150 So let's remove bytes equal so I'm gonna define a variable start. 14:20.280 --> 14:25.070 And like this and that's gonna be our range. 14:27.250 --> 14:28.150 Where we replace 14:30.710 --> 14:31.520 bytes equal 14:35.240 --> 14:45.260 with an empty string and this will give you this task on the end like this. 14:45.380 --> 14:58.050 Now we will split both these values using this separator so splits using the minus sign separator. 14:58.200 --> 15:04.830 So this will give us an array made of stars and and that's great. 15:05.070 --> 15:07.850 So we making some good progress here. 15:07.890 --> 15:13.410 Now you're are ready to get starts by getting the first item of your array and then. 15:13.410 --> 15:24.610 And if it's the so let's define a variable starts which is going to be starts and elements of index 15:24.820 --> 15:26.110 0. 15:26.140 --> 15:31.240 Now this is going to be a string because we've been manipulating strings so far so you can parse this 15:31.240 --> 15:33.600 as an integer like that. 15:34.150 --> 15:36.350 Now let's move to the end. 15:36.490 --> 15:39.960 So const and equals. 15:39.970 --> 15:46.550 So we're gonna check if there is a second item inside our array 15:55.720 --> 15:58.920 using a question mark like this. 15:59.290 --> 16:11.640 So if we find that value then we're gonna pass it as an integer. 16:12.110 --> 16:19.260 Otherwise we're going to set it to the file size minus one. 16:19.620 --> 16:29.670 So file size minus one because when you start reading it size from white zero and then you carry on 16:29.850 --> 16:36.120 until the last byte at the first byte is zero. 16:36.220 --> 16:42.160 That means does the last byte is file size minus one because you're not starting from bytes one is tossing 16:42.160 --> 16:43.270 from white zero. 16:43.270 --> 16:45.660 That's why we've courts minus one. 16:45.850 --> 16:50.020 Now we use the file size over there. 16:50.020 --> 16:56.180 So it would be a good idea to do this beforehand 17:06.180 --> 17:07.710 we can do it there for example 17:19.140 --> 17:19.590 and 17:23.000 --> 17:29.030 let's use the file details objects that Spencer says the size 17:32.390 --> 17:34.270 to start dot size 17:39.640 --> 17:48.000 and that's our size which we can use right there and write the 17:51.870 --> 17:52.460 right now. 17:52.470 --> 17:57.030 Let's replace these files used with stars and and 18:11.620 --> 18:12.220 the same. 18:12.310 --> 18:14.130 So and minus starts. 18:18.030 --> 18:18.560 All right. 18:18.590 --> 18:21.320 Now there is one thing missing. 18:21.530 --> 18:26.650 It's the options of the Read stream method 18:29.470 --> 18:31.750 or he creates read three method. 18:31.750 --> 18:35.940 So in those options we need to specify these tasks and the end. 18:36.040 --> 18:45.270 So we created the options objects write the so 18:58.490 --> 19:16.080 let's change that's here and sets options to start and say Now let's test locate. 19:16.090 --> 19:21.310 So now you are able to watch videos and search through them.