Waveform SeekBar for Voice Messages #3202

rapterjet2004 · 2023-07-24T21:20:12Z

Signed-off-by: Julius Linus [email protected]

All the other messenger apps have a custom component when viewing voice messages. It creatively represents the message's audio data in the form of an audio sampling graph.

Here are some examples:

This PR introduces two new files

AudioUtils, for processing raw audio using android's low level APIs, for more information read here MediaCodec documentation
WaveformSeekbar component, which takes a FloatArray of input data and displays it in a waveform like fashion. Under the hood it's just an AppCompactSeekbar with the onDraw method overridden.

🖼️ Screenshots

Current demo

waveform-seekbar-demo-5.webm

🚧 TODO

🏁 Checklist

⛑️ Tests (unit and/or integration) are included or not needed
🔖 Capability is checked or not needed
🔙 Backport requests are created or not needed: /backport to stable-xx.x
📅 Milestone is set
🌸 PR title is meaningful (if it should be in the changelog: is it meaningful to users?)

rapterjet2004 · 2023-07-27T17:56:38Z

@AndyScherzinger

Currently, to process a voice message takes a non-trivial time of about 1-5 seconds, at least in my emulator. I didn't test it with large audio files, nor on a physical device, but I assume it might take some time. To work around this, I have a time limit of 5 seconds, else canceling the process and just showing a regular SeekBar.

nickvergessen · 2023-07-27T20:23:36Z

app/src/main/java/com/nextcloud/talk/ui/WaveformSeekBar.kt

+
+    companion object {
+        private val TAG: String? = WaveformSeekBar::class.simpleName
+        private const val DEFAULT_BAR_WIDTH: Int = 5


If we change this to 2, we get many more "bars"? I would prefer to have much more, on your video it looks like we have 20 bars while the telegram screenshot is around 50 or something?

No problem, how's this?

I would suggest slightly wider and also higher -comparing it to the seekbar's "nob" if that is doable

I made MAX_HEIGHT_DIVISOR: Float = 10f to MAX_HEIGHT_DIVISOR: Float = 6.5f

AndyScherzinger · 2023-07-31T19:13:32Z

@rapterjet2004 can you

make the bars slightly wider (1->2)
make the gap between the bars slightly larger
put the time below the wave, else it resizes back and forth if you move between voice messages
make. The bars a bit higher, I think 4.0f works well.

rapterjet2004 · 2023-07-31T21:24:43Z

@AndyScherzinger
How's this?

val barGap: Float = (usableWidth - waveData.size * DEFAULT_BAR_WIDTH) / (waveData.size - 1).toFloat()
The barGap is calculated with the containers width and the default bar width, so I changed the code to have outcoming messages have 38 bars, and incoming messages to have 50. Both are constants in ChatActivity.

AndyScherzinger · 2023-08-01T07:03:34Z

@rapterjet2004 looks good 👍 Nice polishing. I tend to say let's put the voice message time below the bar at the end so it finds its place between the bar and the message timestamp. Having it next to the message timestamp kind of links it to it while it is related to the voice message.

Then I think we are good to go. Might need to optimize the colors in the future to ensure the contrast is high enough between the 2 bar colors.

rapterjet2004 · 2023-08-01T15:26:55Z

@AndyScherzinger
I tried to put it underneath, but that made the entire chat message grow, which sometimes overlapped others. So I copied Telegram's approach instead and kept it close to the play button.

- Created AudioUtils for processing audio messages - Created Waveform Seekbar, for visualizing a FloatArray - Time limit of about 5 seconds, else shows regular seekbar - Also made mediaPlayer smoother - Fixed time discontinuity bug when playing voice messages, but only on API 28 or higher Signed-off-by: Julius Linus <[email protected]>

Signed-off-by: rapterjet2004 <[email protected]>

github-actions · 2023-08-01T17:54:01Z

APK file: https://www.kaminsky.me/nc-dev/android-artifacts/3202-talk.apk

To test this change/fix you can simply download above APK file and install and test it in parallel to your existing Nextcloud Talk app.

AndyScherzinger · 2023-08-02T13:31:39Z

Merged to not keep it open for longer, since it works fine 👍 Really nice work! 🎉

@rapterjet2004 could you maybe do some additional polishing:

larger gap between the bars (double or triple of the current one I would say)
center the time below the play/pause button
apply same color to time as the play/pause button
apply same text size to play time as the message timestamp

AndyScherzinger · 2023-08-02T13:34:15Z

I suspect the issue might be that the gaps between the bars and the bars are calculated in code without using/respecting device-resolutions:

So this is from a OnePlus 9Pro on a 6inch display, so the gaps are really tiny compared to your screenshots

github-actions · 2024-04-03T02:01:14Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

rapterjet2004 added the 2. developing Work in progress label Jul 24, 2023

rapterjet2004 self-assigned this Jul 24, 2023

AndyScherzinger added enhancement New feature or request design Related to the design labels Jul 25, 2023

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from f867e79 to 94ced56 Compare July 25, 2023 19:14

AndyScherzinger added this to the 17.1.0 milestone Jul 27, 2023

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from 94ced56 to bd157eb Compare July 27, 2023 17:17

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from bd157eb to 851b5b7 Compare July 27, 2023 19:28

nickvergessen reviewed Jul 27, 2023

View reviewed changes

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from 1cd1e4d to d556dd1 Compare July 28, 2023 19:09

rapterjet2004 added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Jul 28, 2023

rapterjet2004 marked this pull request as ready for review July 28, 2023 19:39

rapterjet2004 requested a review from AndyScherzinger July 28, 2023 19:59

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from 5e09eae to 9e32c1f Compare July 31, 2023 16:09

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from f2bb3b0 to e595e64 Compare August 1, 2023 15:23

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from e595e64 to 44130a7 Compare August 1, 2023 15:31

rapterjet2004 force-pushed the seekbar-waveform-for-audio-messages branch from 44130a7 to 2430f72 Compare August 1, 2023 17:35

linter errors

347d489

Signed-off-by: rapterjet2004 <[email protected]>

AndyScherzinger merged commit 3ab4d99 into master Aug 2, 2023
13 of 15 checks passed

delete-merged-branch bot deleted the seekbar-waveform-for-audio-messages branch August 2, 2023 13:29

rapterjet2004 mentioned this pull request Aug 2, 2023

Follow up fixes for the Waveform SeekBar #3234

Merged

5 tasks

github-actions bot added the feedback-requested label Apr 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Waveform SeekBar for Voice Messages #3202

Waveform SeekBar for Voice Messages #3202

rapterjet2004 commented Jul 24, 2023 •

edited

Loading

rapterjet2004 commented Jul 27, 2023 •

edited

Loading

nickvergessen Jul 27, 2023

rapterjet2004 Jul 27, 2023 •

edited

Loading

AndyScherzinger Jul 28, 2023

rapterjet2004 Jul 28, 2023

AndyScherzinger commented Jul 31, 2023 •

edited

Loading

rapterjet2004 commented Jul 31, 2023 •

edited

Loading

AndyScherzinger commented Aug 1, 2023

rapterjet2004 commented Aug 1, 2023 •

edited

Loading

github-actions bot commented Aug 1, 2023

AndyScherzinger commented Aug 2, 2023

AndyScherzinger commented Aug 2, 2023 •

edited

Loading

github-actions bot commented Apr 3, 2024

Waveform SeekBar for Voice Messages #3202

Waveform SeekBar for Voice Messages #3202

Conversation

rapterjet2004 commented Jul 24, 2023 • edited Loading

🖼️ Screenshots

🚧 TODO

🏁 Checklist

rapterjet2004 commented Jul 27, 2023 • edited Loading

nickvergessen Jul 27, 2023

Choose a reason for hiding this comment

rapterjet2004 Jul 27, 2023 • edited Loading

Choose a reason for hiding this comment

AndyScherzinger Jul 28, 2023

Choose a reason for hiding this comment

rapterjet2004 Jul 28, 2023

Choose a reason for hiding this comment

AndyScherzinger commented Jul 31, 2023 • edited Loading

rapterjet2004 commented Jul 31, 2023 • edited Loading

AndyScherzinger commented Aug 1, 2023

rapterjet2004 commented Aug 1, 2023 • edited Loading

github-actions bot commented Aug 1, 2023

AndyScherzinger commented Aug 2, 2023

AndyScherzinger commented Aug 2, 2023 • edited Loading

github-actions bot commented Apr 3, 2024

rapterjet2004 commented Jul 24, 2023 •

edited

Loading

rapterjet2004 commented Jul 27, 2023 •

edited

Loading

rapterjet2004 Jul 27, 2023 •

edited

Loading

AndyScherzinger commented Jul 31, 2023 •

edited

Loading

rapterjet2004 commented Jul 31, 2023 •

edited

Loading

rapterjet2004 commented Aug 1, 2023 •

edited

Loading

AndyScherzinger commented Aug 2, 2023 •

edited

Loading