From c5a4efd00f7c9e3d129c5a072056759fa2ddeac7 Mon Sep 17 00:00:00 2001 From: Arkadiusz Fal Date: Mon, 12 Jul 2021 01:23:04 +0200 Subject: [PATCH] Simplify video list row --- .swiftlint.yml | 1 + Apple TV/PlayerView.swift | 2 + Apple TV/VideoListRowView.swift | 178 ++++++++++++++++---------------- Apple TV/VideosView.swift | 2 +- 4 files changed, 91 insertions(+), 92 deletions(-) diff --git a/.swiftlint.yml b/.swiftlint.yml index ffa86914..7590d249 100644 --- a/.swiftlint.yml +++ b/.swiftlint.yml @@ -2,6 +2,7 @@ parent_config: https://raw.githubusercontent.com/sindresorhus/swiftlint-config/m disabled_rules: - opening_brace + - multiline_arguments excluded: - Tests Apple TV diff --git a/Apple TV/PlayerView.swift b/Apple TV/PlayerView.swift index 445aa6b6..57284bab 100644 --- a/Apple TV/PlayerView.swift +++ b/Apple TV/PlayerView.swift @@ -65,6 +65,7 @@ struct PlayerView: View { } } + // swiftlint:disable implicit_return #if !os(macOS) var pvc: PlayerViewController? { guard store.item != nil else { @@ -74,4 +75,5 @@ struct PlayerView: View { return PlayerViewController(video: store.item!) } #endif + // swiftlint:enable implicit_return } diff --git a/Apple TV/VideoListRowView.swift b/Apple TV/VideoListRowView.swift index 3a23d1e1..2d370a95 100644 --- a/Apple TV/VideoListRowView.swift +++ b/Apple TV/VideoListRowView.swift @@ -12,50 +12,20 @@ struct VideoListRowView: View { var video: Video var body: some View { - #if os(tvOS) + #if os(tvOS) || os(macOS) NavigationLink(destination: PlayerView(id: video.id)) { - HStack(alignment: .top, spacing: 2) { - roundedThumbnail - - HStack { - VStack(alignment: .leading, spacing: 0) { - videoDetail(video.title, bold: true) - videoDetail(video.author, color: .secondary, bold: true) - - Spacer() - - additionalDetails - } - .padding() - - Spacer() - } - .frame(minHeight: 180) - } - } - #elseif os(macOS) - NavigationLink(destination: PlayerView(id: video.id)) { - verticalyAlignedDetails + #if os(tvOS) + horizontalRow(detailsOnThumbnail: false) + #else + verticalRow + #endif } #else ZStack { if verticalSizeClass == .compact { - HStack(alignment: .top) { - thumbnailWithDetails - .frame(minWidth: 0, maxWidth: 320, minHeight: 0, maxHeight: 180) - .padding(4) - - VStack(alignment: .leading) { - videoDetail(video.title, bold: true) - .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) - .padding(.top, 10) - - additionalDetails - .padding(.top, 4) - } - } + horizontalRow(padding: 4) } else { - verticalyAlignedDetails + verticalRow } NavigationLink(destination: PlayerView(id: video.id)) { @@ -68,6 +38,66 @@ struct VideoListRowView: View { #endif } + func horizontalRow(detailsOnThumbnail: Bool = true, padding: Double = 0) -> some View { + HStack(alignment: .top, spacing: 2) { + if detailsOnThumbnail { + thumbnailWithDetails + .padding(padding) + } else { + thumbnail + .frame(width: 320, height: 180) + } + + VStack(alignment: .leading, spacing: 0) { + videoDetail(video.title, bold: true) + .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) + + if !detailsOnThumbnail { + videoDetail(video.author, color: .secondary, bold: true) + } + + Spacer() + + additionalDetails + } + .padding() + .frame(minHeight: 180) + + if !detailsOnThumbnail, let time = video.playTime { + Spacer() + + VStack(alignment: .center) { + Spacer() + HStack(spacing: 8) { + Image(systemName: "clock") + Text(time) + .fontWeight(.bold) + } + Spacer() + } + .foregroundColor(.secondary) + } + } + } + + var verticalRow: some View { + VStack(alignment: .leading) { + thumbnailWithDetails + .frame(minWidth: 0, maxWidth: 600) + .padding([.leading, .top, .trailing], 4) + + VStack(alignment: .leading) { + videoDetail(video.title, bold: true) + .padding(.bottom) + + additionalDetails + .padding(.bottom, 10) + } + .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) + .padding(.horizontal, 8) + } + } + var additionalDetails: some View { VStack { if !video.published.isEmpty || video.views != 0 { @@ -91,80 +121,46 @@ struct VideoListRowView: View { } } - var verticalyAlignedDetails: some View { - VStack(alignment: .leading) { - thumbnailWithDetails - .frame(minWidth: 0, maxWidth: 600) - .padding([.leading, .top, .trailing], 4) - - VStack(alignment: .leading) { - videoDetail(video.title, bold: true) - .padding(.bottom) - - additionalDetails - .padding(.bottom, 10) - } - .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) - .padding(.horizontal, 8) - } - } - var thumbnailWithDetails: some View { - Group { - ZStack(alignment: .trailing) { - if let thumbnail = video.thumbnailURL(quality: "maxres") { - // to replace with AsyncImage when it is fixed with lazy views - URLImage(thumbnail) { image in - image - .resizable() - .aspectRatio(contentMode: .fit) - .frame(minWidth: 0, maxWidth: 600, minHeight: 0, maxHeight: .infinity) - .background(Color.black) - } - .mask(RoundedRectangle(cornerRadius: 12)) - } else { - Image(systemName: "exclamationmark.square") - } + ZStack(alignment: .trailing) { + thumbnail - VStack(alignment: .trailing) { - Text(video.author) + VStack(alignment: .trailing) { + Text(video.author) + .padding(8) + .background(.thinMaterial) + .mask(RoundedRectangle(cornerRadius: 12)) + .offset(x: -5, y: 5) + + Spacer() + + if let time = video.playTime { + Text(time) + .fontWeight(.bold) .padding(8) .background(.thinMaterial) .mask(RoundedRectangle(cornerRadius: 12)) - .offset(x: -5, y: 5) - .truncationMode(.middle) - - Spacer() - - if let time = video.playTime { - Text(time) - .fontWeight(.bold) - .padding(8) - .background(.thinMaterial) - .mask(RoundedRectangle(cornerRadius: 12)) - .offset(x: -5, y: -5) - } + .offset(x: -5, y: -5) } } } } - var roundedThumbnail: some View { - Section { - if let thumbnail = video.thumbnailURL(quality: "high") { + var thumbnail: some View { + Group { + if let thumbnail = video.thumbnailURL(quality: "maxres") { // to replace with AsyncImage when it is fixed with lazy views URLImage(thumbnail) { image in image .resizable() .aspectRatio(contentMode: .fill) - .frame(minWidth: 0, maxWidth: 320, minHeight: 0, maxHeight: 180) } .mask(RoundedRectangle(cornerRadius: 12)) } else { Image(systemName: "exclamationmark.square") } } - .frame(width: 320, height: 180) + .frame(minWidth: 320, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity) } func videoDetail(_ text: String, color: Color? = .primary, bold: Bool = false) -> some View { diff --git a/Apple TV/VideosView.swift b/Apple TV/VideosView.swift index c19f362f..8294d9d5 100644 --- a/Apple TV/VideosView.swift +++ b/Apple TV/VideosView.swift @@ -25,7 +25,7 @@ struct VideosView: View { #else VideosListView(videos: videos) #if os(macOS) - .frame(minWidth: 250, idealWidth: 350) + .frame(minWidth: 400) #endif #endif }