Video listing improvement

This commit is contained in:
Arkadiusz Fal 2022-12-13 21:56:03 +01:00
parent 4fc2f964b2
commit 1a1ef7e76c

View File

@ -14,6 +14,7 @@ struct VideoBanner: View {
@Default(.saveHistory) private var saveHistory @Default(.saveHistory) private var saveHistory
@Default(.watchedVideoStyle) private var watchedVideoStyle @Default(.watchedVideoStyle) private var watchedVideoStyle
@Default(.watchedVideoBadgeColor) private var watchedVideoBadgeColor @Default(.watchedVideoBadgeColor) private var watchedVideoBadgeColor
@Default(.timeOnThumbnail) private var timeOnThumbnail
@Environment(\.inChannelView) private var inChannelView @Environment(\.inChannelView) private var inChannelView
@Environment(\.inNavigationView) private var inNavigationView @Environment(\.inNavigationView) private var inNavigationView
@ -35,13 +36,20 @@ struct VideoBanner: View {
var body: some View { var body: some View {
HStack(alignment: .top, spacing: 12) { HStack(alignment: .top, spacing: 12) {
VStack(spacing: 2) { VStack(alignment: .trailing, spacing: 2) {
smallThumbnail smallThumbnail
#if !os(tvOS) #if !os(tvOS)
progressView progressView
#endif #endif
if !timeOnThumbnail, let timeLabel {
Text(timeLabel)
.font(.caption.monospacedDigit())
.foregroundColor(.secondary)
}
} }
VStack(alignment: .leading, spacing: 2) { VStack(alignment: .leading, spacing: 2) {
Group { Group {
if let video { if let video {
@ -65,44 +73,48 @@ struct VideoBanner: View {
Spacer() Spacer()
HStack { HStack {
Group { HStack {
if let video { if !inChannelView {
if !inChannelView, !video.isLocal || video.localStreamIsRemoteURL { ThumbnailView(url: video?.channel.thumbnailURL)
channelControl .frame(width: 30, height: 30)
} else { .clipShape(Circle())
#if os(iOS) }
if DocumentsModel.shared.isDocument(video) {
HStack(spacing: 6) {
if let date = DocumentsModel.shared.formattedCreationDate(video) {
Text(date)
}
if let size = DocumentsModel.shared.formattedSize(video) {
Text("")
Text(size)
}
Spacer() VStack(alignment: .leading) {
} Group {
.frame(maxWidth: .infinity) if let video {
if !inChannelView, !video.isLocal || video.localStreamIsRemoteURL {
channelControl
.font(.subheadline)
} else {
#if os(iOS)
if DocumentsModel.shared.isDocument(video) {
HStack(spacing: 6) {
if let date = DocumentsModel.shared.formattedCreationDate(video) {
Text(date)
}
if let size = DocumentsModel.shared.formattedSize(video) {
Text("")
Text(size)
}
Spacer()
}
.frame(maxWidth: .infinity)
}
#endif
} }
#endif } else {
Text("Video Author")
.redacted(reason: .placeholder)
}
} }
} else {
Text("Video Author") extraAttributes
.redacted(reason: .placeholder)
} }
} }
.lineLimit(1) .foregroundColor(.secondary)
#if os(tvOS)
extraAttributes
#endif
} }
.foregroundColor(.secondary)
#if !os(tvOS)
extraAttributes
#endif
} }
.frame(maxWidth: .infinity, alignment: .leading) .frame(maxWidth: .infinity, alignment: .leading)
.frame(maxHeight: .infinity) .frame(maxHeight: .infinity)
@ -141,17 +153,6 @@ struct VideoBanner: View {
} }
} }
} }
if timeInfo {
Spacer()
#if os(tvOS)
progressView
#endif
timeLabel
.layoutPriority(1)
}
} }
.font(.caption) .font(.caption)
.lineLimit(1) .lineLimit(1)
@ -159,41 +160,47 @@ struct VideoBanner: View {
} }
@ViewBuilder private var smallThumbnail: some View { @ViewBuilder private var smallThumbnail: some View {
ZStack(alignment: .bottomLeading) { ZStack(alignment: .bottomTrailing) {
ZStack { ZStack(alignment: .bottomLeading) {
Color("PlaceholderColor") ZStack {
if let video { Color("PlaceholderColor")
if let thumbnail = video.thumbnailURL(quality: .medium) {
ThumbnailView(url: thumbnail) if let video {
} else if video.isLocal { if let thumbnail = video.thumbnailURL(quality: .medium) {
Image(systemName: video.localStreamImageSystemName) ThumbnailView(url: thumbnail)
} else if video.isLocal {
Image(systemName: video.localStreamImageSystemName)
}
} else {
Image(systemName: "ellipsis")
} }
} else { }
Image(systemName: "ellipsis")
if saveHistory,
watchedVideoStyle.isShowingBadge,
watch?.finished ?? false
{
Image(systemName: "checkmark.circle.fill")
.foregroundColor(Color(
watchedVideoBadgeColor == .colorSchemeBased ? "WatchProgressBarColor" :
watchedVideoBadgeColor == .red ? "AppRedColor" : "AppBlueColor"
))
.background(Color.white)
.clipShape(Circle())
.imageScale(.medium)
.offset(x: 5, y: -5)
} }
} }
if saveHistory, if timeOnThumbnail {
watchedVideoStyle.isShowingBadge, timeView
watch?.finished ?? false
{
Image(systemName: "checkmark.circle.fill")
.foregroundColor(Color(
watchedVideoBadgeColor == .colorSchemeBased ? "WatchProgressBarColor" :
watchedVideoBadgeColor == .red ? "AppRedColor" : "AppBlueColor"
))
.background(Color.white)
.clipShape(Circle())
.imageScale(.medium)
.offset(x: 5, y: -5)
} }
} }
.frame(width: thumbnailWidth, height: thumbnailHeight)
#if os(tvOS) #if os(tvOS)
.frame(width: thumbnailWidth, height: thumbnailHeight) .mask(RoundedRectangle(cornerRadius: 12))
.mask(RoundedRectangle(cornerRadius: 12))
#else #else
.frame(width: thumbnailWidth, height: thumbnailHeight) .mask(RoundedRectangle(cornerRadius: 6))
.mask(RoundedRectangle(cornerRadius: 6))
#endif #endif
} }
@ -212,7 +219,7 @@ struct VideoBanner: View {
#if os(tvOS) #if os(tvOS)
250 250
#else #else
100 120
#endif #endif
} }
@ -220,7 +227,7 @@ struct VideoBanner: View {
#if os(tvOS) #if os(tvOS)
140 140
#else #else
60 72
#endif #endif
} }
@ -239,15 +246,23 @@ struct VideoBanner: View {
videoDurationLabel != nil && (video == nil || !video!.localStreamIsDirectory) videoDurationLabel != nil && (video == nil || !video!.localStreamIsDirectory)
} }
@ViewBuilder private var timeLabel: some View { private var timeLabel: String? {
Group { if let watch, let watchStoppedAtLabel, let videoDurationLabel, !watch.finished {
if let watch, let watchStoppedAtLabel, let videoDurationLabel, !watch.finished { return "\(watchStoppedAtLabel) / \(videoDurationLabel)"
Text("\(watchStoppedAtLabel) / \(videoDurationLabel)") } else if let videoDurationLabel {
} else if let videoDurationLabel { return videoDurationLabel
Text(videoDurationLabel) } else {
} else { return nil
EmptyView() }
} }
@ViewBuilder private var timeView: some View {
if let timeLabel {
Text(timeLabel)
.font(.caption2.weight(.semibold).monospacedDigit())
.allowsTightening(true)
.padding(2)
.modifier(ControlBackgroundModifier())
} }
} }