Media gallery - part 1(#3588)

* Introduce a `MediaEventsTimelineFlowCoordinator` * Update SDK API and architecture * Add a feature flag, add translations * Move the media events timeline presentation under the room flow coordinator state machine * Rename `TimelineViewState.timelineViewState` of type `TimelineState` to `timelineState` * Enabled SwiftLint's `trailing_closure` rule and fix the warnings.
2026-11-02 12:07:55 +00:00 · 2024-12-06 16:58:14 +02:00
parent a9e4837b62
commit caaa89af62
83 changed files with 1247 additions and 279 deletions
@@ -0,0 +1,68 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Combine
+import SwiftUI
+
+struct MediaEventsTimelineScreenCoordinatorParameters {
+    let roomProxy: JoinedRoomProxyProtocol
+    let mediaTimelineController: RoomTimelineControllerProtocol
+    let filesTimelineController: RoomTimelineControllerProtocol
+    let mediaProvider: MediaProviderProtocol
+    let mediaPlayerProvider: MediaPlayerProviderProtocol
+    let voiceMessageMediaManager: VoiceMessageMediaManagerProtocol
+    let appMediator: AppMediatorProtocol
+    let emojiProvider: EmojiProviderProtocol
+}
+
+enum MediaEventsTimelineScreenCoordinatorAction { }
+
+final class MediaEventsTimelineScreenCoordinator: CoordinatorProtocol {
+    private let parameters: MediaEventsTimelineScreenCoordinatorParameters
+    private let viewModel: MediaEventsTimelineScreenViewModelProtocol
+    
+    private var cancellables = Set<AnyCancellable>()
+    
+    private let actionsSubject: PassthroughSubject<MediaEventsTimelineScreenCoordinatorAction, Never> = .init()
+    var actions: AnyPublisher<MediaEventsTimelineScreenCoordinatorAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+    
+    init(parameters: MediaEventsTimelineScreenCoordinatorParameters) {
+        self.parameters = parameters
+        
+        let mediaTimelineViewModel = TimelineViewModel(roomProxy: parameters.roomProxy,
+                                                       timelineController: parameters.mediaTimelineController,
+                                                       mediaProvider: parameters.mediaProvider,
+                                                       mediaPlayerProvider: parameters.mediaPlayerProvider,
+                                                       voiceMessageMediaManager: parameters.voiceMessageMediaManager,
+                                                       userIndicatorController: ServiceLocator.shared.userIndicatorController,
+                                                       appMediator: parameters.appMediator,
+                                                       appSettings: ServiceLocator.shared.settings,
+                                                       analyticsService: ServiceLocator.shared.analytics,
+                                                       emojiProvider: parameters.emojiProvider)
+        
+        let filesTimelineViewModel = TimelineViewModel(roomProxy: parameters.roomProxy,
+                                                       timelineController: parameters.filesTimelineController,
+                                                       mediaProvider: parameters.mediaProvider,
+                                                       mediaPlayerProvider: parameters.mediaPlayerProvider,
+                                                       voiceMessageMediaManager: parameters.voiceMessageMediaManager,
+                                                       userIndicatorController: ServiceLocator.shared.userIndicatorController,
+                                                       appMediator: parameters.appMediator,
+                                                       appSettings: ServiceLocator.shared.settings,
+                                                       analyticsService: ServiceLocator.shared.analytics,
+                                                       emojiProvider: parameters.emojiProvider)
+        
+        viewModel = MediaEventsTimelineScreenViewModel(mediaTimelineViewModel: mediaTimelineViewModel,
+                                                       filesTimelineViewModel: filesTimelineViewModel,
+                                                       mediaProvider: parameters.mediaProvider)
+    }
+    
+    func toPresentable() -> AnyView {
+        AnyView(MediaEventsTimelineScreen(context: viewModel.context))
+    }
+}
@@ -0,0 +1,32 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Foundation
+
+enum MediaEventsTimelineScreenViewModelAction { }
+
+enum MediaEventsTimelineScreenMode {
+    case media
+    case files
+}
+
+struct MediaEventsTimelineScreenViewState: BindableState {
+    var isBackPaginating = false
+    var items = [RoomTimelineItemViewState]()
+    
+    var bindings: MediaEventsTimelineScreenViewStateBindings
+}
+
+struct MediaEventsTimelineScreenViewStateBindings {
+    var screenMode: MediaEventsTimelineScreenMode
+}
+
+enum MediaEventsTimelineScreenViewAction {
+    case changedScreenMode
+    case oldestItemDidAppear
+    case oldestItemDidDisappear
+}
@@ -0,0 +1,102 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Combine
+import SwiftUI
+
+typealias MediaEventsTimelineScreenViewModelType = StateStoreViewModel<MediaEventsTimelineScreenViewState, MediaEventsTimelineScreenViewAction>
+
+class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType, MediaEventsTimelineScreenViewModelProtocol {
+    private let mediaTimelineViewModel: TimelineViewModelProtocol
+    private let filesTimelineViewModel: TimelineViewModelProtocol
+    
+    private var isOldestItemVisible = false
+    
+    private var activeTimelineViewModel: TimelineViewModelProtocol {
+        switch state.bindings.screenMode {
+        case .media:
+            mediaTimelineViewModel
+        case .files:
+            filesTimelineViewModel
+        }
+    }
+    
+    private let actionsSubject: PassthroughSubject<MediaEventsTimelineScreenViewModelAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<MediaEventsTimelineScreenViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+    
+    init(mediaTimelineViewModel: TimelineViewModelProtocol,
+         filesTimelineViewModel: TimelineViewModelProtocol,
+         mediaProvider: MediaProviderProtocol,
+         screenMode: MediaEventsTimelineScreenMode = .media) {
+        self.mediaTimelineViewModel = mediaTimelineViewModel
+        self.filesTimelineViewModel = filesTimelineViewModel
+        
+        super.init(initialViewState: .init(bindings: .init(screenMode: screenMode)), mediaProvider: mediaProvider)
+        
+        mediaTimelineViewModel.context.$viewState.sink { [weak self] timelineViewState in
+            guard let self, state.bindings.screenMode == .media else {
+                return
+            }
+            
+            updateWithTimelineViewState(timelineViewState)
+        }
+        .store(in: &cancellables)
+        
+        filesTimelineViewModel.context.$viewState.sink { [weak self] timelineViewState in
+            guard let self, state.bindings.screenMode == .files else {
+                return
+            }
+            
+            updateWithTimelineViewState(timelineViewState)
+        }
+        .store(in: &cancellables)
+        
+        updateWithTimelineViewState(activeTimelineViewModel.context.viewState)
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: MediaEventsTimelineScreenViewAction) {
+        MXLog.info("View model: received view action: \(viewAction)")
+        
+        switch viewAction {
+        case .changedScreenMode:
+            updateWithTimelineViewState(activeTimelineViewModel.context.viewState)
+        case .oldestItemDidAppear:
+            isOldestItemVisible = true
+            backPaginateIfNecessary(paginationStatus: activeTimelineViewModel.context.viewState.timelineState.paginationState.backward)
+        case .oldestItemDidDisappear:
+            isOldestItemVisible = false
+        }
+    }
+    
+    // MARK: - Private
+    
+    private func updateWithTimelineViewState(_ timelineViewState: TimelineViewState) {
+        state.items = timelineViewState.timelineState.itemViewStates.filter { itemViewState in
+            switch itemViewState.type {
+            case .image, .video:
+                state.bindings.screenMode == .media
+            case .audio, .file:
+                state.bindings.screenMode == .files
+            default:
+                false
+            }
+        }.reversed()
+        
+        state.isBackPaginating = (timelineViewState.timelineState.paginationState.backward == .paginating)
+        backPaginateIfNecessary(paginationStatus: timelineViewState.timelineState.paginationState.backward)
+    }
+    
+    private func backPaginateIfNecessary(paginationStatus: PaginationStatus) {
+        if paginationStatus == .idle, isOldestItemVisible {
+            activeTimelineViewModel.context.send(viewAction: .paginateBackwards)
+        }
+    }
+}
@@ -0,0 +1,14 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Combine
+
+@MainActor
+protocol MediaEventsTimelineScreenViewModelProtocol {
+    var actionsPublisher: AnyPublisher<MediaEventsTimelineScreenViewModelAction, Never> { get }
+    var context: MediaEventsTimelineScreenViewModelType.Context { get }
+}
@@ -0,0 +1,173 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct MediaEventsTimelineScreen: View {
+    @ObservedObject var context: MediaEventsTimelineScreenViewModel.Context
+    
+    var body: some View {
+        content
+            .navigationBarTitleDisplayMode(.inline)
+            .background(.compound.bgCanvasDefault)
+            // Doesn't play well with the transformed scrollView
+            .toolbarBackground(.visible, for: .navigationBar)
+            .toolbar {
+                ToolbarItem(placement: .principal) {
+                    Picker("", selection: $context.screenMode) {
+                        Text(L10n.screenMediaBrowserListModeMedia)
+                            .padding()
+                            .tag(MediaEventsTimelineScreenMode.media)
+                        Text(L10n.screenMediaBrowserListModeFiles)
+                            .padding()
+                            .tag(MediaEventsTimelineScreenMode.files)
+                    }
+                    .pickerStyle(.segmented)
+                }
+            }
+    }
+    
+    @ViewBuilder
+    private var content: some View {
+        ScrollView {
+            Group {
+                let columns = [GridItem(.adaptive(minimum: 80, maximum: 150), spacing: 1)]
+                LazyVGrid(columns: columns, alignment: .center, spacing: 1) {
+                    ForEach(context.viewState.items) { item in
+                        Color.clear // Let the image aspect fill in place
+                            .aspectRatio(1, contentMode: .fill)
+                            .overlay {
+                                viewForTimelineItem(item)
+                            }
+                            .clipped()
+                            .scaleEffect(.init(width: 1, height: -1))
+                    }
+                }
+                
+                // Needs to be wrapped in a LazyStack otherwise appearance calls don't trigger
+                LazyVStack(spacing: 0) {
+                    Rectangle()
+                        .frame(height: 44)
+                        .foregroundStyle(.compound.bgCanvasDefault)
+                        .overlay {
+                            if context.viewState.isBackPaginating {
+                                ProgressView()
+                            }
+                        }
+                        .onAppear {
+                            context.send(viewAction: .oldestItemDidAppear)
+                        }
+                        .onDisappear {
+                            context.send(viewAction: .oldestItemDidDisappear)
+                        }
+                }
+            }
+        }
+        .scaleEffect(.init(width: 1, height: -1))
+        .onChange(of: context.screenMode) { _, _ in
+            context.send(viewAction: .changedScreenMode)
+        }
+    }
+    
+    @ViewBuilder func viewForTimelineItem(_ item: RoomTimelineItemViewState) -> some View {
+        switch item.type {
+        case .image(let timelineItem):
+            #warning("Make this work for gifs")
+            LoadableImage(mediaSource: timelineItem.content.thumbnailInfo?.source ?? timelineItem.content.imageInfo.source,
+                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.thumbnailInfo?.size ?? timelineItem.content.imageInfo.size,
+                          mediaProvider: context.mediaProvider) {
+                placeholder
+            }
+            .mediaItemAspectRatio(imageInfo: timelineItem.content.thumbnailInfo ?? timelineItem.content.imageInfo)
+        case .video(let timelineItem):
+            if let thumbnailSource = timelineItem.content.thumbnailInfo?.source {
+                LoadableImage(mediaSource: thumbnailSource,
+                              mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
+                              blurhash: timelineItem.content.blurhash,
+                              size: timelineItem.content.thumbnailInfo?.size,
+                              mediaProvider: context.mediaProvider) { imageView in
+                    imageView
+                        .overlay { playIcon }
+                } placeholder: {
+                    placeholder
+                }
+                .mediaItemAspectRatio(imageInfo: timelineItem.content.thumbnailInfo)
+            } else {
+                playIcon
+            }
+        case .separator(let timelineItem):
+            Text(timelineItem.text)
+        default:
+            EmptyView()
+        }
+    }
+    
+    private var playIcon: some View {
+        Image(systemName: "play.circle.fill")
+            .resizable()
+            .frame(width: 50, height: 50)
+            .background(.ultraThinMaterial, in: Circle())
+            .foregroundColor(.white)
+    }
+    
+    private var placeholder: some View {
+        Rectangle()
+            .foregroundColor(.compound._bgBubbleIncoming)
+            .opacity(0.3)
+    }
+}
+
+extension View {
+    /// Constrains the max height of a media item in the timeline, whilst preserving its aspect ratio.
+    @ViewBuilder
+    func mediaItemAspectRatio(imageInfo: ImageInfoProxy?) -> some View {
+        aspectRatio(imageInfo?.aspectRatio, contentMode: .fill)
+    }
+}
+
+// MARK: - Previews
+
+struct MediaEventsTimelineScreen_Previews: PreviewProvider, TestablePreview {
+    static let timelineViewModel: TimelineViewModel = {
+        let timelineController = MockRoomTimelineController(timelineKind: .media)
+        return TimelineViewModel(roomProxy: JoinedRoomProxyMock(.init(name: "Preview room")),
+                                 timelineController: timelineController,
+                                 mediaProvider: MediaProviderMock(configuration: .init()),
+                                 mediaPlayerProvider: MediaPlayerProviderMock(),
+                                 voiceMessageMediaManager: VoiceMessageMediaManagerMock(),
+                                 userIndicatorController: UserIndicatorControllerMock(),
+                                 appMediator: AppMediatorMock.default,
+                                 appSettings: ServiceLocator.shared.settings,
+                                 analyticsService: ServiceLocator.shared.analytics,
+                                 emojiProvider: EmojiProvider(appSettings: ServiceLocator.shared.settings))
+    }()
+    
+    static let mediaViewModel = MediaEventsTimelineScreenViewModel(mediaTimelineViewModel: timelineViewModel,
+                                                                   filesTimelineViewModel: timelineViewModel,
+                                                                   mediaProvider: MediaProviderMock(configuration: .init()),
+                                                                   screenMode: .media)
+    
+    static let filesViewModel = MediaEventsTimelineScreenViewModel(mediaTimelineViewModel: timelineViewModel,
+                                                                   filesTimelineViewModel: timelineViewModel,
+                                                                   mediaProvider: MediaProviderMock(configuration: .init()),
+                                                                   screenMode: .files)
+    
+    static var previews: some View {
+        NavigationStack {
+            MediaEventsTimelineScreen(context: mediaViewModel.context)
+                .previewDisplayName("Media")
+        }
+        
+        NavigationStack {
+            MediaEventsTimelineScreen(context: filesViewModel.context)
+                .previewDisplayName("Files")
+        }
+    }
+}