New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
audio: new @uppy/audio plugin for recording with microphone #2976
Conversation
arturi
commented
Jun 29, 2021
•
edited
edited
…appropriate, improved preview screen
/* eslint-disable-next-line no-return-assign */ | ||
ref={(audioElement) => (this.audioElement = audioElement)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we get rid of the eslint comment here?
/* eslint-disable-next-line no-return-assign */ | ||
ref={(audioElement) => (this.audioElement = audioElement)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we get rid of the eslint comment here?
|
||
### `locale: {}` | ||
|
||
<!-- eslint-disable no-restricted-globals, no-multiple-empty-lines --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this added by the locales tool?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall good looking, nice work! Some minor code comments and some thoughts on the design.
- The green color on black background doesn't fit the uppy design in the dashboard. I would try some different colors.
- The waveform is a very thin line. I was myself thinking more of something more visually present. And perhaps not even full width, like so:
@@ -0,0 +1,129 @@ | |||
/* eslint-disable jsx-a11y/media-has-caption */ | |||
const { h, Component } = require('preact') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will we gradually switch to hooks? If so, might be good to do so with new plugins. Initial bundle size will increase a bit but that's inevitable if we would like to switch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point, converted to hooks.
{hasRecordedAudio && <DiscardButton onDiscard={onDiscardRecordedAudio} i18n={i18n} />} | ||
</div> | ||
|
||
<div className="uppy-Audio-recordingLength"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shouldn't the div be conditional? This will render an empty div.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Needed for the flex layout to work, maybe could be refactored, but I couldn't fit it easily.
/* Audio Oscilloscope | ||
https://github.com/miguelmota/audio-oscilloscope | ||
*/ | ||
module.exports = class AudioOscilloscope { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
are some methods private in here? If so, then we should make them private.
* @returns {string} the formatted seconds (e.g. '1:23' for 1 minute and 23 seconds) | ||
* | ||
*/ | ||
module.exports = function formatSeconds (seconds) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alternatively, use Intl.DateTimeFormat
locale?: AudioLocale | ||
} | ||
|
||
declare class Audio extends UIPlugin<AudioOptions> {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
any methods that should be publicly available through .getPlugin
? If so, then they need to be typed here (or all made #private in the code itself)
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
I like the proposed UI change, but I won’t be able to deliver in time, we can re-visit later, or feel free to pick it up and change anytime. |
| Package | Version | Package | Version | | ------------------------- | ------- | ------------------------- | ------- | | @uppy/angular | 0.2.6 | @uppy/locales | 2.0.4 | | @uppy/audio | 0.2.0 | @uppy/onedrive | 2.0.5 | | @uppy/aws-s3 | 2.0.6 | @uppy/provider-views | 2.0.6 | | @uppy/aws-s3-multipart | 2.2.0 | @uppy/react | 2.1.2 | | @uppy/box | 1.0.5 | @uppy/screen-capture | 2.0.5 | | @uppy/companion | 3.1.2 | @uppy/status-bar | 2.1.2 | | @uppy/companion-client | 2.0.4 | @uppy/store-default | 2.0.3 | | @uppy/core | 2.1.3 | @uppy/thumbnail-generator | 2.0.6 | | @uppy/dashboard | 2.1.2 | @uppy/transloadit | 2.0.5 | | @uppy/drag-drop | 2.0.5 | @uppy/tus | 2.1.2 | | @uppy/dropbox | 2.0.5 | @uppy/url | 2.0.5 | | @uppy/facebook | 2.0.5 | @uppy/utils | 4.0.4 | | @uppy/file-input | 2.0.5 | @uppy/webcam | 2.0.5 | | @uppy/golden-retriever | 2.0.6 | @uppy/xhr-upload | 2.0.6 | | @uppy/google-drive | 2.0.5 | @uppy/zoom | 1.0.5 | | @uppy/image-editor | 1.1.0 | @uppy/robodog | 2.1.4 | | @uppy/informer | 2.0.5 | uppy | 2.3.0 | | @uppy/instagram | 2.0.5 | | | - meta: add release automations (Antoine du Hamel / #3304) - @uppy/dashboard: Save meta fields when opening the image editor (Merlijn Vos / #3339) - @uppy/aws-s3-multipart: Drop `lockedCandidatesForBatch` and mark chunks as busy when preparing (Yegor Yarko / #3342) - @uppy/webcam: fix broken links in `webcam.md` (Antoine du Hamel / #3346) - @uppy/audio: new @uppy/audio plugin for recording with microphone (Artur Paikin / #2976) - build: force use of `@babel/plugin-proposal-optional-chaining` (Antoine du Hamel / #3335) - @uppy/companion: fix deploy Yarn version (Antoine du Hamel / #3327) - @uppy/companion: upgrade aws-sdk (Mikael Finstad / #3334) - @uppy/core: disable loose transpilation for legacy bundle (Antoine du Hamel / #3329) - @uppy/angular: examples: update `angular-example` to Angular v13 (Antoine du Hamel / #3325) - meta: Update BACKLOG.md (Artur Paikin, Merlijn Vos) - meta: Add disableLocalFiles to options summary (Steve Barker / #3323) - meta: Create SECURITY.md (Ziding Zhang / #3052) - @uppy/image-editor: Pass croppedCanvasOptions to getCroppedCanvas (Mohamed Boudra / #3320) - meta: finish `master`->`main` job (Mikael Finstad / #3315) - website: update documents that were out of date (Antoine du Hamel / #3317) - @uppy/status-bar: Status bar error state improvements (Merlijn Vos / #3299) - doc: Fix typo in `docs/drag-drop.md` (Ash Allen / #3319) - website: Update /support and docs about Transloadit-hosted Companion (Artur Paikin / #3243) - @uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/google-drive,@uppy/image-editor,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/url,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Refactor locale scripts & generate types and docs (Merlijn Vos / #3276) - @uppy/companion: Remove references of incorrect `options` argument for `companion.socket` (Mikael Finstad / #3307) - @uppy/companion: Upgrade linting to 2.0.0-0 (Kevin van Zonneveld / #3280)
| Package | Version | Package | Version | | ------------------------- | ------- | ------------------------- | ------- | | @uppy/angular | 0.2.6 | @uppy/locales | 2.0.4 | | @uppy/audio | 0.2.0 | @uppy/onedrive | 2.0.5 | | @uppy/aws-s3 | 2.0.6 | @uppy/provider-views | 2.0.6 | | @uppy/aws-s3-multipart | 2.2.0 | @uppy/react | 2.1.2 | | @uppy/box | 1.0.5 | @uppy/screen-capture | 2.0.5 | | @uppy/companion | 3.1.2 | @uppy/status-bar | 2.1.2 | | @uppy/companion-client | 2.0.4 | @uppy/store-default | 2.0.3 | | @uppy/core | 2.1.3 | @uppy/thumbnail-generator | 2.0.6 | | @uppy/dashboard | 2.1.2 | @uppy/transloadit | 2.0.5 | | @uppy/drag-drop | 2.0.5 | @uppy/tus | 2.1.2 | | @uppy/dropbox | 2.0.5 | @uppy/url | 2.0.5 | | @uppy/facebook | 2.0.5 | @uppy/utils | 4.0.4 | | @uppy/file-input | 2.0.5 | @uppy/webcam | 2.0.5 | | @uppy/golden-retriever | 2.0.6 | @uppy/xhr-upload | 2.0.6 | | @uppy/google-drive | 2.0.5 | @uppy/zoom | 1.0.5 | | @uppy/image-editor | 1.1.0 | @uppy/robodog | 2.1.4 | | @uppy/informer | 2.0.5 | uppy | 2.3.0 | | @uppy/instagram | 2.0.5 | | | - meta: add release automations (Antoine du Hamel / transloadit#3304) - @uppy/dashboard: Save meta fields when opening the image editor (Merlijn Vos / transloadit#3339) - @uppy/aws-s3-multipart: Drop `lockedCandidatesForBatch` and mark chunks as busy when preparing (Yegor Yarko / transloadit#3342) - @uppy/webcam: fix broken links in `webcam.md` (Antoine du Hamel / transloadit#3346) - @uppy/audio: new @uppy/audio plugin for recording with microphone (Artur Paikin / transloadit#2976) - build: force use of `@babel/plugin-proposal-optional-chaining` (Antoine du Hamel / transloadit#3335) - @uppy/companion: fix deploy Yarn version (Antoine du Hamel / transloadit#3327) - @uppy/companion: upgrade aws-sdk (Mikael Finstad / transloadit#3334) - @uppy/core: disable loose transpilation for legacy bundle (Antoine du Hamel / transloadit#3329) - @uppy/angular: examples: update `angular-example` to Angular v13 (Antoine du Hamel / transloadit#3325) - meta: Update BACKLOG.md (Artur Paikin, Merlijn Vos) - meta: Add disableLocalFiles to options summary (Steve Barker / transloadit#3323) - meta: Create SECURITY.md (Ziding Zhang / transloadit#3052) - @uppy/image-editor: Pass croppedCanvasOptions to getCroppedCanvas (Mohamed Boudra / transloadit#3320) - meta: finish `master`->`main` job (Mikael Finstad / transloadit#3315) - website: update documents that were out of date (Antoine du Hamel / transloadit#3317) - @uppy/status-bar: Status bar error state improvements (Merlijn Vos / transloadit#3299) - doc: Fix typo in `docs/drag-drop.md` (Ash Allen / transloadit#3319) - website: Update /support and docs about Transloadit-hosted Companion (Artur Paikin / transloadit#3243) - @uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/google-drive,@uppy/image-editor,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/url,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Refactor locale scripts & generate types and docs (Merlijn Vos / transloadit#3276) - @uppy/companion: Remove references of incorrect `options` argument for `companion.socket` (Mikael Finstad / transloadit#3307) - @uppy/companion: Upgrade linting to 2.0.0-0 (Kevin van Zonneveld / transloadit#3280)