Fix thumbnail aspect ratio in video grid cells

Thumbnails were being stretched vertically due to incorrect aspect ratio handling. Fixed by:
- Using .scaledToFill() on thumbnails to fill the container width
- Constraining container to 16:9 aspect ratio with .fit mode
- Adding matching aspect ratio to placeholder to prevent layout shift during loading

This ensures thumbnails maintain proper proportions while filling the full cell width.
This commit is contained in:
Arkadiusz Fal
2025-11-19 22:37:05 +01:00
parent a55adb2e65
commit 42d53c30db
2 changed files with 13 additions and 11 deletions

View File

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