1
00:00:07,090 --> 00:00:10,480
Hey everybody what's going on this is Caleb with slopes dot com.

2
00:00:10,480 --> 00:00:16,300
And in this video we're going to write the function that allows us to stop recording in the previous

3
00:00:16,300 --> 00:00:17,760
video we started a recording.

4
00:00:17,760 --> 00:00:22,540
Now we need to stop it and actually do something with the file that was stopped so let's go ahead and

5
00:00:22,570 --> 00:00:23,750
let's dive right in.

6
00:00:23,770 --> 00:00:29,560
Pull open your project and go ahead and go all the way down to the bottom of your class make some room

7
00:00:29,590 --> 00:00:35,870
and write a function funk stop re courting OK.

8
00:00:36,110 --> 00:00:41,750
And to begin we need to actually just go ahead and call recorder which is our instance of our peace

9
00:00:41,750 --> 00:00:42,820
screen recorder.

10
00:00:43,040 --> 00:00:50,480
And in order to stop a recording we just call recorder recorder dot stop recording.

11
00:00:50,600 --> 00:00:52,350
And as you can see there's only one option.

12
00:00:52,400 --> 00:00:54,690
It has a handler and an optional error.

13
00:00:55,040 --> 00:01:02,540
So go ahead and click on that and then in the handler hear press Enter name this parameter preview name

14
00:01:02,540 --> 00:01:10,940
the error error and now what we need to do is we need to basically say hey if the preview comes back

15
00:01:10,940 --> 00:01:14,400
with a value meaning if it's not nil we're going to continue.

16
00:01:14,690 --> 00:01:19,550
And then we're going to go ahead and set up a UI alert controller to either just delete the recording

17
00:01:19,610 --> 00:01:21,520
or edit the one that we made.

18
00:01:21,530 --> 00:01:25,940
So let's go ahead and use guard and type guard preview.

19
00:01:26,180 --> 00:01:30,860
So if preview comes back with a value meaning if it's not equal to nil.

20
00:01:31,020 --> 00:01:31,560
OK.

21
00:01:31,760 --> 00:01:37,490
We're going to move on otherwise or else if it does come back Nell we're going to print.

22
00:01:37,550 --> 00:01:45,840
Hey pre-view controller is not available.

23
00:01:45,920 --> 00:01:47,550
This is just for our knowledge.

24
00:01:47,750 --> 00:01:54,050
And basically the preview view controller is going to present the screen recording that we just presented

25
00:01:54,530 --> 00:01:58,910
or recorded I mean and it's going to be presented in a nice little video editing view controller that

26
00:01:58,910 --> 00:02:01,080
we just get out of the box from iOS.

27
00:02:01,100 --> 00:02:08,240
Now of course after this we're going to go ahead and return thus preventing our app from crashing but

28
00:02:08,330 --> 00:02:13,010
assuming that preview is has a value that it is not nil.

29
00:02:13,220 --> 00:02:16,550
We're going to go ahead and now create our UI alert controller to present.

30
00:02:16,550 --> 00:02:19,720
So we're going to stop the recording and present an alert.

31
00:02:19,730 --> 00:02:24,650
So go ahead and type let alert equals UI alert controller.

32
00:02:24,930 --> 00:02:25,550
OK.

33
00:02:25,640 --> 00:02:29,260
And we're going to choose the option with a title message and preferred style.

34
00:02:29,540 --> 00:02:33,960
So give it a title saying recording finished.

35
00:02:34,190 --> 00:02:36,380
And the message this is what we're going to ask.

36
00:02:36,380 --> 00:02:45,530
We're going to say hey would you like to edit or delete your recording question mark and that's what's

37
00:02:45,530 --> 00:02:52,160
going to pop up and the alert style is going to be alert k not action.

38
00:02:52,610 --> 00:02:57,370
So now what we need to do is we want to have two buttons on this you Isler controller we want to have

39
00:02:57,420 --> 00:02:59,020
delete and edit.

40
00:02:59,060 --> 00:03:03,440
So let's go ahead and create the delete action which is going to add a delete button.

41
00:03:03,440 --> 00:03:10,760
So go ahead and type let delete action equals UI alert action.

42
00:03:10,880 --> 00:03:13,740
And instantiate it with a title stylin handler.

43
00:03:14,090 --> 00:03:19,220
So the title of course is going to be delete the action style.

44
00:03:19,220 --> 00:03:19,640
Check it out.

45
00:03:19,640 --> 00:03:20,920
We have a few of them.

46
00:03:21,110 --> 00:03:23,010
We're gonna choose destructive.

47
00:03:23,270 --> 00:03:28,280
OK because it indicates that the action might change or delete data and all it's going to do is just

48
00:03:28,280 --> 00:03:32,750
say delete unread text which indicates that we're going to delete it for the handler.

49
00:03:32,750 --> 00:03:36,110
Press enter and name this parameter action.

50
00:03:36,110 --> 00:03:38,370
We're not going to use it but we do need to name it.

51
00:03:39,050 --> 00:03:44,510
And then inside this what we're going to do is we're going to call another function from our recorder

52
00:03:44,780 --> 00:03:48,530
called discard recording and what that's going to do is it's just going to delete the file that was

53
00:03:48,570 --> 00:03:56,450
recorded so call self data recorder discard a recording and as you can see there is a closure at the

54
00:03:56,450 --> 00:03:57,080
end.

55
00:03:57,080 --> 00:04:02,420
So if we push enter we need to do something here let's just print a statement so that we know that the

56
00:04:02,600 --> 00:04:12,920
recording was discarded properly so type print and then just say recording successfully deleted or discarded

57
00:04:12,920 --> 00:04:14,530
whichever you want to say.

58
00:04:14,760 --> 00:04:19,640
And so now if we were to add this to our alert we would get a button that says delete and if we tapped

59
00:04:19,640 --> 00:04:22,370
it the recorder would discard the recording.

60
00:04:22,370 --> 00:04:28,680
Very cool but now we need to say what if we want to actually are recording and then save it.

61
00:04:28,850 --> 00:04:35,260
So we need to create an edit action so type let edit action equals UI alert action.

62
00:04:35,510 --> 00:04:43,070
Instantiate it with a title stylin handler and this one is going to say edit of course the style is

63
00:04:43,070 --> 00:04:49,070
going to be default and that's just going to give us the default blue text for a button and we're going

64
00:04:49,070 --> 00:04:53,210
to go ahead and push enter and the handler name it action and in our edit action.

65
00:04:53,210 --> 00:04:56,690
This is where we're going to go ahead and present our preview view controllers.

66
00:04:56,690 --> 00:04:58,980
We can see the video we just recorded.

67
00:04:59,210 --> 00:05:05,510
Now what we need to do before we do this we need to set the delegate count of our preview view controller

68
00:05:05,520 --> 00:05:07,600
so go ahead and type preview.

69
00:05:07,820 --> 00:05:12,550
That's the preview view controller dot preview controller delegate.

70
00:05:12,650 --> 00:05:13,230
All righty.

71
00:05:13,490 --> 00:05:15,640
Go ahead and set that to be equal to self.

72
00:05:15,650 --> 00:05:17,680
But watch what happens if I try to build this.

73
00:05:17,690 --> 00:05:20,360
It's going to say that it can't assign it to type.

74
00:05:20,360 --> 00:05:22,570
Arpey preview control a delegate.

75
00:05:22,580 --> 00:05:25,550
That's because we have to conform to it at the top of our view controller.

76
00:05:25,580 --> 00:05:31,050
So Type A comma then type Arpey preview view controller delegate.

77
00:05:31,310 --> 00:05:34,320
And if we try to build and run it now check it out.

78
00:05:34,610 --> 00:05:39,050
It's not going to give us an error because we are now successfully conforming to the delegate.

79
00:05:39,050 --> 00:05:44,480
So our view controller is now set as the delegate for our preview view controller meaning it's going

80
00:05:44,480 --> 00:05:45,770
to get the data from it.

81
00:05:45,770 --> 00:05:52,460
So that's cool but now what we need to do is we need to actually present our preview controller so to

82
00:05:52,460 --> 00:05:55,300
do that simply call self present.

83
00:05:55,340 --> 00:06:00,730
And the reason I'm doing that is because we are in a closure and we need to make a reference to self.

84
00:06:00,750 --> 00:06:06,780
So if we're in our action we're going to go ahead and present our preview controller.

85
00:06:06,890 --> 00:06:11,030
Animated will be true of course and the completion will be nil.

86
00:06:11,150 --> 00:06:13,560
We don't need to do anything afterwards.

87
00:06:13,580 --> 00:06:18,380
Now in order to actually get this to present Oh sorry this is optional right because it comes in as

88
00:06:18,380 --> 00:06:22,630
an optional but at this point we definitely have a preview controller.

89
00:06:22,820 --> 00:06:24,480
We're going to go ahead and just force on rapid.

90
00:06:24,660 --> 00:06:32,300
OK so at this point we now have a delete action and an edit action but they're not yet linked to our

91
00:06:32,300 --> 00:06:39,440
UI alert controller so we need to call you your call alert dot add action and pass in the delete action

92
00:06:40,070 --> 00:06:41,380
then call the same thing.

93
00:06:41,390 --> 00:06:42,080
Alert.

94
00:06:42,360 --> 00:06:44,380
Action and passing the action.

95
00:06:44,550 --> 00:06:50,430
OK then of course we're really trying to present this UI alert controller.

96
00:06:50,510 --> 00:06:56,320
The action after that's presented presents the preview so go ahead and type self.

97
00:06:56,400 --> 00:07:00,610
Present wups present and we're going to pass in.

98
00:07:00,630 --> 00:07:01,770
Alert.

99
00:07:01,770 --> 00:07:05,770
Animated is true and completion is nil.

100
00:07:05,860 --> 00:07:09,530
OK so at this point we have now stopped the recording.

101
00:07:09,540 --> 00:07:13,800
We've presented our alert and we can either tap delete or edit k.

102
00:07:13,980 --> 00:07:20,130
Now of course if we stop our recording we should set our recording variable to be false.

103
00:07:20,130 --> 00:07:27,660
So go ahead and type self is recording and set that speak to false and after that we have one less thing

104
00:07:27,660 --> 00:07:33,750
to do and that is actually to reset the view controller to look the way it did before recording so green

105
00:07:33,750 --> 00:07:39,800
button at the bottom that says record label up at the top with black text saying ready to record etc.

106
00:07:39,810 --> 00:07:40,540
etc..

107
00:07:40,770 --> 00:07:44,470
Now to do that we're going to write a little function called view reset.

108
00:07:44,490 --> 00:07:51,710
So go ahead and type that phunk view reset K and what we need to do.

109
00:07:51,720 --> 00:07:54,810
Let's think about the mike toggle button is disabled.

110
00:07:54,870 --> 00:08:02,310
So type Mike toggle is enabled and set it to true so that it's enabled then go ahead and set status

111
00:08:02,310 --> 00:08:10,250
label text that's the label up at the top of the controller set it to say ready to record again.

112
00:08:10,470 --> 00:08:12,510
Then we're going to set the font color back to black.

113
00:08:12,510 --> 00:08:23,070
So Type A status label text color and use a color literal here to set it to black.

114
00:08:23,100 --> 00:08:27,390
Next up we're going to go ahead and change our record button at the bottom to be green again and to

115
00:08:27,390 --> 00:08:36,810
say record so type record button dot set title and make it say record and the control state is normal

116
00:08:38,520 --> 00:08:41,730
then we're going to call record button dot set.

117
00:08:41,730 --> 00:08:48,930
Title color pasand a color literal and choose a nice green color like mine and the control state is

118
00:08:48,930 --> 00:08:50,770
going to be normal.

119
00:08:51,030 --> 00:08:55,980
OK so this is going to reset our view back to the way it was and we're going to just call that when

120
00:08:55,980 --> 00:08:57,080
we stop our recording.

121
00:08:57,080 --> 00:09:03,840
So go ahead and call self view reset and this is all we need to do to stop our recording.

122
00:09:03,840 --> 00:09:08,190
Now you're probably wondering well what if I present my view controller.

123
00:09:08,190 --> 00:09:13,620
How do I control what's actually going on in that editing or preview view controller.

124
00:09:13,620 --> 00:09:14,640
Great question.

125
00:09:14,670 --> 00:09:20,750
There is actually a delegate method that we can call because we have conformed to the Arpey preview.

126
00:09:20,760 --> 00:09:28,140
You control a delegate that basically sets what happens after we're done editing our video when we push

127
00:09:28,140 --> 00:09:33,790
the save button and that delegate method is pre-view preview.

128
00:09:33,800 --> 00:09:36,140
Controller did finish.

129
00:09:36,330 --> 00:09:39,680
OK now you know what I actually want you to read the description there.

130
00:09:39,700 --> 00:09:40,950
Preview controller did finish.

131
00:09:40,950 --> 00:09:47,400
It indicates that the preview controller is ready to be dismissed so when we push save or even cancel

132
00:09:47,790 --> 00:09:51,380
what we want to happen is it to dismiss right.

133
00:09:51,390 --> 00:09:57,610
We want that view controller to dismiss so-call true for animated and the completion can simply be nil.

134
00:09:57,750 --> 00:09:58,240
OK.

135
00:09:58,560 --> 00:10:03,540
And that's going to set our view controller to dismiss whenever we're ready so we have written a lot

136
00:10:03,540 --> 00:10:05,150
of code without testing it.

137
00:10:05,160 --> 00:10:07,020
So I think that we need to go in and test it.

138
00:10:07,020 --> 00:10:08,640
Let's do that now.

139
00:10:08,790 --> 00:10:10,080
Click build and run.

140
00:10:10,080 --> 00:10:12,450
Let it run on your device and open up.

141
00:10:12,450 --> 00:10:13,560
Here we go.

142
00:10:13,560 --> 00:10:15,890
It's going to go ahead and pop open here.

143
00:10:16,260 --> 00:10:17,520
Let's check it out guys.

144
00:10:17,610 --> 00:10:21,430
I'm really excited so here we go it looks great.

145
00:10:21,440 --> 00:10:26,600
Microphone access is then enabled I push record and it tells me that recording is not available at this

146
00:10:26,600 --> 00:10:27,310
time.

147
00:10:27,560 --> 00:10:32,390
And that's because I am currently recording the screen using screen flow so I'm going to stop the recording

148
00:10:32,390 --> 00:10:35,350
here and I'm going to go ahead and retry it.

149
00:10:35,660 --> 00:10:41,110
And you know what I was having so much trouble with recording my screen and recording my audio and everything.

150
00:10:41,300 --> 00:10:43,010
You can actually do both very easily.

151
00:10:43,010 --> 00:10:47,770
You will not have a problem with this because you're not recording while simultaneously using your phone.

152
00:10:48,110 --> 00:10:51,890
But I can show you my screen as you can see the interfaces here.

153
00:10:52,070 --> 00:10:55,790
And if I push the green record button it's going to start recording.

154
00:10:55,790 --> 00:10:58,750
It says stop and it says Recording up at the top.

155
00:10:58,760 --> 00:11:03,290
Now I can go ahead and I can use our little input here to change the images.

156
00:11:03,290 --> 00:11:05,120
I can do all that fun stuff.

157
00:11:05,240 --> 00:11:10,350
And then finally I can push the stop button and upon pushing that look what it says.

158
00:11:10,490 --> 00:11:13,190
It says Would you like to edit or delete your recording.

159
00:11:13,190 --> 00:11:15,580
Now if I tap delete it's going to go ahead and delete it.

160
00:11:15,590 --> 00:11:17,100
But if I push at it.

161
00:11:17,300 --> 00:11:23,790
Look what happens I get a nice little video pop up and listen let me turn on my volume.

162
00:11:25,680 --> 00:11:27,320
This is

163
00:11:31,640 --> 00:11:34,780
change.

164
00:11:35,470 --> 00:11:36,350
OK very cool.

165
00:11:36,350 --> 00:11:42,390
Now you can also notice that you can see a little slider at the bottom and you can even edit and scrub

166
00:11:42,410 --> 00:11:45,140
on the video there to save at a certain length.

167
00:11:45,140 --> 00:11:52,640
Now up at the top it says cancell and done so push done to save your changes and it changes to say save

168
00:11:52,970 --> 00:11:56,890
after that push save and it goes back to our main app UI.

169
00:11:56,900 --> 00:12:02,480
Now if I go to my photos here let me go over there really fast I can go in here and the video that is

170
00:12:02,540 --> 00:12:04,180
on my phone is right there.

171
00:12:04,190 --> 00:12:07,510
That's the video I just saved and created in my app.

172
00:12:07,550 --> 00:12:09,490
So guys it appears to be working.

173
00:12:09,500 --> 00:12:11,670
We are now stopping our recording.

174
00:12:11,690 --> 00:12:12,730
We're able to edit it.

175
00:12:12,740 --> 00:12:17,210
We're able to save our videos and all of that awesome awesome stuff.

176
00:12:17,210 --> 00:12:20,090
This app is finished guys fantastic work.

177
00:12:20,090 --> 00:12:21,980
Implementing replay kit into your app.

178
00:12:21,980 --> 00:12:27,860
This is literally how easy it is and there are of course more ways that you can expand this with live

179
00:12:27,860 --> 00:12:33,410
broadcasting with replay kit but that goes beyond the scope of this target topic so we can talk about

180
00:12:33,410 --> 00:12:35,580
that in the future in another target topic.

181
00:12:35,580 --> 00:12:40,860
But thank you guys so much for going through this target topic and learning about replay kit.

182
00:12:40,910 --> 00:12:42,290
I'll see in the next target topic.

183
00:12:42,290 --> 00:12:43,990
This is Calleigh with Deb's slopes.

184
00:12:44,060 --> 00:12:44,480
Dot.com.