Improve rendering of voice messages in the timeline in large displays (…

…#2199) * Improve rendering of voice messages in the timeline in large displays --------- Co-authored-by: ElementBot <[email protected]>
element-hq · Jan 9, 2024 · 13e8e95 · 13e8e95
1 parent 2bdf2c0
commit 13e8e95
Show file tree

Hide file tree

Showing 31 changed files with 80 additions and 76 deletions.
diff --git a/changelog.d/2156.bugfix b/changelog.d/2156.bugfix
@@ -0,0 +1 @@
+Improve rendering of voice messages in the timeline in large displays
diff --git a/...element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt b/...element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt
@@ -110,9 +110,7 @@ fun TimelineItemVoiceView(
             showCursor = state.showCursor,
             playbackProgress = state.progress,
             waveform = content.waveform,
-            modifier = Modifier
-                .height(34.dp)
-                .weight(1f),
+            modifier = Modifier.height(34.dp),
             seekEnabled = !context.isScreenReaderEnabled(),
             onSeek = { state.eventSink(VoiceMessageEvents.Seek(it)) },
         )

diff --git a/...io/element/android/libraries/designsystem/components/media/DrawScopeWaveformExtensions.kt b/...io/element/android/libraries/designsystem/components/media/DrawScopeWaveformExtensions.kt
@@ -23,23 +23,22 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableList
 import kotlin.math.max
 
 fun DrawScope.drawWaveform(
     waveformData: ImmutableList<Float>,
-    canvasSize: DpSize,
+    canvasSizePx: Size,
     brush: Brush,
     minimumGraphAmplitude: Float = 2F,
     lineWidth: Dp = 2.dp,
     linePadding: Dp = 2.dp,
 ) {
-    val centerY = canvasSize.height.toPx() / 2
+    val centerY = canvasSizePx.height / 2
     val cornerRadius = lineWidth / 2
     waveformData.forEachIndexed { index, amplitude ->
-        val drawingAmplitude = max(minimumGraphAmplitude, amplitude * (canvasSize.height.toPx() - 2))
+        val drawingAmplitude = max(minimumGraphAmplitude, amplitude * (canvasSizePx.height - 2))
         drawRoundRect(
             brush = brush,
             topLeft = Offset(

diff --git a/...kotlin/io/element/android/libraries/designsystem/components/media/WaveformPlaybackView.kt b/...kotlin/io/element/android/libraries/designsystem/components/media/WaveformPlaybackView.kt
@@ -40,12 +40,13 @@ import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.RequestDisallowInterceptTouchEvent
 import androidx.compose.ui.input.pointer.pointerInteropFilter
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.compound.theme.ElementTheme
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toPersistentList
@@ -58,7 +59,7 @@ private const val DEFAULT_GRAPHICS_LAYER_ALPHA: Float = 0.99F
  *
  * @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 waveform The waveform to display. Use [createFakeWaveform] to generate a fake waveform.
  * @param onSeek Callback when the user seeks the waveform. Called with a value between 0 and 1.
  * @param modifier The modifier to be applied to the view.
  * @param seekEnabled Whether the user can seek the waveform or not.
@@ -103,26 +104,30 @@ fun WaveformPlaybackView(
         }
     }
 
+    val density = LocalDensity.current
+    val waveformWidthPx by remember {
+        derivedStateOf { with(density) { normalizedWaveformData.size * (lineWidth + linePadding).roundToPx().toFloat() } }
+    }
+
     val requestDisallowInterceptTouchEvent = remember { RequestDisallowInterceptTouchEvent() }
     Canvas(
         modifier = Modifier
             .fillMaxWidth()
             .graphicsLayer(alpha = DEFAULT_GRAPHICS_LAYER_ALPHA)
             .let {
                 if (!seekEnabled) return@let it
-
                 it.pointerInteropFilter(requestDisallowInterceptTouchEvent = requestDisallowInterceptTouchEvent) { e ->
                     return@pointerInteropFilter when (e.action) {
                         MotionEvent.ACTION_DOWN -> {
-                            if (e.x in 0F..canvasSizePx.width) {
+                            if (e.x in 0F..waveformWidthPx) {
                                 requestDisallowInterceptTouchEvent.invoke(true)
-                                seekProgress.value = e.x / canvasSizePx.width
+                                seekProgress.value = e.x / waveformWidthPx
                                 true
                             } else false
                         }
                         MotionEvent.ACTION_MOVE -> {
-                            if (e.x in 0F..canvasSizePx.width) {
-                                seekProgress.value = e.x / canvasSizePx.width
+                            if (e.x in 0F..waveformWidthPx) {
+                                seekProgress.value = e.x / waveformWidthPx
                             }
                             true
                         }
@@ -140,33 +145,33 @@ fun WaveformPlaybackView(
     ) {
         canvasSize = size.toDpSize()
         canvasSizePx = size
-        val centerY = canvasSize.height.toPx() / 2
         val cornerRadius = lineWidth / 2
+        // Calculate the size of the waveform by summing the width of all the lines and paddings
         drawWaveform(
             waveformData = normalizedWaveformData,
-            canvasSize = canvasSize,
+            canvasSizePx = canvasSizePx,
             brush = brush,
             lineWidth = lineWidth,
             linePadding = linePadding
         )
         drawRect(
             brush = progressBrush,
             size = Size(
-                width = progressAnimated.value * canvasSize.width.toPx(),
-                height = canvasSize.height.toPx()
+                width = progressAnimated.value * waveformWidthPx,
+                height = canvasSizePx.height
             ),
             blendMode = BlendMode.SrcAtop
         )
         if (showCursor || seekProgress.value != null) {
             drawRoundRect(
                 brush = cursorBrush,
                 topLeft = Offset(
-                    x = progressAnimated.value * canvasSize.width.toPx(),
-                    y = centerY - (canvasSize.height.toPx() - 2) / 2
+                    x = progressAnimated.value * waveformWidthPx,
+                    y = 1f
                 ),
                 size = Size(
                     width = lineWidth.toPx(),
-                    height = canvasSize.height.toPx() - 2
+                    height = canvasSizePx.height - 2
                 ),
                 cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx()),
                 style = Fill

diff --git a/.../src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt b/.../src/main/kotlin/io/element/android/libraries/textcomposer/components/LiveWaveformView.kt
@@ -31,6 +31,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.graphicsLayer
@@ -66,7 +67,6 @@ fun LiveWaveformView(
         }
     }
 
-
     Box(contentAlignment = Alignment.CenterEnd,
         modifier = modifier
             .fillMaxWidth()
@@ -79,11 +79,12 @@ fun LiveWaveformView(
                 .graphicsLayer(alpha = DEFAULT_GRAPHICS_LAYER_ALPHA)
                 .then(modifier)
         ) {
-            canvasSize = DpSize(Dp(min(waveformWidth, parentWidth.toFloat())), size.height.toDp())
+            val width = min(waveformWidth, parentWidth.toFloat())
+            canvasSize = DpSize(width.dp, size.height.toDp())
             val countThatFitsWidth = (parentWidth.toFloat() / (lineWidth.toPx() + linePadding.toPx())).toInt()
             drawWaveform(
                 waveformData = levels.takeLast(countThatFitsWidth).toPersistentList(),
-                canvasSize = canvasSize,
+                canvasSizePx = Size(canvasSize.width.toPx(), size.height),
                 brush = brush,
                 lineWidth = lineWidth,
                 linePadding = linePadding,

diff --git a/...iewUnified_null_TimelineItemVoiceViewUnified-Day-46_46_null,NEXUS_5,1.0,en].png b/...iewUnified_null_TimelineItemVoiceViewUnified-Day-46_46_null,NEXUS_5,1.0,en].png
diff --git a/...wUnified_null_TimelineItemVoiceViewUnified-Night-46_47_null,NEXUS_5,1.0,en].png b/...wUnified_null_TimelineItemVoiceViewUnified-Night-46_47_null,NEXUS_5,1.0,en].png
diff --git a/...eItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_11,NEXUS_5,1.0,en].png b/...eItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_11,NEXUS_5,1.0,en].png
diff --git a/...eItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_12,NEXUS_5,1.0,en].png b/...eItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_12,NEXUS_5,1.0,en].png
diff --git a/...eItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_13,NEXUS_5,1.0,en].png b/...eItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_13,NEXUS_5,1.0,en].png
diff --git a/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_2,NEXUS_5,1.0,en].png b/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_2,NEXUS_5,1.0,en].png
diff --git a/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_3,NEXUS_5,1.0,en].png b/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_3,NEXUS_5,1.0,en].png
diff --git a/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_6,NEXUS_5,1.0,en].png b/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_6,NEXUS_5,1.0,en].png
diff --git a/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_7,NEXUS_5,1.0,en].png b/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_7,NEXUS_5,1.0,en].png
diff --git a/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_8,NEXUS_5,1.0,en].png b/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_8,NEXUS_5,1.0,en].png
diff --git a/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_9,NEXUS_5,1.0,en].png b/...neItemVoiceView_null_TimelineItemVoiceView-Day-45_45_null_9,NEXUS_5,1.0,en].png
diff --git a/...temVoiceView_null_TimelineItemVoiceView-Night-45_46_null_11,NEXUS_5,1.0,en].png b/...temVoiceView_null_TimelineItemVoiceView-Night-45_46_null_11,NEXUS_5,1.0,en].png
diff --git a/...temVoiceView_null_TimelineItemVoiceView-Night-45_46_null_12,NEXUS_5,1.0,en].png b/...temVoiceView_null_TimelineItemVoiceView-Night-45_46_null_12,NEXUS_5,1.0,en].png
diff --git a/...temVoiceView_null_TimelineItemVoiceView-Night-45_46_null_13,NEXUS_5,1.0,en].png b/...temVoiceView_null_TimelineItemVoiceView-Night-45_46_null_13,NEXUS_5,1.0,en].png
diff --git a/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_2,NEXUS_5,1.0,en].png b/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_2,NEXUS_5,1.0,en].png
diff --git a/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_3,NEXUS_5,1.0,en].png b/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_3,NEXUS_5,1.0,en].png
diff --git a/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_6,NEXUS_5,1.0,en].png b/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_6,NEXUS_5,1.0,en].png
diff --git a/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_7,NEXUS_5,1.0,en].png b/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_7,NEXUS_5,1.0,en].png
diff --git a/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_8,NEXUS_5,1.0,en].png b/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_8,NEXUS_5,1.0,en].png
diff --git a/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_9,NEXUS_5,1.0,en].png b/...ItemVoiceView_null_TimelineItemVoiceView-Night-45_46_null_9,NEXUS_5,1.0,en].png
diff --git a/...a_WaveformPlaybackView_null_WaveformPlaybackView-Day_0_null,NEXUS_5,1.0,en].png b/...a_WaveformPlaybackView_null_WaveformPlaybackView-Day_0_null,NEXUS_5,1.0,en].png
diff --git a/...WaveformPlaybackView_null_WaveformPlaybackView-Night_1_null,NEXUS_5,1.0,en].png b/...WaveformPlaybackView_null_WaveformPlaybackView-Night_1_null,NEXUS_5,1.0,en].png
diff --git a/...VoiceMessagePreview_null_VoiceMessagePreview-Day-15_16_null,NEXUS_5,1.0,en].png b/...VoiceMessagePreview_null_VoiceMessagePreview-Day-15_16_null,NEXUS_5,1.0,en].png
diff --git a/...iceMessagePreview_null_VoiceMessagePreview-Night-15_17_null,NEXUS_5,1.0,en].png b/...iceMessagePreview_null_VoiceMessagePreview-Night-15_17_null,NEXUS_5,1.0,en].png
diff --git a/...poser_TextComposerVoice_null_TextComposerVoice-Day-4_5_null,NEXUS_5,1.0,en].png b/...poser_TextComposerVoice_null_TextComposerVoice-Day-4_5_null,NEXUS_5,1.0,en].png
diff --git a/...ser_TextComposerVoice_null_TextComposerVoice-Night-4_6_null,NEXUS_5,1.0,en].png b/...ser_TextComposerVoice_null_TextComposerVoice-Night-4_6_null,NEXUS_5,1.0,en].png