feat: large document previews - WPB-21022

WireFoundation/Sources/WireFoundation/Design/WireTextStyle/WireTextStyle.swift

@@ -30,6 +30,7 @@ public enum WireTextStyle: CaseIterable, Sendable {
     case body2
     case body3
     case subline1
+    case subline2
     case buttonSmall
     case buttonBig
 }

WireMessaging/Sources/WireMessagingUI/Resources/Localization/en.lproj/Localizable.strings

@@ -129,3 +129,5 @@
 // MARK: - Conversation
 "conversation.message.attachment.notAvailable" = "File not available";
 "conversation.message.attachment.previewNotAvailable" = "Unable to display preview";
+"conversation.message.attachment.unableToDownload" = "Unable to download file";
+"conversation.message.attachment.loadingContent" = "Loading content";

WireMessaging/Sources/WireMessagingUI/WireCells/Components/AttachmentsPreviewView/WireCellsAttachmentsPreviewItemView.swift

@@ -92,14 +92,14 @@ struct WireCellsAttachmentsPreviewItemView: View {
                 .frame(height: 74)
                 .frame(idealWidth: 288)
             case (.document, .large):
-                WireCellsDocumentAttachmentPreview(
+                WireCellsLargeDocumentPreviewView(
                     headerIcon: Image(viewModel.icon),
                     headerText: viewModel.headerText,
                     labelText: viewModel.fileName,
                     progress: viewModel.progress,
-                    isError: viewModel.isAssetDownloadError,
+                    downloadError: viewModel.isAssetDownloadError,
+                    url: viewModel.viewingURL
                 )
-                .frame(height: 74)
                 .frame(idealWidth: 288)
             case (.audio, .small), (.audio, .large):
                 WireCellsDocumentAttachmentPreview(

WireMessaging/Sources/WireMessagingUI/WireCells/Components/AttachmentsPreviewView/WireCellsLargeDocumentPreviewView.swift

@@ -0,0 +1,137 @@
+//
+// Wire
+// Copyright (C) 2025 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import SwiftUI
+import WireDesign
+import WireFoundation
+
+struct WireCellsLargeDocumentPreviewView: View {
+    private static let imageAspectRatio = CGFloat(8.0 / 3.0)
+    private static let errorMessage = L10n.Localizable.Conversation.Message.Attachment.previewNotAvailable
+    private static let downloadErrorMessage = L10n.Localizable.Conversation.Message.Attachment.unableToDownload
+    private static let loadingMessage = L10n.Localizable.Conversation.Message.Attachment.loadingContent
+
+    let headerIcon: Image
+    let headerText: String
+    let labelText: String
+    let progress: Double?
+    let downloadError: Bool
+    let url: URL?
+
+    var body: some View {
+        WireCellsAttachmentPreview(
+            progress: progress,
+            progressColor: downloadError
+                ? ColorTheme.Base.error.color : ColorTheme.Base.primary.color
+        ) {
+            VStack {
+                WireCellsDocumentHeaderView(
+                    headerIcon: headerIcon,
+                    headerText: headerText,
+                    labelText: labelText,
+                    progress: progress,
+                    isError: downloadError
+                )
+                .background(ColorTheme.Backgrounds.surfaceVariant.color)
+                .frame(height: 74) // This might break the UI if text font is too big
+                .frame(maxWidth: .infinity)
+
+                previewContainer {
+                    if downloadError {
+                        errorView(text: Self.downloadErrorMessage)
+                    } else {
+                        if let url {
+                            asyncImage(url: url)
+                        } else {
+                            errorView(text: Self.errorMessage)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func asyncImage(url: URL) -> some View {
+        AsyncImage(url: url) { phase in
+            switch phase {
+            case .empty:
+                loadingView(text: Self.loadingMessage)
+            case let .success(image):
+                image
+                    .resizable()
+                    .scaledToFill()
+            case .failure:
+                errorView(text: Self.errorMessage)
+            @unknown default:
+                EmptyView()
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func previewContainer(@ViewBuilder content: () -> some View)
+        -> some View {
+        Color.clear
+            .aspectRatio(Self.imageAspectRatio, contentMode: .fit)
+            .background(alignment: .top) {
+                content()
+            }
+            .clipped()
+    }
+
+    @ViewBuilder
+    private func loadingView(text: String) -> some View {
+        ZStack {
+            Color(ColorTheme.Backdrop.background)
+            VStack {
+                ProgressView()
+                Text(text)
+                    .wireTextStyle(.subline2)
+                    .foregroundColor(ColorTheme.Backgrounds.surface.color)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func errorView(text: String) -> some View {
+        ZStack {
+            Color(ColorTheme.Backdrop.background)
+            Text(text)
+                .wireTextStyle(.subline2)
+                .foregroundColor(ColorTheme.Backgrounds.surface.color)
+                .multilineTextAlignment(.center)
+                .padding()
+        }
+    }
+}
+
+#Preview {
+    WireCellsLargeDocumentPreviewView(
+        headerIcon: Image(FileIcon.pdf.resource),
+        headerText: "PDF (336 KB)",
+        labelText: "CDR_20220120 Accessibility Review Reviewed Final Plus",
+        progress: 0.7,
+        downloadError: false,
+        url: URL(
+            string:
+            "https://i.kym-cdn.com/entries/icons/facebook/000/018/012/this_is_fine.jpg"
+        )
+    )
+    .environment(\.wireTextStyleMapping, WireTextStyleMapping())
+}

WireMessaging/Sources/WireMessagingUI/WireCells/Components/Previews/WireCellsDocumentAttachmentPreview.swift

@@ -41,38 +41,13 @@ struct WireCellsDocumentAttachmentPreview: View {
             progress: progress,
             progressColor: isError ? Constants.errorColor : ColorTheme.Base.primary.color
         ) {
-            VStack(alignment: .leading) {
-                HStack(spacing: 4) {
-                    if isError {
-                        Image(systemName: "exclamationmark.triangle")
-                            .fontWeight(.semibold)
-                            .font(.system(size: 14 * scale))
-                            .foregroundStyle(Constants.errorColor)
-                    } else {
-                        headerIcon
-                            .resizable()
-                            .aspectRatio(contentMode: .fit)
-                            .frame(height: 16 * scale)
-                    }
-
-                    Text(headerText)
-                        .foregroundStyle(ColorTheme.Base.secondaryText.color)
-                        .wireTextStyle(.subline1)
-                        .lineLimit(1)
-
-                    Spacer()
-                }
-                .padding([.horizontal, .top], 8)
-
-                Spacer(minLength: 0)
-
-                Text(labelText)
-                    .foregroundStyle(ColorTheme.Backgrounds.onSurfaceVariant.color)
-                    .wireTextStyle(.h5)
-                    .lineLimit(2)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .padding([.horizontal, .bottom], 8)
-            }
+            WireCellsDocumentHeaderView(
+                headerIcon: headerIcon,
+                headerText: headerText,
+                labelText: labelText,
+                progress: progress,
+                isError: isError,
+            )
             .background(ColorTheme.Backgrounds.surfaceVariant.color)
             .frame(maxWidth: .infinity, maxHeight: .infinity)
         }

WireMessaging/Sources/WireMessagingUI/WireCells/Components/Previews/WireCellsDocumentHeaderView.swift

@@ -0,0 +1,87 @@
+//
+// Wire
+// Copyright (C) 2025 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import SwiftUI
+import WireDesign
+import WireFoundation
+
+struct WireCellsDocumentHeaderView: View {
+    enum Constants {
+        static let errorColor = ColorTheme.Base.error.color
+    }
+
+    @ScaledMetric private var scale: CGFloat = 1
+
+    let headerIcon: Image
+    let headerText: String
+    let labelText: String
+    let progress: Double?
+    let isError: Bool
+
+    var body: some View {
+        header()
+    }
+
+    @ViewBuilder
+    private func header() -> some View {
+        VStack(alignment: .leading) {
+            HStack(spacing: 4) {
+                if isError {
+                    Image(systemName: "exclamationmark.triangle")
+                        .fontWeight(.semibold)
+                        .font(.system(size: 14 * scale))
+                        .foregroundStyle(Constants.errorColor)
+                } else {
+                    headerIcon
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(height: 16 * scale)
+                }
+
+                Text(headerText)
+                    .foregroundStyle(ColorTheme.Base.secondaryText.color)
+                    .wireTextStyle(.subline1)
+                    .lineLimit(1)
+
+                Spacer()
+            }
+            .padding([.horizontal, .top], 8)
+
+            Spacer(minLength: 0)
+
+            Text(labelText)
+                .foregroundStyle(ColorTheme.Backgrounds.onSurfaceVariant.color)
+                .wireTextStyle(.h5)
+                .lineLimit(2)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding([.horizontal, .bottom], 8)
+        }
+    }
+}
+
+#Preview {
+    WireCellsDocumentHeaderView(
+        headerIcon: Image(FileIcon.pdf.resource),
+        headerText: "PDF (336 KB)",
+        labelText: "CDR_20220120 Accessibility Review Reviewed Final Plus",
+        progress: 0.7,
+        isError: false
+    )
+    .frame(width: 222, height: 74)
+    .environment(\.wireTextStyleMapping, WireTextStyleMapping())
+}

WireUI/Sources/WireDesign/Typography/Font+WireTextStyle.swift

@@ -48,6 +48,8 @@ public extension Font {
             .callout.bold()
         case .subline1:
             .caption
+        case .subline2:
+            .caption.weight(.semibold)
         case .buttonSmall:
             .system(size: 14, weight: .semibold)
         case .buttonBig:

WireUI/Sources/WireDesign/Typography/UIFont+WireTextStyle.swift

@@ -59,6 +59,9 @@ extension UIFont {
         case .subline1:
             return .preferredFont(forTextStyle: .caption1)
 
+        case .subline2:
+            return .preferredFont(forTextStyle: .caption1).withWeight(.semibold)
+
         case .buttonSmall:
             let baseFont = UIFont.systemFont(ofSize: 14)
             return UIFontMetrics.default.scaledFont(for: baseFont.withWeight(.semibold))