2021-07-27 22:40:04 +00:00
|
|
|
import Defaults
|
2021-07-27 21:26:52 +00:00
|
|
|
import SwiftUI
|
|
|
|
|
|
|
|
struct VideoView: View {
|
2021-07-27 22:40:04 +00:00
|
|
|
@EnvironmentObject<NavigationState> private var navigationState
|
|
|
|
|
|
|
|
#if os(iOS)
|
|
|
|
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
|
|
|
#endif
|
|
|
|
|
2021-08-31 21:17:50 +00:00
|
|
|
@Environment(\.inNavigationView) private var inNavigationView
|
|
|
|
|
2021-07-27 22:40:04 +00:00
|
|
|
var video: Video
|
2021-08-01 23:01:24 +00:00
|
|
|
var layout: ListingLayout
|
2021-07-27 22:40:04 +00:00
|
|
|
|
2021-07-27 21:26:52 +00:00
|
|
|
var body: some View {
|
2021-08-31 21:17:50 +00:00
|
|
|
Group {
|
|
|
|
if inNavigationView {
|
|
|
|
NavigationLink(destination: VideoPlayerView(video)) {
|
|
|
|
content
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
Button(action: { navigationState.playVideo(video) }) {
|
|
|
|
content
|
2021-08-02 21:10:22 +00:00
|
|
|
}
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-02 21:10:22 +00:00
|
|
|
.modifier(ButtonStyleModifier(layout: layout))
|
|
|
|
.contentShape(RoundedRectangle(cornerRadius: 12))
|
|
|
|
.contextMenu { VideoContextMenuView(video: video) }
|
2021-08-01 23:01:24 +00:00
|
|
|
}
|
2021-07-27 22:40:04 +00:00
|
|
|
|
2021-08-31 21:17:50 +00:00
|
|
|
var content: some View {
|
|
|
|
VStack {
|
|
|
|
if layout == .cells {
|
|
|
|
#if os(iOS)
|
|
|
|
if verticalSizeClass == .compact {
|
|
|
|
horizontalRow
|
|
|
|
.padding(.vertical, 4)
|
|
|
|
} else {
|
|
|
|
verticalRow
|
|
|
|
}
|
|
|
|
#else
|
|
|
|
verticalRow
|
|
|
|
#endif
|
|
|
|
} else {
|
|
|
|
horizontalRow
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#if os(macOS)
|
|
|
|
.background()
|
|
|
|
#endif
|
|
|
|
}
|
|
|
|
|
2021-08-01 23:01:24 +00:00
|
|
|
var horizontalRow: some View {
|
2021-07-27 22:40:04 +00:00
|
|
|
HStack(alignment: .top, spacing: 2) {
|
2021-08-02 21:10:22 +00:00
|
|
|
Section {
|
|
|
|
#if os(tvOS)
|
|
|
|
thumbnailImage(quality: .medium)
|
|
|
|
#else
|
|
|
|
thumbnail
|
|
|
|
#endif
|
|
|
|
}
|
|
|
|
.frame(maxWidth: 320)
|
2021-07-27 22:40:04 +00:00
|
|
|
|
|
|
|
VStack(alignment: .leading, spacing: 0) {
|
2021-08-01 23:01:24 +00:00
|
|
|
videoDetail(video.title)
|
2021-07-27 22:40:04 +00:00
|
|
|
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
|
|
|
|
|
2021-08-01 23:01:24 +00:00
|
|
|
videoDetail(video.author)
|
2021-07-27 22:40:04 +00:00
|
|
|
|
|
|
|
Spacer()
|
|
|
|
|
|
|
|
additionalDetails
|
|
|
|
}
|
|
|
|
.padding()
|
|
|
|
.frame(minHeight: 180)
|
|
|
|
|
2021-08-02 21:10:22 +00:00
|
|
|
#if os(tvOS)
|
|
|
|
if video.playTime != nil || video.live || video.upcoming {
|
2021-08-01 23:01:24 +00:00
|
|
|
Spacer()
|
2021-07-27 22:40:04 +00:00
|
|
|
|
2021-08-02 21:10:22 +00:00
|
|
|
VStack(alignment: .center) {
|
|
|
|
Spacer()
|
|
|
|
|
|
|
|
if let time = video.playTime {
|
|
|
|
HStack(spacing: 4) {
|
|
|
|
Image(systemName: "clock")
|
|
|
|
Text(time)
|
|
|
|
.fontWeight(.bold)
|
|
|
|
}
|
|
|
|
.foregroundColor(.secondary)
|
|
|
|
} else if video.live {
|
|
|
|
DetailBadge(text: "Live", style: .outstanding)
|
|
|
|
} else if video.upcoming {
|
|
|
|
DetailBadge(text: "Upcoming", style: .informational)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
2021-08-01 23:01:24 +00:00
|
|
|
|
2021-08-02 21:10:22 +00:00
|
|
|
Spacer()
|
|
|
|
}
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
2021-08-02 21:10:22 +00:00
|
|
|
#endif
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
2021-08-01 23:01:24 +00:00
|
|
|
.padding(.trailing)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var verticalRow: some View {
|
|
|
|
VStack(alignment: .leading) {
|
2021-08-01 23:01:24 +00:00
|
|
|
thumbnail
|
2021-07-27 22:40:04 +00:00
|
|
|
|
|
|
|
VStack(alignment: .leading) {
|
2021-08-01 23:01:24 +00:00
|
|
|
videoDetail(video.title, lineLimit: additionalDetailsAvailable ? 2 : 3)
|
|
|
|
#if os(tvOS)
|
2021-08-02 21:10:22 +00:00
|
|
|
.frame(minHeight: additionalDetailsAvailable ? 80 : 120, alignment: .top)
|
|
|
|
#elseif os(macOS)
|
|
|
|
.frame(minHeight: 30, alignment: .top)
|
|
|
|
#else
|
|
|
|
.frame(minHeight: 50, alignment: .top)
|
2021-08-01 23:01:24 +00:00
|
|
|
#endif
|
2021-08-02 21:10:22 +00:00
|
|
|
.padding(.bottom)
|
2021-07-27 22:40:04 +00:00
|
|
|
|
|
|
|
if additionalDetailsAvailable {
|
|
|
|
additionalDetails
|
|
|
|
.padding(.bottom, 10)
|
|
|
|
} else {
|
|
|
|
Spacer()
|
|
|
|
}
|
|
|
|
}
|
2021-08-01 23:01:24 +00:00
|
|
|
#if os(tvOS)
|
2021-08-02 21:10:22 +00:00
|
|
|
.padding(.horizontal, 8)
|
2021-08-01 23:01:24 +00:00
|
|
|
#endif
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var additionalDetailsAvailable: Bool {
|
|
|
|
video.publishedDate != nil || video.views != 0
|
|
|
|
}
|
|
|
|
|
|
|
|
var additionalDetails: some View {
|
|
|
|
HStack(spacing: 8) {
|
|
|
|
if let date = video.publishedDate {
|
|
|
|
Image(systemName: "calendar")
|
|
|
|
Text(date)
|
|
|
|
}
|
|
|
|
|
|
|
|
if video.views != 0 {
|
|
|
|
Image(systemName: "eye")
|
2021-08-22 19:13:33 +00:00
|
|
|
Text(video.viewsCount!)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-01 23:01:24 +00:00
|
|
|
.foregroundColor(.secondary)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
|
2021-08-01 23:01:24 +00:00
|
|
|
var thumbnail: some View {
|
2021-07-31 22:10:56 +00:00
|
|
|
ZStack(alignment: .leading) {
|
2021-08-22 19:13:33 +00:00
|
|
|
thumbnailImage(quality: .maxresdefault)
|
2021-07-27 22:40:04 +00:00
|
|
|
|
|
|
|
VStack {
|
|
|
|
HStack(alignment: .top) {
|
|
|
|
if video.live {
|
|
|
|
DetailBadge(text: "Live", style: .outstanding)
|
|
|
|
} else if video.upcoming {
|
|
|
|
DetailBadge(text: "Upcoming", style: .informational)
|
|
|
|
}
|
|
|
|
|
|
|
|
Spacer()
|
|
|
|
|
|
|
|
DetailBadge(text: video.author, style: .prominent)
|
|
|
|
}
|
|
|
|
.padding(10)
|
|
|
|
|
|
|
|
Spacer()
|
|
|
|
|
|
|
|
HStack(alignment: .top) {
|
|
|
|
Spacer()
|
|
|
|
|
|
|
|
if let time = video.playTime {
|
|
|
|
DetailBadge(text: time, style: .prominent)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.padding(10)
|
|
|
|
}
|
|
|
|
}
|
2021-08-01 23:01:24 +00:00
|
|
|
.padding([.leading, .top, .trailing], 4)
|
2021-07-31 22:10:56 +00:00
|
|
|
.frame(maxWidth: 600)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
|
2021-08-01 23:01:24 +00:00
|
|
|
func thumbnailImage(quality: Thumbnail.Quality) -> some View {
|
2021-07-27 22:40:04 +00:00
|
|
|
Group {
|
|
|
|
if let url = video.thumbnailURL(quality: quality) {
|
|
|
|
AsyncImage(url: url) { image in
|
|
|
|
image
|
|
|
|
.resizable()
|
|
|
|
} placeholder: {
|
|
|
|
ProgressView()
|
2021-08-01 23:01:24 +00:00
|
|
|
.aspectRatio(contentMode: .fill)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
Image(systemName: "exclamationmark.square")
|
|
|
|
}
|
|
|
|
}
|
2021-08-22 19:13:33 +00:00
|
|
|
.frame(minWidth: 300, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity)
|
|
|
|
.background(.gray)
|
|
|
|
.mask(RoundedRectangle(cornerRadius: 12))
|
2021-08-02 21:10:22 +00:00
|
|
|
#if os(tvOS)
|
2021-08-16 15:52:42 +00:00
|
|
|
.frame(minHeight: layout == .cells ? 320 : 200)
|
2021-08-02 21:10:22 +00:00
|
|
|
#endif
|
2021-08-01 23:01:24 +00:00
|
|
|
.aspectRatio(1.777, contentMode: .fit)
|
2021-07-27 22:40:04 +00:00
|
|
|
}
|
|
|
|
|
2021-08-01 23:01:24 +00:00
|
|
|
func videoDetail(_ text: String, lineLimit: Int = 1) -> some View {
|
2021-07-27 22:40:04 +00:00
|
|
|
Text(text)
|
2021-08-01 23:01:24 +00:00
|
|
|
.fontWeight(.bold)
|
2021-07-27 22:40:04 +00:00
|
|
|
.lineLimit(lineLimit)
|
|
|
|
.truncationMode(.middle)
|
2021-07-27 21:26:52 +00:00
|
|
|
}
|
2021-08-02 21:10:22 +00:00
|
|
|
|
|
|
|
struct ButtonStyleModifier: ViewModifier {
|
|
|
|
var layout: ListingLayout
|
|
|
|
|
|
|
|
func body(content: Content) -> some View {
|
|
|
|
Section {
|
|
|
|
#if os(tvOS)
|
|
|
|
if layout == .cells {
|
|
|
|
content.buttonStyle(.plain)
|
|
|
|
} else {
|
|
|
|
content
|
|
|
|
}
|
|
|
|
#else
|
|
|
|
content.buttonStyle(.plain)
|
|
|
|
#endif
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-07-27 21:26:52 +00:00
|
|
|
}
|
|
|
|
|
2021-07-27 22:40:04 +00:00
|
|
|
struct VideoListRowPreview: PreviewProvider {
|
2021-07-27 21:26:52 +00:00
|
|
|
static var previews: some View {
|
2021-07-27 22:40:04 +00:00
|
|
|
#if os(tvOS)
|
|
|
|
List {
|
|
|
|
ForEach(Video.allFixtures) { video in
|
|
|
|
VideoView(video: video, layout: .list)
|
|
|
|
}
|
|
|
|
}
|
2021-08-31 21:17:50 +00:00
|
|
|
.listStyle(.grouped)
|
2021-07-27 22:40:04 +00:00
|
|
|
|
|
|
|
HStack {
|
|
|
|
ForEach(Video.allFixtures) { video in
|
|
|
|
VideoView(video: video, layout: .cells)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.frame(maxHeight: 600)
|
|
|
|
#else
|
|
|
|
List {
|
|
|
|
ForEach(Video.allFixtures) { video in
|
|
|
|
VideoView(video: video, layout: .list)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#if os(macOS)
|
|
|
|
.frame(minHeight: 800)
|
|
|
|
#endif
|
|
|
|
|
|
|
|
#if os(iOS)
|
|
|
|
List {
|
|
|
|
ForEach(Video.allFixtures) { video in
|
|
|
|
VideoView(video: video, layout: .list)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.previewInterfaceOrientation(.landscapeRight)
|
|
|
|
#endif
|
|
|
|
#endif
|
2021-07-27 21:26:52 +00:00
|
|
|
}
|
|
|
|
}
|