mirror of
https://github.com/yattee/yattee.git
synced 2025-11-22 06:31:26 +00:00
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.
84 lines
2.3 KiB
Swift
84 lines
2.3 KiB
Swift
import CachedAsyncImage
|
|
import SDWebImageSwiftUI
|
|
import SwiftUI
|
|
|
|
struct ThumbnailView: View {
|
|
var url: URL?
|
|
private let thumbnails = ThumbnailsModel.shared
|
|
private let thumbnailExtension: String?
|
|
|
|
init(url: URL?) {
|
|
self.url = url
|
|
thumbnailExtension = Self.extractExtension(from: url)
|
|
}
|
|
|
|
private static func extractExtension(from url: URL?) -> String? {
|
|
guard let url,
|
|
let urlComponents = URLComponents(url: url, resolvingAgainstBaseURL: false) else { return nil }
|
|
|
|
let pathComponents = urlComponents.path.components(separatedBy: ".")
|
|
guard pathComponents.count > 1 else { return nil }
|
|
|
|
return pathComponents.last
|
|
}
|
|
|
|
var body: some View {
|
|
if url != nil {
|
|
viewForThumbnailExtension
|
|
} else {
|
|
placeholder
|
|
}
|
|
}
|
|
|
|
@ViewBuilder var viewForThumbnailExtension: some View {
|
|
if AccountsModel.shared.app != .piped, thumbnailExtension != nil {
|
|
if thumbnailExtension == "webp" {
|
|
webImage
|
|
} else {
|
|
asyncImageIfAvailable
|
|
}
|
|
} else {
|
|
webImage
|
|
}
|
|
}
|
|
|
|
var webImage: some View {
|
|
WebImage(url: url)
|
|
.resizable()
|
|
.onFailure { _ in
|
|
if let url {
|
|
thumbnails.insertUnloadable(url)
|
|
}
|
|
}
|
|
.placeholder { placeholder }
|
|
}
|
|
|
|
@ViewBuilder var asyncImageIfAvailable: some View {
|
|
// swiftlint:disable:next deployment_target
|
|
if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
|
|
CachedAsyncImage(url: url, urlCache: BaseCacheModel.imageCache) { phase in
|
|
switch phase {
|
|
case let .success(image):
|
|
image
|
|
.resizable()
|
|
case .failure:
|
|
placeholder.onAppear {
|
|
guard let url else { return }
|
|
thumbnails.insertUnloadable(url)
|
|
}
|
|
default:
|
|
placeholder
|
|
}
|
|
}
|
|
} else {
|
|
placeholder
|
|
}
|
|
}
|
|
|
|
var placeholder: some View {
|
|
Rectangle()
|
|
.fill(Color("PlaceholderColor"))
|
|
.aspectRatio(Constants.aspectRatio16x9, contentMode: .fill)
|
|
}
|
|
}
|