I wanted to keep the video recording and upload feature simple. So, along with the existing Reply with Text and Reply with Image,  we are going to add another button named Reply with Video. This button will launch a modal and help us with the record and upload process. Open client/app/view-thread/view-thread.component.html and, next to the Reply with Image button at the bottom of the page, add the following code:

// SNIPP SNIPP
<div class="col text-center">
 <button class="btn btn-success" type="submit" (click)="uploadVideo(thread)"><i class="fa fa-video-camera"></i> Reply with Video</button>
</div>
// SNIPP SNIPP

Next, the required logic for uploadVideo will be placed in client/app/view-thread/view-thread.component.ts and should be as follows:

// SNIPP SNIPP
uploadVideo(thread: Thread) {
 const modalRef = this.modal.open(UploadVideoModal, {
 size: 'lg'
 });
 modalRef.componentInstance.threadId = this.thread._id;
 modalRef.componentInstance.updateThread.subscribe((message) => {
 if (!message) return;
 thread.messages.push(message);
 });
}
// SNIPP SNIPP

Here, we are using the NgbModal instance to open the upload video component, which we are going to create in a moment. Using the componentInstance on modalRef, we are sending the thread ID to that component as input. We will be creating an output named updateThread on the upload video component and subscribing to that event. updateThread receives the newly created message to be added to the existing list of messages in the thread. Add the following import to client/app/view-thread/view-thread.component.ts:

// SNIPP SNIPP
import { UploadVideoModal } from './upload-video-modal/upload-video-modal';
// SNIPP SNIPP

Now, we will create the upload video modal component.