Fix animations and clean up

Author: Rawa

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt

@@ -89,33 +89,31 @@ private fun PreviewNotificationBanner() {
 
 @Composable
 fun NotificationBanner(
+    modifier: Modifier,
     notification: InAppNotification?,
     isPlayBuild: Boolean,
     onClickUpdateVersion: () -> Unit,
     onClickShowAccount: () -> Unit,
     onClickDismissNewDevice: () -> Unit
 ) {
-
-    // Hack to make sure view expands and contracts when AnimatedVisiblity is used
-    Box(modifier = Modifier.animateContentSize()) {
-        // Fix for animating to invisible state
-        val previous = rememberPrevious(current = notification, shouldUpdate = { _, _ -> true })
-        AnimatedVisibility(
-            visible = notification != null,
-            enter = slideInVertically(initialOffsetY = { -it }),
-            exit = slideOutVertically(targetOffsetY = { -it }),
-        ) {
-            val visibleNotification = notification ?: previous
-            if (visibleNotification != null)
-                Notification(
-                    visibleNotification.toNotificationData(
-                        isPlayBuild = isPlayBuild,
-                        onClickUpdateVersion,
-                        onClickShowAccount,
-                        onClickDismissNewDevice
-                    )
+    // Fix for animating to invisible state
+    val previous = rememberPrevious(current = notification, shouldUpdate = { _, _ -> true })
+    AnimatedVisibility(
+        modifier = modifier,
+        visible = notification != null,
+        enter = slideInVertically(initialOffsetY = { -it }),
+        exit = slideOutVertically(targetOffsetY = { -it }),
+    ) {
+        val visibleNotification = notification ?: previous
+        if (visibleNotification != null)
+            Notification(
+                visibleNotification.toNotificationData(
+                    isPlayBuild = isPlayBuild,
+                    onClickUpdateVersion,
+                    onClickShowAccount,
+                    onClickDismissNewDevice
                 )
-        }
+            )
     }
 }
 

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

@@ -4,6 +4,7 @@ import android.content.Intent
 import android.net.Uri
 import androidx.compose.animation.animateContentSize
 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
@@ -201,6 +202,15 @@ fun ConnectScreen(
             progressIndicatorBias,
         )
 
+        NotificationBanner(
+            modifier = Modifier.padding(top = it.calculateTopPadding()),
+            notification = uiState.inAppNotification,
+            isPlayBuild = uiState.isPlayBuild,
+            onClickUpdateVersion = onUpdateVersionClick,
+            onClickShowAccount = onManageAccountClick,
+            onClickDismissNewDevice = onDismissNewDeviceClick,
+        )
+
         Column(
             verticalArrangement = Arrangement.Bottom,
             horizontalAlignment = Alignment.Start,
@@ -215,15 +225,7 @@ fun ConnectScreen(
                     .verticalScroll(scrollState)
                     .testTag(SCROLLABLE_COLUMN_TEST_TAG)
         ) {
-            NotificationBanner(
-                notification = uiState.inAppNotification,
-                isPlayBuild = uiState.isPlayBuild,
-                onClickUpdateVersion = onUpdateVersionClick,
-                onClickShowAccount = onManageAccountClick,
-                onClickDismissNewDevice = onDismissNewDeviceClick,
-            )
-
-            Spacer(modifier = Modifier.weight(1f))
+            Spacer(modifier = Modifier.defaultMinSize(minHeight = Dimens.mediumPadding).weight(1f))
             MullvadCircularProgressIndicatorLarge(
                 color = MaterialTheme.colorScheme.onPrimary,
                 modifier =

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

@@ -65,12 +65,14 @@ fun animatedCameraPosition(
                 targetValue = 1f,
                 animationSpec =
                     keyframes {
-                        if (duration < SHORT_ANIMATION_MILLIS) {
+                        if (duration < SHORT_ANIMATION_CUTOFF_MILLIS) {
                             durationMillis = duration
                             1f at duration using EaseInOut
                         } else {
                             durationMillis = duration
-                            1.25f at duration / 3 using EaseInOut
+                            FAR_ANIMATION_MAX_ZOOM_MULTIPLIER at
+                                (duration * MAX_MULTIPLIER_PEAK_TIMING).toInt() using
+                                EaseInOut
                             1f at duration using EaseInOut
                         }
                     }
@@ -79,11 +81,16 @@ fun animatedCameraPosition(
     }
 
     LaunchedEffect(marker?.type) {
-        launch { secureZoomAnimation.animateTo(targetValue = marker?.type.toZoom(), tween(2000)) }
+        launch {
+            secureZoomAnimation.animateTo(
+                targetValue = marker?.type.toZoom(),
+                tween(SECURE_ZOOM_ANIMATION_MILLIS)
+            )
+        }
     }
 
     return CameraPosition(
-        zoom = secureZoomAnimation.value * zoomOutMultiplier.value * 0.9f,
+        zoom = secureZoomAnimation.value * zoomOutMultiplier.value,
         latLong =
             LatLong(
                 Latitude(latitudeAnimation.value),

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

@@ -79,9 +79,21 @@ fun MarkerType?.toZoom() =
 fun Int.toAnimationDuration() =
     (this * DISTANCE_DURATION_SCALE_FACTOR).coerceIn(MIN_ANIMATION_MILLIS, MAX_ANIMATION_MILLIS)
 
-const val SECURE_ZOOM = 1.25f
-const val UNSECURE_ZOOM = 1.35f
+// 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 SHORT_ANIMATION_MILLIS = 1700
 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

@@ -2,5 +2,4 @@ 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

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

@@ -98,13 +98,11 @@ internal fun initIndexBuffer(dataBuffer: Buffer): IndexBufferWithLength {
     )
 }
 
+internal class IndexBufferWithLength(val indexBuffer: Int, val length: Int)
+
 internal fun newIdentityMatrix(): FloatArray =
     FloatArray(MATRIX_SIZE).apply { Matrix.setIdentityM(this, 0) }
 
 internal fun Color.toFloatArray(): FloatArray {
     return floatArrayOf(red, green, blue, alpha)
-}
-
-internal fun Color.toFloatArrayWithoutAlpha(): FloatArray {
-    return floatArrayOf(red, green, blue)
-}
+}

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

@@ -17,8 +17,8 @@ value class Latitude(val value: Float) {
     operator fun minus(other: Latitude) = fromFloat(value - other.value)
 
     companion object {
-        private const val MIN_LATITUDE_VALUE: Float = -COMPLETE_ANGLE / 4 // -90
-        private const val MAX_LATITUDE_VALUE: Float = COMPLETE_ANGLE / 4 // 90
+        private const val MIN_LATITUDE_VALUE: Float = -90f
+        private const val MAX_LATITUDE_VALUE: Float = 90f
         private val LATITUDE_RANGE = MIN_LATITUDE_VALUE..MAX_LATITUDE_VALUE
 
         /**
@@ -53,7 +53,3 @@ value class Latitude(val value: Float) {
         }
     }
 }
-
-fun Float.toRadians(): Float {
-    return this * (Math.PI.toFloat() / 180f)
-}

android/lib/map/src/main/res/raw/fragment_shader.glsl

@@ -28,8 +28,8 @@ value class Longitude(val value: Float) {
     operator fun minus(other: Longitude) = fromFloat(value - other.value)
 
     companion object {
-        private const val MIN_LONGITUDE_VALUE: Float = -COMPLETE_ANGLE / 2 // -180
-        private const val MAX_LONGITUDE_VALUE: Float = COMPLETE_ANGLE / 2 // 180
+        private const val MIN_LONGITUDE_VALUE: Float = -180f
+        private const val MAX_LONGITUDE_VALUE: Float = 180f
         private val LONGITUDE_RANGE = MIN_LONGITUDE_VALUE..MAX_LONGITUDE_VALUE
 
         /**