Add waveform to voice message preview UI (#1661)

* Add waveform to preview UI

* Update screenshots

* Make random waveform function deterministic

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/media/FakeWaveformFactory.kt

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components.media
+
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toPersistentList
+import kotlin.random.Random
+
+object FakeWaveformFactory {
+    /**
+     * Generate a waveform for testing purposes.
+     *
+     * The waveform is a list of floats between 0 and 1.
+     *
+     * @param length The length of the waveform.
+     */
+    fun createFakeWaveform(length: Int = 1000): ImmutableList<Float> {
+        val random = Random(seed = 2)
+        return List(length) { random.nextFloat() }
+            .toPersistentList()
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/media/WaveformPlaybackView.kt

@@ -54,6 +54,21 @@ import kotlin.math.roundToInt
 
 private const val DEFAULT_GRAPHICS_LAYER_ALPHA: Float = 0.99F
 
+/**
+ * A view that displays a waveform and a cursor to indicate the current playback progress.
+ *
+ * @param playbackProgress The current playback progress, between 0 and 1.
+ * @param showCursor Whether to show the cursor or not.
+ * @param waveform The waveform to display. Use [FakeWaveformFactory] to generate a fake waveform.
+ * @param modifier The modifier to be applied to the view.
+ * @param onSeek Callback when the user seeks the waveform. Called with a value between 0 and 1.
+ * @param brush The brush to use to draw the waveform.
+ * @param progressBrush The brush to use to draw the progress.
+ * @param cursorBrush The brush to use to draw the cursor.
+ * @param lineWidth The width of the waveform lines.
+ * @param linePadding The padding between waveform lines.
+ * @param minimumGraphAmplitude The minimum amplitude to display, regardless of waveform data.
+ */
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun WaveformPlaybackView(
@@ -78,7 +93,7 @@ fun WaveformPlaybackView(
         }
     }
     val progressAnimated = animateFloatAsState(targetValue = progress, label = "progressAnimation")
-    val amplitudeDisplayCount by remember(canvasSize) {
+    val amplitudeDisplayCount by remember(canvasSize, lineWidth, linePadding) {
         derivedStateOf {
             (canvasSize.width.value / (lineWidth.value + linePadding.value)).toInt()
         }