yattee/Shared/Videos/VideoCell.swift

332 lines
11 KiB
Swift
Raw Normal View History

2021-07-27 22:40:04 +00:00
import Defaults
import SDWebImageSwiftUI
2021-07-27 21:26:52 +00:00
import SwiftUI
struct VideoCell: View {
var video: Video
@Environment(\.inNavigationView) private var inNavigationView
2021-07-27 22:40:04 +00:00
#if os(iOS)
@Environment(\.verticalSizeClass) private var verticalSizeClass
@Environment(\.horizontalCells) private var horizontalCells
2021-07-27 22:40:04 +00:00
#endif
2021-11-28 14:37:55 +00:00
@EnvironmentObject<AccountsModel> private var accounts
@EnvironmentObject<PlayerModel> private var player
2021-10-24 22:26:25 +00:00
@EnvironmentObject<ThumbnailsModel> private var thumbnails
2021-07-27 22:40:04 +00:00
2021-11-04 23:25:51 +00:00
@Default(.channelOnThumbnail) private var channelOnThumbnail
@Default(.timeOnThumbnail) private var timeOnThumbnail
2021-07-27 21:26:52 +00:00
var body: some View {
Group {
Button(action: {
player.playNow(video)
2021-10-28 17:14:55 +00:00
guard !player.playingInPictureInPicture else {
return
}
if inNavigationView {
2021-10-22 23:04:03 +00:00
player.playerNavigationLinkActive = true
} else {
player.show()
2021-08-02 21:10:22 +00:00
}
}) {
content
}
2021-07-27 22:40:04 +00:00
}
2021-09-26 22:28:42 +00:00
.buttonStyle(.plain)
2021-08-02 21:10:22 +00:00
.contentShape(RoundedRectangle(cornerRadius: 12))
2021-11-28 14:37:55 +00:00
.contextMenu {
VideoContextMenuView(
video: video,
playerNavigationLinkActive: $player.playerNavigationLinkActive
)
.environmentObject(accounts)
}
2021-08-01 23:01:24 +00:00
}
2021-07-27 22:40:04 +00:00
var content: some View {
VStack {
2021-09-26 22:28:42 +00:00
#if os(iOS)
if verticalSizeClass == .compact, !horizontalCells {
horizontalRow
.padding(.vertical, 4)
} else {
verticalRow
2021-09-26 22:28:42 +00:00
}
#else
verticalRow
#endif
}
#if os(macOS)
.background(Color.secondaryBackground)
#endif
}
#if os(iOS)
var horizontalRow: some View {
HStack(alignment: .top, spacing: 2) {
Section {
#if os(tvOS)
2021-11-05 20:53:43 +00:00
thumbnailImage
#else
thumbnail
#endif
}
.frame(maxWidth: 320)
2021-07-27 22:40:04 +00:00
VStack(alignment: .leading, spacing: 0) {
videoDetail(video.title, lineLimit: 5)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
2021-07-27 22:40:04 +00:00
2021-11-04 23:25:51 +00:00
if !channelOnThumbnail {
Text(video.channel.name)
.fontWeight(.semibold)
.foregroundColor(.secondary)
}
2021-07-27 22:40:04 +00:00
if additionalDetailsAvailable {
Spacer()
2021-09-18 20:36:42 +00:00
2021-11-04 23:25:51 +00:00
HStack(spacing: 15) {
if let date = video.publishedDate {
VStack {
Image(systemName: "calendar")
2021-11-04 23:25:51 +00:00
.frame(height: 15)
Text(date)
}
2021-09-18 20:36:42 +00:00
}
2021-07-27 22:40:04 +00:00
2021-10-22 23:04:03 +00:00
if video.views > 0 {
VStack {
Image(systemName: "eye")
2021-11-04 23:25:51 +00:00
.frame(height: 15)
Text(video.viewsCount!)
}
2021-09-18 20:36:42 +00:00
}
2021-11-04 23:25:51 +00:00
if !timeOnThumbnail, let time = video.length.formattedAsPlaybackTime() {
VStack {
Image(systemName: "clock")
.frame(height: 15)
Text(time)
}
}
2021-09-18 20:36:42 +00:00
}
.foregroundColor(.secondary)
2021-09-18 20:36:42 +00:00
}
}
.padding()
.frame(minHeight: 180)
2021-07-27 22:40:04 +00:00
#if os(tvOS)
if let time = video.length.formattedAsPlaybackTime() || video.live || video.upcoming {
2021-08-02 21:10:22 +00:00
Spacer()
VStack(alignment: .center) {
Spacer()
if let time = video.length.formattedAsPlaybackTime() {
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-08-02 21:10:22 +00:00
}
2021-08-01 23:01:24 +00:00
Spacer()
}
2021-10-22 23:04:03 +00:00
.lineLimit(1)
2021-08-02 21:10:22 +00:00
}
#endif
}
2021-07-27 22:40:04 +00:00
}
#endif
2021-07-27 22:40:04 +00:00
var verticalRow: some View {
2021-09-18 20:36:42 +00:00
VStack(alignment: .leading, spacing: 0) {
2021-08-01 23:01:24 +00:00
thumbnail
2021-07-27 22:40:04 +00:00
2021-09-25 08:18:22 +00:00
VStack(alignment: .leading, spacing: 0) {
2021-11-04 23:25:51 +00:00
Group {
VStack(alignment: .leading, spacing: 0) {
2021-11-05 18:23:28 +00:00
videoDetail(video.title, lineLimit: 2)
2021-11-04 23:25:51 +00:00
#if os(tvOS)
.frame(minHeight: 60, alignment: .top)
#elseif os(macOS)
.frame(minHeight: 32, alignment: .top)
#else
.frame(minHeight: 40, alignment: .top)
#endif
if !channelOnThumbnail {
Text(video.channel.name)
.fontWeight(.semibold)
.foregroundColor(.secondary)
.padding(.top, 4)
.padding(.bottom, 6)
}
}
2021-11-07 22:27:09 +00:00
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
2021-11-04 23:25:51 +00:00
}
2021-08-01 23:01:24 +00:00
#if os(tvOS)
2021-11-08 16:29:35 +00:00
.frame(minHeight: channelOnThumbnail ? 80 : 120, alignment: .top)
2021-08-02 21:10:22 +00:00
#elseif os(macOS)
2021-11-08 16:29:35 +00:00
.frame(minHeight: 35, alignment: .top)
2021-08-02 21:10:22 +00:00
#else
2021-11-08 16:29:35 +00:00
.frame(minHeight: 50, alignment: .top)
2021-08-01 23:01:24 +00:00
#endif
.padding(.bottom, 4)
2021-07-27 22:40:04 +00:00
2021-11-01 21:56:18 +00:00
HStack(spacing: 8) {
if let date = video.publishedDate {
2021-11-04 23:25:51 +00:00
HStack(spacing: 2) {
Image(systemName: "calendar")
Text(date)
.allowsTightening(true)
}
2021-11-01 21:56:18 +00:00
}
2021-09-18 20:36:42 +00:00
2021-11-01 21:56:18 +00:00
if video.views > 0 {
2021-11-04 23:25:51 +00:00
HStack(spacing: 2) {
Image(systemName: "eye")
Text(video.viewsCount!)
}
}
if let time = video.length.formattedAsPlaybackTime(), !timeOnThumbnail {
Spacer()
HStack(spacing: 2) {
Image(systemName: "clock")
Text(time)
}
2021-09-13 20:41:16 +00:00
}
2021-07-27 22:40:04 +00:00
}
2021-11-04 23:25:51 +00:00
.lineLimit(1)
2021-11-01 21:56:18 +00:00
.foregroundColor(.secondary)
2021-09-13 20:41:16 +00:00
.frame(minHeight: 30, alignment: .top)
2021-09-25 08:18:22 +00:00
#if os(tvOS)
.padding(.bottom, 10)
#endif
2021-07-27 22:40:04 +00:00
}
2021-09-18 20:36:42 +00:00
.padding(.top, 4)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .topLeading)
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 {
2021-11-04 23:25:51 +00:00
video.publishedDate != nil || video.views != 0 || (!timeOnThumbnail && !video.length.formattedAsPlaybackTime().isNil)
2021-07-27 22:40:04 +00:00
}
2021-08-01 23:01:24 +00:00
var thumbnail: some View {
ZStack(alignment: .leading) {
2021-11-05 20:53:43 +00:00
thumbnailImage
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()
2021-11-04 23:25:51 +00:00
if channelOnThumbnail {
DetailBadge(text: video.author, style: .prominent)
}
2021-07-27 22:40:04 +00:00
}
.padding(10)
Spacer()
HStack(alignment: .top) {
Spacer()
2021-11-04 23:25:51 +00:00
if timeOnThumbnail, let time = video.length.formattedAsPlaybackTime() {
2021-07-27 22:40:04 +00:00
DetailBadge(text: time, style: .prominent)
}
}
.padding(10)
}
2021-10-22 23:04:03 +00:00
.lineLimit(1)
2021-07-27 22:40:04 +00:00
}
}
2021-11-05 20:53:43 +00:00
var thumbnailImage: some View {
2021-10-24 22:26:25 +00:00
Group {
2021-11-05 20:53:43 +00:00
if let url = thumbnails.best(video) {
2021-10-24 22:26:25 +00:00
WebImage(url: url)
.resizable()
.placeholder {
Rectangle().fill(Color("PlaceholderColor"))
}
.retryOnAppear(false)
.onFailure { _ in
2021-11-05 22:44:52 +00:00
thumbnails.insertUnloadable(url)
2021-10-24 22:26:25 +00:00
}
.indicator(.activity)
#if os(tvOS)
.frame(minHeight: 320)
#endif
} else {
ZStack {
Color("PlaceholderColor")
Image(systemName: "exclamationmark.triangle")
}
.font(.system(size: 30))
}
2021-10-24 22:26:25 +00:00
}
.mask(RoundedRectangle(cornerRadius: 12))
.modifier(AspectRatioModifier())
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
2021-09-18 20:36:42 +00:00
struct AspectRatioModifier: ViewModifier {
@Environment(\.horizontalCells) private var horizontalCells
func body(content: Content) -> some View {
Group {
if horizontalCells {
content
} else {
content
.aspectRatio(1.777, contentMode: .fill)
}
}
}
}
2021-07-27 21:26:52 +00:00
}
2021-10-22 23:04:03 +00:00
struct VideoCell_Preview: PreviewProvider {
static var previews: some View {
Group {
VideoCell(video: Video.fixture)
}
2021-11-04 23:25:51 +00:00
#if os(macOS)
2021-11-08 16:29:35 +00:00
.frame(maxWidth: 300, maxHeight: 250)
2021-11-04 23:25:51 +00:00
#elseif os(iOS)
2021-11-08 16:29:35 +00:00
.frame(maxWidth: 300, maxHeight: 200)
2021-11-04 23:25:51 +00:00
#endif
.injectFixtureEnvironmentObjects()
}
}