Improve video banner and playback queue view

This commit is contained in:
Arkadiusz Fal
2021-10-23 12:13:05 +02:00
parent 8a43ed9503
commit 28709a2c80
8 changed files with 124 additions and 103 deletions

View File

@@ -15,15 +15,13 @@ struct VideoBanner: View {
}
var body: some View {
HStack(alignment: .top, spacing: 12) {
HStack(alignment: stackAlignment, spacing: 12) {
VStack(spacing: thumbnailStackSpacing) {
smallThumbnail
if !playbackTime.isNil {
ProgressView(value: progressViewValue, total: progressViewTotal)
.progressViewStyle(.linear)
.frame(maxWidth: thumbnailWidth)
}
#if !os(tvOS)
progressView
#endif
}
VStack(alignment: .leading, spacing: 4) {
Text(video.title)
@@ -38,6 +36,10 @@ struct VideoBanner: View {
Spacer()
#if os(tvOS)
progressView
#endif
if let time = (videoDuration ?? video.length).formattedAsPlaybackTime() {
Text(time)
.fontWeight(.light)
@@ -52,11 +54,19 @@ struct VideoBanner: View {
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 100, alignment: .center)
}
private var stackAlignment: VerticalAlignment {
#if os(macOS)
playbackTime.isNil ? .center : .top
#else
.center
#endif
}
private var thumbnailStackSpacing: Double {
#if os(tvOS)
8
#else
3
2
#endif
}
@@ -68,22 +78,32 @@ struct VideoBanner: View {
}
.indicator(.activity)
#if os(tvOS)
.frame(width: thumbnailWidth, height: 100)
.frame(width: thumbnailWidth, height: 140)
.mask(RoundedRectangle(cornerRadius: 12))
#else
.frame(width: thumbnailWidth, height: 50)
.frame(width: thumbnailWidth, height: 60)
.mask(RoundedRectangle(cornerRadius: 6))
#endif
}
private var thumbnailWidth: Double {
#if os(tvOS)
177
230
#else
88
100
#endif
}
private var progressView: some View {
Group {
if !playbackTime.isNil {
ProgressView(value: progressViewValue, total: progressViewTotal)
.progressViewStyle(.linear)
.frame(maxWidth: thumbnailWidth)
}
}
}
private var progressViewValue: Double {
[playbackTime?.seconds, videoDuration].compactMap { $0 }.min() ?? 0
}