Fix thumbnails sizes

This commit is contained in:
Arkadiusz Fal 2021-07-12 19:05:16 +02:00
parent c5a4efd00f
commit 24a767e51c
9 changed files with 77 additions and 28 deletions

View File

@ -10,7 +10,7 @@ struct VideoCellView: View {
NavigationLink(destination: PlayerView(id: video.id)) { NavigationLink(destination: PlayerView(id: video.id)) {
VStack(alignment: .leading) { VStack(alignment: .leading) {
ZStack(alignment: .trailing) { ZStack(alignment: .trailing) {
if let thumbnail = video.thumbnailURL(quality: "high") { if let thumbnail = video.thumbnailURL(quality: .high) {
// to replace with AsyncImage when it is fixed with lazy views // to replace with AsyncImage when it is fixed with lazy views
URLImage(thumbnail) { image in URLImage(thumbnail) { image in
image image

View File

@ -31,7 +31,7 @@ struct VideoDetailsView: View {
VStack(alignment: .center) { VStack(alignment: .center) {
ZStack(alignment: .bottom) { ZStack(alignment: .bottom) {
Group { Group {
if let thumbnail = video.thumbnailURL(quality: "maxres") { if let thumbnail = video.thumbnailURL(quality: .maxres) {
// to replace with AsyncImage when it is fixed with lazy views // to replace with AsyncImage when it is fixed with lazy views
URLImage(thumbnail) { image in URLImage(thumbnail) { image in
image image

View File

@ -16,7 +16,7 @@ struct VideoListRowView: View {
NavigationLink(destination: PlayerView(id: video.id)) { NavigationLink(destination: PlayerView(id: video.id)) {
#if os(tvOS) #if os(tvOS)
horizontalRow(detailsOnThumbnail: false) horizontalRow(detailsOnThumbnail: false)
#else #elseif os(macOS)
verticalRow verticalRow
#endif #endif
} }
@ -41,11 +41,10 @@ struct VideoListRowView: View {
func horizontalRow(detailsOnThumbnail: Bool = true, padding: Double = 0) -> some View { func horizontalRow(detailsOnThumbnail: Bool = true, padding: Double = 0) -> some View {
HStack(alignment: .top, spacing: 2) { HStack(alignment: .top, spacing: 2) {
if detailsOnThumbnail { if detailsOnThumbnail {
thumbnailWithDetails thumbnailWithDetails()
.padding(padding) .padding(padding)
} else { } else {
thumbnail thumbnail(.medium, maxWidth: 320, maxHeight: 180)
.frame(width: 320, height: 180)
} }
VStack(alignment: .leading, spacing: 0) { VStack(alignment: .leading, spacing: 0) {
@ -82,8 +81,8 @@ struct VideoListRowView: View {
var verticalRow: some View { var verticalRow: some View {
VStack(alignment: .leading) { VStack(alignment: .leading) {
thumbnailWithDetails thumbnailWithDetails(minWidth: 250, maxWidth: 600, minHeight: 180)
.frame(minWidth: 0, maxWidth: 600) .frame(idealWidth: 320)
.padding([.leading, .top, .trailing], 4) .padding([.leading, .top, .trailing], 4)
VStack(alignment: .leading) { VStack(alignment: .leading) {
@ -121,46 +120,67 @@ struct VideoListRowView: View {
} }
} }
var thumbnailWithDetails: some View { func thumbnailWithDetails(
minWidth: Double = 250,
maxWidth: Double = .infinity,
minHeight: Double = 140,
maxHeight: Double = .infinity
) -> some View {
ZStack(alignment: .trailing) { ZStack(alignment: .trailing) {
thumbnail thumbnail(.maxres, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
VStack(alignment: .trailing) { VStack(alignment: .trailing) {
Text(video.author) detailOnThinMaterial(video.author)
.padding(8)
.background(.thinMaterial)
.mask(RoundedRectangle(cornerRadius: 12))
.offset(x: -5, y: 5) .offset(x: -5, y: 5)
Spacer() Spacer()
if let time = video.playTime { if let time = video.playTime {
Text(time) detailOnThinMaterial(time, bold: true)
.fontWeight(.bold)
.padding(8)
.background(.thinMaterial)
.mask(RoundedRectangle(cornerRadius: 12))
.offset(x: -5, y: -5) .offset(x: -5, y: -5)
} }
} }
} }
} }
var thumbnail: some View { func detailOnThinMaterial(_ text: String, bold: Bool = false) -> some View {
Text(text)
.fontWeight(bold ? .semibold : .regular)
.padding(8)
.background(.thinMaterial)
.mask(RoundedRectangle(cornerRadius: 12))
}
func thumbnail(
_ quality: ThumbnailQuality,
minWidth: Double = 320,
maxWidth: Double = .infinity,
minHeight: Double = 180,
maxHeight: Double = .infinity
) -> some View {
Group { Group {
if let thumbnail = video.thumbnailURL(quality: "maxres") { if let url = video.thumbnailURL(quality: quality) {
// to replace with AsyncImage when it is fixed with lazy views URLImage(url) {
URLImage(thumbnail) { image in EmptyView()
} inProgress: { _ in
ProgressView()
.progressViewStyle(CircularProgressViewStyle())
} failure: { _, retry in
VStack {
Button("Retry", action: retry)
}
} content: { image in
image image
.resizable() .resizable()
.aspectRatio(contentMode: .fill) .aspectRatio(contentMode: .fill)
.frame(minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
} }
.mask(RoundedRectangle(cornerRadius: 12)) .mask(RoundedRectangle(cornerRadius: 12))
} else { } else {
Image(systemName: "exclamationmark.square") Image(systemName: "exclamationmark.square")
} }
} }
.frame(minWidth: 320, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity) .frame(minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
} }
func videoDetail(_ text: String, color: Color? = .primary, bold: Bool = false) -> some View { func videoDetail(_ text: String, color: Color? = .primary, bold: Bool = false) -> some View {

View File

@ -40,7 +40,7 @@ final class PlayerState: ObservableObject {
#if !os(macOS) #if !os(macOS)
if let thumbnailData = try? Data(contentsOf: video.thumbnailURL(quality: "high")!), if let thumbnailData = try? Data(contentsOf: video.thumbnailURL(quality: .high)!),
let image = UIImage(data: thumbnailData), let image = UIImage(data: thumbnailData),
let pngData = image.pngData() let pngData = image.pngData()
{ {

View File

@ -3,10 +3,10 @@ import SwiftyJSON
struct Thumbnail { struct Thumbnail {
var url: URL var url: URL
var quality: String var quality: ThumbnailQuality
init(_ json: JSON) { init(_ json: JSON) {
url = json["url"].url! url = json["url"].url!
quality = json["quality"].string! quality = ThumbnailQuality(rawValue: json["quality"].string!)!
} }
} }

View File

@ -0,0 +1,5 @@
import Foundation
enum ThumbnailQuality: String {
case maxres, maxresdefault, sddefault, high, medium, `default`, start, middle, end
}

View File

@ -107,7 +107,7 @@ struct Video: Identifiable {
streamWithResolution(profile.defaultStreamResolution.value) ?? streams.first streamWithResolution(profile.defaultStreamResolution.value) ?? streams.first
} }
func thumbnailURL(quality: String) -> URL? { func thumbnailURL(quality: ThumbnailQuality) -> URL? {
thumbnails.first { $0.quality == quality }?.url thumbnails.first { $0.quality == quality }?.url
} }

View File

@ -187,6 +187,9 @@
37D4B19D2671817900C925CA /* SwiftyJSON in Frameworks */ = {isa = PBXBuildFile; productRef = 37D4B19C2671817900C925CA /* SwiftyJSON */; }; 37D4B19D2671817900C925CA /* SwiftyJSON in Frameworks */ = {isa = PBXBuildFile; productRef = 37D4B19C2671817900C925CA /* SwiftyJSON */; };
37D4B1AB2672580400C925CA /* URLImage in Frameworks */ = {isa = PBXBuildFile; productRef = 37D4B1AA2672580400C925CA /* URLImage */; }; 37D4B1AB2672580400C925CA /* URLImage in Frameworks */ = {isa = PBXBuildFile; productRef = 37D4B1AA2672580400C925CA /* URLImage */; };
37D4B1AD2672580400C925CA /* URLImageStore in Frameworks */ = {isa = PBXBuildFile; productRef = 37D4B1AC2672580400C925CA /* URLImageStore */; }; 37D4B1AD2672580400C925CA /* URLImageStore in Frameworks */ = {isa = PBXBuildFile; productRef = 37D4B1AC2672580400C925CA /* URLImageStore */; };
37D80701269C74F8002ECBBA /* ThumbnailQuality.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37D80700269C74F8002ECBBA /* ThumbnailQuality.swift */; };
37D80702269C74F8002ECBBA /* ThumbnailQuality.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37D80700269C74F8002ECBBA /* ThumbnailQuality.swift */; };
37D80703269C74F8002ECBBA /* ThumbnailQuality.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37D80700269C74F8002ECBBA /* ThumbnailQuality.swift */; };
37EAD86B267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */; }; 37EAD86B267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */; };
37EAD86C267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */; }; 37EAD86C267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */; };
37EAD86D267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */; }; 37EAD86D267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */; };
@ -292,6 +295,7 @@
37D4B18B26717B3800C925CA /* VideoListRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideoListRowView.swift; sourceTree = "<group>"; }; 37D4B18B26717B3800C925CA /* VideoListRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideoListRowView.swift; sourceTree = "<group>"; };
37D4B19626717E1500C925CA /* Video.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Video.swift; sourceTree = "<group>"; }; 37D4B19626717E1500C925CA /* Video.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Video.swift; sourceTree = "<group>"; };
37D4B1AE26729DEB00C925CA /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; }; 37D4B1AE26729DEB00C925CA /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
37D80700269C74F8002ECBBA /* ThumbnailQuality.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ThumbnailQuality.swift; sourceTree = "<group>"; };
37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SponsorBlockAPI.swift; sourceTree = "<group>"; }; 37EAD86A267B9C5600D9E01B /* SponsorBlockAPI.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SponsorBlockAPI.swift; sourceTree = "<group>"; };
37EAD86E267B9ED100D9E01B /* Segment.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Segment.swift; sourceTree = "<group>"; }; 37EAD86E267B9ED100D9E01B /* Segment.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Segment.swift; sourceTree = "<group>"; };
37F4AE7126828F0900BD60EA /* VideosCellsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideosCellsView.swift; sourceTree = "<group>"; }; 37F4AE7126828F0900BD60EA /* VideosCellsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideosCellsView.swift; sourceTree = "<group>"; };
@ -508,6 +512,7 @@
37CEE4B82677B63F005A1EFE /* StreamResolution.swift */, 37CEE4B82677B63F005A1EFE /* StreamResolution.swift */,
37CEE4B42677B628005A1EFE /* StreamType.swift */, 37CEE4B42677B628005A1EFE /* StreamType.swift */,
373CFADA269663F1003CB2C6 /* Thumbnail.swift */, 373CFADA269663F1003CB2C6 /* Thumbnail.swift */,
37D80700269C74F8002ECBBA /* ThumbnailQuality.swift */,
3705B181267B4E4900704544 /* TrendingCategory.swift */, 3705B181267B4E4900704544 /* TrendingCategory.swift */,
37D4B19626717E1500C925CA /* Video.swift */, 37D4B19626717E1500C925CA /* Video.swift */,
); );
@ -833,6 +838,7 @@
373CFAC226966159003CB2C6 /* CoverSectionRowView.swift in Sources */, 373CFAC226966159003CB2C6 /* CoverSectionRowView.swift in Sources */,
37141673267A8E10006CA35D /* Country.swift in Sources */, 37141673267A8E10006CA35D /* Country.swift in Sources */,
37AAF2A026741C97007FC770 /* SubscriptionsView.swift in Sources */, 37AAF2A026741C97007FC770 /* SubscriptionsView.swift in Sources */,
37D80701269C74F8002ECBBA /* ThumbnailQuality.swift in Sources */,
373CFAD7269662CD003CB2C6 /* SearchDuration.swift in Sources */, 373CFAD7269662CD003CB2C6 /* SearchDuration.swift in Sources */,
373CFACF26966290003CB2C6 /* SearchSortOrder.swift in Sources */, 373CFACF26966290003CB2C6 /* SearchSortOrder.swift in Sources */,
373CFAEB26975CBF003CB2C6 /* PlaylistFormView.swift in Sources */, 373CFAEB26975CBF003CB2C6 /* PlaylistFormView.swift in Sources */,
@ -853,6 +859,7 @@
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
37CEE4BE2677B670005A1EFE /* AudioVideoStream.swift in Sources */, 37CEE4BE2677B670005A1EFE /* AudioVideoStream.swift in Sources */,
37D80702269C74F8002ECBBA /* ThumbnailQuality.swift in Sources */,
37F4AE772682908700BD60EA /* VideoCellView.swift in Sources */, 37F4AE772682908700BD60EA /* VideoCellView.swift in Sources */,
373CFABF26966149003CB2C6 /* CoverSectionView.swift in Sources */, 373CFABF26966149003CB2C6 /* CoverSectionView.swift in Sources */,
37EAD86C267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */, 37EAD86C267B9C5600D9E01B /* SponsorBlockAPI.swift in Sources */,
@ -957,6 +964,7 @@
37D4B18E26717B3800C925CA /* VideoListRowView.swift in Sources */, 37D4B18E26717B3800C925CA /* VideoListRowView.swift in Sources */,
37AAF27E26737323007FC770 /* PopularVideosView.swift in Sources */, 37AAF27E26737323007FC770 /* PopularVideosView.swift in Sources */,
37AAF29A26740A01007FC770 /* VideosListView.swift in Sources */, 37AAF29A26740A01007FC770 /* VideosListView.swift in Sources */,
37D80703269C74F8002ECBBA /* ThumbnailQuality.swift in Sources */,
37AAF2962674086B007FC770 /* TabSelection.swift in Sources */, 37AAF2962674086B007FC770 /* TabSelection.swift in Sources */,
37C7A1D7267BFD9D0010EAD6 /* SponsorBlockSegment.swift in Sources */, 37C7A1D7267BFD9D0010EAD6 /* SponsorBlockSegment.swift in Sources */,
376578932685490700D4EA09 /* PlaylistsView.swift in Sources */, 376578932685490700D4EA09 /* PlaylistsView.swift in Sources */,

View File

@ -84,5 +84,21 @@
landmarkType = "7"> landmarkType = "7">
</BreakpointContent> </BreakpointContent>
</BreakpointProxy> </BreakpointProxy>
<BreakpointProxy
BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
<BreakpointContent
uuid = "E7DD4BAD-57BC-472C-91FD-EA6E144CB840"
shouldBeEnabled = "No"
ignoreCount = "0"
continueAfterRunningActions = "No"
filePath = "Apple TV/PlayerViewController.swift"
startingColumnNumber = "9223372036854775807"
endingColumnNumber = "9223372036854775807"
startingLineNumber = "100"
endingLineNumber = "100"
landmarkName = "updateUIViewController(_:context:)"
landmarkType = "7">
</BreakpointContent>
</BreakpointProxy>
</Breakpoints> </Breakpoints>
</Bucket> </Bucket>