Merge pull request #740 from vector-im/feature/cjs/location-replies

Show location replies per the designs

features/location/api/build.gradle.kts

@@ -27,6 +27,7 @@ dependencies {
     implementation(projects.libraries.architecture)
     implementation(projects.libraries.designsystem)
     implementation(projects.libraries.core)
+    implementation(projects.libraries.matrixui)
     implementation(projects.libraries.uiStrings)
     implementation(libs.coil.compose)
     ksp(libs.showkase.processor)

features/location/api/src/main/kotlin/io/element/android/features/location/api/StaticMapView.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImagePainter
 import coil.compose.rememberAsyncImagePainter
@@ -43,6 +44,7 @@ import io.element.android.libraries.designsystem.text.toDp
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.theme.ElementTheme
 import timber.log.Timber
+import io.element.android.libraries.designsystem.R as DesignSystemR
 
 /**
  * Shows a static map image downloaded via a third party service's static maps API.
@@ -103,9 +105,15 @@ fun StaticMapView(
                 contentScale = ContentScale.Fit,
             )
             Icon(
-                resourceId = R.drawable.pin,
+                resourceId = DesignSystemR.drawable.pin,
                 contentDescription = null,
-                tint = Color.Unspecified
+                tint = Color.Unspecified,
+                modifier = Modifier.align { size, space, _ ->
+                    IntOffset(
+                        x = (space.width - size.width) / 2,
+                        y = (space.height / 2) - size.height,
+                    )
+                }
             )
         } else {
             StaticMapPlaceholder(

features/location/impl/build.gradle.kts

@@ -35,6 +35,7 @@ dependencies {
     implementation(projects.libraries.di)
     implementation(projects.libraries.designsystem)
     implementation(projects.libraries.core)
+    implementation(projects.libraries.matrixui)
     implementation(libs.maplibre)
     implementation(libs.maplibre.annotation)
     implementation(projects.libraries.uiStrings)

features/location/impl/src/main/kotlin/io/element/android/features/location/impl/SendLocationView.kt

@@ -39,9 +39,9 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import io.element.android.features.location.api.R
 import io.element.android.features.location.impl.map.MapView
 import io.element.android.features.location.impl.map.rememberMapState
 import io.element.android.libraries.designsystem.components.button.BackButton
@@ -52,6 +52,7 @@ import io.element.android.libraries.designsystem.theme.components.CenterAlignedT
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.ui.strings.CommonStrings
+import io.element.android.libraries.designsystem.R as DesignSystemR
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
@@ -115,9 +116,15 @@ fun SendLocationView(
                 mapState = mapState,
             )
             Icon(
-                resourceId = R.drawable.pin,
+                resourceId = DesignSystemR.drawable.pin,
                 contentDescription = null,
-                tint = Color.Unspecified
+                tint = Color.Unspecified,
+                modifier = Modifier.align { size, space, _ ->
+                    IntOffset(
+                        x = (space.width - size.width) / 2,
+                        y = (space.height / 2) - size.height,
+                    )
+                }
             )
         }
     }

features/location/impl/src/main/kotlin/io/element/android/features/location/impl/map/MapView.kt

@@ -44,7 +44,6 @@ import com.mapbox.mapboxsdk.maps.MapboxMap
 import com.mapbox.mapboxsdk.maps.Style
 import com.mapbox.mapboxsdk.plugins.annotation.SymbolManager
 import com.mapbox.mapboxsdk.plugins.annotation.SymbolOptions
-import io.element.android.features.location.api.R
 import io.element.android.features.location.api.internal.buildTileServerUrl
 import io.element.android.features.location.impl.location.Location
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@@ -55,6 +54,7 @@ import kotlinx.collections.immutable.toImmutableList
 import timber.log.Timber
 import kotlin.coroutines.resume
 import kotlin.coroutines.suspendCoroutine
+import io.element.android.libraries.designsystem.R as DesignSystemR
 
 /**
  * Composable wrapper around MapLibre's [MapView].
@@ -149,12 +149,13 @@ fun MapView(
     LaunchedEffect(mapRefs, mapState.location) {
         mapRefs?.let { mapRefs ->
             mapState.location?.let { location ->
-                context.getDrawable(R.drawable.pin)?.let { mapRefs.style.addImage("pin", it) }
+                context.getDrawable(DesignSystemR.drawable.pin)?.let { mapRefs.style.addImage("pin", it) }
                 mapRefs.symbolManager.create(
                     SymbolOptions()
                         .withLatLng(LatLng(location.lat, location.lon))
                         .withIconImage("pin")
                         .withIconSize(1.3f)
+                        .withIconOffset(arrayOf(0f, 0.5f))
                 )
                 Timber.d("Shown pin at location: $location")
             }
@@ -275,7 +276,7 @@ private fun ContentToPreview() {
             ),
             markers = listOf(
                 MapState.Marker(
-                    drawable = R.drawable.pin,
+                    drawable = DesignSystemR.drawable.pin,
                     lat = 0.0,
                     lon = 0.0,
                 )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt

@@ -264,11 +264,16 @@ class MessagesPresenter @AssistedInject constructor(
                 type = AttachmentThumbnailType.File,
                 blurHash = null,
             )
+            is TimelineItemLocationContent -> AttachmentThumbnailInfo(
+                mediaSource = null,
+                textContent = null,
+                type = AttachmentThumbnailType.Location,
+                blurHash = null,
+            )
             is TimelineItemTextBasedContent,
             is TimelineItemRedactedContent,
             is TimelineItemStateContent,
             is TimelineItemEncryptedContent,
-            is TimelineItemLocationContent,
             is TimelineItemUnknownContent -> null
         }
         val composerMode = MessageComposerMode.Reply(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListStateProvider.kt

@@ -21,6 +21,7 @@ import io.element.android.features.messages.impl.actionlist.model.TimelineItemAc
 import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemFileContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
+import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemVideoContent
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
@@ -54,6 +55,12 @@ open class ActionListStateProvider : PreviewParameterProvider<ActionListState> {
                     actions = aTimelineItemActionList(),
                 )
             ),
+            anActionListState().copy(
+                target = ActionListState.Target.Success(
+                    event = aTimelineItemEvent(content = aTimelineItemLocationContent()),
+                    actions = aTimelineItemActionList(),
+                )
+            ),
         )
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt

@@ -78,6 +78,7 @@ import io.element.android.libraries.designsystem.theme.components.hide
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
+import io.element.android.libraries.ui.strings.CommonStrings
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -232,8 +233,21 @@ private fun MessageSummary(event: TimelineItem.Event, modifier: Modifier = Modif
         is TimelineItemStateContent,
         is TimelineItemEncryptedContent,
         is TimelineItemRedactedContent,
-        is TimelineItemLocationContent,
         is TimelineItemUnknownContent -> content = { ContentForBody(textContent) }
+        is TimelineItemLocationContent -> {
+            icon = {
+                AttachmentThumbnail(
+                    modifier = imageModifier,
+                    info = AttachmentThumbnailInfo(
+                        type = AttachmentThumbnailType.Location,
+                        textContent = stringResource(CommonStrings.common_shared_location),
+                        mediaSource = null,
+                        blurHash = null,
+                    )
+                )
+            }
+            content = { ContentForBody(stringResource(CommonStrings.common_shared_location)) }
+        }
         is TimelineItemImageContent -> {
             icon = {
                 AttachmentThumbnail(

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -41,6 +41,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -54,8 +55,8 @@ import io.element.android.features.messages.impl.timeline.components.event.toExt
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.bubble.BubbleState
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
-import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
@@ -70,6 +71,7 @@ import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.timeline.item.event.FileMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.ImageMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.InReplyTo
+import io.element.android.libraries.matrix.api.timeline.item.event.LocationMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.MessageContent
 import io.element.android.libraries.matrix.api.timeline.item.event.TextMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.VideoMessageType
@@ -77,6 +79,7 @@ import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
 import io.element.android.libraries.theme.ElementTheme
+import io.element.android.libraries.ui.strings.CommonStrings
 import org.jsoup.Jsoup
 
 @Composable
@@ -300,9 +303,10 @@ private fun MessageEventBubbleContent(
             if (inReplyToDetails != null) {
                 val senderName = inReplyToDetails.senderDisplayName ?: inReplyToDetails.senderId.value
                 val attachmentThumbnailInfo = attachmentThumbnailInfoForInReplyTo(inReplyToDetails)
+                val text = textForInReplyTo(inReplyToDetails)
                 ReplyToContent(
                     senderName = senderName,
-                    text = inReplyToDetails.content.body,
+                    text = text,
                     attachmentThumbnailInfo = attachmentThumbnailInfo,
                     modifier = Modifier
                         .padding(top = 8.dp, start = 8.dp, end = 8.dp)
@@ -409,9 +413,22 @@ private fun attachmentThumbnailInfoForInReplyTo(inReplyTo: InReplyTo.Ready) =
             type = AttachmentThumbnailType.File,
             blurHash = null,
         )
+        is LocationMessageType -> AttachmentThumbnailInfo(
+            mediaSource = null,
+            textContent = inReplyTo.content.body,
+            type = AttachmentThumbnailType.Location,
+            blurHash = null,
+        )
         else -> null
     }
 
+@Composable
+private fun textForInReplyTo(inReplyTo: InReplyTo.Ready) =
+    when (inReplyTo.content.type) {
+        is LocationMessageType -> stringResource(CommonStrings.common_shared_location)
+        else -> inReplyTo.content.body
+    }
+
 @Preview
 @Composable
 internal fun TimelineItemEventRowLightPreview() =

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/messagesummary/MessageSummaryFormatterImpl.kt

@@ -43,7 +43,7 @@ class MessageSummaryFormatterImpl @Inject constructor(
             is TimelineItemTextBasedContent -> event.content.body
             is TimelineItemProfileChangeContent -> event.content.body
             is TimelineItemStateContent -> event.content.body
-            is TimelineItemLocationContent -> event.content.body
+            is TimelineItemLocationContent -> context.getString(CommonStrings.common_shared_location)
             is TimelineItemEncryptedContent -> context.getString(CommonStrings.common_unable_to_decrypt)
             is TimelineItemRedactedContent -> context.getString(CommonStrings.common_message_removed)
             is TimelineItemUnknownContent -> context.getString(CommonStrings.common_unsupported_event)

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

@@ -0,0 +1,66 @@
+/*
+ * 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
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.R
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.theme.ElementTheme
+
+@Composable
+fun PinIcon(
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier
+            .background(ElementTheme.colors.bgSubtlePrimary)
+    ) {
+        Icon(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .width(22.dp),
+            resourceId = R.drawable.pin,
+            contentDescription = null,
+            tint = Color.Unspecified,
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PinIconLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun PinIconDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    PinIcon()
+}

libraries/designsystem/src/main/res/drawable/pin.xml

@@ -1,8 +1,8 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="50dp"
-    android:height="108dp"
+    android:height="54dp"
     android:viewportWidth="50"
-    android:viewportHeight="108">
+    android:viewportHeight="54">
   <group>
     <clip-path
         android:pathData="M0,0h50v108h-50z"/>

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/AttachmentThumbnail.kt

@@ -19,6 +19,7 @@ package io.element.android.libraries.matrix.ui.components
 import android.os.Parcelable
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Attachment
 import androidx.compose.material.icons.outlined.VideoCameraBack
@@ -30,6 +31,7 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
+import io.element.android.libraries.designsystem.components.PinIcon
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.matrix.api.media.MediaSource
 import io.element.android.libraries.matrix.ui.media.MediaRequestData
@@ -73,6 +75,11 @@ fun AttachmentThumbnail(
                         modifier = Modifier.rotate(-45f)
                     )
                 }
+                AttachmentThumbnailType.Location -> {
+                    PinIcon(
+                        modifier = Modifier.fillMaxSize()
+                    )
+                }
                 else -> Unit
             }
         }
@@ -81,7 +88,7 @@ fun AttachmentThumbnail(
 
 @Parcelize
 enum class AttachmentThumbnailType: Parcelable {
-    Image, Video, File
+    Image, Video, File, Location
 }
 
 @Parcelize

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -552,5 +552,23 @@ private fun ReplyContentToPreview() {
             composerCanSendMessage = true,
             composerText = "A message",
         )
+        TextComposer(
+            onSendMessage = {},
+            onComposerTextChange = {},
+            composerMode = MessageComposerMode.Reply(
+                senderName = "Alice",
+                eventId = EventId("$1234"),
+                attachmentThumbnailInfo = AttachmentThumbnailInfo(
+                    mediaSource = null,
+                    textContent = null,
+                    type = AttachmentThumbnailType.Location,
+                    blurHash = null,
+                ),
+                defaultContent = "Shared location"
+            ),
+            onResetComposerMode = {},
+            composerCanSendMessage = true,
+            composerText = "A message",
+        )
     }
 }

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.messages.impl.actionlist_null_DefaultGroup_SheetContentDarkPreview_0_null_6,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32c0ace0df1b31d9e47aaa4fcfc4fa7eb0d7e7d9cde321bc3e13ffd85e991f22
+size 39371

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.messages.impl.actionlist_null_DefaultGroup_SheetContentLightPreview_0_null_6,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9c3a0506c870eb5f940821e5f05357f098f18fa177b143828e3e2afad09732dc
+size 40704

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components_null_DefaultGroup_PinIconDarkPreview_0_null,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bdca76cdbf676d1b5dfd4bdf3871913a3fca0a9efafbf962e461a45278c9df13
+size 5426

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.components_null_DefaultGroup_PinIconLightPreview_0_null,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:73750e1428e85548a8a8add1193d3c32709d79ffdc6c18125e3fbbc13d078c73
+size 5683

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.textcomposer_null_DefaultGroup_TextComposerReplyDarkPreview_0_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:304797c7338432606c8e1948c7e93a1d781dc7d883deb57a44c1c20992868a93
-size 66642
+oid sha256:870b7a0002ec6fd77bfe071a64b7c5faf98062227800ca55dd1c21f517025a48
+size 77684

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.textcomposer_null_DefaultGroup_TextComposerReplyLightPreview_0_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a4e8594131c6aa246ba102d52039b9aabbbf4a25adef10e6c72bd88f4ba20e7a
-size 67999
+oid sha256:582d2f55a8f6707f1e4a55b4eadb7b19f18f3f78a097300151753c66e737e8e2
+size 80326