230 transcripts

[allishultes]

Is your Pull Request request related to another issue in this repository ?

bbc/digital-paper-edit-firebase#230

Describe what the PR does

Updates the TranscriptRow component to match the designs in the issue linked above:

• Adds green tick icon next to available transcripts (check font awesome for a good match)
• Restyles the uploading progress bar to match designs
• Shows the approximate transcribing time
• Shows a generic error message when there is a failure
• Shows file deleted message when the transcript has expired

State whether the PR is ready for review or whether it needs extra work

Ready

Additional context

Please review with bbc/digital-paper-edit-firebase#247

The media duration at the bottom of the cards will only appear for new files, as it is a field that gets added to transcript documents when they're created in Firebase.

Out of scope:

• Re-uploading on failure or expiry [moved to: Implement reupload functionality for failed and expired media digital-paper-edit-firebase#244]
• Cancelling uploads and transcription processes [moved to: Add cancel upload and cancel transcription options to project view digital-paper-edit-firebase#248]

As of now, I can't see how we can tell that an item has queued, and so I haven't been able to verify that the icon change next to the progress message will change when this happens.

I branched off a branch to kick this off so apologies for the duplicate commits on this; shout if you'd like me to rebase or do other Git magic.

[aniablaziak]

Awesome job Alli, it's looking ace ✨

Just left the comment about the date format 🙂

[tamsingreen]

Looks really good Alli - have a think about the Moment stuff as the storybook modules are really hefty already.
Things to think about when choosing a third party library might be:

• how recently/often it's updated (and is it still maintained)
• how popular it is compared with similar ones (Github stars, NPM downloads, etc)
• the bundle size (you can see this on the NPM page)
• does it use ES6 modules (in which case webpack can usually dispose of the stuff we don't need when bundling)
• or is there another library that does just that one thing?