Media gallery - support for files and voice messages (#3605)

* Move the voice message views to where they belong * Add separate struct for each media events timeline view * Add support for all the different media gallery message types and get the files section working
2026-11-04 01:20:12 +00:00 · 2024-12-12 10:02:10 +02:00
parent 606eb0a30a
commit 114255c5ec
30 changed files with 374 additions and 112 deletions
@@ -0,0 +1,83 @@
+//
+// 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 ImageMediaEventsTimelineView: View {
+    @Environment(\.timelineContext) private var context
+    let timelineItem: ImageRoomTimelineItem
+    
+    var body: some View {
+        loadableImage
+            .accessibilityElement(children: .ignore)
+            .accessibilityLabel(L10n.commonImage)
+    }
+    
+    @ViewBuilder
+    private var loadableImage: some View {
+        if timelineItem.content.contentType == .gif {
+            LoadableImage(mediaSource: timelineItem.content.imageInfo.source,
+                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.imageInfo.size,
+                          mediaProvider: context?.mediaProvider) {
+                placeholder
+            }
+            .mediaGalleryTimelineAspectRatio(imageInfo: timelineItem.content.imageInfo)
+        } else {
+            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
+            }
+            .mediaGalleryTimelineAspectRatio(imageInfo: timelineItem.content.thumbnailInfo ?? timelineItem.content.imageInfo)
+        }
+    }
+        
+    private var placeholder: some View {
+        Rectangle()
+            .foregroundColor(.compound.bgSubtleSecondary)
+            .opacity(0.3)
+    }
+}
+
+private extension View {
+    @ViewBuilder
+    func mediaGalleryTimelineAspectRatio(imageInfo: ImageInfoProxy?) -> some View {
+        aspectRatio(imageInfo?.aspectRatio, contentMode: .fill)
+    }
+}
+
+struct ImageMediaEventsTimelineView_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = TimelineViewModel.mock
+    
+    static var previews: some View {
+        ImageMediaEventsTimelineView(timelineItem: makeTimelineItem())
+            .frame(width: 100, height: 100)
+            .environmentObject(viewModel.context)
+            .environment(\.timelineContext, viewModel.context)
+            .previewLayout(.sizeThatFits)
+            .background(.black)
+    }
+    
+    private static func makeTimelineItem() -> ImageRoomTimelineItem {
+        ImageRoomTimelineItem(id: .randomEvent,
+                              timestamp: .mock,
+                              isOutgoing: false,
+                              isEditable: false,
+                              canBeRepliedTo: true,
+                              isThreaded: false,
+                              sender: .init(id: "Bob"),
+                              content: .init(filename: "image.jpg",
+                                             imageInfo: .mockImage,
+                                             thumbnailInfo: .mockThumbnail,
+                                             contentType: .jpeg))
+    }
+}
@@ -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 Compound
+import SwiftUI
+
+struct SeparatorMediaEventsTimelineView: View {
+    let group: MediaEventsTimelineGroup
+    
+    var body: some View {
+        Text(group.title)
+            .font(.compound.bodySMSemibold)
+            .foregroundColor(.compound.textPrimary)
+            .frame(alignment: .center)
+            .padding(.vertical, 16)
+    }
+}
+
+struct SeparatorMediaEventsTimelineView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        let item = SeparatorRoomTimelineItem(id: .virtual(uniqueID: .init(id: "Separator")),
+                                             timestamp: .mock)
+        
+        SeparatorMediaEventsTimelineView(group: .init(id: item.id.uniqueID.id,
+                                                      title: "Group",
+                                                      items: []))
+    }
+}
@@ -0,0 +1,78 @@
+//
+// 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 VideoMediaEventsTimelineView: View {
+    @Environment(\.timelineContext) private var context
+    let timelineItem: VideoRoomTimelineItem
+    
+    var body: some View {
+        thumbnail
+            .accessibilityElement(children: .ignore)
+            .accessibilityLabel(L10n.commonVideo)
+    }
+    
+    @ViewBuilder
+    var thumbnail: some View {
+        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
+            }
+        } else {
+            playIcon
+        }
+    }
+    
+    var playIcon: some View {
+        Image(systemName: "play.circle.fill")
+            .resizable()
+            .frame(width: 50, height: 50)
+            .background(.ultraThinMaterial, in: Circle())
+            .foregroundColor(.white)
+    }
+    
+    var placeholder: some View {
+        Rectangle()
+            .foregroundColor(.compound.bgSubtleSecondary)
+            .opacity(0.3)
+    }
+}
+
+struct VideoMediaEventsTimelineView_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = TimelineViewModel.mock
+    
+    static var previews: some View {
+        VideoMediaEventsTimelineView(timelineItem: makeTimelineItem())
+            .frame(width: 100, height: 100)
+            .environmentObject(viewModel.context)
+            .environment(\.timelineContext, viewModel.context)
+            .previewLayout(.sizeThatFits)
+            .background(.black)
+    }
+    
+    private static func makeTimelineItem(caption: String? = nil, isEdited: Bool = false) -> VideoRoomTimelineItem {
+        VideoRoomTimelineItem(id: .randomEvent,
+                              timestamp: .mock,
+                              isOutgoing: false,
+                              isEditable: false,
+                              canBeRepliedTo: true,
+                              isThreaded: false,
+                              sender: .init(id: "Bob"),
+                              content: .init(filename: "video.mp4",
+                                             videoInfo: .mockVideo,
+                                             thumbnailInfo: .mockVideoThumbnail))
+    }
+}