Display avatars full screen when tapping on them from the room or member detail screens

ElementX/Sources/FlowCoordinators/RoomFlowCoordinator.swift

@@ -558,7 +558,10 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
         guard let roomProxy else {
             fatalError()
         }
-        let params = RoomMemberDetailsScreenCoordinatorParameters(roomProxy: roomProxy, roomMemberProxy: member, mediaProvider: userSession.mediaProvider)
+        let params = RoomMemberDetailsScreenCoordinatorParameters(roomProxy: roomProxy,
+                                                                  roomMemberProxy: member,
+                                                                  mediaProvider: userSession.mediaProvider,
+                                                                  userIndicatorController: userIndicatorController)
         let coordinator = RoomMemberDetailsScreenCoordinator(parameters: params)
 
         navigationStackCoordinator.push(coordinator) { [weak self] in

ElementX/Sources/Other/SwiftUI/Views/AvatarHeaderView.swift

@@ -23,15 +23,20 @@ struct AvatarHeaderView<Footer: View>: View {
     let avatarSize: AvatarSize
     let imageProvider: ImageProviderProtocol?
     let subtitle: String?
+    var onAvatarTap: (() -> Void)?
     @ViewBuilder var footer: () -> Footer
 
     var body: some View {
         VStack(spacing: 8.0) {
-            LoadableAvatarImage(url: avatarUrl,
+            Button {
-                                name: name,
+                onAvatarTap?()
-                                contentID: id,
+            } label: {
-                                avatarSize: avatarSize,
+                LoadableAvatarImage(url: avatarUrl,
-                                imageProvider: imageProvider)
+                                    name: name,
+                                    contentID: id,
+                                    avatarSize: avatarSize,
+                                    imageProvider: imageProvider)
+            }
 
             Text(name ?? id)
                 .foregroundColor(.compound.textPrimary)

ElementX/Sources/Screens/RoomDetailsScreen/RoomDetailsScreenModels.swift

@@ -137,6 +137,9 @@ struct RoomDetailsScreenViewStateBindings {
     var alertInfo: AlertInfo<RoomDetailsScreenErrorType>?
     var leaveRoomAlertItem: LeaveRoomAlertItem?
     var ignoreUserRoomAlertItem: IgnoreUserAlertItem?
+    
+    /// A media item that will be previewed with QuickLook.
+    var mediaPreviewItem: MediaPreviewItem?
 }
 
 struct LeaveRoomAlertItem: AlertProtocol {
@@ -174,6 +177,7 @@ enum RoomDetailsScreenViewAction {
     case unignoreConfirmed
     case processTapNotifications
     case processToogleMuteNotifications
+    case displayAvatar
 }
 
 enum RoomDetailsScreenViewShortcut {

ElementX/Sources/Screens/RoomDetailsScreen/RoomDetailsScreenViewModel.swift

@@ -22,6 +22,7 @@ typealias RoomDetailsScreenViewModelType = StateStoreViewModel<RoomDetailsScreen
 class RoomDetailsScreenViewModel: RoomDetailsScreenViewModelType, RoomDetailsScreenViewModelProtocol {
     private let accountUserID: String
     private let roomProxy: RoomProxyProtocol
+    private let mediaProvider: MediaProviderProtocol
     private let userIndicatorController: UserIndicatorControllerProtocol
     private let notificationSettingsProxy: NotificationSettingsProxyProtocol
 
@@ -41,6 +42,7 @@ class RoomDetailsScreenViewModel: RoomDetailsScreenViewModelType, RoomDetailsScr
          appSettings: AppSettings) {
         self.accountUserID = accountUserID
         self.roomProxy = roomProxy
+        self.mediaProvider = mediaProvider
         self.userIndicatorController = userIndicatorController
         self.notificationSettingsProxy = notificationSettingsProxy
         
@@ -104,6 +106,8 @@ class RoomDetailsScreenViewModel: RoomDetailsScreenViewModelType, RoomDetailsScr
             }
         case .processToogleMuteNotifications:
             Task { await toggleMuteNotifications() }
+        case .displayAvatar:
+            displayFullScreenAvatar()
         }
     }
     
@@ -260,4 +264,24 @@ class RoomDetailsScreenViewModel: RoomDetailsScreenViewModelType, RoomDetailsScr
             state.bindings.alertInfo = .init(id: .unknown)
         }
     }
+    
+    private func displayFullScreenAvatar() {
+        guard let avatarURL = roomProxy.avatarURL else {
+            return
+        }
+        
+        let loadingIndicatorIdentifier = "roomAvatarLoadingIndicator"
+        userIndicatorController.submitIndicator(UserIndicator(id: loadingIndicatorIdentifier, type: .modal, title: L10n.commonLoading, persistent: true))
+        
+        Task {
+            defer {
+                userIndicatorController.retractIndicatorWithId(loadingIndicatorIdentifier)
+            }
+            
+            // We don't actually know the mime type here, assume it's an image.
+            if case let .success(file) = await mediaProvider.loadFileFromSource(.init(url: avatarURL, mimeType: "image/jpeg")) {
+                state.bindings.mediaPreviewItem = MediaPreviewItem(file: file, title: roomProxy.roomTitle)
+            }
+        }
+    }
 }

ElementX/Sources/Screens/RoomDetailsScreen/View/RoomDetailsScreen.swift

@@ -65,6 +65,7 @@ struct RoomDetailsScreen: View {
             }
         }
         .track(screen: .roomDetails)
+        .interactiveQuickLook(item: $context.mediaPreviewItem)
     }
     
     // MARK: - Private
@@ -76,6 +77,8 @@ struct RoomDetailsScreen: View {
                          avatarSize: .room(on: .details),
                          imageProvider: context.imageProvider,
                          subtitle: context.viewState.canonicalAlias) {
+            context.send(viewAction: .displayAvatar)
+        } footer: {
             if !context.viewState.shortcuts.isEmpty {
                 headerSectionShortcuts
             }
@@ -90,6 +93,8 @@ struct RoomDetailsScreen: View {
                          avatarSize: .user(on: .memberDetails),
                          imageProvider: context.imageProvider,
                          subtitle: recipient.id) {
+            context.send(viewAction: .displayAvatar)
+        } footer: {
             if !context.viewState.shortcuts.isEmpty {
                 headerSectionShortcuts
             }

ElementX/Sources/Screens/RoomMemberDetailsScreen/RoomMemberDetailsScreenCoordinator.swift

@@ -20,6 +20,7 @@ struct RoomMemberDetailsScreenCoordinatorParameters {
     let roomProxy: RoomProxyProtocol
     let roomMemberProxy: RoomMemberProxyProtocol
     let mediaProvider: MediaProviderProtocol
+    let userIndicatorController: UserIndicatorControllerProtocol
 }
 
 enum RoomMemberDetailsScreenCoordinatorAction { }
@@ -35,7 +36,8 @@ final class RoomMemberDetailsScreenCoordinator: CoordinatorProtocol {
 
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: parameters.roomProxy,
                                                      roomMemberProxy: parameters.roomMemberProxy,
-                                                     mediaProvider: parameters.mediaProvider)
+                                                     mediaProvider: parameters.mediaProvider,
+                                                     userIndicatorController: parameters.userIndicatorController)
     }
 
     func start() { }

ElementX/Sources/Screens/RoomMemberDetailsScreen/RoomMemberDetailsScreenModels.swift

@@ -66,6 +66,9 @@ struct RoomMemberDetailsScreenViewStateBindings {
     
     var ignoreUserAlert: IgnoreUserAlertItem?
     var alertInfo: AlertInfo<RoomMemberDetailsScreenError>?
+    
+    /// A media item that will be previewed with QuickLook.
+    var mediaPreviewItem: MediaPreviewItem?
 }
 
 enum RoomMemberDetailsScreenViewAction {
@@ -73,6 +76,7 @@ enum RoomMemberDetailsScreenViewAction {
     case showIgnoreAlert
     case ignoreConfirmed
     case unignoreConfirmed
+    case displayAvatar
 }
 
 enum RoomMemberDetailsScreenError: Hashable {

ElementX/Sources/Screens/RoomMemberDetailsScreen/RoomMemberDetailsScreenViewModel.swift

@@ -21,14 +21,23 @@ typealias RoomMemberDetailsScreenViewModelType = StateStoreViewModel<RoomMemberD
 class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, RoomMemberDetailsScreenViewModelProtocol {
     private let roomProxy: RoomProxyProtocol
     private let roomMemberProxy: RoomMemberProxyProtocol
+    private let mediaProvider: MediaProviderProtocol
+    private let userIndicatorController: UserIndicatorControllerProtocol
     
     var callback: ((RoomMemberDetailsScreenViewModelAction) -> Void)?
     
-    init(roomProxy: RoomProxyProtocol, roomMemberProxy: RoomMemberProxyProtocol, mediaProvider: MediaProviderProtocol) {
+    init(roomProxy: RoomProxyProtocol,
+         roomMemberProxy: RoomMemberProxyProtocol,
+         mediaProvider: MediaProviderProtocol,
+         userIndicatorController: UserIndicatorControllerProtocol) {
         self.roomProxy = roomProxy
         self.roomMemberProxy = roomMemberProxy
+        self.mediaProvider = mediaProvider
+        self.userIndicatorController = userIndicatorController
+        
         let initialViewState = RoomMemberDetailsScreenViewState(details: RoomMemberDetails(withProxy: roomMemberProxy),
                                                                 bindings: .init())
+        
         super.init(initialViewState: initialViewState, imageProvider: mediaProvider)
     }
     
@@ -44,6 +53,8 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
             Task { await ignoreUser() }
         case .unignoreConfirmed:
             Task { await unignoreUser() }
+        case .displayAvatar:
+            displayFullScreenAvatar()
         }
     }
 
@@ -82,4 +93,24 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
             await self.roomProxy.updateMembers()
         }
     }
+    
+    private func displayFullScreenAvatar() {
+        guard let avatarURL = roomMemberProxy.avatarURL else {
+            return
+        }
+        
+        let loadingIndicatorIdentifier = "roomMemberAvatarLoadingIndicator"
+        userIndicatorController.submitIndicator(UserIndicator(id: loadingIndicatorIdentifier, type: .modal, title: L10n.commonLoading, persistent: true))
+        
+        Task {
+            defer {
+                userIndicatorController.retractIndicatorWithId(loadingIndicatorIdentifier)
+            }
+            
+            // We don't actually know the mime type here, assume it's an image.
+            if case let .success(file) = await mediaProvider.loadFileFromSource(.init(url: avatarURL, mimeType: "image/jpeg")) {
+                state.bindings.mediaPreviewItem = MediaPreviewItem(file: file, title: roomMemberProxy.displayName)
+            }
+        }
+    }
 }

ElementX/Sources/Screens/RoomMemberDetailsScreen/View/RoomMemberDetailsScreen.swift

@@ -31,6 +31,7 @@ struct RoomMemberDetailsScreen: View {
         .alert(item: $context.ignoreUserAlert, actions: blockUserAlertActions, message: blockUserAlertMessage)
         .alert(item: $context.alertInfo)
         .track(screen: .user)
+        .interactiveQuickLook(item: $context.mediaPreviewItem)
     }
     
     // MARK: - Private
@@ -43,6 +44,8 @@ struct RoomMemberDetailsScreen: View {
                          avatarSize: .user(on: .memberDetails),
                          imageProvider: context.imageProvider,
                          subtitle: context.viewState.details.id) {
+            context.send(viewAction: .displayAvatar)
+        } footer: {
             if let permalink = context.viewState.details.permalink {
                 HStack(spacing: 32) {
                     ShareLink(item: permalink) {
@@ -101,17 +104,26 @@ struct RoomMemberDetailsScreen_Previews: PreviewProvider {
     static let roomProxyMock = RoomProxyMock(with: .init(displayName: ""))
     static let otherUserViewModel = {
         let member = RoomMemberProxyMock.mockDan
-        return RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock, roomMemberProxy: member, mediaProvider: MockMediaProvider())
+        return RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
+                                                roomMemberProxy: member,
+                                                mediaProvider: MockMediaProvider(),
+                                                userIndicatorController: ServiceLocator.shared.userIndicatorController)
     }()
 
     static let accountOwnerViewModel = {
         let member = RoomMemberProxyMock.mockMe
-        return RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock, roomMemberProxy: member, mediaProvider: MockMediaProvider())
+        return RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
+                                                roomMemberProxy: member,
+                                                mediaProvider: MockMediaProvider(),
+                                                userIndicatorController: ServiceLocator.shared.userIndicatorController)
     }()
 
     static let ignoredUserViewModel = {
         let member = RoomMemberProxyMock.mockIgnored
-        return RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock, roomMemberProxy: member, mediaProvider: MockMediaProvider())
+        return RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
+                                                roomMemberProxy: member,
+                                                mediaProvider: MockMediaProvider(),
+                                                userIndicatorController: ServiceLocator.shared.userIndicatorController)
     }()
     
     static var previews: some View {

ElementX/Sources/Screens/RoomMemberListScreen/RoomMembersListScreenCoordinator.swift

@@ -63,7 +63,10 @@ final class RoomMembersListScreenCoordinator: CoordinatorProtocol {
     // MARK: - Private
 
     private func selectMember(_ member: RoomMemberProxyProtocol) {
-        let parameters = RoomMemberDetailsScreenCoordinatorParameters(roomProxy: parameters.roomProxy, roomMemberProxy: member, mediaProvider: parameters.mediaProvider)
+        let parameters = RoomMemberDetailsScreenCoordinatorParameters(roomProxy: parameters.roomProxy,
+                                                                      roomMemberProxy: member,
+                                                                      mediaProvider: parameters.mediaProvider,
+                                                                      userIndicatorController: ServiceLocator.shared.userIndicatorController)
         let coordinator = RoomMemberDetailsScreenCoordinator(parameters: parameters)
 
         navigationStackCoordinator?.push(coordinator)

ElementX/Sources/UITests/UITestsAppCoordinator.swift

@@ -525,17 +525,26 @@ class MockScreen: Identifiable {
             return navigationStackCoordinator
         case .roomMemberDetailsAccountOwner:
             let navigationStackCoordinator = NavigationStackCoordinator()
-            let coordinator = RoomMemberDetailsScreenCoordinator(parameters: .init(roomProxy: RoomProxyMock(with: .init(displayName: "")), roomMemberProxy: RoomMemberProxyMock.mockMe, mediaProvider: MockMediaProvider()))
+            let coordinator = RoomMemberDetailsScreenCoordinator(parameters: .init(roomProxy: RoomProxyMock(with: .init(displayName: "")),
+                                                                                   roomMemberProxy: RoomMemberProxyMock.mockMe,
+                                                                                   mediaProvider: MockMediaProvider(),
+                                                                                   userIndicatorController: ServiceLocator.shared.userIndicatorController))
             navigationStackCoordinator.setRootCoordinator(coordinator)
             return navigationStackCoordinator
         case .roomMemberDetails:
             let navigationStackCoordinator = NavigationStackCoordinator()
-            let coordinator = RoomMemberDetailsScreenCoordinator(parameters: .init(roomProxy: RoomProxyMock(with: .init(displayName: "")), roomMemberProxy: RoomMemberProxyMock.mockAlice, mediaProvider: MockMediaProvider()))
+            let coordinator = RoomMemberDetailsScreenCoordinator(parameters: .init(roomProxy: RoomProxyMock(with: .init(displayName: "")),
+                                                                                   roomMemberProxy: RoomMemberProxyMock.mockAlice,
+                                                                                   mediaProvider: MockMediaProvider(),
+                                                                                   userIndicatorController: ServiceLocator.shared.userIndicatorController))
             navigationStackCoordinator.setRootCoordinator(coordinator)
             return navigationStackCoordinator
         case .roomMemberDetailsIgnoredUser:
             let navigationStackCoordinator = NavigationStackCoordinator()
-            let coordinator = RoomMemberDetailsScreenCoordinator(parameters: .init(roomProxy: RoomProxyMock(with: .init(displayName: "")), roomMemberProxy: RoomMemberProxyMock.mockIgnored, mediaProvider: MockMediaProvider()))
+            let coordinator = RoomMemberDetailsScreenCoordinator(parameters: .init(roomProxy: RoomProxyMock(with: .init(displayName: "")),
+                                                                                   roomMemberProxy: RoomMemberProxyMock.mockIgnored,
+                                                                                   mediaProvider: MockMediaProvider(),
+                                                                                   userIndicatorController: ServiceLocator.shared.userIndicatorController))
             navigationStackCoordinator.setRootCoordinator(coordinator)
             return navigationStackCoordinator
         case .invitesWithBadges:

UnitTests/Sources/RoomMemberDetailsViewModelTests.swift

@@ -33,7 +33,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         roomMemberProxyMock = RoomMemberProxyMock.mockAlice
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
 
         XCTAssertEqual(context.viewState.details, RoomMemberDetails(withProxy: roomMemberProxyMock))
         XCTAssertNil(context.ignoreUserAlert)
@@ -48,7 +49,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         }
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
 
         context.send(viewAction: .showIgnoreAlert)
         XCTAssertEqual(context.ignoreUserAlert, .init(action: .ignore))
@@ -74,7 +76,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         }
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
         context.send(viewAction: .showIgnoreAlert)
         XCTAssertEqual(context.ignoreUserAlert, .init(action: .ignore))
 
@@ -99,7 +102,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         }
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
 
         context.send(viewAction: .showUnignoreAlert)
         XCTAssertEqual(context.ignoreUserAlert, .init(action: .unignore))
@@ -125,7 +129,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         }
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
 
         context.send(viewAction: .showUnignoreAlert)
         XCTAssertEqual(context.ignoreUserAlert, .init(action: .unignore))
@@ -147,7 +152,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         roomMemberProxyMock = RoomMemberProxyMock.mockMe
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
 
         XCTAssertEqual(context.viewState.details, RoomMemberDetails(withProxy: roomMemberProxyMock))
         XCTAssertNil(context.ignoreUserAlert)
@@ -158,7 +164,8 @@ class RoomMemberDetailsViewModelTests: XCTestCase {
         roomMemberProxyMock = RoomMemberProxyMock.mockIgnored
         viewModel = RoomMemberDetailsScreenViewModel(roomProxy: roomProxyMock,
                                                      roomMemberProxy: roomMemberProxyMock,
-                                                     mediaProvider: MockMediaProvider())
+                                                     mediaProvider: MockMediaProvider(),
+                                                     userIndicatorController: ServiceLocator.shared.userIndicatorController)
 
         XCTAssertEqual(context.viewState.details, RoomMemberDetails(withProxy: roomMemberProxyMock))
         XCTAssertNil(context.ignoreUserAlert)

changelog.d/pr-1448.feature

@@ -0,0 +1 @@
+Display avatars full screen when tapping on them from the room or member detail screens