ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 21:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Render the live location timeline item (#5209)

Browse Source 
* created the data for the timeline item

# Conflicts:
#	ElementX/Sources/Other/Logging/Tracing.swift
#	ElementX/Sources/Services/Authentication/AuthenticationService.swift
#	ElementX/Sources/Services/Authentication/LinkNewDeviceService.swift

* Implemented the LLS timeline item

* updated preview tests

* pr and design suggestions

* previewscrollview is debug only
This commit is contained in:
Mauro
2026-03-24 10:34:00 +01:00
committed by GitHub
parent 610c296125
commit b8d337e4ce
51 changed files with 799 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Screens/LocationSharing/LocationSharingScreenModels.swift
+49 -5
View File
@@ -35,6 +35,13 @@ struct LocationSharingScreenViewState: BindableState {
self.showLiveLocationSharingButton = showLiveLocationSharingButton
self.ownUserID = ownUserID
userProfile = switch interactionMode {
case .viewStatic(let locationData):
.init(sender: locationData.sender)
case .picker:
.init(userID: ownUserID)
}
bindings.showsUserLocationMode = switch interactionMode {
case .picker: .showAndFollow
case .viewStatic: .show
@@ -45,6 +52,11 @@ struct LocationSharingScreenViewState: BindableState {
let mapURLBuilder: MapTilerURLBuilderProtocol
let showLiveLocationSharingButton: Bool
let ownUserID: String
var userProfile: UserProfileProxy
var isOwnUser: Bool {
userProfile.userID == ownUserID
}
var bindings = LocationSharingScreenBindings(showsUserLocationMode: .hide)
@@ -91,14 +103,12 @@ struct LocationSharingScreenViewState: BindableState {
}
}
var userProfile: UserProfileProxy?
var locationMarkerUserProfile: UserProfileProxy? {
var locationMarkerKind: LocationMarkerKind {
switch interactionMode {
case .picker:
isSharingUserLocation ? userProfile : nil
isSharingUserLocation ? .staticUser(userProfile) : .pin
case .viewStatic(let location):
location.kind == .sender ? userProfile : nil
location.kind == .sender ? .staticUser(userProfile) : .pin
}
}
}
@@ -160,3 +170,37 @@ extension AlertInfo where T == LocationSharingViewError {
}
}
}
enum LocationMarkerKind {
case pin
case staticUser(UserProfileProxy)
case liveUser(UserProfileProxy)
case placeholder
var id: String {
switch self {
case .pin, .placeholder:
UUID().uuidString
case .staticUser(let profile), .liveUser(let profile):
profile.userID
}
}
var displayName: String? {
switch self {
case .pin, .placeholder:
nil
case .staticUser(let profile), .liveUser(let profile):
profile.displayName
}
}
var userProfile: UserProfileProxy? {
switch self {
case .pin, .placeholder:
nil
case .staticUser(let profile), .liveUser(let profile):
profile
}
}
}
ElementX/Sources/Screens/LocationSharing/View/LocationSharingScreen.swift
+6 -6
View File
@@ -56,7 +56,7 @@ struct LocationSharingScreen: View {
.ignoresSafeArea(.all, edges: mapSafeAreaEdges)
if context.viewState.isLocationPickerMode {
LocationMarkerView(userProfile: context.viewState.locationMarkerUserProfile, mediaProvider: context.mediaProvider)
LocationMarkerView(kind: context.viewState.locationMarkerKind, mediaProvider: context.mediaProvider)
}
}
.overlay(alignment: .topTrailing) {
@@ -76,13 +76,13 @@ struct LocationSharingScreen: View {
private var mapOptions: MapLibreMapView.Options {
var annotations: [String: LocationAnnotation] = [:]
if !context.viewState.isLocationPickerMode {
let id = context.viewState.locationMarkerUserProfile?.userID ?? UUID().uuidString
let annotation = LocationAnnotation(id: id,
let kind = context.viewState.locationMarkerKind
let annotation = LocationAnnotation(id: kind.id,
coordinate: context.viewState.initialMapCenter,
anchorPoint: .bottomCenter) {
LocationMarkerView(userProfile: context.viewState.locationMarkerUserProfile, mediaProvider: context.mediaProvider)
LocationMarkerView(kind: kind, mediaProvider: context.mediaProvider)
}
annotations[id] = annotation
annotations[kind.id] = annotation
}
return .init(zoomLevel: context.viewState.zoomLevel,
@@ -129,7 +129,7 @@ struct LocationSharingScreen: View {
@ViewBuilder
private var shareSheet: some View {
let location = context.viewState.initialMapCenter
let senderName = context.viewState.locationMarkerUserProfile?.displayName ?? context.viewState.locationMarkerUserProfile?.userID
let senderName = context.viewState.locationMarkerKind.displayName ?? context.viewState.locationMarkerKind.userProfile?.userID
AppActivityView(activityItems: [ShareToMapsAppActivity.MapsAppType.apple.activityURL(for: location, senderName: senderName)],
applicationActivities: ShareToMapsAppActivity.MapsAppType.allCases.map { ShareToMapsAppActivity(type: $0, location: location, senderName: senderName) })
.ignoresSafeArea(edges: .bottom)
ElementX/Sources/Screens/LocationSharing/View/StaticLocationSheet.swift
+3 -4
View File
@@ -34,13 +34,12 @@ struct StaticLocationSheet: View {
.font(.compound.bodyLGSemibold)
.padding(.bottom, 25)
.padding(.top, 29)
if case let .viewStatic(location) = context.viewState.interactionMode,
let userProfile = context.viewState.userProfile {
if case let .viewStatic(location) = context.viewState.interactionMode {
Button {
context.showShareSheet = true
} label: {
UserLocationCell(profile: userProfile,
isOwnUser: userProfile.userID == context.viewState.ownUserID,
UserLocationCell(profile: context.viewState.userProfile,
isOwnUser: context.viewState.isOwnUser,
isUserLocation: location.kind == .sender,
timestamp: location.timestamp,
mediaProvider: context.mediaProvider)
ElementX/Sources/Screens/Timeline/View/Replies/TimelineReplyView.swift
+10
View File
@@ -73,6 +73,11 @@ struct TimelineReplyView: View {
plainBody: question,
formattedBody: nil,
icon: .init(kind: .icon(\.polls), cornerRadii: iconCornerRadii))
case .liveLocation:
ReplyView(sender: sender,
plainBody: L10n.commonSharedLiveLocation,
formattedBody: nil,
icon: .init(kind: .icon(\.locationPin), cornerRadii: iconCornerRadii))
case .redacted:
ReplyView(sender: sender,
plainBody: L10n.commonMessageRemoved,
@@ -283,6 +288,11 @@ struct TimelineReplyView_Previews: PreviewProvider, TestablePreview {
eventID: "123",
eventContent: .message(.location(.init(body: ""))))),
TimelineReplyView(placement: .timeline,
timelineItemReplyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
eventID: "123",
eventContent: .liveLocation)),
TimelineReplyView(placement: .timeline,
timelineItemReplyDetails: .loaded(sender: .init(id: "", displayName: "Alice"),
eventID: "123",
ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift
+4 -1
View File
@@ -271,6 +271,9 @@ private extension EventBasedTimelineItemProtocol {
return locationTimelineItem.content.geoURI == nil ||
properties.replyDetails != nil ||
properties.isThreaded ? defaultInsets : .zero
case let liveLocationTimelineItem as LiveLocationRoomTimelineItem:
return properties.replyDetails != nil ||
properties.isThreaded ? defaultInsets : .zero
default:
return defaultInsets
}
@@ -278,7 +281,7 @@ private extension EventBasedTimelineItemProtocol {
var contentCornerRadius: CGFloat {
switch self {
case is ImageRoomTimelineItem, is VideoRoomTimelineItem, is LocationRoomTimelineItem:
case is ImageRoomTimelineItem, is VideoRoomTimelineItem, is LocationRoomTimelineItem, is LiveLocationRoomTimelineItem:
return properties.replyDetails != nil || properties.isThreaded ? 8 : .zero
default:
return .zero
ElementX/Sources/Screens/Timeline/View/Style/TimelineItemSendInfoLabel.swift
+16 -1
View File
@@ -32,7 +32,7 @@ private struct TimelineItemSendInfoModifier: ViewModifier {
AnyLayout(HStackLayout(alignment: .bottom, spacing: spacing))
case .vertical(let spacing):
AnyLayout(GridLayout(alignment: .leading, verticalSpacing: spacing))
case .overlay:
case .overlay, .hidden:
AnyLayout(ZStackLayout(alignment: .bottomTrailing))
}
}
@@ -93,6 +93,8 @@ private struct TimelineItemSendInfoLabel: View {
content
.gridColumnAlignment(.trailing)
}
case .hidden:
EmptyView()
}
}
@@ -125,6 +127,7 @@ private struct TimelineItemSendInfo {
case horizontal(spacing: CGFloat = 4)
case vertical(spacing: CGFloat = 4)
case overlay(capsuleStyle: Bool)
case hidden
}
let itemID: TimelineItemIdentifier
@@ -164,6 +167,8 @@ private extension TimelineItemSendInfo {
layoutType = switch timelineItem {
case is TextBasedRoomTimelineItem:
.overlay(capsuleStyle: false)
case let liveLocationTimelineItem as LiveLocationRoomTimelineItem:
liveLocationTimelineItem.layout
case let message as EventBasedMessageTimelineItemProtocol:
switch message {
case is ImageRoomTimelineItem, is VideoRoomTimelineItem:
@@ -186,6 +191,16 @@ private extension TimelineItemSendInfo {
}
}
private extension LiveLocationRoomTimelineItem {
var layout: TimelineItemSendInfo.LayoutType {
if content.isLive, isOutgoing {
.hidden
} else {
.overlay(capsuleStyle: true)
}
}
}
@MainActor
private extension EncryptionAuthenticity {
var foregroundStyle: SwiftUI.Color {
ElementX/Sources/Screens/Timeline/View/Threads/TimelineThreadSummaryView.swift
+11
View File
@@ -89,6 +89,12 @@ struct TimelineThreadSummaryView: View {
plainBody: question,
formattedBody: nil,
numberOfReplies: numberOfReplies)
case .liveLocation:
ThreadView(senderID: senderID,
sender: sender,
plainBody: L10n.commonSharedLiveLocation,
formattedBody: nil,
numberOfReplies: numberOfReplies)
case .redacted:
ThreadView(senderID: senderID,
sender: sender,
@@ -256,6 +262,11 @@ struct TimelineThreadSummaryView_Previews: PreviewProvider, TestablePreview {
latestEventContent: .message(.location(.init(body: ""))),
numberOfReplies: 42)),
TimelineThreadSummaryView(threadSummary: .loaded(senderID: "@alice:matrix.org",
sender: .init(id: "@alice:matrix.org", displayName: "Alice"),
latestEventContent: .liveLocation,
numberOfReplies: 42)),
TimelineThreadSummaryView(threadSummary: .loaded(senderID: "@alice:matrix.org",
sender: .init(id: "@alice:matrix.org", displayName: "Alice"),
latestEventContent: .message(.voice(.init(filename: "voice-message.ogg",
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/LiveLocationRoomTimelineView.swift
+236
View File
@@ -0,0 +1,236 @@
//
// Copyright 2026 Element Creations Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//
import Compound
import SwiftUI
struct LiveLocationRoomTimelineView: View {
@Environment(\.timelineContext) private var context: TimelineViewModel.Context!
let timelineItem: LiveLocationRoomTimelineItem
var body: some View {
TimelineStyler(timelineItem: timelineItem) {
mainContent
}
}
private var mainContent: some View {
ZStack(alignment: .bottom) {
mapView
.clipped()
.accessibilityElement(children: .ignore)
.accessibilityLabel(L10n.commonSharedLiveLocation)
liveLocationInfoView
}
.frame(maxHeight: mapMaxHeight)
.aspectRatio(mapAspectRatio, contentMode: .fit)
.overlay {
if !timelineItem.content.isLive {
RoundedRectangle(cornerRadius: 12)
.inset(by: 0.5)
.stroke(Color.compound.borderDisabled)
}
}
.onTapGesture {
guard context.viewState.mapTilerConfiguration.isEnabled,
timelineItem.content.lastGeoURI != nil,
timelineItem.content.isLive else {
return
}
context.send(viewAction: .mediaTapped(itemID: timelineItem.id))
}
}
@ViewBuilder
private var mapView: some View {
if timelineItem.content.isLive {
if let geoURI = timelineItem.content.lastGeoURI {
MapLibreStaticMapView(geoURI: geoURI,
mapURLBuilder: context.viewState.mapTilerConfiguration,
attributionPlacement: .topLeft,
mapSize: .init(width: mapAspectRatio * mapMaxHeight, height: mapMaxHeight)) {
LocationMarkerView(kind: .liveUser(.init(sender: timelineItem.sender)),
mediaProvider: context.mediaProvider)
}
} else {
Image(asset: Asset.Images.mapBlurred)
.resizable()
}
} else {
ZStack {
Image(asset: Asset.Images.placeholderMap)
.resizable()
LocationMarkerView(kind: .placeholder)
}
}
}
private var liveLocationStateString: String {
timelineItem.content.isLive ? L10n.commonLiveLocation : L10n.commonLiveLocationEnded
}
private var liveLocationStateColor: Color {
timelineItem.content.isLive ? .compound.textPrimary : .compound.textSecondary
}
private var liveLocationIconColor: Color {
if timelineItem.content.isLive {
timelineItem.content.lastGeoURI != nil ? .compound.iconAccentPrimary : .compound.iconSecondary
} else {
.compound.iconDisabled
}
}
private var liveLocationBackgroundColor: Color {
timelineItem.content.isLive ? .compound.bgCanvasDefault : .compound.bgSubtleSecondary
}
private var blurBackground: some View {
Color.compound.bgCanvasDefault
.opacity(0.8)
.background(.ultraThinMaterial)
}
private var infoIcon: KeyPath<CompoundIcons, Image> {
if timelineItem.content.lastGeoURI != nil || !timelineItem.content.isLive {
\.locationPinSolid
} else {
\.spinner
}
}
private var liveLocationInfoView: some View {
HStack(spacing: 8) {
CompoundIcon(infoIcon, size: .medium, relativeTo: .compound.bodySMSemibold)
.foregroundStyle(liveLocationIconColor)
.padding(4)
.background(liveLocationBackgroundColor)
.cornerRadius(8)
.overlay {
if timelineItem.content.isLive {
RoundedRectangle(cornerRadius: 8)
.inset(by: 0.5)
.stroke(Color.compound.iconQuaternaryAlpha)
}
}
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 0) {
Text(liveLocationStateString)
.foregroundStyle(liveLocationStateColor)
.font(.compound.bodySMSemibold)
if timelineItem.content.isLive {
Text(L10n.commonEndsAt(timelineItem.content.timeoutDate.formattedExpiration()))
.foregroundStyle(.compound.textPrimary)
.font(.compound.bodySM)
}
}
.accessibilityElement(children: .combine)
Spacer()
if timelineItem.content.isLive, timelineItem.isOutgoing {
Button { } label: {
CompoundIcon(\.stop, size: .small, relativeTo: .compound.bodySMSemibold)
.foregroundStyle(.compound.iconOnSolidPrimary)
.padding(5)
.background(Color.compound.bgCriticalPrimary, in: Circle())
.accessibilityLabel(L10n.actionStop)
}
}
}
.padding(.horizontal, 8)
.padding(.vertical, 6)
.background(blurBackground)
}
// MARK: - Private
private let mapAspectRatio: Double = 3 / 2
private let mapMaxHeight: Double = 300
}
struct LiveLocationRoomTimelineView_Previews: PreviewProvider, TestablePreview {
static let viewModel = TimelineViewModel.mock
static var previews: some View {
PreviewScrollView {
VStack(spacing: 8) {
states
}
}
.environmentObject(viewModel.context)
.environment(\.timelineContext, viewModel.context)
.previewLayout(.sizeThatFits)
.previewDisplayName("Bubbles")
}
@ViewBuilder
static var states: some View {
// No location yet (beacon not yet received)
LiveLocationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
sender: .init(id: "@bob:matrix.org", displayName: "Bob"),
content: .init(isLive: true,
timeoutDate: .mockToday420,
lastGeoURI: nil)))
// With a known location
LiveLocationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isOutgoing: true,
isEditable: false,
canBeRepliedTo: true,
sender: .init(id: "@bob:matrix.org", displayName: "Bob", avatarURL: .mockMXCUserAvatar),
content: .init(isLive: true,
timeoutDate: .mockToday420,
lastGeoURI: .init(latitude: 41.902782, longitude: 12.496366))))
// Expired live location
LiveLocationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
sender: .init(id: "@bob:matrix.org", displayName: "Bob", avatarURL: .mockMXCUserAvatar),
content: .init(isLive: false,
timeoutDate: .mockToday420,
lastGeoURI: .init(latitude: 41.902782, longitude: 12.496366))))
// Replying to a live location
LiveLocationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
sender: .init(id: "@bob:matrix.org", displayName: "Bob", avatarURL: .mockMXCUserAvatar),
content: .init(isLive: true,
timeoutDate: .mockToday420,
lastGeoURI: .init(latitude: 41.902782, longitude: 12.496366)),
properties: .init(replyDetails: .loaded(sender: .init(id: "@alice:matrix.org", displayName: "Alice"),
eventID: "123",
eventContent: .liveLocation))))
// Replying to a live location when the content is not live
LiveLocationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
sender: .init(id: "@bob:matrix.org", displayName: "Bob", avatarURL: .mockMXCUserAvatar),
content: .init(isLive: false,
timeoutDate: .mockToday420,
lastGeoURI: .init(latitude: 41.902782, longitude: 12.496366)),
properties: .init(replyDetails: .loaded(sender: .init(id: "@alice:matrix.org", displayName: "Alice"),
eventID: "123",
eventContent: .liveLocation))))
}
}
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/LocationRoomTimelineView.swift
+5 -16
View File
@@ -30,7 +30,7 @@ struct LocationRoomTimelineView: View {
MapLibreStaticMapView(geoURI: geoURI,
mapURLBuilder: context.viewState.mapTilerConfiguration,
mapSize: .init(width: mapAspectRatio * mapMaxHeight, height: mapMaxHeight)) {
LocationMarkerView(userProfile: timelineItem.content.kind == .sender ? .init(sender: timelineItem.sender) : nil,
LocationMarkerView(kind: timelineItem.content.kind == .sender ? .staticUser(.init(sender: timelineItem.sender)) : .pin,
mediaProvider: context.mediaProvider)
}
.frame(maxHeight: mapMaxHeight)
@@ -47,28 +47,18 @@ struct LocationRoomTimelineView: View {
private let mapMaxHeight: Double = 300
}
private extension MapLibreStaticMapView {
init(geoURI: GeoURI, mapURLBuilder: MapTilerURLBuilderProtocol, mapSize: CGSize, @ViewBuilder pinAnnotationView: () -> PinAnnotation) {
self.init(coordinates: .init(latitude: geoURI.latitude, longitude: geoURI.longitude),
zoomLevel: 15,
attributionPlacement: .bottomLeft,
mapURLBuilder: mapURLBuilder,
mapSize: mapSize,
pinAnnotationView: pinAnnotationView)
}
}
struct LocationRoomTimelineView_Previews: PreviewProvider, TestablePreview {
static let viewModel = TimelineViewModel.mock
static var previews: some View {
ScrollView {
PreviewScrollView {
VStack(spacing: 8) {
states
}
}
.environmentObject(viewModel.context)
.environment(\.timelineContext, viewModel.context)
.previewLayout(.sizeThatFits)
.previewDisplayName("Bubbles")
}
@@ -99,9 +89,8 @@ struct LocationRoomTimelineView_Previews: PreviewProvider, TestablePreview {
content: .init(body: "Fallback geo uri description",
geoURI: .init(latitude: 41.902782, longitude: 12.496366),
kind: .pin),
properties: .init(replyDetails: .loaded(sender: .init(id: "Someone"),
properties: .init(replyDetails: .loaded(sender: .init(id: "@alice:matrix.org", displayName: "Alice"),
eventID: "123",
eventContent: .message(.text(.init(body: "The thread content goes 'ere.")))),
isThreaded: true)))
eventContent: .message(.location(.init(body: "")))))))
}
}