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>

ElementX/Sources/Screens/FilePreviewScreen/TimelineMediaPreviewViewModel.swift

@@ -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)

ElementX/Sources/Screens/FilePreviewScreen/View/TimelineMediaPreviewController.swift

@@ -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,

ElementX/Sources/Screens/FilePreviewScreen/View/TimelineMediaPreviewDetailsView.swift

@@ -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 {
-            VStack(alignment: .leading, spacing: 0) {
-                details
-                actions
+        ElementNavigationStack {
+            ScrollView {
+                VStack(alignment: .leading, spacing: 0) {
+                    details
+                    actions
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .onGeometryChange(for: CGFloat.self, of: \.size.height) { sheetHeight = $0 + topPadding }
             }
-            .frame(maxWidth: .infinity, alignment: .leading)
-            .readHeight($sheetHeight)
+            .scrollBounceBehavior(.basedOnSize)
+            .navigationTitle(L10n.screenMediaDetailsTitle)
+            .navigationBarTitleDisplayMode(.inline)
         }
-        .scrollBounceBehavior(.basedOnSize)
-        .padding(.top, topPadding) // For the drag indicator
-        .presentationDetents([.height(sheetHeight + topPadding)])
+        .presentationDetents([.height(sheetHeight)])
         .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 let itemURL = item.fileHandle?.url {
-                    ShareLink(item: itemURL, message: item.caption.map(Text.init)) {
-                        action.label
-                    }
-                    .buttonStyle(.menuSheet)
-                }
-            } else if action == .save {
+            if action == .downloadMedia {
                 if item.fileHandle?.url != nil {
                     button
                 }

ElementX/Sources/Screens/Timeline/TimelineInteractionHandler.swift

@@ -195,9 +195,7 @@ class TimelineInteractionHandler {
             analyticsService.trackInteraction(name: .PinnedMessageListViewTimeline)
             guard let eventID = itemID.eventID else { return }
             actionsSubject.send(.viewInRoomTimeline(eventID: eventID))
-        case .share:
-            break // Handled inline in the media preview screen with a ShareLink.
-        case .save:
+        case .downloadMedia:
             break // Handled inline in the media preview screen.
         case .translate:
             guard let messageTimelineItem = timelineItem as? EventBasedMessageTimelineItemProtocol else { return }

ElementX/Sources/Screens/Timeline/View/ItemMenu/TimelineItemMenuAction.swift

@@ -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 save
+    case downloadMedia
     
     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:
-            Label(L10n.actionRemoveMessage, icon: \.delete)
+        case .redact(let isMedia):
+            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:
-            Label(L10n.actionShare, icon: \.shareIos)
-        case .save:
-            Label(L10n.actionSave, icon: \.downloadIos)
+        case .downloadMedia:
+            Label(L10n.actionDownload, icon: \.downloadIos)
         }
     }
 }

ElementX/Sources/Screens/Timeline/View/ItemMenu/TimelineItemMenuActionProvider.swift

@@ -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(.save)
+            actions.append(.downloadMedia)
             actions = actions.filter(\.canAppearInMediaDetails)
             secondaryActions = secondaryActions.filter(\.canAppearInMediaDetails)
         case .live, .detached, .thread:

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b93c230eb1ec5fb47b7f32255185f1a31be9e63cd2ebdb48d71609ac84fe5070
-size 150251
+oid sha256:c7fcac27eabaf0bf09a96bac10d4cb867c87d7ba648f0dcd723dca10edf3ee23
+size 142105

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:47e8cbbf2361f846f528033e2f3162dd5f20297f45d0b36d7602c6d389d698f9
-size 161620
+oid sha256:8f210848fab966fdf32f0b43561030056e1d90e4f09b6c5b9c72608968f869cb
+size 154280

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:835404f0d0a173ad4ddbabc68aeda3d7a231fbcfdd457f5d713aef6ef2ea61aa
-size 99521
+oid sha256:4333a58ec8a659b3e4a491ef565a31ac4c4e6abff8d12cb1028946bd40ca2d49
+size 95954

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:26b50e2f7f07b3ae738c756f1ab208b56bafc459cbab2c9e8db117702a99f39f
-size 111277
+oid sha256:35b42508a3b98008db2873193493c8d83f9b8844bc61bbb434832249e2ce4285
+size 106703

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:22fe6462eb9de68f8c6ce02a1362f45a3768db86553a1f38b0858e7e318ec9c6
-size 133349
+oid sha256:1411bbcbb61d9ae7ed5152b163ecae1d91e0a52f239831912731dab0a0c05bed
+size 126269

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f62126e11f38027fb92b1c75ece757864541966e46c5130ab1bd45a4a528a969
-size 141902
+oid sha256:e3f5ca0795ee836b4253614658c1592aae03f780d3c0635b0acb24b60c6757db
+size 135914

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8628e42e49b2a5b373f058da0f5fb6bac6e011de8bf2835e16c382ff815a2b34
-size 84460
+oid sha256:3e93d75e2929adf1f4b4160ef68755495c4648b8774da19f55be35b2d270808a
+size 81457

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb4052cffcf38fa40f413a6599e51daa49821e97f29d775d169f45e03cdf08e1
-size 92649
+oid sha256:8154beb891f3ec9d5bcd3dc475c040c24f4465279d0a7fdc842890dd062dda48
+size 89869

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:671dccc688b9336ec9671f1b63bcbd927a016755cb600c2defd01d952d30f60a
-size 143766
+oid sha256:f18322f326266abef6568b3cbe7c96685b02ddac3758ab4d2e35bc1f5e2d1819
+size 137614

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5229168916a4d0676a23785f57e5af8897f4f8bece9d3510f3643bd7bca4075
-size 154702
+oid sha256:ccdd1c87da8a37c6ca475fdfd3c92268cde4653d5985de5735289237d31fa5b5
+size 147609

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:59571f97f5b4f09e15ed059a14c9c72c58d30af8a2ad7e6a110235614dbcf4f1
-size 93988
+oid sha256:6fad1eee848efa75091c0ded7aacb2b7ae265ea899ba6a51c5a1bca9bbffdc0a
+size 92148

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:65e890e9425ce674577c84682d62697b0a6cc47e894c5433f16c94833eb00022
-size 104635
+oid sha256:526d6d794ef01b7b0dd1c588b446ec74dc389834d585eecd61291cf350dec860
+size 101071

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3075970e4d04aa2db2771e1caee5c63c54cf33d069cf2189397b0ef2d67ff437
-size 137869
+oid sha256:7590c9eec46f387778689102bea56440b57741c2d026f1894486977c80c881e0
+size 132486

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a523979a533adc0c496285891b4905a919e53fa90961c74a513d5f01eb61a9e
-size 147167
+oid sha256:4cf450678510928107cb32377237fbb21fc969d4b7391fd5954912c3b4ddc79d
+size 142804

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:08c83c0e9300a75f8554421a08ec714169bce0f093d67a289e368cb53aa5049a
-size 89039
+oid sha256:35865172cb34913c442e603bbc524645dd622ebb6e0d709930c67077206ee46a
+size 86372

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7b549e6644d2f59e571093bd2b694d36e68bf485dabf96ed8deeaef79575ca3e
-size 97781
+oid sha256:c6de87c016b33c974a600f7a4fe164591f98b18e602844ac1aa54a7b9e36be82
+size 95517

UnitTests/Sources/TimelineMediaPreviewViewModelTests.swift

@@ -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 {