feat(appointments): improve video upload UX with Upload Wizard

[connordoman]

Welcome to PrivacyPal! 👋

Fixes: #696

Description of the change:

This PR introduces an upload wizard to in place of the UploadVideoForm. The wizard follows 3 steps:

1. Upload/record video
2. Add privacy options (blur faces, region selection)
3. Review and submit

Other changes include:

• Fix audio/video permission status after recording is done
  • i.e. the browser would keep your camera/mic active even after recording is done and the user navigates away from the page
• Restructure the UploadVideoForm component to be more modular
• Properly dispose of other video resources during cleanup
• Use all PatternFly native components for the wizard (including file upload)

Motivation for the change:

The biggest feedback received during peer testing was how hard the record button is to find. This seeks to make that much more clear and also allows the user to understand the video upload process better.

Try it yourself:

Run the app then upload a video to an appointment.

:fish-cake:

[tthvo]

Thanks for handling this! I will give a closer look shortly! For now, build is failing:

Failed to compile.

./src/app/upload/page.tsx:47:27
Type error: Type '{ apptId: number; }' is not assignable to type 'IntrinsicAttributes & UploadVideoFormProps'.
  Property 'apptId' does not exist on type 'IntrinsicAttributes & UploadVideoFormProps'.

  45 |     return <p>Appointment not found.</p>;
  46 |   }
> 47 |   return <UploadVideoForm apptId={apptIdNumber} />;
     |                           ^
  48 | }
  49 |

[MyStackOverflows]

after recording or uploading, on the selectable blurring regions screen, there's this small gap between the bottom of the video and the frame border which causes the y-axis values to be off by a bit (very small amount but sometimes noticeable). I fixed this on the old branch we used for peer testing by adding this to the HTML video element:

style={{
  ...style,
  display: "block", // if this isn't here, strange small gap at bottom of video appears
}}

Other than this and the weird build failing issue, this is amazing and the UX is awesome

[tthvo]

Looks awesome! I have some comments about the UI above. I also see an issue described in #744 (not related to this PR though).

[nganphan123]

I run the code, video upload and blur region selection works perfectly. The UI looks amazing, Great jobs 👏
Side note, there is a glitch sometimes that it shows "Processing complete!" but the page keeps showing loading state and not redirecting back to appointment page. Could this be the problem with setTimeout in the component?

[nganphan123]

Besides, I have some suggestions:

1. Instead of redirecting to /upload/status page, can the review process stay in the same panel as upload?
2. (This can be in different PR) We can also add the review actions under the timeline in case user decides to review the processed videos later. In the timeline API, there is a tag property for videos that are still under review.

[connordoman]

Besides, I have some suggestions:

1. Instead of redirecting to `/upload/status` page, can the review process stay in the same panel as upload?

2. _(This can be in different PR)_ We can also add the review actions under the timeline in case user decides to review the processed videos later. In the timeline API, there is a tag property for videos that are still under review.

I like these ideas but I am concerned about how much time the complexity would add. Would you be willing to help?

[tthvo]

Looks good to me! Though, there is one issue: when you click Clear on the file upload, the file is cleared but not the preview video :D

[MyStackOverflows]

Looks good to me! Though, there is one issue: when you click Clear on the file upload, the file is cleared but not the preview video :D

yeah just checked this again and the image build is successful too (awesome!), only thing left for this I feel should be this ^, from what I know of the upload -> status -> review process, Ngan's suggestions would require a pretty substantial overhaul of the flow which is not really in the scope of this PR + might be too much work anyways

other than that one thing though, this is pretty much ready to go imo

edit: I notice if I upload, click clear, then switch to record and back, the video preview goes away so maybe you could simulate that behaviour to clear the preview if it's too hard to otherwise clear it? Just because when looking at the code it looks like the preview gets made on the file upload event fire and isn't tied to any states in the FileUploader component

Stale