Media loading flow changes (#483)

* Use an imageProvider directly from the view in the home screen

* Add support for media request coalescing

* Rename MediaProxy to MediaLoader

* Add new image loading mechanism to the room details screen avatar.

* Use the `SettingsScreen` prefix for all settings screen related components

* Add new image loading mechanism to the room header

* Add new image loading mechanism to the room member details screen

* Introduce a LoadableImage SwiftUI view that will automatically handle image loading

* Adopt the new LoadableImage where possible

* Fix LoadableImage not using/storing loaded images properly

* Simplify media loader enqueueing

* Made LodableImage load content after mediaSource updates. Adopt it on the home and settings screens

* Introduce a LoadableAvatarImage component and reuse it throughout the app

* Small logging tweaks, made some LoadableImage properties private

* Fix redacted skeletons avatar background color

* Fix placeholder avatars changing when backgrounding the app

* PR comments.

- Trim the @ sign off of mxid placeholders.
- Only expose AvatarSize on the avatar image, use CGSize elsewhere.

Co-authored-by: Doug <douglase@element.io>

ElementX/Sources/Screens/Settings/SettingsScreenCoordinator.swift

@@ -16,30 +16,30 @@
 
 import SwiftUI
 
-struct SettingsCoordinatorParameters {
+struct SettingsScreenCoordinatorParameters {
     let navigationStackCoordinator: NavigationStackCoordinator
     let userNotificationController: UserNotificationControllerProtocol
     let userSession: UserSessionProtocol
     let bugReportService: BugReportServiceProtocol
 }
 
-enum SettingsCoordinatorAction {
+enum SettingsScreenCoordinatorAction {
     case dismiss
     case logout
 }
 
-final class SettingsCoordinator: CoordinatorProtocol {
-    private let parameters: SettingsCoordinatorParameters
-    private var viewModel: SettingsViewModelProtocol
+final class SettingsScreenCoordinator: CoordinatorProtocol {
+    private let parameters: SettingsScreenCoordinatorParameters
+    private var viewModel: SettingsScreenViewModelProtocol
 
-    var callback: ((SettingsCoordinatorAction) -> Void)?
+    var callback: ((SettingsScreenCoordinatorAction) -> Void)?
     
     // MARK: - Setup
     
-    init(parameters: SettingsCoordinatorParameters) {
+    init(parameters: SettingsScreenCoordinatorParameters) {
         self.parameters = parameters
         
-        viewModel = SettingsViewModel(withUserSession: parameters.userSession)
+        viewModel = SettingsScreenViewModel(withUserSession: parameters.userSession)
         viewModel.callback = { [weak self] action in
             guard let self else { return }
             

ElementX/Sources/Screens/Settings/SettingsScreenModels.swift

@@ -17,26 +17,26 @@
 import Foundation
 import UIKit
 
-enum SettingsViewModelAction {
+enum SettingsScreenViewModelAction {
     case close
     case toggleAnalytics
     case reportBug
     case logout
 }
 
-struct SettingsViewState: BindableState {
-    var bindings: SettingsViewStateBindings
+struct SettingsScreenViewState: BindableState {
+    var bindings: SettingsScreenViewStateBindings
     var deviceID: String?
     var userID: String
-    var userAvatar: UIImage?
+    var userAvatarURL: URL?
     var userDisplayName: String?
 }
 
-struct SettingsViewStateBindings {
+struct SettingsScreenViewStateBindings {
     var enableAnalytics = ServiceLocator.shared.settings.enableAnalytics
 }
 
-enum SettingsViewAction {
+enum SettingsScreenViewAction {
     case close
     case toggleAnalytics
     case reportBug

ElementX/Sources/Screens/Settings/SettingsScreenViewModel.swift

@@ -16,23 +16,22 @@
 
 import SwiftUI
 
-typealias SettingsViewModelType = StateStoreViewModel<SettingsViewState, SettingsViewAction>
+typealias SettingsScreenViewModelType = StateStoreViewModel<SettingsScreenViewState, SettingsScreenViewAction>
 
-class SettingsViewModel: SettingsViewModelType, SettingsViewModelProtocol {
+class SettingsScreenViewModel: SettingsScreenViewModelType, SettingsScreenViewModelProtocol {
     private let userSession: UserSessionProtocol
 
-    var callback: ((SettingsViewModelAction) -> Void)?
+    var callback: ((SettingsScreenViewModelAction) -> Void)?
 
     init(withUserSession userSession: UserSessionProtocol) {
         self.userSession = userSession
-        let bindings = SettingsViewStateBindings()
-        super.init(initialViewState: .init(bindings: bindings, deviceID: userSession.deviceId, userID: userSession.userID))
+        let bindings = SettingsScreenViewStateBindings()
+        super.init(initialViewState: .init(bindings: bindings, deviceID: userSession.deviceId, userID: userSession.userID),
+                   imageProvider: userSession.mediaProvider)
         
         Task {
             if case let .success(userAvatarURL) = await userSession.clientProxy.loadUserAvatarURL() {
-                if case let .success(avatar) = await userSession.mediaProvider.loadImageFromURL(userAvatarURL, avatarSize: .user(on: .settings)) {
-                    state.userAvatar = avatar
-                }
+                state.userAvatarURL = userAvatarURL
             }
         }
         
@@ -43,7 +42,7 @@ class SettingsViewModel: SettingsViewModelType, SettingsViewModelProtocol {
         }
     }
     
-    override func process(viewAction: SettingsViewAction) async {
+    override func process(viewAction: SettingsScreenViewAction) async {
         switch viewAction {
         case .close:
             callback?(.close)

ElementX/Sources/Screens/Settings/SettingsScreenViewModelProtocol.swift

@@ -17,7 +17,7 @@
 import Foundation
 
 @MainActor
-protocol SettingsViewModelProtocol {
-    var callback: ((SettingsViewModelAction) -> Void)? { get set }
-    var context: SettingsViewModelType.Context { get }
+protocol SettingsScreenViewModelProtocol {
+    var callback: ((SettingsScreenViewModelAction) -> Void)? { get set }
+    var context: SettingsScreenViewModelType.Context { get }
 }

ElementX/Sources/Screens/Settings/View/SettingsScreen.swift

@@ -25,7 +25,7 @@ struct SettingsScreen: View {
     @ScaledMetric private var menuIconSize = 30.0
     private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
     
-    @ObservedObject var context: SettingsViewModel.Context
+    @ObservedObject var context: SettingsScreenViewModel.Context
     
     var body: some View {
         Form {
@@ -69,7 +69,12 @@ struct SettingsScreen: View {
     private var userSection: some View {
         Section {
             HStack(spacing: 13) {
-                userAvatar
+                LoadableAvatarImage(url: context.viewState.userAvatarURL,
+                                    name: context.viewState.userDisplayName,
+                                    contentID: context.viewState.userID,
+                                    avatarSize: .user(on: .settings),
+                                    imageProvider: context.imageProvider)
+                
                 VStack(alignment: .leading, spacing: 4) {
                     Text(context.viewState.userDisplayName ?? "")
                         .font(.title3)
@@ -80,21 +85,6 @@ struct SettingsScreen: View {
             .listRowInsets(listRowInsets)
         }
     }
-
-    @ViewBuilder
-    private var userAvatar: some View {
-        if let avatar = context.viewState.userAvatar {
-            Image(uiImage: avatar)
-                .resizable()
-                .scaledToFill()
-                .frame(width: avatarSize, height: avatarSize)
-                .clipShape(Circle())
-        } else {
-            PlaceholderAvatarImage(text: context.viewState.userDisplayName ?? context.viewState.userID, contentId: context.viewState.userID)
-                .clipShape(Circle())
-                .frame(width: avatarSize, height: avatarSize)
-        }
-    }
     
     private var analyticsSection: some View {
         Section {
@@ -198,11 +188,11 @@ extension TimelineStyle: CustomStringConvertible {
 
 // MARK: - Previews
 
-struct Settings_Previews: PreviewProvider {
+struct SettingsScreen_Previews: PreviewProvider {
     static var previews: some View {
         let userSession = MockUserSession(clientProxy: MockClientProxy(userID: "@userid:example.com"),
                                           mediaProvider: MockMediaProvider())
-        let viewModel = SettingsViewModel(withUserSession: userSession)
+        let viewModel = SettingsScreenViewModel(withUserSession: userSession)
         
         NavigationView {
             SettingsScreen(context: viewModel.context)