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>
2026-11-02 21:33:26 +00:00 · 2023-01-25 19:45:01 +02:00
parent 3a74f13097
commit bd4c0b72cb
58 changed files with 875 additions and 830 deletions
@@ -0,0 +1,76 @@
+//
+// Copyright 2022 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
+
+struct PlaceholderAvatarImage: View {
+    @Environment(\.redactionReasons) var redactionReasons
+
+    private let textForImage: String
+    private let contentID: String?
+    
+    var body: some View {
+        ZStack {
+            bgColor
+            
+            // This text's frame doesn't look right when redacted
+            if redactionReasons != .placeholder {
+                Text(textForImage)
+                    .padding(4)
+                    .foregroundColor(.white)
+                    .font(.system(size: 200).weight(.semibold))
+                    .minimumScaleFactor(0.001)
+            }
+        }
+        .aspectRatio(1, contentMode: .fill)
+    }
+
+    init(name: String?, contentID: String?) {
+        let baseName = name ?? contentID?.trimmingCharacters(in: .punctuationCharacters)
+        textForImage = baseName?.first?.uppercased() ?? ""
+        self.contentID = contentID
+    }
+
+    private var bgColor: Color {
+        if redactionReasons == .placeholder {
+            return .element.systemGray4
+        }
+
+        guard let contentID else {
+            return .element.accent
+        }
+
+        return .element.avatarBackground(for: contentID)
+    }
+}
+
+struct PlaceholderAvatarImage_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 75) {
+            PlaceholderAvatarImage(name: "Xavier", contentID: "@userid1:matrix.org")
+                .clipShape(Circle())
+                .frame(width: 150, height: 100)
+            
+            PlaceholderAvatarImage(name: "@*~AmazingName~*@", contentID: "@userid2:matrix.org")
+                .clipShape(Circle())
+                .frame(width: 150, height: 100)
+            
+            PlaceholderAvatarImage(name: nil, contentID: "@userid3:matrix.org")
+                .clipShape(Circle())
+                .frame(width: 150, height: 100)
+        }
+    }
+}