Polish for media-send

feature/media-send/src/main/java/org/signal/mediasend/screens/MediaSendMetrics.kt

@@ -13,6 +13,7 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 
@@ -23,6 +24,8 @@ object MediaSendMetrics {
   val ControlEnterTransition: EnterTransition = fadeIn()
   val ControlExitTransition: ExitTransition = fadeOut()
 
+  val BottomBarMaxWidth: Dp = 624.dp
+
   /**
    * For the bottom-most control of a bottom-aligned stack: the control slides off the bottom edge while giving up its
    * layout space at the same rate, so everything above it slides along with it as a unit.

feature/media-send/src/main/java/org/signal/mediasend/screens/edit/MediaEditScreen.kt

@@ -376,7 +376,7 @@ internal fun MediaEditScreen(
           onEvent = onEvent,
           onNextClick = { onEvent(MediaEditScreenEvents.NextClick) },
           modifier = Modifier
-            .widthIn(max = 624.dp)
+            .widthIn(max = MediaSendMetrics.BottomBarMaxWidth)
             .padding(horizontal = 16.dp)
             // Own padding rather than the stack's arrangement so the gap collapses along with the slide.
             .padding(top = 20.dp, bottom = 16.dp)
@@ -521,7 +521,9 @@ private fun VideoTrimTimeline(
 
   Column(
     horizontalAlignment = Alignment.End,
-    modifier = Modifier.fillMaxWidth()
+    modifier = Modifier
+      .widthIn(max = MediaSendMetrics.BottomBarMaxWidth)
+      .fillMaxWidth()
   ) {
     VideoTrimBar(
       videoUri = videoUri,

feature/media-send/src/main/java/org/signal/mediasend/screens/edit/MediaEditorToolbar.kt

@@ -8,6 +8,7 @@ package org.signal.mediasend.screens.edit
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -49,6 +50,8 @@ internal fun MediaEditorToolbar(
     Row(modifier = modifier.height(48.dp)) {
       leading()
 
+      Spacer(modifier = Modifier.weight(1f))
+
       Row(
         modifier = Modifier
           .fillMaxHeight()
@@ -57,11 +60,15 @@ internal fun MediaEditorToolbar(
         content()
       }
 
+      Spacer(modifier = Modifier.weight(1f))
+
       trailing()
     }
   } else {
     Column(modifier = modifier.width(48.dp)) {
-      leading()
+      trailing()
+
+      Spacer(modifier = Modifier.size(16.dp))
 
       Column(
         modifier = Modifier
@@ -71,7 +78,9 @@ internal fun MediaEditorToolbar(
         content()
       }
 
-      trailing()
+      Spacer(modifier = Modifier.size(16.dp))
+
+      leading()
     }
   }
 }

feature/media-send/src/main/java/org/signal/mediasend/screens/edit/image/ImageEditorClearAllButton.kt

@@ -5,6 +5,8 @@
 
 package org.signal.mediasend.screens.edit.image
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -15,7 +17,6 @@ import androidx.compose.ui.res.stringResource
 import org.signal.core.ui.compose.Buttons
 import org.signal.core.ui.compose.DayNightPreviews
 import org.signal.core.ui.compose.Previews
-import org.signal.core.ui.compose.theme.SignalTheme
 import org.signal.imageeditor.core.model.EditorModel
 import org.signal.mediasend.R
 import org.signal.mediasend.screens.edit.ImageController
@@ -35,7 +36,7 @@ internal fun ImageEditorClearAllButton(
   ) {
     Buttons.MediumTonal(
       colors = ButtonDefaults.buttonColors(
-        containerColor = SignalTheme.colors.colorSurface5,
+        containerColor = MaterialTheme.colorScheme.surfaceVariant,
         contentColor = MaterialTheme.colorScheme.onSurface
       ),
       onClick = {
@@ -51,10 +52,12 @@ internal fun ImageEditorClearAllButton(
 @Composable
 private fun ImageEditorClearAllButtonPreview() {
   Previews.Preview {
-    ImageEditorClearAllButton(
-      imageEditorController = remember { ImageController(EditorModel.create(0x0)).apply { enterDrawMode() } },
-      isDragging = false,
-      canUndo = true
-    )
+    Box(modifier = Modifier.fillMaxSize()) {
+      ImageEditorClearAllButton(
+        imageEditorController = remember { ImageController(EditorModel.create(0x0)).apply { enterDrawMode() } },
+        isDragging = false,
+        canUndo = true
+      )
+    }
   }
 }

feature/media-send/src/main/java/org/signal/mediasend/screens/edit/image/ImageEditorToolbar.kt

@@ -6,6 +6,8 @@
 package org.signal.mediasend.screens.edit.image
 
 import androidx.compose.animation.Crossfade
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -104,10 +106,10 @@ private fun ImageEditorDrawStateToolbar(
   MediaEditorToolbar(
     modifier = modifier,
     leading = {
-      CommitButton(imageEditorController)
+      DiscardButton(imageEditorController)
     },
     trailing = {
-      DiscardButton(imageEditorController)
+      CommitButton(imageEditorController)
     }
   ) {
     ImageEditorToggleButton(
@@ -161,10 +163,10 @@ private fun ImageEditorCropAndResizeToolbar(
   MediaEditorToolbar(
     modifier = modifier,
     leading = {
-      CommitButton(imageEditorController)
+      DiscardButton(imageEditorController)
     },
     trailing = {
-      DiscardButton(imageEditorController)
+      CommitButton(imageEditorController)
     }
   ) {
     MediaEditorToolbarButton(
@@ -285,14 +287,16 @@ private fun ImageEditorToggleButton(
 @Composable
 private fun ImageEditorNoneStateToolbarPreview() {
   Previews.Preview {
-    ImageEditorNoneStateToolbar(
-      imageEditorController = remember {
-        ImageController(EditorModel.create(0))
-      },
-      state = rememberPreviewState(),
-      editorState = remember { EditorState.Image(EditorModel.create(0)) },
-      onEvent = {}
-    )
+    Box(modifier = Modifier.fillMaxSize()) {
+      ImageEditorNoneStateToolbar(
+        imageEditorController = remember {
+          ImageController(EditorModel.create(0))
+        },
+        state = rememberPreviewState(),
+        editorState = remember { EditorState.Image(EditorModel.create(0)) },
+        onEvent = {}
+      )
+    }
   }
 }
 
@@ -303,14 +307,16 @@ private fun ImageEditorNoneStateToolbarPreview() {
 @Composable
 private fun ImageEditorDrawStateToolbarPreview() {
   Previews.Preview {
-    ImageEditorDrawStateToolbar(
-      imageEditorController = remember {
-        ImageController(EditorModel.create(0)).apply {
-          enterDrawMode()
-        }
-      },
-      onEvent = {}
-    )
+    Box(modifier = Modifier.fillMaxSize()) {
+      ImageEditorDrawStateToolbar(
+        imageEditorController = remember {
+          ImageController(EditorModel.create(0)).apply {
+            enterDrawMode()
+          }
+        },
+        onEvent = {}
+      )
+    }
   }
 }
 
@@ -321,13 +327,15 @@ private fun ImageEditorDrawStateToolbarPreview() {
 @Composable
 private fun ImageEditorCropAndResizeToolbarPreview() {
   Previews.Preview {
-    ImageEditorCropAndResizeToolbar(
-      imageEditorController = remember {
-        ImageController(EditorModel.create(0)).apply {
-          enterCropMode()
+    Box(modifier = Modifier.fillMaxSize()) {
+      ImageEditorCropAndResizeToolbar(
+        imageEditorController = remember {
+          ImageController(EditorModel.create(0)).apply {
+            enterCropMode()
+          }
         }
-      }
-    )
+      )
+    }
   }
 }
 

feature/media-send/src/main/java/org/signal/mediasend/screens/edit/image/ImageEditorUndoRedoButtons.kt

@@ -6,10 +6,13 @@
 package org.signal.mediasend.screens.edit.image
 
 import androidx.compose.foundation.layout.Arrangement.Absolute.spacedBy
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -18,7 +21,6 @@ import androidx.compose.ui.unit.dp
 import org.signal.core.ui.compose.DayNightPreviews
 import org.signal.core.ui.compose.Previews
 import org.signal.core.ui.compose.SignalIcons
-import org.signal.core.ui.compose.theme.SignalTheme
 import org.signal.imageeditor.core.model.EditorModel
 import org.signal.mediasend.R
 import org.signal.mediasend.screens.edit.ImageController
@@ -43,7 +45,7 @@ internal fun ImageEditorUndoRedoButtons(
         onClick = {
           imageEditorController?.undo()
         },
-        colors = IconButtonDefaults.iconButtonColors(containerColor = SignalTheme.colors.colorSurface5)
+        colors = IconButtonDefaults.iconButtonColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
       ) {
         Icon(
           imageVector = SignalIcons.Undo.imageVector,
@@ -56,7 +58,7 @@ internal fun ImageEditorUndoRedoButtons(
         onClick = {
           imageEditorController?.redo()
         },
-        colors = IconButtonDefaults.iconButtonColors(containerColor = SignalTheme.colors.colorSurface5)
+        colors = IconButtonDefaults.iconButtonColors(containerColor = MaterialTheme.colorScheme.surfaceVariant)
       ) {
         Icon(
           imageVector = SignalIcons.Redo.imageVector,
@@ -71,15 +73,17 @@ internal fun ImageEditorUndoRedoButtons(
 @Composable
 private fun ImageEditorUndoRedoButtonsPreview() {
   Previews.Preview {
-    ImageEditorUndoRedoButtons(
-      imageEditorController = remember {
-        ImageController(EditorModel.create(0x0)).apply {
-          enterDrawMode()
-        }
-      },
-      isDragging = false,
-      canUndo = true,
-      canRedo = true
-    )
+    Box(modifier = Modifier.fillMaxSize()) {
+      ImageEditorUndoRedoButtons(
+        imageEditorController = remember {
+          ImageController(EditorModel.create(0x0)).apply {
+            enterDrawMode()
+          }
+        },
+        isDragging = false,
+        canUndo = true,
+        canRedo = true
+      )
+    }
   }
 }

feature/media-send/src/main/java/org/signal/mediasend/screens/edit/video/VideoTrimBar.kt

@@ -50,6 +50,7 @@ fun VideoTrimBar(
   videoTrimData: VideoTrimData,
   maxSelectableDurationUs: Long = 0L,
   playbackPositionUs: Long = 0L,
+  modifier: Modifier = Modifier,
   onEvent: (MediaEditScreenEvents) -> Unit = {}
 ) {
   val currentOnEvent by rememberUpdatedState(onEvent)
@@ -129,7 +130,7 @@ fun VideoTrimBar(
       selectorView.unregisterDragListener()
       selectorView.registerEditorOnRangeChangeListener(null)
     },
-    modifier = Modifier
+    modifier = modifier
       .horizontalGutters()
       .height(48.dp)
       .fillMaxWidth()