Refactor api

Author: Rawa

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt

@@ -3,8 +3,9 @@ package net.mullvad.mullvadvpn.compose.screen
 import android.content.Intent
 import android.net.Uri
 import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
@@ -19,6 +20,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableLongStateOf
@@ -61,8 +63,14 @@ import net.mullvad.mullvadvpn.compose.test.RECONNECT_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SCROLLABLE_COLUMN_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.compose.transitions.HomeTransition
+import net.mullvad.mullvadvpn.constant.SECURE_ZOOM
+import net.mullvad.mullvadvpn.constant.SECURE_ZOOM_ANIMATION_MILLIS
+import net.mullvad.mullvadvpn.constant.UNSECURE_ZOOM
 import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
-import net.mullvad.mullvadvpn.lib.map.Map
+import net.mullvad.mullvadvpn.lib.map.AnimatedMap
+import net.mullvad.mullvadvpn.lib.map.data.GlobeColors
+import net.mullvad.mullvadvpn.lib.map.data.LocationMarkerColors
+import net.mullvad.mullvadvpn.lib.map.data.Marker
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
@@ -194,12 +202,29 @@ fun ConnectScreen(
     ) {
         var progressIndicatorBias by remember { mutableFloatStateOf(0f) }
 
-        Map(
+        // Distance to marker when secure/unsecure
+        val baseZoom =
+            animateFloatAsState(
+                targetValue =
+                    if (uiState.tunnelRealState is TunnelState.Connected) SECURE_ZOOM
+                    else UNSECURE_ZOOM,
+                animationSpec = tween(SECURE_ZOOM_ANIMATION_MILLIS)
+            )
+
+        val markers = uiState.tunnelRealState.toMarker(uiState.location)?.let { listOf(it) }
+            ?: emptyList()
+
+        AnimatedMap(
             modifier = Modifier.padding(top = it.calculateTopPadding()),
-            uiState.animateMap,
-            uiState.location?.toLatLong() ?: gothenburgLatLong,
-            marker = uiState.tunnelRealState.toMarker(uiState.location),
-            progressIndicatorBias,
+            cameraLocation = uiState.location?.toLatLong() ?: gothenburgLatLong,
+            cameraBaseZoom = baseZoom.value,
+            cameraVerticalBias = progressIndicatorBias,
+            markers = markers,
+            globeColors =
+                GlobeColors(
+                    landColor = MaterialTheme.colorScheme.primary,
+                    oceanColor = MaterialTheme.colorScheme.secondary,
+                )
         )
 
         NotificationBanner(
@@ -317,19 +342,21 @@ fun ConnectScreen(
     }
 }
 
-fun TunnelState.toMarker(location: GeoIpLocation?): net.mullvad.mullvadvpn.lib.map.data.Marker? {
+@Composable
+fun TunnelState.toMarker(location: GeoIpLocation?): Marker? {
     if (location == null) return null
     return when (this) {
         is TunnelState.Connected ->
-            net.mullvad.mullvadvpn.lib.map.data.Marker(
+            Marker(
                 location.toLatLong(),
-                net.mullvad.mullvadvpn.lib.map.data.MarkerType.SECURE
+                colors =
+                    LocationMarkerColors(centerColor = MaterialTheme.colorScheme.inversePrimary),
             )
         is TunnelState.Connecting -> null
         is TunnelState.Disconnected ->
-            net.mullvad.mullvadvpn.lib.map.data.Marker(
+            Marker(
                 location.toLatLong(),
-                net.mullvad.mullvadvpn.lib.map.data.MarkerType.UNSECURE
+                colors = LocationMarkerColors(centerColor = MaterialTheme.colorScheme.error)
             )
         is TunnelState.Disconnecting -> null
         is TunnelState.Error -> null

android/app/src/main/kotlin/net/mullvad/mullvadvpn/constant/AnimationConstant.kt

@@ -9,3 +9,7 @@ const val SCREEN_ANIMATION_TIME_MILLIS = Spring.StiffnessMediumLow.toInt()
 const val HORIZONTAL_SLIDE_FACTOR = 1 / 3f
 
 fun Int.withHorizontalScalingFactor(): Int = (this * HORIZONTAL_SLIDE_FACTOR).toInt()
+
+const val SECURE_ZOOM = 1.15f
+const val UNSECURE_ZOOM = 1.20f
+const val SECURE_ZOOM_ANIMATION_MILLIS = 2000

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/CameraAnimation.kt

@@ -9,24 +9,27 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import kotlinx.coroutines.launch
 import net.mullvad.mullvadvpn.lib.map.data.CameraPosition
-import net.mullvad.mullvadvpn.lib.map.data.Marker
-import net.mullvad.mullvadvpn.lib.map.data.MarkerType
+import net.mullvad.mullvadvpn.lib.map.internal.DISTANCE_DURATION_SCALE_FACTOR
+import net.mullvad.mullvadvpn.lib.map.internal.FAR_ANIMATION_MAX_ZOOM_MULTIPLIER
+import net.mullvad.mullvadvpn.lib.map.internal.MAX_ANIMATION_MILLIS
+import net.mullvad.mullvadvpn.lib.map.internal.MAX_MULTIPLIER_PEAK_TIMING
+import net.mullvad.mullvadvpn.lib.map.internal.MIN_ANIMATION_MILLIS
+import net.mullvad.mullvadvpn.lib.map.internal.SHORT_ANIMATION_CUTOFF_MILLIS
 import net.mullvad.mullvadvpn.model.LatLong
 import net.mullvad.mullvadvpn.model.Latitude
 import net.mullvad.mullvadvpn.model.Longitude
 
 @Composable
 fun animatedCameraPosition(
+    baseZoom: Float,
     targetCameraLocation: LatLong,
-    marker: Marker?,
-    percent: Float,
+    cameraVerticalBias: Float,
 ): CameraPosition {
-    val tempPreviousLocation =
+    val previousLocation =
         rememberPrevious(
             current = targetCameraLocation,
             shouldUpdate = { prev, curr -> prev != curr }
         ) ?: targetCameraLocation
-    val previousLocation = remember(targetCameraLocation) { tempPreviousLocation }
 
     val distance =
         remember(targetCameraLocation) { targetCameraLocation.distanceTo(previousLocation).toInt() }
@@ -35,9 +38,6 @@ fun animatedCameraPosition(
     val longitudeAnimation = remember { Animatable(targetCameraLocation.longitude.value) }
 
     val latitudeAnimation = remember { Animatable(targetCameraLocation.latitude.value) }
-    val secureZoomAnimation = remember {
-        Animatable(if (marker?.type == MarkerType.SECURE) SECURE_ZOOM else UNSECURE_ZOOM)
-    }
     val zoomOutMultiplier = remember { Animatable(1f) }
 
     LaunchedEffect(targetCameraLocation) {
@@ -80,22 +80,16 @@ fun animatedCameraPosition(
         }
     }
 
-    LaunchedEffect(marker?.type) {
-        launch {
-            secureZoomAnimation.animateTo(
-                targetValue = marker?.type.toZoom(),
-                tween(SECURE_ZOOM_ANIMATION_MILLIS)
-            )
-        }
-    }
-
     return CameraPosition(
-        zoom = secureZoomAnimation.value * zoomOutMultiplier.value,
+        zoom = baseZoom * zoomOutMultiplier.value,
         latLong =
             LatLong(
                 Latitude(latitudeAnimation.value),
                 Longitude.fromFloat(longitudeAnimation.value)
             ),
-        bias = percent
+        bias = cameraVerticalBias
     )
 }
+
+private fun Int.toAnimationDuration() =
+    (this * DISTANCE_DURATION_SCALE_FACTOR).coerceIn(MIN_ANIMATION_MILLIS, MAX_ANIMATION_MILLIS)

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/Map.kt

@@ -9,30 +9,45 @@ import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import net.mullvad.mullvadvpn.lib.map.data.CameraPosition
-import net.mullvad.mullvadvpn.lib.map.data.MapConfig
+import net.mullvad.mullvadvpn.lib.map.data.GlobeColors
 import net.mullvad.mullvadvpn.lib.map.data.MapViewState
 import net.mullvad.mullvadvpn.lib.map.data.Marker
-import net.mullvad.mullvadvpn.lib.map.data.MarkerType
 import net.mullvad.mullvadvpn.lib.map.internal.MapGLSurfaceView
 import net.mullvad.mullvadvpn.model.LatLong
 
 @Composable
 fun Map(
     modifier: Modifier,
-    animateCameraMovement: Boolean,
-    cameraLocation: LatLong,
-    marker: Marker?,
-    percent: Float,
+    cameraLocation: CameraPosition,
+    markers: List<Marker>,
+    globeColors: GlobeColors,
 ) {
-    val mapViewState =
-        if (animateCameraMovement) {
-            MapViewState(marker, animatedCameraPosition(cameraLocation, marker, percent))
-        } else {
-            MapViewState(marker, CameraPosition(cameraLocation, marker?.type.toZoom(), percent))
-        }
+    val mapViewState = MapViewState(cameraLocation, markers, globeColors)
     Map(modifier = modifier, mapViewState = mapViewState)
 }
 
+@Composable
+fun AnimatedMap(
+    modifier: Modifier,
+    cameraLocation: LatLong,
+    cameraBaseZoom: Float,
+    cameraVerticalBias: Float,
+    markers: List<Marker>,
+    globeColors: GlobeColors
+) {
+    Map(
+        modifier = modifier,
+        cameraLocation =
+            animatedCameraPosition(
+                baseZoom = cameraBaseZoom,
+                targetCameraLocation = cameraLocation,
+                cameraVerticalBias = cameraVerticalBias
+            ),
+        markers = markers,
+        globeColors
+    )
+}
+
 @Composable
 internal fun Map(modifier: Modifier = Modifier, mapViewState: MapViewState) {
 
@@ -47,7 +62,7 @@ internal fun Map(modifier: Modifier = Modifier, mapViewState: MapViewState) {
                     view?.onResume()
                 }
                 Lifecycle.Event.ON_PAUSE -> {
-                    view?.onPause()
+                   view?.onPause()
                 }
                 else -> {}
             }
@@ -61,39 +76,8 @@ internal fun Map(modifier: Modifier = Modifier, mapViewState: MapViewState) {
         }
     }
 
-    // TODO how to handle mapConfig changes? Can we recreate the view? make them recomposable?
-    AndroidView(modifier = modifier, factory = { MapGLSurfaceView(it, mapConfig = MapConfig()) }) {
-        glSurfaceView ->
+    AndroidView(modifier = modifier, factory = { MapGLSurfaceView(it) }) { glSurfaceView ->
         view = glSurfaceView
         glSurfaceView.setData(mapViewState)
     }
 }
-
-fun MarkerType?.toZoom() =
-    when (this) {
-        MarkerType.SECURE -> SECURE_ZOOM
-        MarkerType.UNSECURE,
-        null -> UNSECURE_ZOOM
-    }
-
-fun Int.toAnimationDuration() =
-    (this * DISTANCE_DURATION_SCALE_FACTOR).coerceIn(MIN_ANIMATION_MILLIS, MAX_ANIMATION_MILLIS)
-
-// Distance to marker when secure/unsecure
-const val SECURE_ZOOM = 1.15f
-const val UNSECURE_ZOOM = 1.20f
-const val SECURE_ZOOM_ANIMATION_MILLIS = 2000
-
-// Constant what will talk the distance in LatLng multiply it to determine the animation duration,
-// the result is then confined to the MIN_ANIMATION_MILLIS and MAX_ANIMATION_MILLIS
-const val DISTANCE_DURATION_SCALE_FACTOR = 20
-const val MIN_ANIMATION_MILLIS = 1300
-const val MAX_ANIMATION_MILLIS = 2500
-// The cut off where we go from a short animation (camera pans) to a far animation (camera pans +
-// zoom out)
-const val SHORT_ANIMATION_CUTOFF_MILLIS = 1700
-
-// Multiplier for the zoom out animation
-const val FAR_ANIMATION_MAX_ZOOM_MULTIPLIER = 1.30f
-// When in the far animation we reach the MAX_ZOOM_MULTIPLIER, value is between 0 and 1
-const val MAX_MULTIPLIER_PEAK_TIMING = .35f

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/data/CameraPosition.kt

@@ -0,0 +1,6 @@
+package net.mullvad.mullvadvpn.lib.map.data
+
+import androidx.compose.runtime.Immutable
+import net.mullvad.mullvadvpn.model.LatLong
+
+@Immutable data class CameraPosition(val latLong: LatLong, val zoom: Float, val bias: Float)

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/data/GlobeColors.kt

@@ -1,12 +1,14 @@
 package net.mullvad.mullvadvpn.lib.map.data
 
+import androidx.compose.runtime.Immutable
 import androidx.compose.ui.graphics.Color
 import net.mullvad.mullvadvpn.lib.map.internal.toFloatArray
 
+@Immutable
 data class GlobeColors(
     val landColor: Color,
     val oceanColor: Color,
-    val contourColor: Color,
+    val contourColor: Color = oceanColor,
 ) {
     val landColorArray = landColor.toFloatArray()
     val oceanColorArray = oceanColor.toFloatArray()

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/data/LocationMarkerColors.kt

@@ -1,7 +1,9 @@
 package net.mullvad.mullvadvpn.lib.map.data
 
+import androidx.compose.runtime.Immutable
 import androidx.compose.ui.graphics.Color
 
+@Immutable
 data class LocationMarkerColors(
     val centerColor: Color,
     val ringBorderColor: Color = Color.White,

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/data/MapConfig.kt

@@ -1,7 +1,10 @@
 package net.mullvad.mullvadvpn.lib.map.data
 
-import net.mullvad.mullvadvpn.model.LatLong
+import androidx.compose.runtime.Immutable
 
-class MapViewState(val locationMarker: Marker?, val cameraPosition: CameraPosition)
-
-data class CameraPosition(val latLong: LatLong, val zoom: Float, val bias: Float)
+@Immutable
+class MapViewState(
+    val cameraPosition: CameraPosition,
+    val locationMarker: List<Marker>,
+    val globeColors: GlobeColors
+)

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/data/MapViewState.kt

@@ -1,10 +1,7 @@
 package net.mullvad.mullvadvpn.lib.map.data
 
+import androidx.compose.runtime.Immutable
 import net.mullvad.mullvadvpn.model.LatLong
 
-data class Marker(val latLong: LatLong, val type: MarkerType, val size: Float = 0.02f)
-
-enum class MarkerType {
-    SECURE,
-    UNSECURE
-}
+@Immutable
+data class Marker(val latLong: LatLong, val size: Float = 0.02f, val colors: LocationMarkerColors)

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/data/Marker.kt

@@ -3,3 +3,17 @@ package net.mullvad.mullvadvpn.lib.map.internal
 internal const val VERTEX_COMPONENT_SIZE = 3
 internal const val COLOR_COMPONENT_SIZE = 4
 internal const val MATRIX_SIZE = 16
+
+// Constant what will talk the distance in LatLng multiply it to determine the animation duration,
+// the result is then confined to the MIN_ANIMATION_MILLIS and MAX_ANIMATION_MILLIS
+const val DISTANCE_DURATION_SCALE_FACTOR = 20
+const val MIN_ANIMATION_MILLIS = 1300
+const val MAX_ANIMATION_MILLIS = 2500
+// The cut off where we go from a short animation (camera pans) to a far animation (camera pans +
+// zoom out)
+const val SHORT_ANIMATION_CUTOFF_MILLIS = 1700
+
+// Multiplier for the zoom out animation
+const val FAR_ANIMATION_MAX_ZOOM_MULTIPLIER = 1.30f
+// When in the far animation we reach the MAX_ZOOM_MULTIPLIER, value is between 0 and 1
+const val MAX_MULTIPLIER_PEAK_TIMING = .35f

android/lib/map/src/main/kotlin/net/mullvad/mullvadvpn/lib/map/internal/Constants.kt

@@ -105,4 +105,4 @@ internal fun newIdentityMatrix(): FloatArray =
 
 internal fun Color.toFloatArray(): FloatArray {
     return floatArrayOf(red, green, blue, alpha)
-}
+}