Redesign attachment uploading and error states (#1408)

* Update uploading progress indicator for attachements

* Refactor into one view

* Fix loading spinner not shown for videos

* Add retry icon view

* Retry sending message when tapping retry badge view

* Fix shimerring effect when attachment fails to load

* Remove anused code

* Create seperate file for RetryBadgeView.

* Refactor RetryBadgeView

* Add test coverage

* Re-record snapshots

* Upload file attachments uploading and error states

* Reuse FileAttachmentDisplayView

* Update changelog for attachment state redesign

* Remove extra changelog entries

* Remove redundant snapshot tests

* Fix SwiftFormat indentation in LoadingSpinnerView

Author: nuno-vieira

CHANGELOG.md

@@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 # Upcoming
 
 ### ✅ Added
+- Redesign attachment uploading progress and error state indicators [#1408](https://github.com/GetStream/stream-chat-swiftui/pull/1408)
+- Add inline upload progress and retry UI for file attachments [#1408](https://github.com/GetStream/stream-chat-swiftui/pull/1408)
+- Add `RetryBadgeView` for failed uploads and thumbnail loads [#1408](https://github.com/GetStream/stream-chat-swiftui/pull/1408)
 - Add `ComposerConfig.isVoiceRecordingAutoSendEnabled` to support sending a recording instantly on release [#1362](https://github.com/GetStream/stream-chat-swiftui/pull/1362)
 - Redesign `JumpToUnreadButton` [#1351](https://github.com/GetStream/stream-chat-swiftui/pull/1351)
 - Show deleted messages in channel list preview [#1338](https://github.com/GetStream/stream-chat-swiftui/pull/1338)

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/FileAttachmentsView.swift

@@ -39,7 +39,7 @@ public struct FileAttachmentsView: View {
                 ScrollView {
                     LazyVStack(spacing: 0) {
                         ForEach(viewModel.attachmentsDataSource) { monthlyDataSource in
-                            ForEach(monthlyDataSource.attachments, id: \.self) { attachment in
+                            ForEach(monthlyDataSource.attachments) { attachment in
                                 let url = attachment.assetURL
 
                                 Button {
@@ -62,7 +62,6 @@ public struct FileAttachmentsView: View {
                                 }
                                 .padding(.vertical, tokens.spacingSm)
                                 .padding(.horizontal)
-                                .withDownloadingStateIndicator(for: attachment.downloadingState, url: attachment.assetURL)
                                 .sheet(item: $viewModel.selectedAttachment) { item in
                                     FileAttachmentPreview(attachment: item)
                                 }

Sources/StreamChatSwiftUI/ChatMessageList/AttachmentDownloadingStateView.swift

@@ -9,7 +9,6 @@ import SwiftUI
 struct AttachmentUploadingStateView: View {
     @Injected(\.images) private var images
     @Injected(\.colors) private var colors
-    @Injected(\.fonts) private var fonts
 
     var uploadState: AttachmentUploadingState
     var url: URL
@@ -18,19 +17,21 @@ struct AttachmentUploadingStateView: View {
         Group {
             switch uploadState.state {
             case let .uploading(progress: progress):
-                BottomRightView {
-                    PercentageProgressView(progress: progress)
+                ZStack {
+                    Color(colors.backgroundCoreOverlayLight)
+                    LoadingSpinnerView(
+                        size: LoadingSpinnerSize.medium,
+                        progress: Double(progress)
+                    )
                 }
+                .allowsHitTesting(false)
 
             case .uploadingFailed:
-                BottomRightView {
-                    Image(uiImage: images.messageListErrorIndicator)
-                        .renderingMode(.template)
-                        .foregroundColor(Color(colors.badgeBackgroundError))
-                        .background(Color.white)
-                        .clipShape(Circle())
-                        .offset(x: -4, y: -4)
+                ZStack {
+                    Color(colors.backgroundCoreOverlayLight)
+                    RetryBadgeView()
                 }
+                .allowsHitTesting(false)
 
             case .uploaded:
                 TopRightView {

Sources/StreamChatSwiftUI/ChatMessageList/AttachmentUploadingStateView.swift

@@ -48,10 +48,6 @@ public struct FileAttachmentsContainer<Factory: ViewFactory>: View {
 }
 
 public struct FileAttachmentView: View {
-    @Injected(\.utils) private var utils
-    @Injected(\.images) private var images
-    @Injected(\.fonts) private var fonts
-    @Injected(\.colors) private var colors
     @Injected(\.tokens) private var tokens
     @Injected(\.chatClient) private var chatClient
 
@@ -72,26 +68,37 @@ public struct FileAttachmentView: View {
             FileAttachmentDisplayView(
                 url: attachment.assetURL,
                 title: attachment.title ?? "",
-                sizeString: attachment.file.sizeString
+                sizeString: attachment.file.sizeString,
+                uploadingState: attachment.uploadingState,
+                onRetry: { retryUpload() }
             )
             .onTapGesture {
-                fullScreenShown = true
+                if attachment.uploadingState?.state != .uploadingFailed {
+                    fullScreenShown = true
+                }
             }
             .accessibilityAction {
-                fullScreenShown = true
+                if attachment.uploadingState?.state != .uploadingFailed {
+                    fullScreenShown = true
+                }
             }
 
             Spacer()
         }
         .padding(.all, tokens.spacingSm)
         .frame(width: width)
-        .withUploadingStateIndicator(for: attachment.uploadingState, url: attachment.assetURL)
-        .withDownloadingStateIndicator(for: attachment.downloadingState, url: attachment.assetURL)
         .sheet(isPresented: $fullScreenShown) {
             FileAttachmentPreview(attachment: attachment)
         }
         .accessibilityIdentifier("FileAttachmentView")
     }
+
+    private func retryUpload() {
+        let messageId = attachment.id.messageId
+        let cid = attachment.id.cid
+        let controller = chatClient.messageController(cid: cid, messageId: messageId)
+        controller.resendMessage()
+    }
 }
 
 public struct FileAttachmentDisplayView: View {
@@ -103,11 +110,21 @@ public struct FileAttachmentDisplayView: View {
     var url: URL
     var title: String
     var sizeString: String
+    var uploadingState: AttachmentUploadingState?
+    var onRetry: (() -> Void)?
 
-    public init(url: URL, title: String, sizeString: String) {
+    public init(
+        url: URL,
+        title: String,
+        sizeString: String,
+        uploadingState: AttachmentUploadingState? = nil,
+        onRetry: (() -> Void)? = nil
+    ) {
         self.url = url
         self.title = title
         self.sizeString = sizeString
+        self.uploadingState = uploadingState
+        self.onRetry = onRetry
     }
 
     public var body: some View {
@@ -122,20 +139,87 @@ public struct FileAttachmentDisplayView: View {
                     .font(fonts.body)
                     .lineLimit(1)
                     .foregroundColor(Color(colors.textPrimary))
-                Text(sizeString)
-                    .font(fonts.subheadline)
-                    .lineLimit(1)
-                    .foregroundColor(Color(colors.textTertiary))
+                subtitleContent
             }
             Spacer()
         }
         .accessibilityElement(children: .combine)
     }
 
+    // MARK: - Private
+
+    @ViewBuilder
+    private var subtitleContent: some View {
+        if let uploadingState {
+            switch uploadingState.state {
+            case let .uploading(progress):
+                uploadingSubtitle(progress: progress, file: uploadingState.file)
+            case .uploadingFailed:
+                uploadFailedSubtitle
+            default:
+                fileSizeText
+            }
+        } else {
+            fileSizeText
+        }
+    }
+
+    private func uploadingSubtitle(progress: Double, file: AttachmentFile) -> some View {
+        HStack(spacing: tokens.spacingXxs) {
+            LoadingSpinnerView(
+                size: LoadingSpinnerSize.extraSmall,
+                progress: Double(progress)
+            )
+            Text(Self.uploadProgressText(progress: progress, file: file))
+                .font(fonts.subheadline)
+                .lineLimit(1)
+                .foregroundColor(Color(colors.textSecondary))
+        }
+    }
+
+    private var uploadFailedSubtitle: some View {
+        VStack(alignment: .leading, spacing: tokens.spacingXxxs) {
+            HStack(spacing: tokens.spacingXxs) {
+                Image(systemName: "exclamationmark.triangle.fill")
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: tokens.iconSizeSm, height: tokens.iconSizeSm)
+                    .foregroundColor(Color(colors.accentError))
+                Text(L10n.Message.Sending.attachmentUploadFailed)
+                    .font(fonts.subheadline)
+                    .lineLimit(1)
+                    .foregroundColor(Color(colors.textSecondary))
+            }
+            if let onRetry {
+                Button(action: onRetry) {
+                    Text(L10n.Message.Sending.attachmentRetryUpload)
+                        .font(fonts.subheadline)
+                        .foregroundColor(Color(colors.textLink))
+                }
+                .buttonStyle(.plain)
+            }
+        }
+    }
+
+    private var fileSizeText: some View {
+        Text(sizeString)
+            .font(fonts.subheadline)
+            .lineLimit(1)
+            .foregroundColor(Color(colors.textTertiary))
+    }
+
     private var previewImage: UIImage {
         let iconName = url.pathExtension
         return images.fileIconPreviews[iconName] ?? images.iconOther
     }
+
+    static func uploadProgressText(progress: Double, file: AttachmentFile) -> String {
+        let formatter = AttachmentFile.sizeFormatter
+        let uploaded = Int64(progress * Double(file.size))
+        let uploadedText = formatter.string(fromByteCount: uploaded)
+        let totalText = formatter.string(fromByteCount: file.size)
+        return "\(uploadedText) / \(totalText)"
+    }
 }
 
 struct DownloadShareAttachmentView<Payload: DownloadableAttachmentPayload>: View {