-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve upload form components to support urls as well as file uploads
- Loading branch information
1 parent
327b902
commit a50fde3
Showing
8 changed files
with
195 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { RequestStatus } from '@/types'; | ||
| import { UploadProgress } from '@/components/UploadProgress'; | ||
| import { UploadFailure } from '@/components/UploadFailure'; | ||
| import { UploadSuccess } from '@/components/UploadSuccess'; | ||
| import React from 'react'; | ||
|
|
||
| export const SubmitResult = ({ | ||
| mediaSource, | ||
| formStatus, | ||
| mediaWithStatus, | ||
| reset, | ||
| }: { | ||
| mediaSource: 'file' | 'url'; | ||
| formStatus: RequestStatus; | ||
| mediaWithStatus: Record<string, RequestStatus>; | ||
| reset: () => void; | ||
| }) => { | ||
| const uploadsInProgress = Object.entries(mediaWithStatus).length > 0; | ||
| const oneOrMoreUploadsFailed = | ||
| formStatus === RequestStatus.Failed || | ||
| Object.values(mediaWithStatus).includes(RequestStatus.Failed); | ||
| const allUploadsSucceeded = | ||
| Object.entries(mediaWithStatus).length > 0 && | ||
| Object.values(mediaWithStatus).filter((s) => s !== RequestStatus.Success) | ||
| .length === 0; | ||
| return ( | ||
| <> | ||
| {uploadsInProgress && ( | ||
| <UploadProgress uploads={mediaWithStatus} mediaSource={mediaSource} /> | ||
| )} | ||
| {oneOrMoreUploadsFailed && ( | ||
| <UploadFailure reset={reset} mediaSource={mediaSource} /> | ||
| )} | ||
| {allUploadsSucceeded && ( | ||
| <UploadSuccess reset={reset} mediaSource={mediaSource} /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
|
|
||
| export const UploadFailure = ({ | ||
| reset, | ||
| mediaSource, | ||
| }: { | ||
| reset: () => void; | ||
| mediaSource: 'file' | 'url'; | ||
| }) => { | ||
| const text = mediaSource === 'file' ? 'uploads failed' : 'media urls invalid'; | ||
| return ( | ||
| <div | ||
| className="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" | ||
| role="alert" | ||
| > | ||
| <span className="font-medium">One or more {text}</span>{' '} | ||
| <button | ||
| onClick={() => reset()} | ||
| className="font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline" | ||
| > | ||
| Click here | ||
| </button>{' '} | ||
| to try again | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { iconForStatus } from '@/components/InfoMessage'; | ||
| import React from 'react'; | ||
| import { RequestStatus } from '@/types'; | ||
|
|
||
| export const UploadProgress = ({ | ||
| uploads, | ||
| mediaSource, | ||
| }: { | ||
| uploads: Record<string, RequestStatus>; | ||
| mediaSource: 'file' | 'url'; | ||
| }) => { | ||
| const text = | ||
| mediaSource === 'file' ? 'Uploading files:' : 'Processing media urls:'; | ||
| return ( | ||
| <div className={'pb-10'}> | ||
| <h2 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white"> | ||
| {text} | ||
| </h2> | ||
|
|
||
| <ul className="max-w-md space-y-2 text-gray-500 list-inside dark:text-gray-400"> | ||
| {Object.entries(uploads).map(([key, value]) => ( | ||
| <li className="flex items-center"> | ||
| <span className={'mr-1'}>{iconForStatus(value)}</span> | ||
| {key} {value === RequestStatus.Invalid && ' (invalid url)'} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react'; | ||
|
|
||
| export const UploadSuccess = ({ | ||
| reset, | ||
| mediaSource, | ||
| }: { | ||
| reset: () => void; | ||
| mediaSource: 'file' | 'url'; | ||
| }) => { | ||
| const mediaDownloadText = mediaSource === 'url' && ( | ||
| <p> | ||
| The media at the url you submitted will first be downloaded, then | ||
| transcribed. The download will take 5 minutes for a 1 hour video | ||
| </p> | ||
| ); | ||
| return ( | ||
| <div | ||
| className="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" | ||
| role="alert" | ||
| > | ||
| <span className="font-medium">Upload complete. </span>{' '} | ||
| <p> | ||
| Transcription in progress - check your email for the completed | ||
| transcript.{' '} | ||
| </p> | ||
| <div className="font-medium"> | ||
| {mediaDownloadText} | ||
| <p> | ||
| {' '} | ||
| The transcription service can take a few minutes to start up, but | ||
| thereafter the transcription process is typically shorter than the | ||
| length of the media file.{' '} | ||
| </p> | ||
| <p> | ||
| If you have requested a translation, you will receive 2 emails - one | ||
| for the transcription in the original language, another for the | ||
| english translation. The emails will arrive at different times | ||
| </p> | ||
| </div> | ||
| <button | ||
| onClick={() => reset()} | ||
| className="font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline" | ||
| > | ||
| Click here | ||
| </button>{' '} | ||
| to transcribe another file | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters