MediaTimelinePreviewDetails can now be opened by long pressing in the media timeline (#4474)

* presenting media actions from the media timeline

* implemented view in timeline and fixed an issue that made dark mode being when trying to delete the file

* pr suggestions

ElementX/Sources/Screens/MediaEventsTimelineScreen/MediaEventsTimelineScreenModels.swift

@@ -36,6 +36,7 @@ struct MediaEventsTimelineScreenViewState: BindableState {
 struct MediaEventsTimelineScreenViewStateBindings {
     var screenMode: MediaEventsTimelineScreenMode
     var mediaPreviewViewModel: TimelineMediaPreviewViewModel?
+    var mediaPreviewSheetViewModel: TimelineMediaPreviewViewModel?
 }
 
 enum MediaEventsTimelineScreenViewAction {
@@ -43,4 +44,5 @@ enum MediaEventsTimelineScreenViewAction {
     case oldestItemDidAppear
     case oldestItemDidDisappear
     case tappedItem(item: RoomTimelineItemViewState)
+    case longPressedItem(item: RoomTimelineItemViewState)
 }

ElementX/Sources/Screens/MediaEventsTimelineScreen/MediaEventsTimelineScreenViewModel.swift

@@ -75,9 +75,12 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
         .store(in: &cancellables)
         
         mediaTimelineViewModel.actions.sink { [weak self] action in
+            guard let self else { return }
             switch action {
             case .displayMediaPreview(let mediaPreviewViewModel):
-                self?.displayMediaPreview(mediaPreviewViewModel)
+                displayMediaPreview(mediaPreviewViewModel)
+            case .displayMediaDetails(item: let item):
+                displayMediaPreviewSheet(for: item)
             case .displayEmojiPicker, .displayReportContent, .displayCameraPicker, .displayMediaPicker,
                  .displayDocumentPicker, .displayLocationPicker, .displayPollForm, .displayMediaUploadPreviewScreen,
                  .displaySenderDetails, .displayMessageForwarding, .displayLocation, .displayResolveSendFailure,
@@ -97,9 +100,12 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
         .store(in: &cancellables)
         
         filesTimelineViewModel.actions.sink { [weak self] action in
+            guard let self else { return }
             switch action {
             case .displayMediaPreview(let mediaPreviewViewModel):
-                self?.displayMediaPreview(mediaPreviewViewModel)
+                displayMediaPreview(mediaPreviewViewModel)
+            case .displayMediaDetails(item: let item):
+                displayMediaPreviewSheet(for: item)
             case .displayEmojiPicker, .displayReportContent, .displayCameraPicker, .displayMediaPicker,
                  .displayDocumentPicker, .displayLocationPicker, .displayPollForm, .displayMediaUploadPreviewScreen,
                  .displaySenderDetails, .displayMessageForwarding, .displayLocation, .displayResolveSendFailure,
@@ -127,6 +133,8 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
             isOldestItemVisible = false
         case .tappedItem(let item):
             activeTimelineViewModel.context.send(viewAction: .mediaTapped(itemID: item.identifier))
+        case .longPressedItem(let item):
+            activeTimelineViewModel.context.send(viewAction: .displayTimelineItemMenu(itemID: item.identifier))
         }
     }
     
@@ -137,6 +145,29 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
     
     // MARK: - Private
     
+    private func displayMediaPreviewSheet(for item: EventBasedMessageTimelineItemProtocol) {
+        let sheetModel = TimelineMediaPreviewViewModel(initialItem: item,
+                                                       timelineViewModel: activeTimelineViewModel,
+                                                       mediaProvider: mediaProvider,
+                                                       photoLibraryManager: PhotoLibraryManager(),
+                                                       userIndicatorController: userIndicatorController,
+                                                       appMediator: appMediator)
+        sheetModel.actions.sink { [weak self] action in
+            guard let self else { return }
+            switch action {
+            case .viewInRoomTimeline(let itemID):
+                actionsSubject.send(.viewInRoomTimeline(itemID))
+            case .dismiss:
+                state.bindings.mediaPreviewSheetViewModel = nil
+            }
+        }
+        .store(in: &cancellables)
+        
+        // Triggers a download of the item so that can be shared/saved
+        sheetModel.context.send(viewAction: .updateCurrentItem(sheetModel.state.currentItem))
+        state.bindings.mediaPreviewSheetViewModel = sheetModel
+    }
+    
     private func updateWithTimelineViewState(_ timelineViewState: TimelineViewState) {
         var newGroups = [MediaEventsTimelineGroup]()
         var currentItems = [RoomTimelineItemViewState]()

ElementX/Sources/Screens/MediaEventsTimelineScreen/View/MediaEventsTimelineScreen.swift

@@ -10,6 +10,7 @@ import SwiftUI
 
 struct MediaEventsTimelineScreen: View {
     @ObservedObject var context: MediaEventsTimelineScreenViewModel.Context
+    @State private var sheetHeight = CGFloat.zero
     
     var body: some View {
         mainContent
@@ -24,6 +25,15 @@ struct MediaEventsTimelineScreen: View {
                 context.send(viewAction: .changedScreenMode)
             }
             .timelineMediaPreview(viewModel: $context.mediaPreviewViewModel)
+            .sheet(item: $context.mediaPreviewSheetViewModel) { sheet in
+                if case let .media(media) = sheet.state.currentItem {
+                    TimelineMediaPreviewDetailsView(item: media,
+                                                    context: sheet.context,
+                                                    preferredColorScheme: nil,
+                                                    sheetHeight: $sheetHeight)
+                        .presentationDetents([.height(sheetHeight)])
+                }
+            }
     }
     
     // The scale effects do the following:
@@ -66,6 +76,9 @@ struct MediaEventsTimelineScreen: View {
                             viewForTimelineItem(item)
                                 .scaleEffect(CGSize(width: -1, height: -1))
                         }
+                        .accessibleLongPress(named: L10n.actionOpenContextMenu) {
+                            context.send(viewAction: .longPressedItem(item: item))
+                        }
                     }
                 } footer: {
                     // Use a footer as the header because the scrollView is flipped
@@ -96,6 +109,9 @@ struct MediaEventsTimelineScreen: View {
                             .accessibilityRepresentation {
                                 viewForTimelineItem(item)
                             }
+                            .accessibleLongPress(named: L10n.actionOpenContextMenu) {
+                                context.send(viewAction: .longPressedItem(item: item))
+                            }
                         }
                         .accessibilityElement(children: .combine)
                         .padding(.horizontal, 16)
@@ -230,6 +246,10 @@ struct MediaEventsTimelineScreen: View {
     }
 }
 
+extension TimelineMediaPreviewViewModel: Identifiable {
+    var id: UUID { instanceID }
+}
+
 // MARK: - Previews
 
 struct MediaEventsTimelineScreen_Previews: PreviewProvider, TestablePreview {