Updates to File Info Bottom Sheet (#5667)

* Updates to File Info Bottom Sheet Removing buttons, changing labels, adding a title * Update the underlying actions rather than fixing it at the screen-level. * Fix the media details sheet height now there's a navigation title. * Record preview snapshots --------- Co-authored-by: Doug <douglase@element.io> Co-authored-by: Element CI <ci@element.io>
2026-11-04 01:20:12 +00:00 · 2026-06-01 15:00:55 +02:00
parent a3f78c9005
commit dc7454d161
23 changed files with 66 additions and 75 deletions
@@ -85,7 +85,7 @@ class TimelineMediaPreviewViewModel: TimelineMediaPreviewViewModelType {
            case .viewInRoomTimeline:
                state.previewControllerDriver.send(.dismissDetailsSheet)
                actionsSubject.send(.viewInRoomTimeline(item.timelineItem.id))
-            case .save:
+            case .downloadMedia:
                Task { await saveCurrentItem() }
            case .redact:
                state.bindings.redactConfirmationItem = item
@@ -200,7 +200,7 @@ class TimelineMediaPreviewViewModel: TimelineMediaPreviewViewModelType {
    }
    private func redactItem(_ item: TimelineMediaPreviewItem.Media) {
-        timelineViewModel.context.send(viewAction: .handleTimelineItemMenuAction(itemID: item.timelineItem.id, action: .redact))
+        timelineViewModel.context.send(viewAction: .handleTimelineItemMenuAction(itemID: item.timelineItem.id, action: .redact(isMedia: true)))
        state.bindings.redactConfirmationItem = nil
        state.previewControllerDriver.send(.dismissDetailsSheet)
        actionsSubject.send(.dismiss)
@@ -227,7 +227,7 @@ class TimelineMediaPreviewController: QLPreviewController {
    private func presentMediaDetails(for mediaItem: TimelineMediaPreviewItem.Media) {
        let safeArea = view.safeAreaInsets.bottom
        let sheetHeightBinding = Binding { safeArea } set: { [weak self] newValue, _ in
-            self?.detailsHostingController?.sheetPresentationController?.detents = [.height(newValue + safeArea)]
+            self?.detailsHostingController?.sheetPresentationController?.detents = [.height(newValue)]
        }
        let hostingController = UIHostingController(rootView: TimelineMediaPreviewDetailsView(item: mediaItem,
@@ -15,20 +15,24 @@ struct TimelineMediaPreviewDetailsView: View {
    var preferredColorScheme: ColorScheme? = .dark
    @Binding var sheetHeight: CGFloat
-    private let topPadding: CGFloat = 19
+    /// Approximate height of the navigation bar.
    private let topPadding: CGFloat = 72
    var body: some View {
-        ScrollView {
+        ElementNavigationStack {
-            VStack(alignment: .leading, spacing: 0) {
+            ScrollView {
-                details
+                VStack(alignment: .leading, spacing: 0) {
-                actions
+                    details
                    actions
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .onGeometryChange(for: CGFloat.self, of: \.size.height) { sheetHeight = $0 + topPadding }
            }
-            .frame(maxWidth: .infinity, alignment: .leading)
+            .scrollBounceBehavior(.basedOnSize)
-            .readHeight($sheetHeight)
+            .navigationTitle(L10n.screenMediaDetailsTitle)
            .navigationBarTitleDisplayMode(.inline)
        }
-        .scrollBounceBehavior(.basedOnSize)
+        .presentationDetents([.height(sheetHeight)])
        .padding(.top, topPadding) // For the drag indicator
        .presentationDetents([.height(sheetHeight + topPadding)])
        .presentationDragIndicator(.visible)
        .presentationBackground(.compound.bgCanvasDefault)
        .preferredColorScheme(preferredColorScheme)
@@ -90,7 +94,6 @@ struct TimelineMediaPreviewDetailsView: View {
                }
            }
        }
        .padding(.top, 24)
        .padding(.bottom, 32)
        .padding(.horizontal, 16)
    }
@@ -142,14 +145,7 @@ struct TimelineMediaPreviewDetailsView: View {
        let context: TimelineMediaPreviewViewModel.Context
        var body: some View {
-            if action == .share {
+            if action == .downloadMedia {
                if let itemURL = item.fileHandle?.url {
                    ShareLink(item: itemURL, message: item.caption.map(Text.init)) {
                        action.label
                    }
                    .buttonStyle(.menuSheet)
                }
            } else if action == .save {
                if item.fileHandle?.url != nil {
                    button
                }
@@ -195,9 +195,7 @@ class TimelineInteractionHandler {
            analyticsService.trackInteraction(name: .PinnedMessageListViewTimeline)
            guard let eventID = itemID.eventID else { return }
            actionsSubject.send(.viewInRoomTimeline(eventID: eventID))
-        case .share:
+        case .downloadMedia:
            break // Handled inline in the media preview screen with a ShareLink.
        case .save:
            break // Handled inline in the media preview screen.
        case .translate:
            guard let messageTimelineItem = timelineItem as? EventBasedMessageTimelineItemProtocol else { return }
@@ -65,7 +65,7 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
    case removeCaption
    case editPoll
    case copyPermalink
-    case redact
+    case redact(isMedia: Bool)
    case reply(isThread: Bool)
    case replyInThread
    case forward(itemID: TimelineItemIdentifier)
@@ -77,8 +77,7 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
    case pin
    case unpin
    case viewInRoomTimeline
-    case share
+    case downloadMedia
    case save
    var id: Self {
        self
@@ -135,7 +134,7 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
    var canAppearInMediaDetails: Bool {
        switch self {
-        case .viewInRoomTimeline, .share, .save, .redact, .forward:
+        case .viewInRoomTimeline, .downloadMedia, .redact, .forward:
            true
        default:
            false
@@ -171,8 +170,8 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
            Label(L10n.actionReplyInThread, icon: \.threads)
        case .forward:
            Label(L10n.actionForward, icon: \.forward)
-        case .redact:
+        case .redact(let isMedia):
-            Label(L10n.actionRemoveMessage, icon: \.delete)
+            Label(isMedia ? L10n.actionDeleteFile : L10n.actionRemoveMessage, icon: \.delete)
        case .viewSource:
            Label(L10n.actionViewSource, icon: \.code)
        case .report:
@@ -190,10 +189,8 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
            Label(L10n.actionUnpin, icon: \.unpin)
        case .viewInRoomTimeline:
            Label(L10n.actionViewInTimeline, icon: \.visibilityOn)
-        case .share:
+        case .downloadMedia:
-            Label(L10n.actionShare, icon: \.shareIos)
+            Label(L10n.actionDownload, icon: \.downloadIos)
        case .save:
            Label(L10n.actionSave, icon: \.downloadIos)
        }
    }
 }
@@ -114,7 +114,8 @@ struct TimelineItemMenuActionProvider {
        }
        if canRedactItem(item) {
-            secondaryActions.append(.redact)
+            let isMedia = if case .media = timelineKind { true } else { false }
            secondaryActions.append(.redact(isMedia: isMedia))
        }
        switch timelineKind {
@@ -122,8 +123,7 @@ struct TimelineItemMenuActionProvider {
            actions = actions.filter(\.canAppearInPinnedEventsTimeline)
            secondaryActions = secondaryActions.filter(\.canAppearInPinnedEventsTimeline)
        case .media:
-            actions.append(.share)
+            actions.append(.downloadMedia)
            actions.append(.save)
            actions = actions.filter(\.canAppearInMediaDetails)
            secondaryActions = secondaryActions.filter(\.canAppearInMediaDetails)
        case .live, .detached, .thread:
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b93c230eb1ec5fb47b7f32255185f1a31be9e63cd2ebdb48d71609ac84fe5070
+oid sha256:c7fcac27eabaf0bf09a96bac10d4cb867c87d7ba648f0dcd723dca10edf3ee23
-size 150251
+size 142105
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:47e8cbbf2361f846f528033e2f3162dd5f20297f45d0b36d7602c6d389d698f9
+oid sha256:8f210848fab966fdf32f0b43561030056e1d90e4f09b6c5b9c72608968f869cb
-size 161620
+size 154280
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:835404f0d0a173ad4ddbabc68aeda3d7a231fbcfdd457f5d713aef6ef2ea61aa
+oid sha256:4333a58ec8a659b3e4a491ef565a31ac4c4e6abff8d12cb1028946bd40ca2d49
-size 99521
+size 95954
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:26b50e2f7f07b3ae738c756f1ab208b56bafc459cbab2c9e8db117702a99f39f
+oid sha256:35b42508a3b98008db2873193493c8d83f9b8844bc61bbb434832249e2ce4285
-size 111277
+size 106703
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:22fe6462eb9de68f8c6ce02a1362f45a3768db86553a1f38b0858e7e318ec9c6
+oid sha256:1411bbcbb61d9ae7ed5152b163ecae1d91e0a52f239831912731dab0a0c05bed
-size 133349
+size 126269
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f62126e11f38027fb92b1c75ece757864541966e46c5130ab1bd45a4a528a969
+oid sha256:e3f5ca0795ee836b4253614658c1592aae03f780d3c0635b0acb24b60c6757db
-size 141902
+size 135914
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8628e42e49b2a5b373f058da0f5fb6bac6e011de8bf2835e16c382ff815a2b34
+oid sha256:3e93d75e2929adf1f4b4160ef68755495c4648b8774da19f55be35b2d270808a
-size 84460
+size 81457
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb4052cffcf38fa40f413a6599e51daa49821e97f29d775d169f45e03cdf08e1
+oid sha256:8154beb891f3ec9d5bcd3dc475c040c24f4465279d0a7fdc842890dd062dda48
-size 92649
+size 89869
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:671dccc688b9336ec9671f1b63bcbd927a016755cb600c2defd01d952d30f60a
+oid sha256:f18322f326266abef6568b3cbe7c96685b02ddac3758ab4d2e35bc1f5e2d1819
-size 143766
+size 137614
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5229168916a4d0676a23785f57e5af8897f4f8bece9d3510f3643bd7bca4075
+oid sha256:ccdd1c87da8a37c6ca475fdfd3c92268cde4653d5985de5735289237d31fa5b5
-size 154702
+size 147609
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:59571f97f5b4f09e15ed059a14c9c72c58d30af8a2ad7e6a110235614dbcf4f1
+oid sha256:6fad1eee848efa75091c0ded7aacb2b7ae265ea899ba6a51c5a1bca9bbffdc0a
-size 93988
+size 92148
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:65e890e9425ce674577c84682d62697b0a6cc47e894c5433f16c94833eb00022
+oid sha256:526d6d794ef01b7b0dd1c588b446ec74dc389834d585eecd61291cf350dec860
-size 104635
+size 101071
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3075970e4d04aa2db2771e1caee5c63c54cf33d069cf2189397b0ef2d67ff437
+oid sha256:7590c9eec46f387778689102bea56440b57741c2d026f1894486977c80c881e0
-size 137869
+size 132486
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a523979a533adc0c496285891b4905a919e53fa90961c74a513d5f01eb61a9e
+oid sha256:4cf450678510928107cb32377237fbb21fc969d4b7391fd5954912c3b4ddc79d
-size 147167
+size 142804
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:08c83c0e9300a75f8554421a08ec714169bce0f093d67a289e368cb53aa5049a
+oid sha256:35865172cb34913c442e603bbc524645dd622ebb6e0d709930c67077206ee46a
-size 89039
+size 86372
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7b549e6644d2f59e571093bd2b694d36e68bf485dabf96ed8deeaef79575ca3e
+oid sha256:c6de87c016b33c974a600f7a4fe164591f98b18e602844ac1aa54a7b9e36be82
-size 97781
+size 95517
@@ -174,7 +174,7 @@ struct TimelineMediaPreviewViewModelTests {
        #expect(.media(mediaDetailsItem) == context.viewState.currentItem)
        // When choosing to redact the item.
-        context.send(viewAction: .menuAction(.redact, item: mediaItem))
+        context.send(viewAction: .menuAction(.redact(isMedia: true), item: mediaItem))
        // Then the confirmation sheet should be presented.
        #expect(context.redactConfirmationItem == mediaItem)
@@ -200,7 +200,7 @@ struct TimelineMediaPreviewViewModelTests {
        #expect(mediaItem.contentType == "JPEG image")
        // When choosing to save the image.
-        context.send(viewAction: .menuAction(.save, item: mediaItem))
+        context.send(viewAction: .menuAction(.downloadMedia, item: mediaItem))
        try await Task.sleep(for: .seconds(0.5))
        // Then the image should be saved as a photo to the user's photo library.
@@ -222,7 +222,7 @@ struct TimelineMediaPreviewViewModelTests {
        // When choosing to save the image.
        let deferred = deferFulfillment(context.viewState.previewControllerDriver) { $0.isAuthorizationRequired }
-        context.send(viewAction: .menuAction(.save, item: mediaItem))
+        context.send(viewAction: .menuAction(.downloadMedia, item: mediaItem))
        // Then the user should be prompted to allow access.
        try await deferred.fulfill()
@@ -241,7 +241,7 @@ struct TimelineMediaPreviewViewModelTests {
        #expect(mediaItem.contentType == "MPEG-4 movie")
        // When choosing to save the video.
-        context.send(viewAction: .menuAction(.save, item: mediaItem))
+        context.send(viewAction: .menuAction(.downloadMedia, item: mediaItem))
        try await Task.sleep(for: .seconds(0.5))
        // Then the video should be saved as a video in the user's photo library.
@@ -263,7 +263,7 @@ struct TimelineMediaPreviewViewModelTests {
        // When choosing to save the file.
        let deferred = deferFulfillment(context.viewState.previewControllerDriver) { $0.isExportFile }
-        context.send(viewAction: .menuAction(.save, item: mediaItem))
+        context.send(viewAction: .menuAction(.downloadMedia, item: mediaItem))
        let exportAction = try await deferred.fulfill()
        guard case let .exportFile(file) = exportAction else {