mirror of
https://github.com/yattee/yattee.git
synced 2025-12-14 12:08:15 +00:00
Simplify video views
This commit is contained in:
Arkadiusz Fal
@@ -1,20 +1,301 @@
|
||||
//
|
||||
// VideoView.swift
|
||||
// VideoView
|
||||
//
|
||||
// Created by Arkadiusz Fal on 26/07/2021.
|
||||
//
|
||||
|
||||
import Defaults
|
||||
import SwiftUI
|
||||
|
||||
struct VideoView: View {
|
||||
@EnvironmentObject<NavigationState> private var navigationState
|
||||
|
||||
@Environment(\.isFocused) private var focused: Bool
|
||||
|
||||
#if os(iOS)
|
||||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||||
#endif
|
||||
|
||||
var layout: ListingLayout?
|
||||
|
||||
var video: Video
|
||||
|
||||
init(video: Video, layout: ListingLayout? = nil) {
|
||||
self.video = video
|
||||
self.layout = layout
|
||||
|
||||
#if os(tvOS)
|
||||
if self.layout == nil {
|
||||
self.layout = Defaults[.layout]
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
|
||||
#if os(tvOS)
|
||||
if layout == .cells {
|
||||
tvOSButton
|
||||
.buttonStyle(.plain)
|
||||
.padding(.vertical)
|
||||
} else {
|
||||
tvOSButton
|
||||
}
|
||||
#elseif os(macOS)
|
||||
NavigationLink(destination: VideoPlayerView(video)) {
|
||||
verticalRow
|
||||
}
|
||||
#else
|
||||
ZStack {
|
||||
#if os(macOS)
|
||||
verticalRow
|
||||
#else
|
||||
if verticalSizeClass == .compact {
|
||||
horizontalRow(padding: 4)
|
||||
} else {
|
||||
verticalRow
|
||||
}
|
||||
#endif
|
||||
|
||||
NavigationLink(destination: VideoPlayerView(video)) {
|
||||
EmptyView()
|
||||
}
|
||||
.buttonStyle(PlainButtonStyle())
|
||||
.opacity(0)
|
||||
.frame(height: 0)
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
#if os(tvOS)
|
||||
var tvOSButton: some View {
|
||||
Button(action: { navigationState.playVideo(video) }) {
|
||||
if layout == .cells {
|
||||
cellRow
|
||||
} else {
|
||||
horizontalRow(detailsOnThumbnail: false)
|
||||
}
|
||||
}
|
||||
}
|
||||
#endif
|
||||
|
||||
func horizontalRow(detailsOnThumbnail: Bool = true, padding: Double = 0) -> some View {
|
||||
HStack(alignment: .top, spacing: 2) {
|
||||
if detailsOnThumbnail {
|
||||
thumbnailWithDetails()
|
||||
.padding(padding)
|
||||
} else {
|
||||
thumbnail(.medium, maxWidth: 320, maxHeight: 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 {
|
||||
if video.playTime != nil || video.live || video.upcoming {
|
||||
Spacer()
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var verticalRow: some View {
|
||||
VStack(alignment: .leading) {
|
||||
thumbnailWithDetails(minWidth: 250, maxWidth: 600, minHeight: 180)
|
||||
.frame(idealWidth: 320)
|
||||
.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 cellRow: some View {
|
||||
VStack(alignment: .leading) {
|
||||
thumbnailWithDetails(minWidth: 550, maxWidth: 550, minHeight: 310, maxHeight: 310)
|
||||
.padding([.leading, .top, .trailing], 4)
|
||||
|
||||
VStack(alignment: .leading) {
|
||||
videoDetail(video.title, bold: true, lineLimit: additionalDetailsAvailable ? 2 : 3)
|
||||
.frame(minHeight: 80, alignment: .top)
|
||||
.padding(.bottom)
|
||||
|
||||
if additionalDetailsAvailable {
|
||||
additionalDetails
|
||||
.padding(.bottom, 10)
|
||||
} else {
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 150, alignment: .leading)
|
||||
.padding(10)
|
||||
}
|
||||
.frame(width: 558)
|
||||
}
|
||||
|
||||
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")
|
||||
Text(video.viewsCount)
|
||||
}
|
||||
}
|
||||
#if os(tvOS)
|
||||
.foregroundColor(.secondary)
|
||||
#else
|
||||
.foregroundColor(focused ? .white : .secondary)
|
||||
#endif
|
||||
}
|
||||
|
||||
func thumbnailWithDetails(
|
||||
minWidth: Double = 250,
|
||||
maxWidth: Double = .infinity,
|
||||
minHeight: Double = 140,
|
||||
maxHeight: Double = .infinity
|
||||
) -> some View {
|
||||
ZStack(alignment: .trailing) {
|
||||
thumbnail(.maxres, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func thumbnail(
|
||||
_ quality: Thumbnail.Quality,
|
||||
minWidth: Double = 320,
|
||||
maxWidth: Double = .infinity,
|
||||
minHeight: Double = 180,
|
||||
maxHeight: Double = .infinity
|
||||
) -> some View {
|
||||
Group {
|
||||
if let url = video.thumbnailURL(quality: quality) {
|
||||
AsyncImage(url: url) { image in
|
||||
image
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fill)
|
||||
.frame(minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
|
||||
} placeholder: {
|
||||
ProgressView()
|
||||
}
|
||||
.mask(RoundedRectangle(cornerRadius: 12))
|
||||
} else {
|
||||
Image(systemName: "exclamationmark.square")
|
||||
}
|
||||
}
|
||||
.frame(minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight)
|
||||
}
|
||||
|
||||
func videoDetail(_ text: String, color: Color? = .primary, bold: Bool = false, lineLimit: Int = 1) -> some View {
|
||||
Text(text)
|
||||
.fontWeight(bold ? .bold : .regular)
|
||||
#if os(tvOS)
|
||||
.foregroundColor(color)
|
||||
.lineLimit(lineLimit)
|
||||
.truncationMode(.middle)
|
||||
#elseif os(iOS) || os(macOS)
|
||||
.foregroundColor(focused ? .white : color)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
|
||||
struct VideoView_Previews: PreviewProvider {
|
||||
struct VideoListRowPreview: PreviewProvider {
|
||||
static var previews: some View {
|
||||
VideoView()
|
||||
#if os(tvOS)
|
||||
List {
|
||||
ForEach(Video.allFixtures) { video in
|
||||
VideoView(video: video, layout: .list)
|
||||
}
|
||||
}
|
||||
.listStyle(GroupedListStyle())
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user