Limit link previews width in the timeline to 300 points.

This commit is contained in:
Stefan Ceriu
2026-08-26 12:15:46 +03:00
parent 600b9224b3
commit efefd549a2
2 changed files with 18 additions and 9 deletions
@@ -8,25 +8,32 @@
import SwiftUI import SwiftUI
enum TimelineMediaFrame {
/// The maximum height of a media item in the timeline.
static let maxMediaHeight = 300.0
/// The minimum height of a media item in the timeline.
static let minMediaHeight = 100.0
/// The size of a media item with an unknown aspect ratio.
static let defaultMediaSize = 100.0
/// The maximum width of a timeline link preview
static let maxLinkPreviewWidth = 300.0
}
extension View { extension View {
/// Constrains the max height of a media item in the timeline, whilst preserving its aspect ratio. /// Constrains the max height of a media item in the timeline, whilst preserving its aspect ratio.
@ViewBuilder @ViewBuilder
func timelineMediaFrame(imageInfo: ImageInfoProxy?) -> some View { func timelineMediaFrame(imageInfo: ImageInfoProxy?) -> some View {
let defaultMediaSize = 100.0 if let contentHeight = imageInfo?.size?.height, contentHeight < TimelineMediaFrame.minMediaHeight { // Special case very small images
let minMediaHeight = 100.0
let maxMediaHeight = 300.0
if let contentHeight = imageInfo?.size?.height, contentHeight < minMediaHeight { // Special case very small images
aspectRatio(imageInfo?.aspectRatio, contentMode: .fit) aspectRatio(imageInfo?.aspectRatio, contentMode: .fit)
.frame(minHeight: minMediaHeight, maxHeight: minMediaHeight) .frame(minHeight: TimelineMediaFrame.minMediaHeight, maxHeight: TimelineMediaFrame.minMediaHeight)
} else { } else {
if let contentAspectRatio = imageInfo?.aspectRatio { if let contentAspectRatio = imageInfo?.aspectRatio {
aspectRatio(contentAspectRatio, contentMode: .fit) aspectRatio(contentAspectRatio, contentMode: .fit)
.frame(maxHeight: min(maxMediaHeight, max(minMediaHeight, imageInfo?.size?.height ?? .infinity))) .frame(maxHeight: min(TimelineMediaFrame.maxMediaHeight, max(TimelineMediaFrame.minMediaHeight, imageInfo?.size?.height ?? .infinity)))
// Required to prevent the reply details to get higher priority in rendering the width of the view. // Required to prevent the reply details to get higher priority in rendering the width of the view.
.aspectRatio(contentAspectRatio, contentMode: .fit) .aspectRatio(contentAspectRatio, contentMode: .fit)
} else { // Otherwise force the image to be `defaultMediaSize` x `defaultMediaSize` } else { // Otherwise force the image to be `defaultSize` x `defaultSize`
frame(width: defaultMediaSize, height: defaultMediaSize) frame(width: TimelineMediaFrame.defaultMediaSize, height: TimelineMediaFrame.defaultMediaSize)
} }
} }
} }
@@ -43,6 +43,8 @@ struct TextRoomTimelineView: View, TextBasedRoomTimelineViewProtocol {
LinkPreviewView(url: url, metadata: metadata) LinkPreviewView(url: url, metadata: metadata)
} }
} }
// Link previews report the full proposed width, which would otherwise stretch the bubble across the timeline.
.frame(maxWidth: TimelineMediaFrame.maxLinkPreviewWidth)
.padding(.bottom, 16) .padding(.bottom, 16)
} }
} }