Fix connection view background in iOS15

Author: rablador

ios/MullvadVPN/View controllers/Tunnel/ConnectionView/ConnectionView.swift

@@ -15,49 +15,36 @@ struct ConnectionView: View {
     @State private(set) var isExpanded = false
 
     var action: ButtonPanel.Action?
-    var onContentUpdate: (() -> Void)?
 
     var body: some View {
         Spacer()
             .accessibilityIdentifier(AccessibilityIdentifier.connectionView.asString)
 
-        VStack(spacing: 22) {
-            ZStack {
-                BlurView(style: .dark)
+        VStack(alignment: .leading, spacing: 0) {
+            HeaderView(viewModel: connectionViewModel, isExpanded: $isExpanded)
+                .padding(.bottom, headerViewBottomPadding)
 
-                VStack(alignment: .leading, spacing: 0) {
-                    HeaderView(viewModel: connectionViewModel, isExpanded: $isExpanded)
-                        .padding(.bottom, headerViewBottomPadding)
+            DetailsContainer(
+                connectionViewModel: connectionViewModel,
+                indicatorsViewModel: indicatorsViewModel,
+                isExpanded: $isExpanded
+            )
+            .showIf(connectionViewModel.showConnectionDetails)
 
-                    DetailsContainer(
-                        connectionViewModel: connectionViewModel,
-                        indicatorsViewModel: indicatorsViewModel,
-                        isExpanded: $isExpanded
-                    )
-                    .showIf(connectionViewModel.showConnectionDetails)
-
-                    ButtonPanel(viewModel: connectionViewModel, action: action)
-                        .padding(.top, 16)
-                }
-                .padding(16)
-            }
-            .cornerRadius(12)
-            .padding(16)
+            ButtonPanel(viewModel: connectionViewModel, action: action)
+                .padding(.top, 16)
         }
-        .padding(.bottom, 8) // Some spacing to avoid overlap with the map legal link.
-        .onChange(of: isExpanded) { _ in
-            onContentUpdate?()
-        }
-        .onReceive(connectionViewModel.combinedState) { _, _ in
+        .padding(16)
+        .background(BlurView(style: .dark))
+        .cornerRadius(12)
+        .padding(EdgeInsets(top: 16, leading: 16, bottom: 24, trailing: 16))
+        .onReceive(connectionViewModel.$tunnelStatus) { _ in
             // Only update expanded state when connections details should be hidden.
             // This will contract the view on eg. disconnect, but leave it as-is on
             // eg. connect.
             if !connectionViewModel.showConnectionDetails {
                 isExpanded = false
-                return
             }
-
-            onContentUpdate?()
         }
     }
 }
@@ -68,7 +55,7 @@ extension ConnectionView {
         let showConnectionDetails = connectionViewModel.showConnectionDetails
 
         return isExpanded
-            ? 16
+            ? showConnectionDetails ? 16 : 0
             : hasIndicators && showConnectionDetails ? 16 : 0
     }
 }

ios/MullvadVPN/View controllers/Tunnel/ConnectionView/ConnectionViewViewModel.swift

@@ -26,14 +26,6 @@ class ConnectionViewViewModel: ObservableObject {
 
     @Published private(set) var tunnelStatus: TunnelStatus
     @Published var outgoingConnectionInfo: OutgoingConnectionInfo?
-    @Published var showsActivityIndicator = false
-
-    var combinedState: Publishers.CombineLatest<
-        Published<TunnelStatus>.Publisher,
-        Published<Bool>.Publisher
-    > {
-        $tunnelStatus.combineLatest($showsActivityIndicator)
-    }
 
     var tunnelIsConnected: Bool {
         if case .connected = tunnelStatus.state {

ios/MullvadVPN/View controllers/Tunnel/TunnelViewController.swift

@@ -67,18 +67,11 @@ class TunnelViewController: UIViewController, RootContainment {
         )
 
         connectionView = ConnectionView(
-            connectionViewModel: self.connectionViewViewModel,
-            indicatorsViewModel: self.indicatorsViewViewModel
+            connectionViewModel: connectionViewViewModel,
+            indicatorsViewModel: indicatorsViewViewModel
         )
 
         super.init(nibName: nil, bundle: nil)
-
-        // When content size is updated in SwiftUI we need to explicitly tell UIKit to
-        // update its view size. This is not necessary on iOS 16 where we can set
-        // hostingController.sizingOptions instead.
-        connectionView.onContentUpdate = { [weak self] in
-            self?.connectionController?.view.setNeedsUpdateConstraints()
-        }
     }
 
     required init?(coder: NSCoder) {
@@ -168,20 +161,16 @@ class TunnelViewController: UIViewController, RootContainment {
         case let .connecting(tunnelRelays, _, _):
             mapViewController.removeLocationMarker()
             mapViewController.setCenter(tunnelRelays?.exit.location.geoCoordinate, animated: animated)
-            connectionViewViewModel.showsActivityIndicator = true
             activityIndicator.startAnimating()
 
         case let .reconnecting(tunnelRelays, _, _), let .negotiatingEphemeralPeer(tunnelRelays, _, _, _):
             activityIndicator.startAnimating()
             mapViewController.removeLocationMarker()
             mapViewController.setCenter(tunnelRelays.exit.location.geoCoordinate, animated: animated)
-            connectionViewViewModel.showsActivityIndicator = true
 
         case let .connected(tunnelRelays, _, _):
             let center = tunnelRelays.exit.location.geoCoordinate
             mapViewController.setCenter(center, animated: animated) {
-                self.connectionViewViewModel.showsActivityIndicator = false
-
                 // Connection can change during animation, so make sure we're still connected before adding marker.
                 if case .connected = self.tunnelState {
                     self.mapViewController.addLocationMarker(coordinate: center)
@@ -192,18 +181,15 @@ class TunnelViewController: UIViewController, RootContainment {
         case .pendingReconnect:
             activityIndicator.startAnimating()
             mapViewController.removeLocationMarker()
-            connectionViewViewModel.showsActivityIndicator = true
 
         case .waitingForConnectivity, .error:
             activityIndicator.stopAnimating()
             mapViewController.removeLocationMarker()
-            connectionViewViewModel.showsActivityIndicator = false
 
         case .disconnected, .disconnecting:
             activityIndicator.stopAnimating()
             mapViewController.removeLocationMarker()
             mapViewController.setCenter(nil, animated: animated)
-            connectionViewViewModel.showsActivityIndicator = false
         }
     }
 

ios/MullvadVPN/Views/BlurView.swift

@@ -13,10 +13,7 @@ struct BlurView: View {
     var style: UIBlurEffect.Style
 
     var body: some View {
-        Spacer()
-            .overlay {
-                VisualEffectView(effect: UIBlurEffect(style: style))
-                    .opacity(0.8)
-            }
+        VisualEffectView(effect: UIBlurEffect(style: style))
+            .opacity(0.8)
     }
 }