audio: new @uppy/audio plugin for recording with microphone #2976

arturi · 2021-06-29T16:09:32Z

…appropriate, improved preview screen

…review screen

This reverts commit f4ec431.

packages/@uppy/audio/src/DiscardButton.js

aduh95 · 2021-11-26T14:05:43Z

packages/@uppy/audio/src/RecordingScreen.js

+                /* eslint-disable-next-line no-return-assign */
+                ref={(audioElement) => (this.audioElement = audioElement)}


Can we get rid of the eslint comment here?

aduh95 · 2021-11-26T14:05:43Z

packages/@uppy/audio/src/RecordingScreen.js

+                /* eslint-disable-next-line no-return-assign */
+                ref={(audioElement) => (this.audioElement = audioElement)}


Can we get rid of the eslint comment here?

packages/@uppy/audio/src/audio-oscilloscope/index.js

packages/@uppy/audio/src/supportsMediaRecorder.js

packages/@uppy/audio/types/index.d.ts

website/src/docs/audio.md

aduh95 · 2021-11-26T14:32:19Z

website/src/docs/audio.md

+
+### `locale: {}`
+
+<!-- eslint-disable no-restricted-globals, no-multiple-empty-lines -->


Is this added by the locales tool?

Murderlon

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:

Murderlon · 2021-11-29T10:24:09Z

packages/@uppy/audio/src/RecordingScreen.js

@@ -0,0 +1,129 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+const { h, Component } = require('preact')


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.

Good point, converted to hooks.

Murderlon · 2021-11-29T10:25:04Z

packages/@uppy/audio/src/RecordingScreen.js

+            {hasRecordedAudio && <DiscardButton onDiscard={onDiscardRecordedAudio} i18n={i18n} />}
+          </div>
+
+          <div className="uppy-Audio-recordingLength">


shouldn't the div be conditional? This will render an empty div.

Needed for the flex layout to work, maybe could be refactored, but I couldn't fit it easily.

Murderlon · 2021-11-29T10:26:45Z

packages/@uppy/audio/src/audio-oscilloscope/index.js

+/* Audio Oscilloscope
+  https://github.com/miguelmota/audio-oscilloscope
+*/
+module.exports = class AudioOscilloscope {


are some methods private in here? If so, then we should make them private.

Murderlon · 2021-11-29T10:28:46Z

packages/@uppy/audio/src/formatSeconds.js

+ * @returns {string} the formatted seconds (e.g. '1:23' for 1 minute and 23 seconds)
+ *
+ */
+module.exports = function formatSeconds (seconds) {


Alternatively, use Intl.DateTimeFormat

packages/@uppy/audio/src/style.scss

Murderlon · 2021-11-29T10:32:02Z

packages/@uppy/audio/types/index.d.ts

+    locale?: AudioLocale
+}
+
+declare class Audio extends UIPlugin<AudioOptions> {}


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>

packages/@uppy/audio/src/index.js

arturi · 2021-12-06T17:28:12Z

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)

arturi added 9 commits June 29, 2021 17:06

add Audio plugin

893f921

Merge branch 'main' into audio-record

d13b3ba

add audio-oscilloscope to visualize the recording

9f2c578

refactor: rename everything to Audio, use oscilloscope, re-init when …

3f64c9e

…appropriate, improved preview screen

tweak styles

1d1dcfc

add @uppy/audio to the Uppy bundle

6e2a4eb

update Readme and package.json

4d81aef

add docs, update locales, add website example

12adb13

webcam plugin also shouldn’t show recording length counter on video p…

52982ab

…review screen

arturi marked this pull request as ready for review November 25, 2021 23:54

arturi added 5 commits November 25, 2021 23:57

update package.json and yarn.lock

b9d3f47

update types

48a5bd1

update locale

79649cd

fix locale issues

9c08dd5

remove leftover webcam test

a0de4e7

arturi requested review from Murderlon, kvz and aduh95 November 26, 2021 11:38

arturi added 4 commits November 26, 2021 11:40

Merge branch 'main' into audio-record

f0fc9a4

Delete index.test-d.ts

f4ec431

Revert "Delete index.test-d.ts"

424e4f9

This reverts commit f4ec431.

fix lint and type tests

5cd6a34

aduh95 reviewed Nov 26, 2021

View reviewed changes

Murderlon reviewed Nov 29, 2021

View reviewed changes

arturi and others added 6 commits November 29, 2021 22:01

Update website/src/docs/audio.md

c66adba

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/audio-oscilloscope/index.js

a091dba

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/DiscardButton.js

f7f28fe

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/audio-oscilloscope/index.js

ebd123f

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/supportsMediaRecorder.js

de2e024

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update website/src/docs/audio.md

4d4d5ec

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

arturi and others added 7 commits November 30, 2021 19:40

Update packages/@uppy/audio/types/index.d.ts

677fea4

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/index.js

deb2c07

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/index.js

b81cbe4

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Update packages/@uppy/audio/src/index.js

b5bf3a6

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

remove unused method

bb02c01

remove unused commented declarations

9857ffd

make all methods private

4a7be8c

aduh95 reviewed Dec 3, 2021

View reviewed changes

packages/@uppy/audio/src/index.js Outdated Show resolved Hide resolved

arturi added 4 commits December 3, 2021 13:48

Merge branch 'main' into audio-record

3d35b89

convert class component to hooks

b44136d

more private

a4d3d75

fix lint

77a960d

arturi merged commit d202a8e into main Dec 6, 2021

arturi deleted the audio-record branch December 6, 2021 17:06

github-actions bot mentioned this pull request Dec 7, 2021

Release: uppy@2.3.0 #3348

Merged

snyk-bot mentioned this pull request Dec 8, 2021

[Snyk] Security upgrade @uppy/companion from 0.17.5 to 3.1.2 H4NG-MAN/uppy#87

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

audio: new @uppy/audio plugin for recording with microphone #2976

audio: new @uppy/audio plugin for recording with microphone #2976

arturi commented Jun 29, 2021 •

edited

aduh95 Nov 26, 2021

aduh95 Nov 26, 2021

aduh95 Nov 26, 2021

Murderlon Nov 29, 2021

Murderlon left a comment

Murderlon Nov 29, 2021

arturi Dec 6, 2021

Murderlon Nov 29, 2021

arturi Nov 29, 2021

Murderlon Nov 29, 2021

Murderlon Nov 29, 2021

Murderlon Nov 29, 2021

arturi commented Dec 6, 2021

		/* eslint-disable-next-line no-return-assign */
		ref={(audioElement) => (this.audioElement = audioElement)}


		### `locale: {}`

		<!-- eslint-disable no-restricted-globals, no-multiple-empty-lines -->

		@@ -0,0 +1,129 @@
		/* eslint-disable jsx-a11y/media-has-caption */
		const { h, Component } = require('preact')

audio: new @uppy/audio plugin for recording with microphone #2976

audio: new @uppy/audio plugin for recording with microphone #2976

Conversation

arturi commented Jun 29, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Murderlon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arturi commented Dec 6, 2021

arturi commented Jun 29, 2021 •

edited