Do avatar placeholder in SwiftUI, Add AvatarViewModel, Add dependency injection for MxMediaManager dependency.

2026-04-30 21:26:57 +02:00 · 2021-08-15 00:36:15 +01:00
parent 90e686efd0
commit 807dfdfce2
28 changed files with 490 additions and 190 deletions
@@ -0,0 +1,108 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+import DesignKit
+
+@available(iOS 14.0, *)
+struct AvatarImage: View {
+    
+    @Environment(\.theme) var theme: Theme
+    @Environment(\.dependencies) var dependencies: DependencyContainer
+    @StateObject var viewModel = AvatarViewModel()
+    
+    var mxContentUri: String?
+    var matrixItemId: String
+    var displayName: String = ""
+    var size: AvatarSize
+    
+    var body: some View {
+        Group {
+            if let image = viewModel.viewState.avatarImage {
+                Image(uiImage: image)
+                    .resizable()
+                    .frame(width: CGFloat(size.rawValue), height: CGFloat(size.rawValue))
+                    .clipShape(Circle())
+            } else {
+                Text(firstCharacterCapitalized(displayName))
+                    .padding(4)
+                    .frame(width: CGFloat(size.rawValue), height: CGFloat(size.rawValue))
+                    .foregroundColor(.white)
+                    .background(stableColor)
+                    .clipShape(Circle())
+                    .font(.system(size: 200))
+                    .minimumScaleFactor(0.001)
+            }
+        }
+        .onAppear {
+            viewModel.dependencies = dependencies
+            viewModel.loadAvatar(
+                mxContentUri: mxContentUri,
+                avatarSize: size
+            )
+        }
+    }
+    
+    private func firstCharacterCapitalized(_ string: String) -> String {
+        guard let character = string.first else {
+            return ""
+        }
+        return String(character).capitalized
+    }
+    
+    var stableColor: Color {
+        let sum = matrixItemId.utf8
+            .map({ UInt($0) })
+            .reduce(0, +)
+        let index = Int(sum) % theme.avatarColors.count
+        return Color(theme.avatarColors[index])
+    }
+}
+
+@available(iOS 14.0, *)
+extension AvatarImage {
+    init(avatarData: AvatarInputType, size: AvatarSize) {
+        self.init(
+            mxContentUri: avatarData.mxContentUri,
+            matrixItemId: avatarData.matrixItemId,
+            displayName: avatarData.displayName ?? "",
+            size: size
+        )
+    }
+}
+
+@available(iOS 14.0, *)
+struct AvatarImage_Previews: PreviewProvider {
+    static let mxContentUri = "fakeUri"
+    static let name = "Alice"
+    static var previews: some View {
+        Group {
+            HStack {
+                VStack(alignment: .center, spacing: 20) {
+                    AvatarImage(avatarData: MockAvatarInput.example, size: .xSmall)
+                    AvatarImage(avatarData: MockAvatarInput.example, size: .medium)
+                    AvatarImage(avatarData: MockAvatarInput.example, size: .xLarge)
+                }
+                VStack(alignment: .center, spacing: 20) {
+                    AvatarImage(mxContentUri: nil, matrixItemId: name, displayName: name, size: .xSmall)
+                    AvatarImage(mxContentUri: nil, matrixItemId: name, displayName: name, size: .medium)
+                    AvatarImage(mxContentUri: nil, matrixItemId: name, displayName: name, size: .xLarge)
+                }
+            }
+            .addDependency(MockAvatarService.example)
+        }
+    }
+}