Navigation support for upcoming Element Call Picture in Picture mode.

ElementX/Sources/Application/AppSettings.swift

@@ -288,6 +288,9 @@ final class AppSettings {
 
  @UserPreference(key: UserDefaultsKeys.timelineItemAuthenticityEnabled, defaultValue: false, storageType: .userDefaults(store))
  var timelineItemAuthenticityEnabled
+
+ // Not user configurable as it depends on work in EC too.
+ let elementCallPictureInPictureEnabled = false
 
  #endif
 

ElementX/Sources/Application/Navigation/NavigationCoordinators.swift

@@ -115,6 +115,28 @@ class NavigationSplitCoordinator: CoordinatorProtocol, ObservableObject, CustomS
  fullScreenCoverModule?.coordinator
  }
 
+ @Published fileprivate var overlayModule: NavigationModule? {
+ didSet {
+ if let oldValue {
+ logPresentationChange("Remove overlay", oldValue)
+ oldValue.tearDown()
+ }
+
+ if let overlayModule {
+ logPresentationChange("Set overlay", overlayModule)
+ overlayModule.coordinator?.start()
+ }
+ }
+ }
+
+ /// The currently displayed overlay coordinator
+ var overlayCoordinator: (any CoordinatorProtocol)? {
+ overlayModule?.coordinator
+ }
+
+ enum OverlayPresentationMode { case fullScreen, minimized }
+ @Published fileprivate var overlayPresentationMode: OverlayPresentationMode = .minimized
+
  fileprivate var compactLayoutRootModule: NavigationModule? {
  if let sidebarNavigationStackCoordinator = sidebarModule?.coordinator as? NavigationStackCoordinator {
  if let sidebarRootModule = sidebarNavigationStackCoordinator.rootModule {
@@ -282,6 +304,47 @@ class NavigationSplitCoordinator: CoordinatorProtocol, ObservableObject, CustomS
  fullScreenCoverModule = NavigationModule(coordinator, dismissalCallback: dismissalCallback)
  }
  }
+
+ /// Present an overlay on top of the split view
+ /// - Parameters:
+ /// - coordinator: the coordinator to display
+ /// - presentationMode: how the coordinator should be presented
+ /// - animated: whether the transition should be animated
+ /// - dismissalCallback: called when the overlay has been dismissed, programatically or otherwise
+ func setOverlayCoordinator(_ coordinator: (any CoordinatorProtocol)?,
+ presentationMode: OverlayPresentationMode = .fullScreen,
+ animated: Bool = true,
+ dismissalCallback: (() -> Void)? = nil) {
+ guard let coordinator else {
+ overlayModule = nil
+ return
+ }
+
+ if overlayModule?.coordinator === coordinator {
+ fatalError("Cannot use the same coordinator more than once")
+ }
+
+ var transaction = Transaction()
+ transaction.disablesAnimations = !animated
+
+ withTransaction(transaction) {
+ overlayPresentationMode = presentationMode
+ overlayModule = NavigationModule(coordinator, dismissalCallback: dismissalCallback)
+ }
+ }
+
+ /// Updates the presentation of the overlay coordinator.
+ /// - Parameters:
+ /// - mode: The type of presentation to use.
+ /// - animated: whether the transition should be animated
+ func setOverlayPresentationMode(_ mode: OverlayPresentationMode, animated: Bool = true) {
+ var transaction = Transaction()
+ transaction.disablesAnimations = !animated
+
+ withTransaction(transaction) {
+ overlayPresentationMode = mode
+ }
+ }
 
  // MARK: - CoordinatorProtocol
 
@@ -385,6 +448,16 @@ private struct NavigationSplitCoordinatorView: View {
  module.coordinator?.toPresentable()
  .id(module.id)
  }
+ .overlay {
+ Group {
+ if let coordinator = navigationSplitCoordinator.overlayModule?.coordinator {
+ coordinator.toPresentable()
+ .opacity(navigationSplitCoordinator.overlayPresentationMode == .minimized ? 0 : 1)
+ .transition(.opacity)
+ }
+ }
+ .animation(.elementDefault, value: navigationSplitCoordinator.overlayPresentationMode)
+ }
  // Handle `horizontalSizeClass` changes breaking the navigation bar
  // https://github.com/element-hq/element-x-ios/issues/617
  .onChange(of: horizontalSizeClass) { value in

ElementX/Sources/FlowCoordinators/UserSessionFlowCoordinator.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import AVKit
 import Combine
 import SwiftUI
 
@@ -557,27 +558,44 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
 
  // MARK: Calls
 
+ private var callScreenPictureInPictureController: AVPictureInPictureController?
  private func presentCallScreen(roomProxy: RoomProxyProtocol) {
+ guard elementCallService.ongoingCallRoomID != roomProxy.id else {
+ MXLog.info("Returning to existing call.")
+ callScreenPictureInPictureController?.stopPictureInPicture()
+ return
+ }
+
  let colorScheme: ColorScheme = appMediator.windowManager.mainWindow.traitCollection.userInterfaceStyle == .light ? .light : .dark
  let callScreenCoordinator = CallScreenCoordinator(parameters: .init(elementCallService: elementCallService,
  clientProxy: userSession.clientProxy,
  roomProxy: roomProxy,
  clientID: InfoPlistReader.main.bundleIdentifier,
  elementCallBaseURL: appSettings.elementCallBaseURL,
  elementCallBaseURLOverride: appSettings.elementCallBaseURLOverride,
+ elementCallPictureInPictureEnabled: appSettings.elementCallPictureInPictureEnabled,
  colorScheme: colorScheme,
  appHooks: appHooks))
 
  callScreenCoordinator.actions
  .sink { [weak self] action in
+ guard let self else { return }
  switch action {
+ case .pictureInPictureStarted(let controller):
+ MXLog.info("Hiding call for PiP presentation.")
+ callScreenPictureInPictureController = controller
+ navigationSplitCoordinator.setOverlayPresentationMode(.minimized)
+ case .pictureInPictureStopped:
+ MXLog.info("Restoring call after PiP presentation.")
+ navigationSplitCoordinator.setOverlayPresentationMode(.fullScreen)
+ callScreenPictureInPictureController = nil
  case .dismiss:
- self?.navigationSplitCoordinator.setSheetCoordinator(nil)
+ navigationSplitCoordinator.setOverlayCoordinator(nil)
  }
  }
  .store(in: &cancellables)
 
- navigationSplitCoordinator.setSheetCoordinator(callScreenCoordinator, animated: true)
+ navigationSplitCoordinator.setOverlayCoordinator(callScreenCoordinator, animated: true)
 
  analytics.track(screen: .RoomCall)
  }

ElementX/Sources/Mocks/Generated/GeneratedMocks.swift

@@ -4894,6 +4894,7 @@ class ElementCallServiceMock: ElementCallServiceProtocol {
  set(value) { underlyingActions = value }
  }
  var underlyingActions: AnyPublisher<ElementCallServiceAction, Never>!
+ var ongoingCallRoomID: String?
 
  //MARK: - setClientProxy
 

ElementX/Sources/Screens/CallScreen/CallScreenCoordinator.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import AVKit
 import Combine
 import SwiftUI
 
@@ -24,11 +25,17 @@ struct CallScreenCoordinatorParameters {
  let clientID: String
  let elementCallBaseURL: URL
  let elementCallBaseURLOverride: URL?
+ let elementCallPictureInPictureEnabled: Bool
  let colorScheme: ColorScheme
  let appHooks: AppHooks
 }
 
 enum CallScreenCoordinatorAction {
+ /// The call is still ongoing but the user wishes to navigate around the app.
+ case pictureInPictureStarted(AVPictureInPictureController?)
+ /// The call is hidden and the user wishes to return to it.
+ case pictureInPictureStopped
+ /// The call is finished and the screen is done with.
  case dismiss
 }
 
@@ -48,6 +55,7 @@ final class CallScreenCoordinator: CoordinatorProtocol {
  clientID: parameters.clientID,
  elementCallBaseURL: parameters.elementCallBaseURL,
  elementCallBaseURLOverride: parameters.elementCallBaseURLOverride,
+ elementCallPictureInPictureEnabled: parameters.elementCallPictureInPictureEnabled,
  colorScheme: parameters.colorScheme,
  appHooks: parameters.appHooks)
  }
@@ -57,6 +65,10 @@ final class CallScreenCoordinator: CoordinatorProtocol {
  guard let self else { return }
 
  switch action {
+ case .pictureInPictureStarted(let controller):
+ actionsSubject.send(.pictureInPictureStarted(controller))
+ case .pictureInPictureStopped:
+ actionsSubject.send(.pictureInPictureStopped)
  case .dismiss:
  actionsSubject.send(.dismiss)
  }

ElementX/Sources/Screens/CallScreen/CallScreenModels.swift

@@ -14,9 +14,12 @@
 // limitations under the License.
 //
 
+import AVKit
 import Foundation
 
 enum CallScreenViewModelAction {
+ case pictureInPictureStarted(AVPictureInPictureController?)
+ case pictureInPictureStopped
  case dismiss
 }
 
@@ -39,4 +42,5 @@ struct Bindings {
 
 enum CallScreenViewAction {
  case urlChanged(URL?)
+ case navigateBack
 }

ElementX/Sources/Screens/CallScreen/CallScreenViewModel.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import AVKit
 import CallKit
 import Combine
 import SwiftUI
@@ -23,6 +24,7 @@ typealias CallScreenViewModelType = StateStoreViewModel<CallScreenViewState, Cal
 class CallScreenViewModel: CallScreenViewModelType, CallScreenViewModelProtocol {
  private let elementCallService: ElementCallServiceProtocol
  private let roomProxy: RoomProxyProtocol
+ private let isPictureInPictureEnabled: Bool
 
  private let widgetDriver: ElementCallWidgetDriverProtocol
 
@@ -45,12 +47,14 @@ class CallScreenViewModel: CallScreenViewModelType, CallScreenViewModelProtocol
  clientID: String,
  elementCallBaseURL: URL,
  elementCallBaseURLOverride: URL?,
+ elementCallPictureInPictureEnabled: Bool,
  colorScheme: ColorScheme,
  appHooks: AppHooks) {
  guard let deviceID = clientProxy.deviceID else { fatalError("Missing device ID for the call.") }
 
  self.elementCallService = elementCallService
  self.roomProxy = roomProxy
+ isPictureInPictureEnabled = elementCallPictureInPictureEnabled
 
  widgetDriver = roomProxy.elementCallWidgetDriver(deviceID: deviceID)
 
@@ -151,13 +155,32 @@ class CallScreenViewModel: CallScreenViewModelType, CallScreenViewModelProtocol
  syncUpdateCancellable = nil
  }
  }, receiveValue: { _ in })
+
+ // Use did start otherwise there's a black box left on the screen during the pip controller animation.
+ NotificationCenter.default.publisher(for: .init("AVPictureInPictureControllerDidStartNotification"))
+ .sink { [weak self] notification in
+ guard let self else { return }
+ let controller = notification.object as? AVPictureInPictureController
+ actionsSubject.send(.pictureInPictureStarted(controller))
+ }
+ .store(in: &cancellables)
+
+ NotificationCenter.default.publisher(for: .init("AVPictureInPictureControllerWillStopNotification"))
+ .sink { [weak self] _ in
+ guard let self else { return }
+ actionsSubject.send(.pictureInPictureStopped)
+ Task { try await self.state.bindings.javaScriptEvaluator?("controls.disableCompatPip()") }
+ }
+ .store(in: &cancellables)
  }
 
  override func process(viewAction: CallScreenViewAction) {
  switch viewAction {
  case .urlChanged(let url):
  guard let url else { return }
  MXLog.info("URL changed to: \(url)")
+ case .navigateBack:
+ handleBackwardsNavigation()
  }
  }
 
@@ -171,6 +194,29 @@ class CallScreenViewModel: CallScreenViewModelType, CallScreenViewModelProtocol
 
  // MARK: - Private
 
+ private func handleBackwardsNavigation() {
+ #if targetEnvironment(simulator)
+ if UIDevice.current.isPhone {
+ MXLog.warning("The iPhone simulator doesn't support PiP.")
+ actionsSubject.send(.dismiss)
+ return
+ }
+ #endif
+
+ guard isPictureInPictureEnabled, state.url != nil else {
+ actionsSubject.send(.dismiss)
+ return
+ }
+
+ Task {
+ try await state.bindings.javaScriptEvaluator?("controls.enableCompatPip()")
+ // Enable this check when implemented on web.
+ // if result as? Bool != true {
+ // actionsSubject.send(.dismiss)
+ // }
+ }
+ }
+
  private func setAudioEnabled(_ enabled: Bool) async {
  let message = ElementCallWidgetMessage(direction: .toWidget,
  action: .mediaState,

ElementX/Sources/Screens/CallScreen/View/CallScreen.swift

@@ -15,13 +15,34 @@
 //
 
 import Combine
+import SFSafeSymbols
 import SwiftUI
 import WebKit
 
 struct CallScreen: View {
  @ObservedObject var context: CallScreenViewModel.Context
 
  var body: some View {
+ NavigationStack {
+ content
+ .frame(maxWidth: .infinity, maxHeight: .infinity)
+ .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+ .navigationBarTitleDisplayMode(.inline)
+ .toolbar {
+ ToolbarItem(placement: .cancellationAction) {
+ Button { context.send(viewAction: .navigateBack) } label: {
+ Image(systemSymbol: .chevronBackward)
+ .fontWeight(.semibold)
+ }
+ .offset(y: -8)
+ // .padding(.leading, -8) // Fixes the button alignment, but harder to tap.
+ }
+ }
+ }
+ }
+
+ @ViewBuilder
+ var content: some View {
  if context.viewState.url == nil {
  ProgressView()
  } else {
@@ -187,6 +208,7 @@ struct CallScreen_Previews: PreviewProvider {
  static let viewModel = {
  let clientProxy = ClientProxyMock()
  clientProxy.getElementWellKnownReturnValue = .success(nil)
+ clientProxy.deviceID = "call-device-id"
 
  let roomProxy = RoomProxyMock()
  roomProxy.sendCallNotificationIfNeeededReturnValue = .success(())
@@ -204,6 +226,7 @@ struct CallScreen_Previews: PreviewProvider {
  clientID: "io.element.elementx",
  elementCallBaseURL: "https://call.element.io",
  elementCallBaseURLOverride: nil,
+ elementCallPictureInPictureEnabled: false,
  colorScheme: .light,
  appHooks: AppHooks())
  }()

ElementX/Sources/Screens/RoomScreen/RoomScreenCoordinator.swift

@@ -156,6 +156,8 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
  actionsSubject.send(.presentRoomDetails)
  case .displayCall:
  actionsSubject.send(.presentCallScreen)
+ case .removeComposerFocus:
+ composerViewModel.process(timelineAction: .removeFocus)
  }
  }
  .store(in: &cancellables)

ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift

@@ -22,6 +22,7 @@ enum RoomScreenViewModelAction {
  case displayPinnedEventsTimeline
  case displayRoomDetails
  case displayCall
+ case removeComposerFocus
 }
 
 enum RoomScreenViewAction {