Support adding a caption to media uploads. (#3531)

* Add a composer to the MediaUploadPreviewScreen. And send it's content to the media upload's caption. * Use the new compound SendButton (updating relative padding in the toolbar). * Update snapshots. * Add unit tests for sending a caption.
2026-11-04 19:44:05 +00:00 · 2024-11-19 16:35:01 +00:00
parent 352bb577ad
commit b75ad6a5aa
56 changed files with 530 additions and 284 deletions
@@ -15,6 +15,13 @@ struct MediaUploadPreviewScreenViewState: BindableState {
    let url: URL
    let title: String?
    var shouldDisableInteraction = false
+    
+    var bindings = MediaUploadPreviewScreenBindings()
+}
+
+struct MediaUploadPreviewScreenBindings: BindableState {
+    var caption = NSAttributedString()
+    var presendCallback: (() -> Void)?
 }

 enum MediaUploadPreviewScreenViewAction {
@@ -42,6 +42,9 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
    }
    
    override func process(viewAction: MediaUploadPreviewScreenViewAction) {
+        // Get the current caption before all the processing starts.
+        let caption = state.bindings.caption.nonBlankString
+        
        switch viewAction {
        case .send:
            Task {
@@ -51,7 +54,7 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
                
                switch await mediaUploadingPreprocessor.processMedia(at: url) {
                case .success(let mediaInfo):
-                    switch await sendAttachment(mediaInfo: mediaInfo, progressSubject: progressSubject) {
+                    switch await sendAttachment(mediaInfo: mediaInfo, caption: caption, progressSubject: progressSubject) {
                    case .success:
                        actionsSubject.send(.dismiss)
                    case .failure(let error):
@@ -75,20 +78,38 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
    
    // MARK: - Private
    
-    private func sendAttachment(mediaInfo: MediaInfo, progressSubject: CurrentValueSubject<Double, Never>?) async -> Result<Void, TimelineProxyError> {
+    private func sendAttachment(mediaInfo: MediaInfo, caption: String?, progressSubject: CurrentValueSubject<Double, Never>?) async -> Result<Void, TimelineProxyError> {
        let requestHandle: ((SendAttachmentJoinHandleProtocol) -> Void) = { [weak self] handle in
            self?.requestHandle = handle
        }
        
        switch mediaInfo {
        case let .image(imageURL, thumbnailURL, imageInfo):
-            return await roomProxy.timeline.sendImage(url: imageURL, thumbnailURL: thumbnailURL, imageInfo: imageInfo, progressSubject: progressSubject, requestHandle: requestHandle)
+            return await roomProxy.timeline.sendImage(url: imageURL,
+                                                      thumbnailURL: thumbnailURL,
+                                                      imageInfo: imageInfo,
+                                                      caption: caption,
+                                                      progressSubject: progressSubject,
+                                                      requestHandle: requestHandle)
        case let .video(videoURL, thumbnailURL, videoInfo):
-            return await roomProxy.timeline.sendVideo(url: videoURL, thumbnailURL: thumbnailURL, videoInfo: videoInfo, progressSubject: progressSubject, requestHandle: requestHandle)
+            return await roomProxy.timeline.sendVideo(url: videoURL,
+                                                      thumbnailURL: thumbnailURL,
+                                                      videoInfo: videoInfo,
+                                                      caption: caption,
+                                                      progressSubject: progressSubject,
+                                                      requestHandle: requestHandle)
        case let .audio(audioURL, audioInfo):
-            return await roomProxy.timeline.sendAudio(url: audioURL, audioInfo: audioInfo, progressSubject: progressSubject, requestHandle: requestHandle)
+            return await roomProxy.timeline.sendAudio(url: audioURL,
+                                                      audioInfo: audioInfo,
+                                                      caption: caption,
+                                                      progressSubject: progressSubject,
+                                                      requestHandle: requestHandle)
        case let .file(fileURL, fileInfo):
-            return await roomProxy.timeline.sendFile(url: fileURL, fileInfo: fileInfo, progressSubject: progressSubject, requestHandle: requestHandle)
+            return await roomProxy.timeline.sendFile(url: fileURL,
+                                                     fileInfo: fileInfo,
+                                                     caption: caption,
+                                                     progressSubject: progressSubject,
+                                                     requestHandle: requestHandle)
        }
    }
    
@@ -118,3 +139,10 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
        userIndicatorController.submitIndicator(UserIndicator(title: label))
    }
 }
+
+extension NSAttributedString {
+    var nonBlankString: String? {
+        guard !string.isBlank else { return nil }
+        return string
+    }
+}
@@ -5,6 +5,7 @@
 // Please see LICENSE in the repository root for full details.
 //

+import Compound
 import QuickLook
 import SwiftUI

@@ -17,13 +18,20 @@ struct MediaUploadPreviewScreen: View {
    
    var body: some View {
        mainContent
-            .id(UUID())
+            .id(context.viewState.url)
+            .ignoresSafeArea(edges: [.horizontal])
+            .safeAreaInset(edge: .bottom, spacing: 0) {
+                composer
+                    .padding(.horizontal, 12)
+                    .padding(.vertical, 16)
+                    .background() // Don't use compound so we match the QLPreviewController.
+            }
            .navigationTitle(title)
            .navigationBarTitleDisplayMode(.inline)
-            .disabled(context.viewState.shouldDisableInteraction)
-            .ignoresSafeArea(edges: [.horizontal, .bottom])
            .toolbar { toolbar }
+            .disabled(context.viewState.shouldDisableInteraction)
            .interactiveDismissDisabled()
+            .preferredColorScheme(.dark)
    }
    
    @ViewBuilder
@@ -38,18 +46,31 @@ struct MediaUploadPreviewScreen: View {
        }
    }
    
+    private var composer: some View {
+        HStack(spacing: 12) {
+            MessageComposerTextField(placeholder: L10n.richTextEditorComposerCaptionPlaceholder,
+                                     text: $context.caption,
+                                     presendCallback: $context.presendCallback,
+                                     maxHeight: ComposerConstant.maxHeight,
+                                     keyHandler: { _ in },
+                                     pasteHandler: { _ in })
+                .messageComposerStyle()
+            
+            SendButton {
+                context.send(viewAction: .send)
+            }
+        }
+    }
+    
    @ToolbarContentBuilder
    private var toolbar: some ToolbarContent {
        ToolbarItem(placement: .cancellationAction) {
            Button { context.send(viewAction: .cancel) } label: {
                Text(L10n.actionCancel)
            }
-        }
-        ToolbarItem(placement: .confirmationAction) {
-            Button { context.send(viewAction: .send) } label: {
-                Text(L10n.actionSend)
-            }
-            .disabled(context.viewState.shouldDisableInteraction)
+            // Fix a bug with the preferredColorScheme on iOS 18 where the button doesn't
+            // follow the dark colour scheme on devices running with dark mode disabled.
+            .tint(.compound.textActionPrimary)
        }
    }
 }
@@ -111,21 +132,6 @@ private class PreviewItem: NSObject, QLPreviewItem {
    }
 }

-// MARK: - Previews
-
-struct MediaUploadPreviewScreen_Previews: PreviewProvider, TestablePreview {
-    static let viewModel = MediaUploadPreviewScreenViewModel(userIndicatorController: UserIndicatorControllerMock.default,
-                                                             roomProxy: JoinedRoomProxyMock(),
-                                                             mediaUploadingPreprocessor: MediaUploadingPreprocessor(appSettings: ServiceLocator.shared.settings),
-                                                             title: "some random file name",
-                                                             url: URL.picturesDirectory)
-    static var previews: some View {
-        NavigationStack {
-            MediaUploadPreviewScreen(context: viewModel.context)
-        }
-    }
-}
-
 private class PreviewViewController: QLPreviewController {
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
@@ -137,3 +143,21 @@ private class PreviewViewController: QLPreviewController {
        toolbarItems?.first?.isHidden = true
    }
 }
+
+// MARK: - Previews
+
+struct MediaUploadPreviewScreen_Previews: PreviewProvider, TestablePreview {
+    static let snapshotURL = URL.picturesDirectory
+    static let testURL = Bundle.main.url(forResource: "AppIcon60x60@2x", withExtension: "png")
+    
+    static let viewModel = MediaUploadPreviewScreenViewModel(userIndicatorController: UserIndicatorControllerMock.default,
+                                                             roomProxy: JoinedRoomProxyMock(),
+                                                             mediaUploadingPreprocessor: MediaUploadingPreprocessor(appSettings: ServiceLocator.shared.settings),
+                                                             title: "App Icon.png",
+                                                             url: snapshotURL)
+    static var previews: some View {
+        NavigationStack {
+            MediaUploadPreviewScreen(context: viewModel.context)
+        }
+    }
+}
@@ -62,7 +62,7 @@ struct ComposerToolbar: View {
            if !context.composerFormattingEnabled {
                if context.viewState.isUploading {
                    ProgressView()
-                        .scaledFrame(size: 44, relativeTo: .title)
+                        .scaledFrame(size: 44, relativeTo: .compound.headingLG)
                        .padding(.leading, 3)
                } else if context.viewState.showSendButton {
                    sendButton
@@ -119,27 +119,29 @@ struct ComposerToolbar: View {
            Image(Asset.Images.closeRte.name)
                .resizable()
                .scaledToFit()
-                .scaledFrame(size: 30, relativeTo: .title)
-                .scaledPadding(7, relativeTo: .title)
+                .scaledFrame(size: 30, relativeTo: .compound.headingLG)
+                .scaledPadding(7, relativeTo: .compound.headingLG)
        }
        .accessibilityLabel(L10n.actionClose)
        .accessibilityIdentifier(A11yIdentifiers.roomScreen.composerToolbar.closeFormattingOptions)
    }
    
    private var sendButton: some View {
-        Button {
-            sendMessage()
-        } label: {
-            CompoundIcon(context.viewState.composerMode.isEdit ? \.check : \.sendSolid)
-                .scaledPadding(6, relativeTo: .title)
-                .accessibilityLabel(context.viewState.composerMode.isEdit ? L10n.actionConfirm : L10n.actionSend)
-                .foregroundColor(context.viewState.sendButtonDisabled ? .compound.iconDisabled : .white)
-                .background {
-                    Circle()
-                        .foregroundColor(context.viewState.sendButtonDisabled ? .clear : .compound.iconAccentTertiary)
+        Group {
+            if context.viewState.composerMode.isEdit {
+                Button(action: sendMessage) {
+                    CompoundIcon(\.check, size: .medium, relativeTo: .compound.headingLG)
+                        .foregroundColor(.white)
+                        .scaledPadding(6, relativeTo: .compound.headingLG)
+                        .background(.compound.iconAccentTertiary, in: Circle())
+                        .accessibilityLabel(L10n.actionConfirm)
                }
-                .scaledPadding(4, relativeTo: .title)
+            } else {
+                SendButton(action: sendMessage)
+                    .accessibilityLabel(L10n.actionSend)
+            }
        }
+        .scaledPadding(4, relativeTo: .compound.headingLG)
        .disabled(context.viewState.sendButtonDisabled)
        .animation(.linear(duration: 0.1).disabledDuringTests(), value: context.viewState.sendButtonDisabled)
        .keyboardShortcut(.return, modifiers: [.command])
@@ -271,8 +273,8 @@ struct ComposerToolbar: View {
        } label: {
            CompoundIcon(\.delete)
                .scaledToFit()
-                .scaledFrame(size: 30, relativeTo: .title)
-                .scaledPadding(7, relativeTo: .title)
+                .scaledFrame(size: 30, relativeTo: .compound.headingLG)
+                .scaledPadding(7, relativeTo: .compound.headingLG)
        }
        .buttonStyle(.compound(.plain))
        .accessibilityLabel(L10n.a11yDelete)
@@ -291,6 +293,8 @@ struct ComposerToolbar: View {
    }
 }

+// MARK: - Previews
+
 struct ComposerToolbar_Previews: PreviewProvider, TestablePreview {
    static let wysiwygViewModel = WysiwygComposerViewModel()
    static let composerViewModel = ComposerToolbarViewModel(wysiwygViewModel: wysiwygViewModel,
@@ -330,8 +334,6 @@ struct ComposerToolbar_Previews: PreviewProvider, TestablePreview {
    }
 }

-// MARK: - Mock
-
 extension ComposerToolbar {
    static func mock(focused: Bool = true) -> ComposerToolbar {
        let wysiwygViewModel = WysiwygComposerViewModel()
@@ -35,17 +35,8 @@ struct MessageComposer: View {
                resizeGrabber
            }
            
-            mainContent
-                .padding(.horizontal, 12.0)
-                .clipShape(composerShape)
-                .background {
-                    ZStack {
-                        composerShape
-                            .fill(Color.compound.bgSubtleSecondary)
-                        composerShape
-                            .stroke(Color.compound._borderTextFieldFocused, lineWidth: 0.5)
-                    }
-                }
+            composerTextField
+                .messageComposerStyle(header: header)
                // Explicitly disable all animations to fix weirdness with the header immediately
                // appearing whilst the text field and keyboard are still animating up to it.
                .animation(.noAnimation, value: mode)
@@ -57,34 +48,27 @@ struct MessageComposer: View {
    
    @State private var composerFrame = CGRect.zero
    
-    private var mainContent: some View {
-        VStack(alignment: .leading, spacing: -6) {
-            header
-            
-            if composerFormattingEnabled {
-                Color.clear
-                    .overlay(alignment: .top) {
-                        composerView
-                            .clipped()
-                            .readFrame($composerFrame)
-                    }
-                    .frame(minHeight: ComposerConstant.minHeight, maxHeight: max(composerHeight, composerFrame.height),
-                           alignment: .top)
-                    .tint(.compound.iconAccentTertiary)
-                    .padding(.vertical, 10)
-                    .onAppear {
-                        onAppearAction()
-                    }
-            } else {
-                MessageComposerTextField(placeholder: L10n.richTextEditorComposerPlaceholder,
-                                         text: $plainComposerText,
-                                         presendCallback: $presendCallback,
-                                         maxHeight: ComposerConstant.maxHeight,
-                                         keyHandler: { handleKeyPress($0) },
-                                         pasteHandler: pasteAction)
-                    .tint(.compound.iconAccentTertiary)
-                    .padding(.vertical, 10)
-            }
+    @ViewBuilder
+    private var composerTextField: some View {
+        if composerFormattingEnabled {
+            Color.clear
+                .overlay(alignment: .top) {
+                    composerView
+                        .clipped()
+                        .readFrame($composerFrame)
+                }
+                .frame(minHeight: ComposerConstant.minHeight, maxHeight: max(composerHeight, composerFrame.height),
+                       alignment: .top)
+                .onAppear {
+                    onAppearAction()
+                }
+        } else {
+            MessageComposerTextField(placeholder: L10n.richTextEditorComposerPlaceholder,
+                                     text: $plainComposerText,
+                                     presendCallback: $presendCallback,
+                                     maxHeight: ComposerConstant.maxHeight,
+                                     keyHandler: { handleKeyPress($0) },
+                                     pasteHandler: pasteAction)
        }
    }

@@ -200,6 +184,42 @@ private struct MessageComposerHeaderLabelStyle: LabelStyle {
    }
 }

+// MARK: - Style
+
+extension View {
+    func messageComposerStyle(header: some View = EmptyView()) -> some View {
+        modifier(MessageComposerStyleModifier(header: header))
+    }
+}
+
+private struct MessageComposerStyleModifier<Header: View>: ViewModifier {
+    private let composerShape = RoundedRectangle(cornerRadius: 21, style: .circular)
+    
+    let header: Header
+    
+    func body(content: Content) -> some View {
+        VStack(alignment: .leading, spacing: -6) {
+            header
+            
+            content
+                .tint(.compound.iconAccentTertiary)
+                .padding(.vertical, 10)
+        }
+        .padding(.horizontal, 12.0)
+        .clipShape(composerShape)
+        .background {
+            ZStack {
+                composerShape
+                    .fill(Color.compound.bgSubtleSecondary)
+                composerShape
+                    .stroke(Color.compound.borderInteractiveSecondary, lineWidth: 0.5)
+            }
+        }
+    }
+}
+
+// MARK: - Previews
+
 struct MessageComposer_Previews: PreviewProvider, TestablePreview {
    static let viewModel = TimelineViewModel.mock
    
@@ -18,8 +18,8 @@ struct RoomAttachmentPicker: View {
        Menu {
            menuContent
        } label: {
-            CompoundIcon(asset: Asset.Images.composerAttachment, size: .custom(30), relativeTo: .title)
-                .scaledPadding(7, relativeTo: .title)
+            CompoundIcon(asset: Asset.Images.composerAttachment, size: .custom(30), relativeTo: .compound.headingLG)
+                .scaledPadding(7, relativeTo: .compound.headingLG)
        }
        .buttonStyle(RoomAttachmentPickerButtonStyle())
        .accessibilityLabel(L10n.actionAddToTimeline)
@@ -32,18 +32,15 @@ struct VoiceMessageRecordingButton: View {
        } label: {
            switch mode {
            case .idle:
-                CompoundIcon(\.micOn, size: .medium, relativeTo: .title)
+                CompoundIcon(\.micOn, size: .medium, relativeTo: .compound.headingLG)
                    .foregroundColor(.compound.iconSecondary)
-                    .scaledPadding(10, relativeTo: .title)
+                    .scaledPadding(10, relativeTo: .compound.headingLG)
            case .recording:
-                CompoundIcon(asset: Asset.Images.stopRecording, size: .medium, relativeTo: .title)
+                CompoundIcon(asset: Asset.Images.stopRecording, size: .medium, relativeTo: .compound.headingLG)
                    .foregroundColor(.compound.iconOnSolidPrimary)
-                    .scaledPadding(6, relativeTo: .title)
-                    .background(
-                        Circle()
-                            .foregroundColor(.compound.bgActionPrimaryRest)
-                    )
-                    .scaledPadding(4, relativeTo: .title)
+                    .scaledPadding(6, relativeTo: .compound.headingLG)
+                    .background(.compound.bgActionPrimaryRest, in: Circle())
+                    .scaledPadding(4, relativeTo: .compound.headingLG)
            }
        }
        .buttonStyle(VoiceMessageRecordingButtonStyle())