Sliding Sync + New Timeline API (#189)

* Begin adopting new Timeline API.

* Add edited indicator and reactions.

* vector-im/element-x-ios/issues/65 - Sliding sync support
* Fix missing room display name, wrong placeholder avatar text color and various other warnings that would fail the build on the CI

* Various tweaks:
* using release version of the demo branch of the sdk
* enabled home screen last room messages
* switched debug mode rust logging to warn
* enabled redactions
* enabled new logout flows and soft logout
* enabled replies

* Fix room member display name and avatar crashes / race condition, fix unit tests
* Make the ClientProxy and the UserSession MainActors
* Remove unused MatrixRustSDK imports, we should strive to keep these only in top level services and proxies
* Don't start either of the syncs while in soft logout

* #181: Style the session verification banner to match Figma.
* #181: Update verification modal.
* #181: Update snapshot tests.

* Make session verification state machine less pedantic
* Remove unnecessary weak selfs
* Various tweaks following code review:
* add start and stop sync client proxy methods
* move ss proxy url the build settings
* made media provider load results discardable
* added publishers for the roomSummaryProvider's total number of rooms and state

* Fix when sender details are shown
* Disable sync v2, causes duplicates in the timeline (as expected)
* Move ClientProxy media loading off the main queue and into a detached task
* Another attempt at moving image loading off the main queue
* Moved home screen diffing and latest room fetching to the background
* Prevent the timeline composer from becoming the first responder when not needed

* Bump to a newer version of the RustSDK

* Fixes vector-im/element-x-ios/issues/107 - New home screen design
* Implement thumbnail loading instead of full image avatars.
* Revert "Disable sync v2, causes duplicates in the timeline (as expected)"
* Add support for local echoes, dispatching detached tasks to a concurrenc GCD queue
* Move the session verification banner to a List Section to avoid UI glitches
* Optimise room mapping after sliding sync updates and thumbnail fetching
* Replace home screen List with a LazyVStack in an attempt to fix performance. Moved move summary provider room updating to a background thread

* Fixes vector-im/element-x-ios/issues/177 - New Bubbles Design
* Define in group state for timeline items
* Add replies into the bubble
* Add timeline width environment value
* Add `RoundedCorner` shape with specific corners rounding
* Add in group state for previews
* Implement bubble grouping logic
* Timeline avatar layout changes
* Fix placeholder avatars for dark mode
* New bubbles design
* Update mock timeline items
* Update timeline separator design
* Update room screen reference screenshots
* Add changelog
* Formatting fixes
* Add some space before single or beginning outgoing items

* Redesign the message composer

* Handle the msgtype enum.

* Update room name label line limit and incoming bubble background. Disabled syncv2, ss withCommonExtensions and session verification controller checking

* Increase default back pagination limit.
* Stop parsing links and tidy up composer button.
* Also fix the frame of an image whilst loading.
* Bump SDK package version.

* Remove app states about settings
* Add strings
* Use colors on placeholder avatars
* Tiny changes for placeholder avatars
* Update settings screen design
* Provide a user display name from the mock client
* Settings screen presentation logic
* Add changelog
* Update reference screenshots

Co-authored-by: Doug <douglase@element.io>
Co-authored-by: ismailgulek <ismailgulek@users.noreply.github.com>
Co-authored-by: ismailgulek <ismailg@matrix.org>

ElementX/Sources/Services/Media/MediaProvider.swift

@@ -21,7 +21,6 @@ struct MediaProvider: MediaProviderProtocol {
     private let clientProxy: ClientProxyProtocol
     private let imageCache: Kingfisher.ImageCache
     private let backgroundTaskService: BackgroundTaskServiceProtocol
-    private let processingQueue: DispatchQueue
     
     init(clientProxy: ClientProxyProtocol,
          imageCache: Kingfisher.ImageCache,
@@ -29,31 +28,30 @@ struct MediaProvider: MediaProviderProtocol {
         self.clientProxy = clientProxy
         self.imageCache = imageCache
         self.backgroundTaskService = backgroundTaskService
-        processingQueue = DispatchQueue(label: "MediaProviderProcessingQueue", attributes: .concurrent)
     }
     
-    func imageFromSource(_ source: MediaSource?) -> UIImage? {
+    func imageFromSource(_ source: MediaSource?, size: CGSize?) -> UIImage? {
         guard let source = source else {
             return nil
         }
-
-        return imageCache.retrieveImageInMemoryCache(forKey: source.underlyingSource.url(), options: nil)
+        let cacheKey = cacheKeyForURLString(source.underlyingSource.url(), size: size)
+        return imageCache.retrieveImageInMemoryCache(forKey: cacheKey, options: nil)
     }
     
-    func imageFromURLString(_ urlString: String?) -> UIImage? {
+    func imageFromURLString(_ urlString: String?, size: CGSize?) -> UIImage? {
         guard let urlString = urlString else {
             return nil
         }
         
-        return imageFromSource(MediaSource(source: clientProxy.mediaSourceForURLString(urlString)))
+        return imageFromSource(MediaSource(source: clientProxy.mediaSourceForURLString(urlString)), size: size)
     }
     
-    func loadImageFromURLString(_ urlString: String) async -> Result<UIImage, MediaProviderError> {
-        await loadImageFromSource(MediaSource(source: clientProxy.mediaSourceForURLString(urlString)))
+    func loadImageFromURLString(_ urlString: String, size: CGSize?) async -> Result<UIImage, MediaProviderError> {
+        await loadImageFromSource(MediaSource(source: clientProxy.mediaSourceForURLString(urlString)), size: size)
     }
     
-    func loadImageFromSource(_ source: MediaSource) async -> Result<UIImage, MediaProviderError> {
-        if let image = imageFromSource(source) {
+    func loadImageFromSource(_ source: MediaSource, size: CGSize?) async -> Result<UIImage, MediaProviderError> {
+        if let image = imageFromSource(source, size: size) {
             return .success(image)
         }
 
@@ -62,21 +60,30 @@ struct MediaProvider: MediaProviderProtocol {
             loadImageBgTask?.stop()
         }
         
+        let cacheKey = cacheKeyForURLString(source.underlyingSource.url(), size: size)
+        
         return await Task.detached { () -> Result<UIImage, MediaProviderError> in
-            if case let .success(cacheResult) = await imageCache.retrieveImage(forKey: source.underlyingSource.url()),
+            if case let .success(cacheResult) = await imageCache.retrieveImage(forKey: cacheKey),
                let image = cacheResult.image {
                 return .success(image)
             }
             
             do {
-                let imageData = try clientProxy.loadMediaContentForSource(source.underlyingSource)
+                let imageData = try await Task.detached { () -> Data in
+                    if let size = size {
+                        return try await clientProxy.loadMediaThumbnailForSource(source.underlyingSource, width: UInt(size.width), height: UInt(size.height))
+                    } else {
+                        return try await clientProxy.loadMediaContentForSource(source.underlyingSource)
+                    }
+                    
+                }.value
                 
                 guard let image = UIImage(data: imageData) else {
                     MXLog.error("Invalid image data")
                     return .failure(.invalidImageData)
                 }
                 
-                imageCache.store(image, forKey: source.underlyingSource.url())
+                imageCache.store(image, forKey: cacheKey)
                 
                 return .success(image)
             } catch {
@@ -86,6 +93,16 @@ struct MediaProvider: MediaProviderProtocol {
         }
         .value
     }
+    
+    // MARK: - Private
+    
+    private func cacheKeyForURLString(_ urlString: String, size: CGSize?) -> String {
+        if let size = size {
+            return "\(urlString){\(size.width),\(size.height)}"
+        } else {
+            return urlString
+        }
+    }
 }
 
 private extension ImageCache {

ElementX/Sources/Services/Media/MediaProviderProtocol.swift

@@ -22,13 +22,33 @@ enum MediaProviderError: Error {
     case invalidImageData
 }
 
+let MediaProviderDefaultAvatarSize = CGSize(width: 44.0, height: 44.0)
+
 @MainActor
 protocol MediaProviderProtocol {
-    func imageFromSource(_ source: MediaSource?) -> UIImage?
+    func imageFromSource(_ source: MediaSource?, size: CGSize?) -> UIImage?
     
-    func loadImageFromSource(_ source: MediaSource) async -> Result<UIImage, MediaProviderError>
+    @discardableResult func loadImageFromSource(_ source: MediaSource, size: CGSize?) async -> Result<UIImage, MediaProviderError>
     
-    func imageFromURLString(_ urlString: String?) -> UIImage?
+    func imageFromURLString(_ urlString: String?, size: CGSize?) -> UIImage?
     
-    func loadImageFromURLString(_ urlString: String) async -> Result<UIImage, MediaProviderError>
+    @discardableResult func loadImageFromURLString(_ urlString: String, size: CGSize?) async -> Result<UIImage, MediaProviderError>
+}
+
+extension MediaProviderProtocol {
+    func imageFromSource(_ source: MediaSource?) -> UIImage? {
+        imageFromSource(source, size: nil)
+    }
+    
+    @discardableResult func loadImageFromSource(_ source: MediaSource) async -> Result<UIImage, MediaProviderError> {
+        await loadImageFromSource(source, size: nil)
+    }
+    
+    func imageFromURLString(_ urlString: String?) -> UIImage? {
+        imageFromURLString(urlString, size: nil)
+    }
+    
+    @discardableResult func loadImageFromURLString(_ urlString: String) async -> Result<UIImage, MediaProviderError> {
+        await loadImageFromURLString(urlString, size: nil)
+    }
 }

ElementX/Sources/Services/Media/MockMediaProvider.swift

@@ -18,19 +18,23 @@ import Foundation
 import UIKit
 
 struct MockMediaProvider: MediaProviderProtocol {
-    func imageFromSource(_ source: MediaSource?) -> UIImage? {
+    func imageFromSource(_ source: MediaSource?, size: CGSize?) -> UIImage? {
         nil
     }
     
-    func loadImageFromSource(_ source: MediaSource) async -> Result<UIImage, MediaProviderError> {
+    func loadImageFromSource(_ source: MediaSource, size: CGSize?) async -> Result<UIImage, MediaProviderError> {
         .failure(.failedRetrievingImage)
     }
     
-    func imageFromURLString(_ urlString: String?) -> UIImage? {
-        nil
+    func imageFromURLString(_ urlString: String?, size: CGSize?) -> UIImage? {
+        if urlString != nil {
+            return UIImage(systemName: "photo")
+        }
+        
+        return nil
     }
         
-    func loadImageFromURLString(_ urlString: String) async -> Result<UIImage, MediaProviderError> {
+    func loadImageFromURLString(_ urlString: String, size: CGSize?) async -> Result<UIImage, MediaProviderError> {
         .failure(.failedRetrievingImage)
     }
 }