Fix thumbnail aspect ratio to prevent stretching and layout jumps

Fixed issues with thumbnails being stretched vertically and layout jumping during image loading:
- Simplified VideoCellThumbnail to always use 16:9 aspect ratio with .fill mode
- Added matching 16:9 aspect ratio to placeholder with .fill mode to prevent layout shifts
- Removed quality-based aspect ratio selection (4:3 vs 16:9) in favor of consistent 16:9
- Ensures thumbnails maintain proper proportions on both iOS and macOS

This provides consistent sizing across platforms and eliminates the jump when images finish loading.
This commit is contained in:
Arkadiusz Fal
2025-11-19 23:01:52 +01:00
parent 42d53c30db
commit 1c168bd982
2 changed files with 3 additions and 7 deletions

View File

@@ -44,13 +44,13 @@ struct ThumbnailView: View {
var webImage: some View { var webImage: some View {
WebImage(url: url) WebImage(url: url)
.resizable()
.onFailure { _ in .onFailure { _ in
if let url { if let url {
thumbnails.insertUnloadable(url) thumbnails.insertUnloadable(url)
} }
} }
.placeholder { placeholder } .placeholder { placeholder }
.resizable()
} }
@ViewBuilder var asyncImageIfAvailable: some View { @ViewBuilder var asyncImageIfAvailable: some View {
@@ -78,6 +78,6 @@ struct ThumbnailView: View {
var placeholder: some View { var placeholder: some View {
Rectangle() Rectangle()
.fill(Color("PlaceholderColor")) .fill(Color("PlaceholderColor"))
.aspectRatio(Constants.aspectRatio16x9, contentMode: .fit) .aspectRatio(Constants.aspectRatio16x9, contentMode: .fill)
} }
} }

View File

@@ -429,7 +429,6 @@ struct VideoCell: View {
} }
.lineLimit(1) .lineLimit(1)
} }
.aspectRatio(Constants.aspectRatio16x9, contentMode: .fit)
} }
private var thumbnailImage: some View { private var thumbnailImage: some View {
@@ -478,10 +477,7 @@ struct VideoCellThumbnail: View {
let (url, _) = thumbnails.best(video) let (url, _) = thumbnails.best(video)
ThumbnailView(url: url) ThumbnailView(url: url)
.scaledToFill() .aspectRatio(Constants.aspectRatio16x9, contentMode: .fill)
.frame(maxWidth: .infinity)
.aspectRatio(Constants.aspectRatio16x9, contentMode: .fit)
.clipped()
} }
} }