Enable local echoes for media uploads on development builds. (#3514)

* Enable local echoes for media uploads on development builds.
* Use media sizes when loading timeline items so they can take advantage of the cached local echo data.

ElementX/Sources/Screens/MediaUploadPreviewScreen/MediaUploadPreviewScreenViewModel.swift

@@ -45,9 +45,9 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
         switch viewAction {
         case .send:
             Task {
-                let progressSubject = CurrentValueSubject<Double, Never>(0.0)
+                let progressSubject = AppSettings.isDevelopmentBuild ? nil : CurrentValueSubject<Double, Never>(0.0)
                 
-                startLoading(progressPublisher: progressSubject.asCurrentValuePublisher())
+                startLoading(progressPublisher: progressSubject?.asCurrentValuePublisher())
                 
                 switch await mediaUploadingPreprocessor.processMedia(at: url) {
                 case .success(let mediaInfo):
@@ -75,7 +75,7 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
     
     // MARK: - Private
     
-    private func sendAttachment(mediaInfo: MediaInfo, progressSubject: CurrentValueSubject<Double, Never>) async -> Result<Void, TimelineProxyError> {
+    private func sendAttachment(mediaInfo: MediaInfo, progressSubject: CurrentValueSubject<Double, Never>?) async -> Result<Void, TimelineProxyError> {
         let requestHandle: ((SendAttachmentJoinHandleProtocol) -> Void) = { [weak self] handle in
             self?.requestHandle = handle
         }
@@ -94,10 +94,16 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
     
     private static let loadingIndicatorIdentifier = "\(MediaUploadPreviewScreenViewModel.self)-Loading"
     
-    private func startLoading(progressPublisher: CurrentValuePublisher<Double, Never>) {
+    private func startLoading(progressPublisher: CurrentValuePublisher<Double, Never>?) {
+        let progress: UserIndicator.Progress = if let progressPublisher {
+            .published(progressPublisher)
+        } else {
+            .indeterminate
+        }
+        
         userIndicatorController.submitIndicator(
             UserIndicator(id: Self.loadingIndicatorIdentifier,
-                          type: .modal(progress: .published(progressPublisher), interactiveDismissDisabled: false, allowsInteraction: true),
+                          type: .modal(progress: progress, interactiveDismissDisabled: false, allowsInteraction: true),
                           title: L10n.commonSending,
                           persistent: true)
         )

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/ImageRoomTimelineView.swift

@@ -17,19 +17,12 @@ struct ImageRoomTimelineView: View {
     var body: some View {
         TimelineStyler(timelineItem: timelineItem) {
             VStack(alignment: .leading, spacing: 4) {
-                LoadableImage(mediaSource: source,
+                loadableImage
-                              mediaType: .timelineItem,
+                    .accessibilityElement(children: .ignore)
-                              blurhash: timelineItem.content.blurhash,
+                    .accessibilityLabel(L10n.commonImage)
-                              mediaProvider: context.mediaProvider) {
+                    // This clip shape is distinct from the one in the styler as that one
-                    placeholder
+                    // operates on the entire message so wouldn't round the bottom corners.
-                }
+                    .clipShape(RoundedRectangle(cornerRadius: hasMediaCaption ? 6 : 0))
-                .timelineMediaFrame(height: timelineItem.content.height,
-                                    aspectRatio: timelineItem.content.aspectRatio)
-                .accessibilityElement(children: .ignore)
-                .accessibilityLabel(L10n.commonImage)
-                // This clip shape is distinct from the one in the styler as that one
-                // operates on the entire message so wouldn't round the bottom corners.
-                .clipShape(RoundedRectangle(cornerRadius: hasMediaCaption ? 6 : 0))
                 
                 if let attributedCaption = timelineItem.content.formattedCaption {
                     FormattedBodyText(attributedString: attributedCaption,
@@ -44,15 +37,32 @@ struct ImageRoomTimelineView: View {
         }
     }
     
-    var source: MediaSourceProxy {
+    @ViewBuilder
-        guard timelineItem.content.contentType != .gif, let thumbnailSource = timelineItem.content.thumbnailSource else {
+    private var loadableImage: some View {
-            return timelineItem.content.source
+        if timelineItem.content.contentType == .gif {
+            LoadableImage(mediaSource: timelineItem.content.source,
+                          mediaType: .timelineItem,
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.size,
+                          mediaProvider: context.mediaProvider) {
+                placeholder
+            }
+            .timelineMediaFrame(height: timelineItem.content.thumbnailSize?.height,
+                                aspectRatio: timelineItem.content.aspectRatio)
+        } else {
+            LoadableImage(mediaSource: timelineItem.content.thumbnailSource ?? timelineItem.content.source,
+                          mediaType: .timelineItem,
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.thumbnailSize ?? timelineItem.content.size,
+                          mediaProvider: context.mediaProvider) {
+                placeholder
+            }
+            .timelineMediaFrame(height: timelineItem.content.thumbnailSize?.height ?? timelineItem.content.size?.height,
+                                aspectRatio: timelineItem.content.thumbnailAspectRatio ?? timelineItem.content.aspectRatio)
         }
-        
-        return thumbnailSource
     }
         
-    var placeholder: some View {
+    private var placeholder: some View {
         Rectangle()
             .foregroundColor(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
             .opacity(0.3)
@@ -100,8 +110,8 @@ struct ImageRoomTimelineView_Previews: PreviewProvider, TestablePreview {
                                                                       sender: .init(id: "Bob"),
                                                                       content: .init(filename: "Blurhashed.jpg",
                                                                                      source: MediaSourceProxy(url: .picturesDirectory, mimeType: "image/gif"),
-                                                                                     thumbnailSource: nil,
                                                                                      aspectRatio: 0.7,
+                                                                                     thumbnailSource: nil,
                                                                                      blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW",
                                                                                      contentType: .gif)))
             
@@ -115,10 +125,9 @@ struct ImageRoomTimelineView_Previews: PreviewProvider, TestablePreview {
                                                                       content: .init(filename: "Blurhashed.jpg",
                                                                                      caption: "This is a great image 😎",
                                                                                      source: MediaSourceProxy(url: .picturesDirectory, mimeType: "image/png"),
-                                                                                     thumbnailSource: nil,
+                                                                                     size: .init(width: 50, height: 50),
-                                                                                     width: 50,
-                                                                                     height: 50,
                                                                                      aspectRatio: 1,
+                                                                                     thumbnailSource: nil,
                                                                                      blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW",
                                                                                      contentType: .gif)))
         }

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/StickerRoomTimelineView.swift

@@ -17,10 +17,11 @@ struct StickerRoomTimelineView: View {
             LoadableImage(url: timelineItem.imageURL,
                           mediaType: .timelineItem,
                           blurhash: timelineItem.blurhash,
+                          size: timelineItem.size,
                           mediaProvider: context.mediaProvider) {
                 placeholder
             }
-            .timelineMediaFrame(height: timelineItem.height,
+            .timelineMediaFrame(height: timelineItem.size?.height,
                                 aspectRatio: timelineItem.aspectRatio)
             .accessibilityElement(children: .ignore)
             .accessibilityLabel("\(L10n.commonSticker), \(timelineItem.body)")

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/VideoRoomTimelineView.swift

@@ -18,7 +18,7 @@ struct VideoRoomTimelineView: View {
         TimelineStyler(timelineItem: timelineItem) {
             VStack(alignment: .leading, spacing: 4) {
                 thumbnail
-                    .timelineMediaFrame(height: timelineItem.content.height,
+                    .timelineMediaFrame(height: timelineItem.content.thumbnailSize?.height,
                                         aspectRatio: timelineItem.content.aspectRatio)
                     .accessibilityElement(children: .ignore)
                     .accessibilityLabel(L10n.commonVideo)
@@ -45,6 +45,7 @@ struct VideoRoomTimelineView: View {
             LoadableImage(mediaSource: thumbnailSource,
                           mediaType: .timelineItem,
                           blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.thumbnailSize,
                           mediaProvider: context.mediaProvider) { imageView in
                 imageView
                     .overlay { playIcon }
@@ -114,8 +115,8 @@ struct VideoRoomTimelineView_Previews: PreviewProvider, TestablePreview {
                                                                       content: .init(filename: "Blurhashed.mp4",
                                                                                      duration: 23,
                                                                                      source: nil,
-                                                                                     thumbnailSource: nil,
                                                                                      aspectRatio: 0.7,
+                                                                                     thumbnailSource: nil,
                                                                                      blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW")))
             
             VideoRoomTimelineView(timelineItem: VideoRoomTimelineItem(id: .randomEvent,

ElementX/Sources/Services/Timeline/Fixtures/RoomTimelineItemFixtures.swift

@@ -260,10 +260,9 @@ enum RoomTimelineItemFixtures {
                                   content: .init(filename: "video.mp4",
                                                  duration: 100,
                                                  source: .init(url: .picturesDirectory, mimeType: nil),
-                                                 thumbnailSource: .init(url: .picturesDirectory, mimeType: nil),
+                                                 size: .init(width: 1920, height: 1080),
-                                                 width: 1920,
-                                                 height: 1080,
                                                  aspectRatio: 1.78,
+                                                 thumbnailSource: .init(url: .picturesDirectory, mimeType: nil),
                                                  blurhash: "KtI~70X5V?yss9oyrYs:t6")),
             ImageRoomTimelineItem(id: .randomEvent,
                                   timestamp: "10:47 am",
@@ -274,10 +273,9 @@ enum RoomTimelineItemFixtures {
                                   sender: .init(id: ""),
                                   content: .init(filename: "image.jpg",
                                                  source: .init(url: .picturesDirectory, mimeType: nil),
-                                                 thumbnailSource: nil,
+                                                 size: .init(width: 5120, height: 3412),
-                                                 width: 5120,
-                                                 height: 3412,
                                                  aspectRatio: 1.5,
+                                                 thumbnailSource: nil,
                                                  blurhash: "KpE4oyayR5|GbHb];3j@of"))
         ]
     }

ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/ImageRoomTimelineItemContent.swift

@@ -15,10 +15,13 @@ struct ImageRoomTimelineItemContent: Hashable {
     /// The original textual representation of the formatted caption directly from the event (usually HTML code)
     var formattedCaptionHTMLString: String?
     let source: MediaSourceProxy
-    let thumbnailSource: MediaSourceProxy?
+    var size: CGSize?
-    var width: CGFloat?
-    var height: CGFloat?
     var aspectRatio: CGFloat?
+    
+    let thumbnailSource: MediaSourceProxy?
+    var thumbnailSize: CGSize?
+    var thumbnailAspectRatio: CGFloat?
+    
     var blurhash: String?
     var contentType: UTType?
 }

ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/VideoRoomTimelineItemContent.swift

@@ -15,11 +15,15 @@ struct VideoRoomTimelineItemContent: Hashable {
     /// The original textual representation of the formatted caption directly from the event (usually HTML code)
     var formattedCaptionHTMLString: String?
     let duration: TimeInterval
+    
     let source: MediaSourceProxy?
-    let thumbnailSource: MediaSourceProxy?
+    var size: CGSize?
-    var width: CGFloat?
-    var height: CGFloat?
     var aspectRatio: CGFloat?
+    
+    let thumbnailSource: MediaSourceProxy?
+    var thumbnailSize: CGSize?
+    var thumbnailAspectRatio: CGFloat?
+    
     var blurhash: String?
     var contentType: UTType?
 }

ElementX/Sources/Services/Timeline/TimelineItems/Items/Other/StickerRoomTimelineItem.swift

@@ -19,8 +19,7 @@ struct StickerRoomTimelineItem: EventBasedTimelineItemProtocol, Equatable {
     
     let imageURL: URL
     
-    var width: CGFloat?
+    var size: CGSize?
-    var height: CGFloat?
     var aspectRatio: CGFloat?
     var blurhash: String?
     

ElementX/Sources/Services/Timeline/TimelineItems/RoomTimelineItemFactory.swift

@@ -121,11 +121,16 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
                                           _ imageInfo: ImageInfo,
                                           _ imageURL: URL,
                                           _ isOutgoing: Bool) -> RoomTimelineItemProtocol {
-        var aspectRatio: CGFloat?
+        var imageSize: CGSize?
-        let width = imageInfo.width.map(CGFloat.init)
+        var imageAspectRatio: CGFloat?
-        let height = imageInfo.height.map(CGFloat.init)
+        
-        if let width, let height, width > 0, height > 0 {
+        if let height = imageInfo.height,
-            aspectRatio = width / height
+           let width = imageInfo.width {
+            imageSize = .init(width: CGFloat(width), height: CGFloat(height))
+            
+            if width > 0, height > 0 {
+                imageAspectRatio = CGFloat(width) / CGFloat(height)
+            }
         }
         
         return StickerRoomTimelineItem(id: eventItemProxy.id,
@@ -136,9 +141,8 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
                                        canBeRepliedTo: eventItemProxy.canBeRepliedTo,
                                        sender: eventItemProxy.sender,
                                        imageURL: imageURL,
-                                       width: width,
+                                       size: imageSize,
-                                       height: height,
+                                       aspectRatio: imageAspectRatio,
-                                       aspectRatio: aspectRatio,
                                        blurhash: imageInfo.blurhash,
                                        properties: RoomTimelineItemProperties(reactions: aggregateReactions(eventItemProxy.reactions),
                                                                               deliveryStatus: eventItemProxy.deliveryStatus,
@@ -519,12 +523,31 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
         let formattedCaption = htmlCaption != nil ? attributedStringBuilder.fromHTML(htmlCaption) : attributedStringBuilder.fromPlain(messageContent.caption)
         
         let thumbnailSource = messageContent.info?.thumbnailSource.map { MediaSourceProxy(source: $0, mimeType: messageContent.info?.thumbnailInfo?.mimetype) }
-        let width = messageContent.info?.width.map(CGFloat.init)
-        let height = messageContent.info?.height.map(CGFloat.init)
         
-        var aspectRatio: CGFloat?
+        var thumbnailSize: CGSize?
-        if let width, let height, width > 0, height > 0 {
+        var thumbnailAspectRatio: CGFloat?
-            aspectRatio = width / height
+        
+        if let thumbnailInfo = messageContent.info?.thumbnailInfo,
+           let height = thumbnailInfo.height,
+           let width = thumbnailInfo.width {
+            thumbnailSize = .init(width: CGFloat(width), height: CGFloat(height))
+            
+            if width > 0, height > 0 {
+                thumbnailAspectRatio = CGFloat(width) / CGFloat(height)
+            }
+        }
+        
+        var imageSize: CGSize?
+        var imageAspectRatio: CGFloat?
+        
+        if let imageInfo = messageContent.info,
+           let height = imageInfo.height,
+           let width = imageInfo.width {
+            imageSize = .init(width: CGFloat(width), height: CGFloat(height))
+            
+            if width > 0, height > 0 {
+                imageAspectRatio = CGFloat(width) / CGFloat(height)
+            }
         }
         
         return .init(filename: messageContent.filename,
@@ -532,10 +555,11 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
                      formattedCaption: formattedCaption,
                      formattedCaptionHTMLString: htmlCaption,
                      source: MediaSourceProxy(source: messageContent.source, mimeType: messageContent.info?.mimetype),
+                     size: imageSize,
+                     aspectRatio: imageAspectRatio,
                      thumbnailSource: thumbnailSource,
-                     width: width,
+                     thumbnailSize: thumbnailSize,
-                     height: height,
+                     thumbnailAspectRatio: thumbnailAspectRatio,
-                     aspectRatio: aspectRatio,
                      blurhash: messageContent.info?.blurhash,
                      contentType: UTType(mimeType: messageContent.info?.mimetype, fallbackFilename: messageContent.filename))
     }
@@ -545,12 +569,31 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
         let formattedCaption = htmlCaption != nil ? attributedStringBuilder.fromHTML(htmlCaption) : attributedStringBuilder.fromPlain(messageContent.caption)
         
         let thumbnailSource = messageContent.info?.thumbnailSource.map { MediaSourceProxy(source: $0, mimeType: messageContent.info?.thumbnailInfo?.mimetype) }
-        let width = messageContent.info?.width.map(CGFloat.init)
-        let height = messageContent.info?.height.map(CGFloat.init)
 
-        var aspectRatio: CGFloat?
+        var thumbnailSize: CGSize?
-        if let width, let height, width > 0, height > 0 {
+        var thumbnailAspectRatio: CGFloat?
-            aspectRatio = width / height
+        
+        if let thumbnailInfo = messageContent.info?.thumbnailInfo,
+           let height = thumbnailInfo.height,
+           let width = thumbnailInfo.width {
+            thumbnailSize = .init(width: CGFloat(width), height: CGFloat(height))
+            
+            if width > 0, height > 0 {
+                thumbnailAspectRatio = CGFloat(width) / CGFloat(height)
+            }
+        }
+        
+        var videoSize: CGSize?
+        var videoAspectRatio: CGFloat?
+        
+        if let videoInfo = messageContent.info,
+           let height = videoInfo.height,
+           let width = videoInfo.width {
+            videoSize = .init(width: CGFloat(width), height: CGFloat(height))
+            
+            if width > 0, height > 0 {
+                videoAspectRatio = CGFloat(width) / CGFloat(height)
+            }
         }
         
         return .init(filename: messageContent.filename,
@@ -559,10 +602,11 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
                      formattedCaptionHTMLString: htmlCaption,
                      duration: messageContent.info?.duration ?? 0,
                      source: MediaSourceProxy(source: messageContent.source, mimeType: messageContent.info?.mimetype),
+                     size: videoSize,
+                     aspectRatio: videoAspectRatio,
                      thumbnailSource: thumbnailSource,
-                     width: width,
+                     thumbnailSize: thumbnailSize,
-                     height: height,
+                     thumbnailAspectRatio: thumbnailAspectRatio,
-                     aspectRatio: aspectRatio,
                      blurhash: messageContent.info?.blurhash,
                      contentType: UTType(mimeType: messageContent.info?.mimetype, fallbackFilename: messageContent.filename))
     }

ElementX/Sources/Services/Timeline/TimelineProxy.swift

@@ -234,7 +234,7 @@ final class TimelineProxy: TimelineProxyProtocol {
                                         progressWatcher: UploadProgressListener { progress in
                                             progressSubject?.send(progress)
                                         },
-                                        useSendQueue: false)
+                                        useSendQueue: AppSettings.isDevelopmentBuild)
         
         await requestHandle(handle)
         
@@ -260,7 +260,7 @@ final class TimelineProxy: TimelineProxyProtocol {
                                        progressWatcher: UploadProgressListener { progress in
                                            progressSubject?.send(progress)
                                        },
-                                       useSendQueue: false)
+                                       useSendQueue: AppSettings.isDevelopmentBuild)
         
         await requestHandle(handle)
         
@@ -290,7 +290,7 @@ final class TimelineProxy: TimelineProxyProtocol {
                                         progressWatcher: UploadProgressListener { progress in
                                             progressSubject?.send(progress)
                                         },
-                                        useSendQueue: false)
+                                        useSendQueue: AppSettings.isDevelopmentBuild)
         
         await requestHandle(handle)
         
@@ -338,7 +338,7 @@ final class TimelineProxy: TimelineProxyProtocol {
                                         progressWatcher: UploadProgressListener { progress in
                                             progressSubject?.send(progress)
                                         },
-                                        useSendQueue: false)
+                                        useSendQueue: AppSettings.isDevelopmentBuild)
         
         await requestHandle(handle)
         
@@ -368,7 +368,7 @@ final class TimelineProxy: TimelineProxyProtocol {
                                                progressWatcher: UploadProgressListener { progress in
                                                    progressSubject?.send(progress)
                                                },
-                                               useSendQueue: false)
+                                               useSendQueue: AppSettings.isDevelopmentBuild)
         
         await requestHandle(handle)
         

PreviewTests/Sources/__Snapshots__/PreviewTests/test_imageRoomTimelineView-iPad-en-GB.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6cf2fd3de65756ae06e150b5353386e9b5bb554d18da2f77b0cf54246c3920eb
+oid sha256:e96e572bd736c19bb9f3bd37216bd464276c9a1ebbd715fdae27973f9b6f36cc
-size 285656
+size 333847

PreviewTests/Sources/__Snapshots__/PreviewTests/test_imageRoomTimelineView-iPad-pseudo.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6cf2fd3de65756ae06e150b5353386e9b5bb554d18da2f77b0cf54246c3920eb
+oid sha256:e96e572bd736c19bb9f3bd37216bd464276c9a1ebbd715fdae27973f9b6f36cc
-size 285656
+size 333847

PreviewTests/Sources/__Snapshots__/PreviewTests/test_imageRoomTimelineView-iPhone-16-en-GB.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b2d7c9d9bf570589eb48fbbb11bf11f2970229599a5be9b06d3f54e855e0d06
+oid sha256:13f6dfd3e07222ae3757076e453cf99695424db88c8cc85fede448ea64e70519
-size 224889
+size 276862

PreviewTests/Sources/__Snapshots__/PreviewTests/test_imageRoomTimelineView-iPhone-16-pseudo.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b2d7c9d9bf570589eb48fbbb11bf11f2970229599a5be9b06d3f54e855e0d06
+oid sha256:13f6dfd3e07222ae3757076e453cf99695424db88c8cc85fede448ea64e70519
-size 224889
+size 276862