Voice Message #3598

onurays · 2021-07-01T07:51:20Z

Fixes #29

https://www.figma.com/file/uaWc62Ux2DkZC4OGtAGcNc/Voice-Messages?node-id=546%3A27109

Default state:

When text is not blank:

Voice Message initial state:

Sliding to cancel:

Locking:

Locked:

Playback before sending:

Timeline:

bmarty · 2021-07-01T19:17:48Z

The CI is very unhappy, can you have a look please? Thanks!

bmarty

Just some remarks after a first quick review

vector/src/main/java/im/vector/app/features/home/room/detail/RoomDetailFragment.kt

vector/src/main/java/im/vector/app/features/home/room/detail/RoomDetailViewModel.kt

vector/src/main/res/layout/item_timeline_event_voice_stub.xml

vector/src/main/res/layout/view_voice_message_recorder.xml

vector/src/main/res/values/colors.xml

...r/src/main/java/im/vector/app/features/home/room/detail/composer/VoiceMessageRecorderView.kt

* develop: (286 commits) Fix crash after video call Fix issue on button styles Clean after benoits review Fix warning about implicit type, introduced in Kotlin 1.5.20. "Returning type parameter has been inferred to Nothing implicitly. Please specify type arguments explicitly to hide this warning. Nothing can produce an exception at runtime." Bump kotlin_version from 1.5.10 to 1.5.20 Bump libphonenumber from 8.12.25 to 8.12.26 Fix call invite processed after call is ended because of fastlane mode. Jump to unread: removes unnecessary check which can cause scroll issue Jump to unread: avoid blink when jumping Clean after Benoits review Delete unused drawable to avoid conflict on develop Jump to unread: add towncrier file. Read marker: fix some issues with jump to unread visibility. Stop using ProgressDialog, there is a theme issue with it. It's not maintain by Google since it's deprecated. Force usage of MaterialAlertDialogBuilder to have the same UI effect. We sometimes need to block the UI :/ Reordering Add text style for dialogs Colored dialog button is now handled by the theme Update theme for material dialog and create a destructive variant Reorder buttons Update doc ... # Conflicts: # library/ui-styles/src/main/res/values/theme_dark.xml # library/ui-styles/src/main/res/values/theme_light.xml # vector/build.gradle # vector/src/main/java/im/vector/app/features/home/room/detail/RoomDetailFragment.kt # vector/src/main/java/im/vector/app/features/home/room/detail/RoomDetailViewModel.kt # vector/src/main/java/im/vector/app/features/home/room/detail/composer/TextComposerView.kt # vector/src/main/res/values/strings.xml

bmarty · 2021-07-07T08:51:14Z

gaelledel

TEST BUILD 1.1.12-dev 40101132 / 26th Jul 21 by GD

In record mode, the audio input seem to come from the right where it should come from the left
The media player colours should be updated - I see this is updated for Dark theme, is it the case for the Light theme? Specs in compound here https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=2039%3A26421
For the Background (circle) it should be System colour for both Light and Dark themes. For the icon (e.g: play icon) It should be Secondary for both Light and Dark
Change string "Tap on the wavelength to stop and playback" to --> "Tap on your recording to stop or listen"
On Dark mode, please change the instruction toast background to the Quarternary for better contrast when media players overlap https://www.figma.com/file/uaWc62Ux2DkZC4OGtAGcNc/Voice-Messages?node-id=1313%3A50406

28/07/21 Live testing

Increase the size of the MIC button when users interact with it
On default mode the MIC icon isn't centered. There is too much padding on the left and less padding on the right. Can we correct so we have equal distance padding?

gaelledel · 2021-07-07T09:49:29Z

Reminder

To test Dark mode.
Changed the colour of the dark components so it is mapped with the light theme components. They are here https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=2039%3A26421

library/ui-styles/src/main/res/values/styles_voice_message.xml

...d/src/main/java/org/matrix/android/sdk/api/session/room/model/message/MessageAudioContent.kt

...android/src/main/java/org/matrix/android/sdk/internal/crypto/model/rest/AudioWaveformInfo.kt

...oid/src/main/java/org/matrix/android/sdk/internal/session/room/send/LocalEchoEventFactory.kt

multipicker/src/main/java/im/vector/lib/multipicker/utils/ContentResolverUtil.kt

vector/build.gradle

bmarty

Please see my comments

bmarty · 2021-07-07T10:22:57Z

Rendering in the timeline of the wave form:

EW

EA

There is something to check here (EDIT: OK, fixed)

bmarty · 2021-07-07T10:24:25Z

When receiving a voice message, the notification could be improved. Now I see:

Derad6709 · 2021-07-14T01:25:00Z

And one small remark: I think it will be possible to select headphones mic or device mic I want to record the audio.
Thanks :)

fbruetting · 2021-07-16T10:02:11Z

While you're at it: In WhatsApp if you play and pause a voice message, the position gets moved back by one second - so when you continue, you notice where you paused. That's very nice, would be cool if you could add this, too! 😎

Now use limit for distances

Still a pb when Mic is on, margins are not correct

bmarty · 2021-07-20T08:41:08Z

To be converted to an issue if not done for the release

The overhead added by the FFMpeg lib seems to be 10Mb. We could probably try to build the library again by removing what is not used to reduce this overhead. iOS team is looking at this point too.

XayOn · 2021-07-25T10:15:20Z

I've been testing this branch, and I found a usability bug.
Whenever you go to home screen and back to the app, with text already written, it loads the "mic" icon... and as it has text, it loads the normal send button too, leaving the app as:

nadonomy · 2021-07-26T17:41:18Z

Some issues from testing, can share screenshots if useful:

Red dot next to timer is misaligned, its a couple of px too high.
Sliding left to cancel doesn't succeed gracefully. The UI just kind of transitions underneath you abruptly with no motion.
Sliding up to lock also doesn't succeed gracefully. We need some kind of better feedback, and nicer transitions between states, when completing these two actions.
Sliding up to lock UI is misaligned. The background/sliding elements should be horizontally aligned to the button being slided.
It's way too easy for a slide to cancel to not succeed. If you record a message, slide/flick the button and release you'd expect it to cancel, but it instead sends. Considering the failure mode is sending a voice message you don't want to, we should make this way more generous.
Sliding to cancel doesn't clear whatever floating tooltip is being shown (e.g. 'Hold to record, release to send') so it hangs around contextless until it times out.

DoM1niC · 2021-07-27T14:51:30Z

VoiceRecordBtn overlap after someone is typing.... with the SendBtn :( @onurays

Sry @XayOn Posted already this issue 😅

bmarty · 2021-07-29T12:03:19Z

vector/src/main/java/im/vector/app/features/home/room/detail/RoomDetailFragment.kt

+                    roomDetailViewModel.handle(RoomDetailAction.EnterEditMode(action.eventId, views.composerLayout.text.toString()))
+                } else {
+                    requireActivity().toast(R.string.error_voice_message_cannot_reply_or_edit)
+                }
            }
            is EventSharedAction.Quote                      -> {
                roomDetailViewModel.handle(RoomDetailAction.EnterQuoteMode(action.eventId, views.composerLayout.text.toString()))


You should disable this as well

bmarty · 2021-07-29T12:05:47Z

vector/src/main/java/im/vector/app/features/home/room/detail/composer/VoiceMessageHelper.kt

+                            waveform = if (amplitudeList.size < 50) {
+                                amplitudeList
+                            } else {
+                                amplitudeList.chunked(amplitudeList.size / 50) { items -> items.maxOrNull() ?: 0 }


So the limit of waveform list size on the SDK can be removed / commented out?

pvagner · 2021-07-29T20:30:58Z

Hello,
I have got a chance to test this in action and I am afraid about accessibility support:

In the timeline play button is not labelled. Play icon is swapped with the pause icon depending on the player state but accessibility description is not reflecting the playback status.
Record button aka microphone icon is hidden from the view when recording or playing back the audio, however accessibility services can still navigate to that icon.
When in locked mode, the waveform visualization is useless to visually disabled people, perhaps it should have content description saying stop recording.
When holding down the microphone icon to start recording I can feel the vibration signalling the recording has been started. Still holding down that icon and swiping to the left to cancel the recording I can't feel the vibration.
Edit: Both hold and send mode as well as lock mode are useable with the screen reader once content description related issues are resolved.
Thanks to everyone working on this, this sounds amazing!

fbruetting · 2021-07-30T08:48:43Z

I never programmed Android, but a general question: A lot of the above mentioned issues sound like you don't use a state machine - is there a reason for this? I'm pretty shure that would make it much easier and less error prone. 🤔

bmarty

LGTM, remaining issues will be handled in the coming days. Good work!

Onuray Sahin added 4 commits June 17, 2021 16:17

Voice message UI initial implementation.

69350ef

Send voice message.

cb96886

Voice message recording view implementations.

5676226

Voice message playback implementation.

9d48b39

bmarty reviewed Jul 1, 2021

View reviewed changes

Onuray Sahin added 4 commits July 6, 2021 13:17

Fix visibility of microphone icon.

6cb53c9

Put voice message preference under labs.

5856e56

Lint fix.

8452f75

onurays requested a review from gaelledel July 7, 2021 07:51

Lint fixes.

b1c7cb3

Lint fix.

a9beded

gaelledel suggested changes Jul 7, 2021

View reviewed changes