import CoreMedia import Defaults import SDWebImageSwiftUI import SwiftUI struct VideoCell: View { private var video: Video @Environment(\.horizontalCells) private var horizontalCells @Environment(\.inChannelView) private var inChannelView @Environment(\.navigationStyle) private var navigationStyle #if os(iOS) @Environment(\.verticalSizeClass) private var verticalSizeClass #endif @EnvironmentObject private var accounts @EnvironmentObject private var recents @EnvironmentObject private var thumbnails @Default(.channelOnThumbnail) private var channelOnThumbnail @Default(.timeOnThumbnail) private var timeOnThumbnail @Default(.roundedThumbnails) private var roundedThumbnails @Default(.saveHistory) private var saveHistory @Default(.showWatchingProgress) private var showWatchingProgress @Default(.watchedVideoStyle) private var watchedVideoStyle @Default(.watchedVideoBadgeColor) private var watchedVideoBadgeColor @Default(.watchedVideoPlayNowBehavior) private var watchedVideoPlayNowBehavior private var navigation: NavigationModel { .shared } private var player: PlayerModel { .shared } @FetchRequest private var watchRequest: FetchedResults init(video: Video) { self.video = video _watchRequest = video.watchFetchRequest } var body: some View { Button(action: playAction) { content #if os(tvOS) .frame(width: 580, height: 470) #endif } .opacity(contentOpacity) #if os(tvOS) .buttonStyle(.card) #else .buttonStyle(.plain) #endif .contentShape(RoundedRectangle(cornerRadius: thumbnailRoundingCornerRadius)) .contextMenu { VideoContextMenuView(video: video) .environmentObject(accounts) } } private var thumbnailRoundingCornerRadius: Double { #if os(tvOS) return Double(12) #else return Double(roundedThumbnails ? 12 : 0) #endif } private func playAction() { DispatchQueue.main.async { guard video.videoID != Video.fixtureID else { return } if player.musicMode { player.toggleMusicMode() } if watchingNow { if !player.playingInPictureInPicture { player.show() } if !playNowContinues { player.backend.seek(to: .zero, seekType: .userInteracted) } player.play() return } var playAt: CMTime? if saveHistory, playNowContinues, !watch.isNil, !watch!.finished { playAt = .secondsInDefaultTimescale(watch!.stoppedAt) } player.avPlayerBackend.startPictureInPictureOnPlay = player.playingInPictureInPicture player.play(video, at: playAt) } } private var playNowContinues: Bool { watchedVideoPlayNowBehavior == .continue } private var watch: Watch? { watchRequest.first } private var finished: Bool { watch?.finished ?? false } private var watchingNow: Bool { player.currentVideo == video } private var content: some View { VStack { #if os(iOS) if verticalSizeClass == .compact, !horizontalCells { horizontalRow .padding(.vertical, 4) } else { verticalRow } #else verticalRow #endif } #if os(macOS) .background(Color.secondaryBackground) #endif } private var contentOpacity: Double { guard saveHistory, !watch.isNil, watchedVideoStyle == .decreasedOpacity || watchedVideoStyle == .both else { return 1 } return watch!.finished ? 0.5 : 1 } #if os(iOS) private var horizontalRow: some View { HStack(alignment: .top, spacing: 2) { Section { #if os(tvOS) thumbnailImage #else thumbnail #endif } .frame(maxWidth: 320) VStack(alignment: .leading, spacing: 0) { videoDetail(video.title, lineLimit: 5) .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) if !channelOnThumbnail, !inChannelView { channelButton(badge: false) } if additionalDetailsAvailable { Spacer() HStack(spacing: 15) { if let date = video.publishedDate { VStack { Image(systemName: "calendar") .frame(height: 15) Text(date) } } if video.views > 0 { VStack { Image(systemName: "eye") .frame(height: 15) Text(video.viewsCount!) } } if !timeOnThumbnail, let time = video.length.formattedAsPlaybackTime() { VStack { Image(systemName: "clock") .frame(height: 15) Text(time) } } } .foregroundColor(.secondary) } } .padding() .frame(minHeight: 180) #if os(tvOS) if let time = video.length.formattedAsPlaybackTime() || video.live || video.upcoming { 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) } Spacer() } .lineLimit(1) } #endif } } #endif private var verticalRow: some View { VStack(alignment: .leading, spacing: 0) { thumbnail VStack(alignment: .leading, spacing: 0) { Group { VStack(alignment: .leading, spacing: 0) { videoDetail(video.title, lineLimit: 2) #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, !inChannelView { channelButton(badge: false) .padding(.top, 4) .padding(.bottom, 6) } } .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) } #if os(tvOS) .frame(minHeight: channelOnThumbnail ? 80 : 120, alignment: .top) #elseif os(macOS) .frame(minHeight: 35, alignment: .top) #else .frame(minHeight: 50, alignment: .top) #endif .padding(.bottom, 4) HStack(spacing: 8) { if let date = video.publishedDate { HStack(spacing: 2) { Text(date) .allowsTightening(true) } } if video.views > 0 { HStack(spacing: 2) { Image(systemName: "eye") Text(video.viewsCount!) } } if let time = time, !timeOnThumbnail { Spacer() HStack(spacing: 2) { Text(time) } } } .lineLimit(1) .foregroundColor(.secondary) .frame(maxWidth: .infinity, minHeight: 30, alignment: .topLeading) #if os(tvOS) .padding(.bottom, 10) #endif } .padding(.top, 4) .frame(minWidth: 0, maxWidth: .infinity, alignment: .topLeading) #if os(tvOS) .padding(.horizontal, horizontalCells ? 10 : 20) #endif } } private func channelButton(badge: Bool = true) -> some View { Button { guard !inChannelView else { return } NavigationModel.openChannel( video.channel, player: player, recents: recents, navigation: navigation, navigationStyle: navigationStyle ) } label: { if badge { DetailBadge(text: video.author, style: .prominent) .foregroundColor(.primary) } else { Text(video.channel.name) .fontWeight(.semibold) .foregroundColor(.secondary) } } #if os(tvOS) .buttonStyle(.card) #else .buttonStyle(.plain) #endif .help("\(video.channel.name) Channel") } private var additionalDetailsAvailable: Bool { video.publishedDate != nil || video.views != 0 || (!timeOnThumbnail && !video.length.formattedAsPlaybackTime().isNil) } private var thumbnail: some View { ZStack(alignment: .leading) { ZStack(alignment: .bottomLeading) { thumbnailImage if saveHistory, showWatchingProgress, watch?.progress ?? 0 > 0 { ProgressView(value: watch!.progress, total: 100) .progressViewStyle(LinearProgressViewStyle(tint: Color("AppRedColor"))) #if os(tvOS) .padding(.horizontal, 16) #else .padding(.horizontal, 10) #endif #if os(macOS) .offset(x: 0, y: 4) #else .offset(x: 0, y: -3) #endif } } VStack { HStack(alignment: .top) { if video.live { DetailBadge(text: "Live", style: .outstanding) } else if video.upcoming { DetailBadge(text: "Upcoming", style: .informational) } Spacer() if channelOnThumbnail, !inChannelView { channelButton() } } #if os(tvOS) .padding(16) #else .padding(10) #endif Spacer() HStack(alignment: .center) { 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()) #if os(tvOS) .font(.system(size: 40)) #else .font(.system(size: 30)) #endif } Spacer() if timeOnThumbnail, !video.live, let time = time { DetailBadge(text: time, style: .prominent) } } #if os(tvOS) .padding(16) #else .padding(10) #endif } .lineLimit(1) } } private var thumbnailImage: some View { Group { let url = thumbnails.best(video) if #available(iOS 15, macOS 12, *) { AsyncImage(url: url) { image in image .resizable() } placeholder: { Rectangle().foregroundColor(Color("PlaceholderColor")) } #if os(tvOS) .frame(minHeight: 320) #endif } else { WebImage(url: url) .resizable() .placeholder { Rectangle().foregroundColor(Color("PlaceholderColor")) } .retryOnAppear(true) .onFailure { _ in guard let url = url else { return } thumbnails.insertUnloadable(url) } #if os(tvOS) .frame(minHeight: 320) #endif } } .mask(RoundedRectangle(cornerRadius: thumbnailRoundingCornerRadius)) .modifier(AspectRatioModifier()) } private var time: String? { guard var videoTime = video.length.formattedAsPlaybackTime() else { return nil } if !saveHistory || !showWatchingProgress || watch?.finished ?? false { return videoTime } if let stoppedAt = watch?.stoppedAt, stoppedAt.isFinite, let stoppedAtFormatted = stoppedAt.formattedAsPlaybackTime() { if (watch?.videoDuration ?? 0) > 0 { videoTime = watch!.videoDuration.formattedAsPlaybackTime() ?? "?" } return "\(stoppedAtFormatted) / \(videoTime)" } return videoTime } private func videoDetail(_ text: String, lineLimit: Int = 1) -> some View { Text(text) .fontWeight(.bold) .lineLimit(lineLimit) .truncationMode(.middle) } struct AspectRatioModifier: ViewModifier { @Environment(\.horizontalCells) private var horizontalCells func body(content: Content) -> some View { Group { if horizontalCells { content } else { content .aspectRatio( VideoPlayerView.defaultAspectRatio, contentMode: .fill ) } } } } } struct VideoCell_Preview: PreviewProvider { static var previews: some View { Group { VideoCell(video: Video.fixture) } #if os(macOS) .frame(maxWidth: 300, maxHeight: 250) #elseif os(iOS) .frame(maxWidth: 300, maxHeight: 200) #endif .injectFixtureEnvironmentObjects() } }