Media: make some minor UI fixes

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewStateProvider.kt

@@ -20,6 +20,9 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.core.net.toUri
 import io.element.android.features.messages.impl.attachments.Attachment
 import io.element.android.features.messages.impl.media.local.LocalMedia
+import io.element.android.features.messages.impl.media.local.MediaInfo
+import io.element.android.features.messages.impl.media.local.aFileInfo
+import io.element.android.features.messages.impl.media.local.aVideoInfo
 import io.element.android.features.messages.impl.media.local.anImageInfo
 import io.element.android.libraries.architecture.Async
 
@@ -27,14 +30,17 @@ open class AttachmentsPreviewStateProvider : PreviewParameterProvider<Attachment
     override val values: Sequence<AttachmentsPreviewState>
         get() = sequenceOf(
             anAttachmentsPreviewState(),
+            anAttachmentsPreviewState(mediaInfo = aFileInfo()),
             anAttachmentsPreviewState(sendActionState = Async.Loading()),
             anAttachmentsPreviewState(sendActionState = Async.Failure(RuntimeException())),
         )
 }
 
-fun anAttachmentsPreviewState(sendActionState: Async<Unit> = Async.Uninitialized) = AttachmentsPreviewState(
+fun anAttachmentsPreviewState(
+    mediaInfo: MediaInfo = anImageInfo(),
+    sendActionState: Async<Unit> = Async.Uninitialized) = AttachmentsPreviewState(
     attachment = Attachment.Media(
-        localMedia = LocalMedia("path".toUri(), anImageInfo()),
+        localMedia = LocalMedia("file://path".toUri(), mediaInfo),
         compressIfPossible = true
     ),
     sendActionState = sendActionState,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewView.kt

@@ -125,7 +125,8 @@ private fun AttachmentPreviewContent(
         Box(
             modifier = Modifier
                 .fillMaxWidth()
-                .weight(1f)
+                .weight(1f),
+            contentAlignment = Alignment.Center,
         ) {
             when (attachment) {
                 is Attachment.Media -> LocalMediaView(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
@@ -47,6 +48,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -65,6 +67,7 @@ import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeImage
 import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
 import io.element.android.libraries.designsystem.R
+import io.element.android.libraries.designsystem.theme.ElementTheme
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.OnLifecycleEvent
@@ -229,7 +232,7 @@ fun MediaFileView(
     modifier: Modifier = Modifier,
 ) {
     localMediaViewState.isReady = uri != null
-    Box(modifier = modifier, contentAlignment = Alignment.Center) {
+    Box(modifier = modifier.padding(horizontal = 8.dp), contentAlignment = Alignment.Center) {
         Column(horizontalAlignment = Alignment.CenterHorizontally) {
             Box(
                 modifier = Modifier
@@ -248,12 +251,14 @@ fun MediaFileView(
                 )
             }
             if (info != null) {
-                Spacer(modifier = Modifier.height(16.dp))
+                Spacer(modifier = Modifier.height(20.dp))
                 Text(
                     text = info.name,
                     maxLines = 2,
                     fontSize = 16.sp,
-                    overflow = TextOverflow.Ellipsis
+                    overflow = TextOverflow.Ellipsis,
+                    textAlign = TextAlign.Center,
+                    color = ElementTheme.colors.gray1400
                 )
                 Spacer(modifier = Modifier.height(4.dp))
                 Text(
@@ -261,6 +266,7 @@ fun MediaFileView(
                     fontSize = 14.sp,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
+                    color = ElementTheme.colors.gray1400
                 )
             }
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/local/MediaInfo.kt

@@ -28,17 +28,17 @@ data class MediaInfo(
 ) : Parcelable
 
 fun anImageInfo(): MediaInfo = MediaInfo(
-    "an image file", MimeTypes.Jpeg, "4MB"
+    "an image file.jpg", MimeTypes.Jpeg, "4MB"
 )
 
 fun aVideoInfo(): MediaInfo = MediaInfo(
-    "a video file", MimeTypes.Mp4, "14MB"
+    "a video file.mp4", MimeTypes.Mp4, "14MB"
 )
 
 fun aPdfInfo(): MediaInfo = MediaInfo(
-    "a pdf file", MimeTypes.Pdf, "23MB"
+    "a pdf file.pdf", MimeTypes.Pdf, "23MB"
 )
 
 fun aFileInfo(): MediaInfo = MediaInfo(
-    "an apk file", MimeTypes.Apk, "50MB"
+    "an apk file.apk", MimeTypes.Apk, "50MB"
 )