Custom media gallery views for files and voice messages (#3610)

* Extract the timeline item background from the BubbledStyler. * Use different views for files and voices messages, reuse the timeline content but only keep the bubble background instead of the whole TimelineStyler. * Add back max voice message width and add missing accessibility label
2026-11-04 01:20:12 +00:00 · 2024-12-12 17:48:41 +02:00
parent 88b5426e97
commit 256ae4d2cc
31 changed files with 398 additions and 91 deletions
@@ -0,0 +1,54 @@
+//
+// Copyright 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import SwiftUI
+
+extension View {
+    func bubbleBackground(timelineItem: EventBasedTimelineItemProtocol,
+                          insets: EdgeInsets,
+                          color: Color? = nil) -> some View {
+        modifier(TimelineItemBubbleBackgroundModifier(timelineItem: timelineItem,
+                                                      insets: insets,
+                                                      color: color))
+    }
+}
+
+private struct TimelineItemBubbleBackgroundModifier: ViewModifier {
+    @Environment(\.timelineGroupStyle) private var timelineGroupStyle
+    
+    let timelineItem: EventBasedTimelineItemProtocol
+    let insets: EdgeInsets
+    var color: Color?
+    
+    func body(content: Content) -> some View {
+        content
+            .padding(insets)
+            .background(color)
+            .cornerRadius(12, corners: roundedCorners)
+    }
+    
+    private var roundedCorners: UIRectCorner {
+        switch timelineGroupStyle {
+        case .single:
+            return .allCorners
+        case .first:
+            if timelineItem.isOutgoing {
+                return [.topLeft, .topRight, .bottomLeft]
+            } else {
+                return [.topLeft, .topRight, .bottomRight]
+            }
+        case .middle:
+            return timelineItem.isOutgoing ? [.topLeft, .bottomLeft] : [.topRight, .bottomRight]
+        case .last:
+            if timelineItem.isOutgoing {
+                return [.topLeft, .bottomLeft, .bottomRight]
+            } else {
+                return [.topRight, .bottomLeft, .bottomRight]
+            }
+        }
+    }
+}