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>

UnitTests/Sources/MediaProvider/MediaLoaderTests.swift

@@ -0,0 +1,115 @@
+//
+// Copyright 2023 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.
+//
+
+@testable import ElementX
+import MatrixRustSDK
+import XCTest
+
+final class MediaLoaderTests: XCTestCase {
+    func testMediaRequestCoalescing() async {
+        let mediaLoadingClient = MockMediaLoadingClient()
+        let mediaLoader = MediaLoader(client: mediaLoadingClient)
+        
+        let mediaSource = MediaSourceProxy(url: URL.documentsDirectory)
+        
+        do {
+            for _ in 1...10 {
+                _ = try await mediaLoader.loadMediaContentForSource(mediaSource)
+            }
+            
+            XCTAssertEqual(mediaLoadingClient.numberOfInvocations, 10)
+        } catch {
+            fatalError()
+        }
+    }
+    
+    func testMediaThumbnailRequestCoalescing() async {
+        let mediaLoadingClient = MockMediaLoadingClient()
+        let mediaLoader = MediaLoader(client: mediaLoadingClient)
+        
+        let mediaSource = MediaSourceProxy(url: URL.documentsDirectory)
+        
+        do {
+            for _ in 1...10 {
+                _ = try await mediaLoader.loadMediaThumbnailForSource(mediaSource, width: 100, height: 100)
+            }
+            
+            XCTAssertEqual(mediaLoadingClient.numberOfInvocations, 10)
+        } catch {
+            fatalError()
+        }
+    }
+}
+
+private class MockMediaLoadingClient: ClientProtocol {
+    private(set) var numberOfInvocations = 0
+    
+    func getMediaContent(source: MatrixRustSDK.MediaSource) throws -> [UInt8] {
+        numberOfInvocations += 1
+        return []
+    }
+    
+    func getMediaThumbnail(source: MatrixRustSDK.MediaSource, width: UInt64, height: UInt64) throws -> [UInt8] {
+        numberOfInvocations += 1
+        return []
+    }
+    
+    // MARK: - Not implemented
+    
+    func setDelegate(delegate: MatrixRustSDK.ClientDelegate?) { }
+    
+    func login(username: String, password: String, initialDeviceName: String?, deviceId: String?) throws { }
+    
+    func restoreSession(session: MatrixRustSDK.Session) throws { }
+    
+    func session() throws -> MatrixRustSDK.Session { fatalError() }
+    
+    func userId() throws -> String { fatalError() }
+    
+    func displayName() throws -> String { fatalError() }
+    
+    func setDisplayName(name: String) throws { }
+    
+    func avatarUrl() throws -> String { fatalError() }
+    
+    func deviceId() throws -> String { fatalError() }
+    
+    func accountData(eventType: String) throws -> String? { fatalError() }
+    
+    func setAccountData(eventType: String, content: String) throws { fatalError() }
+    
+    func uploadMedia(mimeType: String, content: [UInt8]) throws -> String { fatalError() }
+    
+    func getSessionVerificationController() throws -> MatrixRustSDK.SessionVerificationController { fatalError() }
+    
+    func fullSlidingSync() throws -> MatrixRustSDK.SlidingSync { fatalError() }
+    
+    func logout() throws { }
+    
+    func hasFirstSynced() -> Bool { fatalError() }
+    
+    func homeserver() -> String { fatalError() }
+    
+    func isSoftLogout() -> Bool { fatalError() }
+    
+    func isSyncing() -> Bool { fatalError() }
+    
+    func rooms() -> [MatrixRustSDK.Room] { fatalError() }
+    
+    func slidingSync() -> MatrixRustSDK.SlidingSyncBuilder { fatalError() }
+    
+    func startSync(timelineLimit: UInt16?) { }
+}

UnitTests/Sources/MediaProvider/MediaProviderTests.swift

@@ -20,7 +20,7 @@ import XCTest
 
 @MainActor
 final class MediaProviderTests: XCTestCase {
-    private let mediaProxy = MockMediaProxy()
+    private let mediaLoader = MockMediaLoader()
     private let fileCache = MockFileCache()
     private var imageCache: MockImageCache!
     private var backgroundTaskService = MockBackgroundTaskService()
@@ -29,14 +29,14 @@ final class MediaProviderTests: XCTestCase {
     
     override func setUp() {
         imageCache = MockImageCache(name: "Test")
-        mediaProvider = MediaProvider(mediaProxy: mediaProxy,
+        mediaProvider = MediaProvider(mediaLoader: mediaLoader,
                                       imageCache: imageCache,
                                       fileCache: fileCache,
                                       backgroundTaskService: backgroundTaskService)
     }
     
     func test_whenImageFromSourceWithSourceNil_nilReturned() throws {
-        let image = mediaProvider.imageFromSource(nil, avatarSize: .room(on: .timeline))
+        let image = mediaProvider.imageFromSource(nil, size: AvatarSize.room(on: .timeline).scaledSize)
         XCTAssertNil(image)
     }
     
@@ -46,17 +46,18 @@ final class MediaProviderTests: XCTestCase {
         let key = "\(url.absoluteString){\(avatarSize.scaledValue),\(avatarSize.scaledValue)}"
         let imageForKey = UIImage()
         imageCache.retrievedImagesInMemory[key] = imageForKey
-        let image = mediaProvider.imageFromSource(MediaSourceProxy(url: url), avatarSize: avatarSize)
+        let image = mediaProvider.imageFromSource(MediaSourceProxy(url: url), size: avatarSize.scaledSize)
         XCTAssertEqual(image, imageForKey)
     }
     
     func test_whenImageFromSourceWithSourceNotNilAndImageNotCached_nilReturned() throws {
-        let image = mediaProvider.imageFromSource(MediaSourceProxy(url: URL.picturesDirectory), avatarSize: .room(on: .timeline))
+        let image = mediaProvider.imageFromSource(MediaSourceProxy(url: URL.picturesDirectory),
+                                                  size: AvatarSize.room(on: .timeline).scaledSize)
         XCTAssertNil(image)
     }
     
     func test_whenImageFromURLStringWithURLStringNil_nilReturned() throws {
-        let image = mediaProvider.imageFromURL(nil, avatarSize: .room(on: .timeline))
+        let image = mediaProvider.imageFromURL(nil, size: AvatarSize.room(on: .timeline).scaledSize)
         XCTAssertNil(image)
     }
     
@@ -66,12 +67,12 @@ final class MediaProviderTests: XCTestCase {
         let key = "\(url.absoluteString){\(avatarSize.scaledValue),\(avatarSize.scaledValue)}"
         let imageForKey = UIImage()
         imageCache.retrievedImagesInMemory[key] = imageForKey
-        let image = mediaProvider.imageFromURL(url, avatarSize: avatarSize)
+        let image = mediaProvider.imageFromURL(url, size: avatarSize.scaledSize)
         XCTAssertEqual(image, imageForKey)
     }
     
     func test_whenImageFromURLStringWithURLStringNotNilAndImageNotCached_nilReturned() throws {
-        let image = mediaProvider.imageFromURL(URL.picturesDirectory, avatarSize: .room(on: .timeline))
+        let image = mediaProvider.imageFromURL(URL.picturesDirectory, size: AvatarSize.room(on: .timeline).scaledSize)
         XCTAssertNil(image)
     }
     
@@ -81,7 +82,7 @@ final class MediaProviderTests: XCTestCase {
         let key = "\(url.absoluteString){\(avatarSize.scaledValue),\(avatarSize.scaledValue)}"
         let imageForKey = UIImage()
         imageCache.retrievedImagesInMemory[key] = imageForKey
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: url), avatarSize: avatarSize)
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: url), size: avatarSize.scaledSize)
         XCTAssertEqual(Result.success(imageForKey), result)
     }
     
@@ -91,15 +92,15 @@ final class MediaProviderTests: XCTestCase {
         let key = "\(url.absoluteString){\(avatarSize.scaledValue),\(avatarSize.scaledValue)}"
         let imageForKey = UIImage()
         imageCache.retrievedImages[key] = imageForKey
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: url), avatarSize: avatarSize)
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: url), size: avatarSize.scaledSize)
         XCTAssertEqual(Result.success(imageForKey), result)
     }
     
     func test_whenLoadImageFromSourceAndImageNotCachedAndRetrieveImageFails_imageThumbnailIsLoaded() async throws {
         let avatarSize = AvatarSize.room(on: .timeline)
         let expectedImage = try loadTestImage()
-        mediaProxy.mediaThumbnailData = expectedImage.pngData()
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), avatarSize: avatarSize)
+        mediaLoader.mediaThumbnailData = expectedImage.pngData()
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), size: avatarSize.scaledSize)
         switch result {
         case .success(let image):
             XCTAssertEqual(image.pngData(), expectedImage.pngData())
@@ -113,16 +114,16 @@ final class MediaProviderTests: XCTestCase {
         let url = URL.picturesDirectory
         let key = "\(url.absoluteString){\(avatarSize.scaledValue),\(avatarSize.scaledValue)}"
         let expectedImage = try loadTestImage()
-        mediaProxy.mediaThumbnailData = expectedImage.pngData()
-        _ = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: url), avatarSize: avatarSize)
+        mediaLoader.mediaThumbnailData = expectedImage.pngData()
+        _ = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: url), size: avatarSize.scaledSize)
         let storedImage = try XCTUnwrap(imageCache.storedImages[key])
         XCTAssertEqual(expectedImage.pngData(), storedImage.pngData())
     }
     
     func test_whenLoadImageFromSourceAndImageNotCachedAndRetrieveImageFailsAndNoAvatarSize_imageContentIsLoaded() async throws {
         let expectedImage = try loadTestImage()
-        mediaProxy.mediaContentData = expectedImage.pngData()
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), avatarSize: nil)
+        mediaLoader.mediaContentData = expectedImage.pngData()
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), size: nil)
         switch result {
         case .success(let image):
             XCTAssertEqual(image.pngData(), expectedImage.pngData())
@@ -132,7 +133,8 @@ final class MediaProviderTests: XCTestCase {
     }
     
     func test_whenLoadImageFromSourceAndImageNotCachedAndRetrieveImageFailsAndLoadImageThumbnailFails_errorIsThrown() async throws {
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), avatarSize: AvatarSize.room(on: .timeline))
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory),
+                                                             size: AvatarSize.room(on: .timeline).scaledSize)
         switch result {
         case .success:
             XCTFail("Should fail")
@@ -142,7 +144,7 @@ final class MediaProviderTests: XCTestCase {
     }
     
     func test_whenLoadImageFromSourceAndImageNotCachedAndRetrieveImageFailsAndNoAvatarSizeAndLoadImageContentFails_errorIsThrown() async throws {
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), avatarSize: nil)
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), size: nil)
         switch result {
         case .success:
             XCTFail("Should fail")
@@ -152,8 +154,9 @@ final class MediaProviderTests: XCTestCase {
     }
     
     func test_whenLoadImageFromSourceAndImageNotCachedAndRetrieveImageFailsAndImageThumbnailIsLoadedWithCorruptedData_errorIsThrown() async throws {
-        mediaProxy.mediaThumbnailData = Data()
-        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory), avatarSize: AvatarSize.room(on: .timeline))
+        mediaLoader.mediaThumbnailData = Data()
+        let result = await mediaProvider.loadImageFromSource(MediaSourceProxy(url: URL.picturesDirectory),
+                                                             size: AvatarSize.room(on: .timeline).scaledSize)
         switch result {
         case .success:
             XCTFail("Should fail")
@@ -187,31 +190,31 @@ final class MediaProviderTests: XCTestCase {
     func test_whenLoadFileFromSourceAndNoFileFromSourceExists_mediaLoadedFromSource() async throws {
         let expectedURL = URL(filePath: "/some/file/path")
         let expectedResult: Result<URL, MediaProviderError> = .success(expectedURL)
-        mediaProxy.mediaContentData = try loadTestImage().pngData()
+        mediaLoader.mediaContentData = try loadTestImage().pngData()
         fileCache.storeURLToReturn = expectedURL
         let result = await mediaProvider.loadFileFromSource(MediaSourceProxy(url: URL(staticString: "test/test1")), fileExtension: "png")
         XCTAssertEqual(result, expectedResult)
-        XCTAssertEqual(mediaProxy.mediaContentData, fileCache.storedData)
+        XCTAssertEqual(mediaLoader.mediaContentData, fileCache.storedData)
         XCTAssertEqual("test1", fileCache.storedFileKey)
         XCTAssertEqual("png", fileCache.storedFileExtension)
     }
     
     func test_whenLoadFileFromSourceAndNoFileFromSourceExistsAndLoadContentSourceFails_failureIsReturned() async throws {
         let expectedResult: Result<URL, MediaProviderError> = .failure(.failedRetrievingImage)
-        mediaProxy.mediaContentData = nil
+        mediaLoader.mediaContentData = nil
         let result = await mediaProvider.loadFileFromSource(MediaSourceProxy(url: URL(staticString: "test/test1")), fileExtension: "png")
         XCTAssertEqual(result, expectedResult)
     }
     
     func test_whenLoadFileFromSourceAndNoFileFromSourceExistsAndStoreDataFails_failureIsReturned() async throws {
         let expectedResult: Result<URL, MediaProviderError> = .failure(.failedRetrievingImage)
-        mediaProxy.mediaContentData = try loadTestImage().pngData()
+        mediaLoader.mediaContentData = try loadTestImage().pngData()
         let result = await mediaProvider.loadFileFromSource(MediaSourceProxy(url: URL(staticString: "test/test1")), fileExtension: "png")
         XCTAssertEqual(result, expectedResult)
     }
     
     func test_whenFileFromURLStringAndURLIsNil_nilIsReturned() async throws {
-        mediaProxy.mediaContentData = try loadTestImage().pngData()
+        mediaLoader.mediaContentData = try loadTestImage().pngData()
         let url = mediaProvider.fileFromURL(nil, fileExtension: "png")
         XCTAssertNil(url)
     }

UnitTests/Sources/MediaProvider/MockMediaLoader.swift

@@ -16,11 +16,11 @@
 @testable import ElementX
 import Foundation
 
-enum MockMediaProxyError: Error {
+enum MockMediaLoaderError: Error {
     case someError
 }
 
-class MockMediaProxy: MediaProxyProtocol {
+class MockMediaLoader: MediaLoaderProtocol {
     var mediaContentData: Data?
     var mediaThumbnailData: Data?
     
@@ -32,7 +32,7 @@ class MockMediaProxy: MediaProxyProtocol {
         if let mediaContentData {
             return mediaContentData
         } else {
-            throw MockMediaProxyError.someError
+            throw MockMediaLoaderError.someError
         }
     }
     
@@ -40,7 +40,7 @@ class MockMediaProxy: MediaProxyProtocol {
         if let mediaThumbnailData {
             return mediaThumbnailData
         } else {
-            throw MockMediaProxyError.someError
+            throw MockMediaLoaderError.someError
         }
     }
 }