Skip to content

Commit

Permalink
Integrate map into ConnectScreen
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rawa
Rawa committed Feb 15, 2024
1 parent ec06620 commit db41792
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 51 deletions.
3 changes: 2 additions & 1 deletion .../kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ private fun PreviewNotificationBanner() {

@Composable
fun NotificationBanner(
modifier: Modifier,
notification: InAppNotification?,
isPlayBuild: Boolean,
onClickUpdateVersion: () -> Unit,
Expand All @@ -101,7 +102,7 @@ fun NotificationBanner(
visible = notification != null,
enter = slideInVertically(initialOffsetY = { -it }),
exit = slideOutVertically(targetOffsetY = { -it }),
modifier = Modifier.animateContentSize()
modifier = modifier
) {
val visibleNotification = notification ?: previous
if (visibleNotification != null)
Expand Down
176 changes: 129 additions & 47 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@ package net.mullvad.mullvadvpn.compose.screen

import android.content.Intent
import android.net.Uri
import androidx.compose.foundation.background
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.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
Expand All @@ -18,13 +21,18 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.layout.positionInParent
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.stringResource
Expand Down Expand Up @@ -55,15 +63,28 @@ 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.constant.fallbackLatLong
import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
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.AlphaInvisible
import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
import net.mullvad.mullvadvpn.model.GeoIpLocation
import net.mullvad.mullvadvpn.model.LatLong
import net.mullvad.mullvadvpn.model.Latitude
import net.mullvad.mullvadvpn.model.Longitude
import net.mullvad.mullvadvpn.model.TunnelState
import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild
import net.mullvad.mullvadvpn.viewmodel.ConnectViewModel
import net.mullvad.talpid.tunnel.ActionAfterDisconnect
import org.koin.androidx.compose.koinViewModel

private const val CONNECT_BUTTON_THROTTLE_MILLIS = 1000
Expand Down Expand Up @@ -164,66 +185,80 @@ fun ConnectScreen(
}

ScaffoldWithTopBarAndDeviceName(
topBarColor =
if (uiState.tunnelUiState.isSecured()) {
MaterialTheme.colorScheme.inversePrimary
} else {
MaterialTheme.colorScheme.error
},
iconTintColor =
if (uiState.tunnelUiState.isSecured()) {
MaterialTheme.colorScheme.onPrimary
} else {
MaterialTheme.colorScheme.onError
}
.copy(alpha = AlphaTopBar),
topBarColor = uiState.tunnelUiState.topBarColor(),
iconTintColor = uiState.tunnelUiState.iconTintColor(),
onSettingsClicked = onSettingsClick,
onAccountClicked = onAccountClick,
deviceName = uiState.deviceName,
timeLeft = uiState.daysLeftUntilExpiry
) {
var progressIndicatorBias by remember { mutableFloatStateOf(0f) }

// 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),
label = "baseZoom"
)

val markers =
uiState.tunnelRealState.toMarker(uiState.location)?.let { listOf(it) } ?: emptyList()

AnimatedMap(
modifier = Modifier.padding(top = it.calculateTopPadding()),
cameraLocation = uiState.location?.toLatLong() ?: fallbackLatLong,
cameraBaseZoom = baseZoom.value,
cameraVerticalBias = progressIndicatorBias,
markers = markers,
globeColors =
GlobeColors(
landColor = MaterialTheme.colorScheme.primary,
oceanColor = MaterialTheme.colorScheme.secondary,
)
)

Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.Start,
modifier =
Modifier.background(color = MaterialTheme.colorScheme.primary)
.padding(it)
Modifier.animateContentSize()
.padding(top = it.calculateTopPadding())
.fillMaxHeight()
.drawVerticalScrollbar(
scrollState,
color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaScrollbar)
)
.verticalScroll(scrollState)
.padding(bottom = Dimens.screenVerticalMargin)
.testTag(SCROLLABLE_COLUMN_TEST_TAG)
) {
NotificationBanner(
notification = uiState.inAppNotification,
isPlayBuild = uiState.isPlayBuild,
onClickUpdateVersion = onUpdateVersionClick,
onClickShowAccount = onManageAccountClick,
onClickDismissNewDevice = onDismissNewDeviceClick,
Spacer(modifier = Modifier.defaultMinSize(minHeight = Dimens.mediumPadding).weight(1f))
MullvadCircularProgressIndicatorLarge(
color = MaterialTheme.colorScheme.onPrimary,
modifier =
Modifier.animateContentSize()
.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
top = Dimens.mediumPadding
)
.alpha(if (uiState.showLoading) AlphaVisible else AlphaInvisible)
.align(Alignment.CenterHorizontally)
.testTag(CIRCULAR_PROGRESS_INDICATOR)
.onGloballyPositioned {
val offsetY = it.positionInParent().y + it.size.height / 2
it.parentLayoutCoordinates?.let {
val parentHeight = it.size.height
val verticalBias = offsetY / parentHeight
if (verticalBias.isFinite()) {
progressIndicatorBias = verticalBias
}
}
}
)
Spacer(modifier = Modifier.weight(1f))
if (
uiState.tunnelRealState is TunnelState.Connecting ||
(uiState.tunnelRealState is TunnelState.Disconnecting &&
uiState.tunnelRealState.actionAfterDisconnect ==
ActionAfterDisconnect.Reconnect)
) {
MullvadCircularProgressIndicatorLarge(
color = MaterialTheme.colorScheme.onPrimary,
modifier =
Modifier.padding(
start = Dimens.sideMargin,
end = Dimens.sideMargin,
top = Dimens.mediumPadding
)
.align(Alignment.CenterHorizontally)
.testTag(CIRCULAR_PROGRESS_INDICATOR)
)
}
Spacer(modifier = Modifier.height(Dimens.mediumPadding))
Spacer(modifier = Modifier.defaultMinSize(minHeight = Dimens.mediumPadding).weight(1f))
ConnectionStatusText(
state = uiState.tunnelRealState,
modifier = Modifier.padding(horizontal = Dimens.sideMargin)
Expand All @@ -243,9 +278,7 @@ fun ConnectScreen(
var expanded by rememberSaveable { mutableStateOf(false) }
LocationInfo(
onToggleTunnelInfo = { expanded = !expanded },
isVisible =
uiState.tunnelRealState !is TunnelState.Disconnected &&
uiState.location?.hostname != null,
isVisible = uiState.showLocationInfo,
isExpanded = expanded,
location = uiState.location,
inAddress = uiState.inAddress,
Expand Down Expand Up @@ -282,6 +315,55 @@ fun ConnectScreen(
connectClick = { handleThrottledAction(onConnectClick) },
reconnectButtonTestTag = RECONNECT_BUTTON_TEST_TAG
)
// We need to manually add this padding so we align size with the map
// component and marker with the progress indicator.
Spacer(modifier = Modifier.height(it.calculateBottomPadding()))
}

NotificationBanner(
modifier = Modifier.padding(top = it.calculateTopPadding()),
notification = uiState.inAppNotification,
isPlayBuild = uiState.isPlayBuild,
onClickUpdateVersion = onUpdateVersionClick,
onClickShowAccount = onManageAccountClick,
onClickDismissNewDevice = onDismissNewDeviceClick,
)
}
}

@Composable
fun TunnelState.toMarker(location: GeoIpLocation?): Marker? {
if (location == null) return null
return when (this) {
is TunnelState.Connected ->
Marker(
location.toLatLong(),
colors =
LocationMarkerColors(centerColor = MaterialTheme.colorScheme.inversePrimary),
)
is TunnelState.Connecting -> null
is TunnelState.Disconnected ->
Marker(
location.toLatLong(),
colors = LocationMarkerColors(centerColor = MaterialTheme.colorScheme.error)
)
is TunnelState.Disconnecting -> null
is TunnelState.Error -> null
}
}

@Composable
fun TunnelState.topBarColor(): Color =
if (isSecured()) MaterialTheme.colorScheme.inversePrimary else MaterialTheme.colorScheme.error

@Composable
fun TunnelState.iconTintColor(): Color =
if (isSecured()) {
MaterialTheme.colorScheme.onPrimary
} else {
MaterialTheme.colorScheme.onError
}
.copy(alpha = AlphaTopBar)

fun GeoIpLocation.toLatLong() =
LatLong(Latitude(latitude.toFloat()), Longitude(longitude.toFloat()))
10 changes: 8 additions & 2 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/ConnectUiState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,14 @@ data class ConnectUiState(
val inAppNotification: InAppNotification?,
val deviceName: String?,
val daysLeftUntilExpiry: Int?,
val isPlayBuild: Boolean
val isPlayBuild: Boolean,
) {

val showLocationInfo: Boolean =
tunnelRealState !is TunnelState.Disconnected && location?.hostname != null
val showLoading =
tunnelRealState is TunnelState.Connecting || tunnelRealState is TunnelState.Disconnecting

companion object {
val INITIAL =
ConnectUiState(
Expand All @@ -32,7 +38,7 @@ data class ConnectUiState(
inAppNotification = null,
deviceName = null,
daysLeftUntilExpiry = null,
isPlayBuild = false
isPlayBuild = false,
)
}
}
10 changes: 10 additions & 0 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/constant/AnimationConstant.kt
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
package net.mullvad.mullvadvpn.constant

import androidx.compose.animation.core.Spring
import net.mullvad.mullvadvpn.model.LatLong
import net.mullvad.mullvadvpn.model.Latitude
import net.mullvad.mullvadvpn.model.Longitude

const val MINIMUM_LOADING_TIME_MILLIS = 500L

Expand All @@ -9,3 +12,10 @@ 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

// Location of Gothenburg, Sweden
val fallbackLatLong = LatLong(Latitude(57.7065f), Longitude(11.967f))
2 changes: 1 addition & 1 deletion android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/ConnectViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ class ConnectViewModel(
inAppNotification = notifications.firstOrNull(),
deviceName = deviceName,
daysLeftUntilExpiry = accountExpiry.date()?.daysFromNow(),
isPlayBuild = isPlayBuild
isPlayBuild = isPlayBuild,
)
}
}
Expand Down

0 comments on commit db41792

Please sign in to comment.