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/api/src/main/res/drawable/pin.xml

@@ -1,23 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="50dp"
-    android:height="108dp"
-    android:viewportWidth="50"
-    android:viewportHeight="108">
-  <group>
-    <clip-path
-        android:pathData="M0,0h50v108h-50z"/>
-    <path
-        android:pathData="M25,54L18.94,48L31.06,48L25,54Z"
-        android:fillColor="#1B1D22"/>
-    <path
-        android:pathData="M25,25m-25,0a25,25 0,1 1,50 0a25,25 0,1 1,-50 0"
-        android:fillColor="#1B1D22"/>
-    <group>
-      <clip-path
-          android:pathData="M13,13h24v24h-24z"/>
-      <path
-          android:pathData="M25,13C20.36,13 16.6,16.86 16.6,21.63C16.6,26.77 21.9,33.86 24.09,36.56C24.57,37.15 25.44,37.15 25.92,36.56C28.1,33.86 33.4,26.77 33.4,21.63C33.4,16.86 29.64,13 25,13ZM25,24.71C23.34,24.71 22,23.33 22,21.63C22,19.93 23.34,18.55 25,18.55C26.66,18.55 28,19.93 28,21.63C28,23.33 26.66,24.71 25,24.71Z"
-          android:fillColor="#ffffff"/>
-    </group>
-  </group>
-</vector>

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)