Build a Webcam and Screen Sharing Site With Inertia
This episode is for members only

Sign up to access "Build a Webcam and Screen Sharing Site With Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
09. Setting a default title and description

Episodes

0%
Your progress
  • Total: 2h 16m
  • Played: 0m
  • Remaining: 2h 16m
Join or sign in to track your progress

Transcript

00:00
So for convenience, let's go ahead and set a default title and a description, so the user can just hit save video and update the details later if they need to. Now the first thing I'm going to do is change around this text input for our description. Now within Fortify we don't have a text area component, so we're going to go ahead and grab
00:16
the text input component and we're going to create out another component which is specifically for a text area but behaves in exactly the same way. So we'll create our text area dot view component, paste all this in, really the only difference here because this provides the ability to hook this up with a
00:32
model in view is that this is going to be a text area component and with a text area component we just need to end this off with a tag. It's pretty much what we need to do and it's going to behave in exactly the same way. So we can now go ahead and change this over to a text area component and let's pull that in and let's just check this out.
00:53
So let's go ahead and re-record all of this and there we go, looks a lot better. So to get a default title in there we're going to use the date, that's pretty helpful, so I'm going to go ahead and use the Day.js library to generate out this nice format date for me. So to do this we're going to go ahead and pull this in with npm, so let's do an npm install
01:18
on Day.js, once that's pulled in at the top we could create out another computed property which gives us a date in a nice format. So first thing is go ahead and import Day.js from Day.js and then we'll come down to just where we're creating our other refs and we'll create the current date and time and we'll create a computed property from this to give this back to
01:42
us. So for this we're just going to invoke Day.js and we're going to format this in a certain way and we're going to try and kind of keep this with the same format that we have on the back end as well, so we'll say the year, the month and the day. So let's actually just set this to the current date because I don't think we're going to need the time. Okay so current date is in there,
02:03
let's go down to our watcher section where we listen for the blob and then set the video into the form and we can do the same thing for the video title and we can do the same thing for the video description as well. So for this we're just going to say current date and value and just set the title to the current date and then for the description we'll say a video captured on
02:24
and then in here we would just add in the current date value like this. So when we stop recording just add the defaults in using that format and we should be good. So let's just try this out and we should have a nice title and a description ready to send down to our back end and if we just wait, can't find variable video, let's just find out this, yep that should be form, you probably
02:48
notice that, let's give it one more go and we should be good. So let's start our recording, stop it and there we go, we've got a default title and a description and now when we save the video we need to actually send this form through to the back end, store the video and then we can later encode it. So let's look at that in the next episode.

Episode summary

In this episode, we tackle a couple of UX improvements for our video recording app. First up, we set out to automatically provide default values for both the video title and description, so users don't have to fill them in every time. It's a small detail that makes a big difference!

We realize that our UI kit is missing a textarea component (important for longer descriptions), so we quickly whip up a new Textarea.vue component that works just like our existing text input. Once that's sorted, we replace the description input with our new component.

For the default title, we decide to use the current date in a friendly format. To handle date formatting, we install the Day.js library and set up a computed property to generate the date string. We use this both for the title and as part of a simple default description like "A video captured on [date]."

We test it out by recording a video, and as soon as we finish, the title and description fields are pre-filled with our defaults! That’s it for this episode; next, we’ll connect all of this to the backend so videos get saved for real.

Episode discussion

No comments, yet. Be the first!