Improve LocationRoomTimelineView layout (#1212)

* Improve LocationRoomTimelineView

* Cleanup
This commit is contained in:
Alfonso Grillo
2023-06-29 12:22:43 +02:00
committed by GitHub
parent 98cec5672c
commit edd12b02af
2 changed files with 29 additions and 28 deletions
@@ -24,48 +24,51 @@ struct MapLibreStaticMapView<PinAnnotation: View>: View {
private let mapTilerAttributionPlacement: MapTilerAttributionPlacement private let mapTilerAttributionPlacement: MapTilerAttributionPlacement
private let pinAnnotationView: PinAnnotation private let pinAnnotationView: PinAnnotation
@Environment(\.colorScheme) private var colorScheme @Environment(\.colorScheme) private var colorScheme
private let imageSize: CGSize
@State private var fetchAttempt = 0 @State private var fetchAttempt = 0
init(coordinates: CLLocationCoordinate2D, init(coordinates: CLLocationCoordinate2D,
zoomLevel: Double, zoomLevel: Double,
imageSize: CGSize,
attributionPlacement: MapTilerAttributionPlacement, attributionPlacement: MapTilerAttributionPlacement,
mapTilerStatic: MapTilerStaticMapProtocol, mapTilerStatic: MapTilerStaticMapProtocol,
@ViewBuilder pinAnnotationView: () -> PinAnnotation) { @ViewBuilder pinAnnotationView: () -> PinAnnotation) {
self.coordinates = coordinates self.coordinates = coordinates
self.zoomLevel = zoomLevel self.zoomLevel = zoomLevel
self.mapTilerStatic = mapTilerStatic self.mapTilerStatic = mapTilerStatic
self.imageSize = imageSize
mapTilerAttributionPlacement = attributionPlacement mapTilerAttributionPlacement = attributionPlacement
self.pinAnnotationView = pinAnnotationView() self.pinAnnotationView = pinAnnotationView()
} }
var body: some View { var body: some View {
if let url = mapTilerStatic.staticMapURL(for: colorScheme.mapStyle, coordinates: coordinates, zoomLevel: zoomLevel, size: imageSize, attribution: mapTilerAttributionPlacement) { GeometryReader { geometry in
AsyncImage(url: url) { phase in if let url = mapTilerStatic.staticMapURL(for: colorScheme.mapStyle,
switch phase { coordinates: coordinates,
case .empty: zoomLevel: zoomLevel,
Image("mapBlurred") size: geometry.size,
.resizable() attribution: mapTilerAttributionPlacement) {
.aspectRatio(contentMode: .fill) AsyncImage(url: url) { phase in
case .success(let image): switch phase {
ZStack { case .empty:
image Image("mapBlurred")
.resizable() .resizable()
.aspectRatio(contentMode: .fill) .aspectRatio(contentMode: .fill)
pinAnnotationView case .success(let image):
ZStack {
image
.resizable()
.aspectRatio(contentMode: .fill)
pinAnnotationView
}
case .failure:
errorView
@unknown default:
EmptyView()
} }
case .failure:
errorView
@unknown default:
EmptyView()
} }
.id(fetchAttempt)
.clipped()
} else {
Image("mapBlurred")
} }
.id(fetchAttempt)
.clipped()
} else {
Image("mapBlurred")
} }
} }
@@ -101,7 +104,6 @@ struct MapLibreStaticMapView_Previews: PreviewProvider {
static var previews: some View { static var previews: some View {
MapLibreStaticMapView(coordinates: CLLocationCoordinate2D(), MapLibreStaticMapView(coordinates: CLLocationCoordinate2D(),
zoomLevel: 15, zoomLevel: 15,
imageSize: .init(width: 300, height: 200),
attributionPlacement: .bottomLeft, attributionPlacement: .bottomLeft,
mapTilerStatic: MapTilerStaticMapMock()) { mapTilerStatic: MapTilerStaticMapMock()) {
Image(systemName: "mappin.circle.fill") Image(systemName: "mappin.circle.fill")
@@ -23,11 +23,11 @@ struct LocationRoomTimelineView: View {
var body: some View { var body: some View {
TimelineStyler(timelineItem: timelineItem) { TimelineStyler(timelineItem: timelineItem) {
if let geoURI = timelineItem.content.geoURI { if let geoURI = timelineItem.content.geoURI {
let mapSize: CGSize = .init(width: 292, height: 188) MapLibreStaticMapView(geoURI: geoURI) {
MapLibreStaticMapView(geoURI: geoURI, size: mapSize) {
LocationMarkerView() LocationMarkerView()
} }
.frame(width: mapSize.width, height: mapSize.height) .frame(maxHeight: 300)
.aspectRatio(3 / 2, contentMode: .fit)
} else { } else {
FormattedBodyText(text: timelineItem.body) FormattedBodyText(text: timelineItem.body)
} }
@@ -36,10 +36,9 @@ struct LocationRoomTimelineView: View {
} }
private extension MapLibreStaticMapView { private extension MapLibreStaticMapView {
init(geoURI: GeoURI, size: CGSize, @ViewBuilder pinAnnotationView: () -> PinAnnotation) { init(geoURI: GeoURI, @ViewBuilder pinAnnotationView: () -> PinAnnotation) {
self.init(coordinates: .init(latitude: geoURI.latitude, longitude: geoURI.longitude), self.init(coordinates: .init(latitude: geoURI.latitude, longitude: geoURI.longitude),
zoomLevel: 15, zoomLevel: 15,
imageSize: size,
attributionPlacement: .bottomLeft, attributionPlacement: .bottomLeft,
mapTilerStatic: MapTilerStaticMap(key: ServiceLocator.shared.settings.mapTilerApiKey, mapTilerStatic: MapTilerStaticMap(key: ServiceLocator.shared.settings.mapTilerApiKey,
lightURL: ServiceLocator.shared.settings.lightTileMapStyleURL, lightURL: ServiceLocator.shared.settings.lightTileMapStyleURL,