mirror of
https://github.com/yattee/yattee.git
synced 2025-11-25 10:48:17 +00:00
Watch Now section, horizontal cells
This commit is contained in:
@@ -5,9 +5,18 @@ private struct InNavigationViewKey: EnvironmentKey {
|
||||
static let defaultValue = false
|
||||
}
|
||||
|
||||
private struct HorizontalCellsKey: EnvironmentKey {
|
||||
static let defaultValue = false
|
||||
}
|
||||
|
||||
extension EnvironmentValues {
|
||||
var inNavigationView: Bool {
|
||||
get { self[InNavigationViewKey.self] }
|
||||
set { self[InNavigationViewKey.self] = newValue }
|
||||
}
|
||||
|
||||
var horizontalCells: Bool {
|
||||
get { self[HorizontalCellsKey.self] }
|
||||
set { self[HorizontalCellsKey.self] = newValue }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,6 +121,14 @@ struct AppSidebarNavigation: View {
|
||||
|
||||
var mainNavigationLinks: some View {
|
||||
Section("Videos") {
|
||||
NavigationLink(tag: TabSelection.watchNow, selection: selection) {
|
||||
WatchNowView()
|
||||
}
|
||||
label: {
|
||||
Label("Watch Now", systemImage: "play.circle")
|
||||
.accessibility(label: Text("Watch Now"))
|
||||
}
|
||||
|
||||
NavigationLink(destination: LazyView(SubscriptionsView()), tag: TabSelection.subscriptions, selection: selection) {
|
||||
Label("Subscriptions", systemImage: "star.circle.fill")
|
||||
.accessibility(label: Text("Subscriptions"))
|
||||
|
||||
@@ -9,6 +9,15 @@ struct AppTabNavigation: View {
|
||||
|
||||
var body: some View {
|
||||
TabView(selection: $navigationState.tabSelection) {
|
||||
NavigationView {
|
||||
WatchNowView()
|
||||
}
|
||||
.tabItem {
|
||||
Label("Watch Now", systemImage: "play.circle")
|
||||
.accessibility(label: Text("Subscriptions"))
|
||||
}
|
||||
.tag(TabSelection.watchNow)
|
||||
|
||||
NavigationView {
|
||||
SubscriptionsView()
|
||||
}
|
||||
@@ -18,14 +27,16 @@ struct AppTabNavigation: View {
|
||||
}
|
||||
.tag(TabSelection.subscriptions)
|
||||
|
||||
NavigationView {
|
||||
PopularView()
|
||||
}
|
||||
.tabItem {
|
||||
Label("Popular", systemImage: "chart.bar")
|
||||
.accessibility(label: Text("Popular"))
|
||||
}
|
||||
.tag(TabSelection.popular)
|
||||
// TODO: reenable with settings
|
||||
// ============================
|
||||
// NavigationView {
|
||||
// PopularView()
|
||||
// }
|
||||
// .tabItem {
|
||||
// Label("Popular", systemImage: "chart.bar")
|
||||
// .accessibility(label: Text("Popular"))
|
||||
// }
|
||||
// .tag(TabSelection.popular)
|
||||
|
||||
NavigationView {
|
||||
TrendingView()
|
||||
|
||||
@@ -64,7 +64,7 @@ struct PlaybackBar: View {
|
||||
|
||||
var closeButton: some View {
|
||||
Button(action: { dismiss() }) {
|
||||
Image(systemName: "chevron.down.circle.fill")
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
}
|
||||
.accessibilityLabel(Text("Close"))
|
||||
.buttonStyle(.borderless)
|
||||
|
||||
@@ -3,15 +3,15 @@ import SwiftUI
|
||||
|
||||
struct VideoDetailsPaddingModifier: ViewModifier {
|
||||
let geometry: GeometryProxy
|
||||
let aspectRatio: CGFloat?
|
||||
let minimumHeightLeft: CGFloat
|
||||
let additionalPadding: CGFloat
|
||||
let aspectRatio: Double?
|
||||
let minimumHeightLeft: Double
|
||||
let additionalPadding: Double
|
||||
|
||||
init(
|
||||
geometry: GeometryProxy,
|
||||
aspectRatio: CGFloat? = nil,
|
||||
minimumHeightLeft: CGFloat? = nil,
|
||||
additionalPadding: CGFloat = 35.00
|
||||
aspectRatio: Double? = nil,
|
||||
minimumHeightLeft: Double? = nil,
|
||||
additionalPadding: Double = 35.00
|
||||
) {
|
||||
self.geometry = geometry
|
||||
self.aspectRatio = aspectRatio ?? VideoPlayerView.defaultAspectRatio
|
||||
@@ -19,7 +19,7 @@ struct VideoDetailsPaddingModifier: ViewModifier {
|
||||
self.additionalPadding = additionalPadding
|
||||
}
|
||||
|
||||
var usedAspectRatio: CGFloat {
|
||||
var usedAspectRatio: Double {
|
||||
guard aspectRatio != nil else {
|
||||
return VideoPlayerView.defaultAspectRatio
|
||||
}
|
||||
@@ -27,11 +27,11 @@ struct VideoDetailsPaddingModifier: ViewModifier {
|
||||
return [aspectRatio!, VideoPlayerView.defaultAspectRatio].min()!
|
||||
}
|
||||
|
||||
var playerHeight: CGFloat {
|
||||
var playerHeight: Double {
|
||||
[geometry.size.width / usedAspectRatio, geometry.size.height - minimumHeightLeft].min()!
|
||||
}
|
||||
|
||||
var topPadding: CGFloat {
|
||||
var topPadding: Double {
|
||||
playerHeight + additionalPadding
|
||||
}
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ import SwiftUI
|
||||
|
||||
struct VideoPlayerSizeModifier: ViewModifier {
|
||||
let geometry: GeometryProxy
|
||||
let aspectRatio: CGFloat?
|
||||
let minimumHeightLeft: CGFloat
|
||||
let aspectRatio: Double?
|
||||
let minimumHeightLeft: Double
|
||||
|
||||
#if os(iOS)
|
||||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||||
@@ -12,8 +12,8 @@ struct VideoPlayerSizeModifier: ViewModifier {
|
||||
|
||||
init(
|
||||
geometry: GeometryProxy,
|
||||
aspectRatio: CGFloat? = nil,
|
||||
minimumHeightLeft: CGFloat? = nil
|
||||
aspectRatio: Double? = nil,
|
||||
minimumHeightLeft: Double? = nil
|
||||
) {
|
||||
self.geometry = geometry
|
||||
self.aspectRatio = aspectRatio ?? VideoPlayerView.defaultAspectRatio
|
||||
@@ -27,7 +27,7 @@ struct VideoPlayerSizeModifier: ViewModifier {
|
||||
.edgesIgnoringSafeArea(edgesIgnoringSafeArea)
|
||||
}
|
||||
|
||||
var usedAspectRatio: CGFloat {
|
||||
var usedAspectRatio: Double {
|
||||
guard aspectRatio != nil else {
|
||||
return VideoPlayerView.defaultAspectRatio
|
||||
}
|
||||
@@ -50,7 +50,7 @@ struct VideoPlayerSizeModifier: ViewModifier {
|
||||
#endif
|
||||
}
|
||||
|
||||
var maxHeight: CGFloat {
|
||||
var maxHeight: Double {
|
||||
#if os(iOS)
|
||||
verticalSizeClass == .regular ? geometry.size.height - minimumHeightLeft : .infinity
|
||||
#else
|
||||
|
||||
@@ -3,8 +3,8 @@ import Siesta
|
||||
import SwiftUI
|
||||
|
||||
struct VideoPlayerView: View {
|
||||
static let defaultAspectRatio: CGFloat = 1.77777778
|
||||
static var defaultMinimumHeightLeft: CGFloat {
|
||||
static let defaultAspectRatio: Double = 1.77777778
|
||||
static var defaultMinimumHeightLeft: Double {
|
||||
#if os(macOS)
|
||||
300
|
||||
#else
|
||||
|
||||
@@ -25,7 +25,7 @@ struct PlaylistsView: View {
|
||||
currentPlaylist?.videos ?? []
|
||||
}
|
||||
|
||||
var videosViewMaxHeight: CGFloat {
|
||||
var videosViewMaxHeight: Double {
|
||||
#if os(tvOS)
|
||||
videos.isEmpty ? 150 : .infinity
|
||||
#else
|
||||
|
||||
@@ -9,6 +9,7 @@ struct VideoView: View {
|
||||
#endif
|
||||
|
||||
@Environment(\.inNavigationView) private var inNavigationView
|
||||
@Environment(\.horizontalCells) private var horizontalCells
|
||||
|
||||
var video: Video
|
||||
var layout: ListingLayout
|
||||
@@ -34,7 +35,7 @@ struct VideoView: View {
|
||||
VStack {
|
||||
if layout == .cells {
|
||||
#if os(iOS)
|
||||
if verticalSizeClass == .compact {
|
||||
if verticalSizeClass == .compact, !horizontalCells {
|
||||
horizontalRow
|
||||
.padding(.vertical, 4)
|
||||
} else {
|
||||
@@ -64,14 +65,31 @@ struct VideoView: View {
|
||||
.frame(maxWidth: 320)
|
||||
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
videoDetail(video.title)
|
||||
videoDetail(video.title, lineLimit: 5)
|
||||
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
videoDetail(video.author)
|
||||
|
||||
Spacer()
|
||||
if additionalDetailsAvailable {
|
||||
Spacer()
|
||||
|
||||
additionalDetails
|
||||
HStack {
|
||||
if let date = video.publishedDate {
|
||||
VStack {
|
||||
Image(systemName: "calendar")
|
||||
Text(date)
|
||||
}
|
||||
}
|
||||
|
||||
if video.views != 0 {
|
||||
VStack {
|
||||
Image(systemName: "eye")
|
||||
Text(video.viewsCount!)
|
||||
}
|
||||
}
|
||||
}
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.frame(minHeight: 180)
|
||||
@@ -101,11 +119,10 @@ struct VideoView: View {
|
||||
}
|
||||
#endif
|
||||
}
|
||||
.padding(.trailing)
|
||||
}
|
||||
|
||||
var verticalRow: some View {
|
||||
VStack(alignment: .leading) {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
thumbnail
|
||||
|
||||
VStack(alignment: .leading) {
|
||||
@@ -121,7 +138,18 @@ struct VideoView: View {
|
||||
|
||||
Group {
|
||||
if additionalDetailsAvailable {
|
||||
additionalDetails
|
||||
HStack(spacing: 8) {
|
||||
if let date = video.publishedDate {
|
||||
Image(systemName: "calendar")
|
||||
Text(date)
|
||||
}
|
||||
|
||||
if video.views != 0 {
|
||||
Image(systemName: "eye")
|
||||
Text(video.viewsCount!)
|
||||
}
|
||||
}
|
||||
.foregroundColor(.secondary)
|
||||
} else {
|
||||
Spacer()
|
||||
}
|
||||
@@ -129,6 +157,8 @@ struct VideoView: View {
|
||||
.frame(minHeight: 30, alignment: .top)
|
||||
.padding(.bottom, 10)
|
||||
}
|
||||
.padding(.top, 4)
|
||||
.frame(minWidth: 0, maxWidth: .infinity, alignment: .topLeading)
|
||||
#if os(tvOS)
|
||||
.padding(.horizontal, 8)
|
||||
#endif
|
||||
@@ -139,21 +169,6 @@ struct VideoView: View {
|
||||
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!)
|
||||
}
|
||||
}
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
var thumbnail: some View {
|
||||
ZStack(alignment: .leading) {
|
||||
thumbnailImage(quality: .maxresdefault)
|
||||
@@ -184,8 +199,6 @@ struct VideoView: View {
|
||||
.padding(10)
|
||||
}
|
||||
}
|
||||
.padding([.leading, .top, .trailing], 4)
|
||||
.frame(maxWidth: 600)
|
||||
}
|
||||
|
||||
func thumbnailImage(quality: Thumbnail.Quality) -> some View {
|
||||
@@ -196,19 +209,17 @@ struct VideoView: View {
|
||||
.resizable()
|
||||
} placeholder: {
|
||||
ProgressView()
|
||||
.aspectRatio(contentMode: .fill)
|
||||
}
|
||||
} else {
|
||||
Image(systemName: "exclamationmark.square")
|
||||
}
|
||||
}
|
||||
.frame(minWidth: 300, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity)
|
||||
.background(.gray)
|
||||
.mask(RoundedRectangle(cornerRadius: 12))
|
||||
#if os(tvOS)
|
||||
.frame(minHeight: layout == .cells ? 320 : 200)
|
||||
#endif
|
||||
.aspectRatio(1.777, contentMode: .fit)
|
||||
.modifier(AspectRatioModifier())
|
||||
}
|
||||
|
||||
func videoDetail(_ text: String, lineLimit: Int = 1) -> some View {
|
||||
@@ -218,6 +229,21 @@ struct VideoView: View {
|
||||
.truncationMode(.middle)
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct ButtonStyleModifier: ViewModifier {
|
||||
var layout: ListingLayout
|
||||
|
||||
@@ -236,41 +262,3 @@ struct VideoView: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct VideoListRowPreview: PreviewProvider {
|
||||
static var previews: some View {
|
||||
#if os(tvOS)
|
||||
List {
|
||||
ForEach(Video.allFixtures) { video in
|
||||
VideoView(video: video, layout: .list)
|
||||
}
|
||||
}
|
||||
.listStyle(.grouped)
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
61
Shared/Videos/VideosCellsHorizontal.swift
Normal file
61
Shared/Videos/VideosCellsHorizontal.swift
Normal file
@@ -0,0 +1,61 @@
|
||||
import Defaults
|
||||
import SwiftUI
|
||||
|
||||
struct VideosCellsHorizontal: View {
|
||||
#if os(iOS)
|
||||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||||
#endif
|
||||
|
||||
var videos = [Video]()
|
||||
|
||||
var body: some View {
|
||||
ScrollViewReader { scrollView in
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
LazyHStack(spacing: 20) {
|
||||
ForEach(videos) { video in
|
||||
VideoView(video: video, layout: .cells)
|
||||
.environment(\.horizontalCells, true)
|
||||
#if os(tvOS)
|
||||
.frame(width: 580)
|
||||
.padding(.trailing, 20)
|
||||
.padding(.bottom, 40)
|
||||
#else
|
||||
.frame(maxWidth: 300)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
#if os(tvOS)
|
||||
.padding(.horizontal, 40)
|
||||
.padding(.vertical, 30)
|
||||
#else
|
||||
.padding(.horizontal, 15)
|
||||
.padding(.vertical, 20)
|
||||
#endif
|
||||
}
|
||||
.onChange(of: videos) { [videos] newVideos in
|
||||
#if !os(tvOS)
|
||||
guard !videos.isEmpty, let video = newVideos.first else {
|
||||
return
|
||||
}
|
||||
|
||||
scrollView.scrollTo(video.id, anchor: .leading)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
#if os(tvOS)
|
||||
.frame(height: 560)
|
||||
#else
|
||||
.frame(height: 320)
|
||||
#endif
|
||||
|
||||
.edgesIgnoringSafeArea(.horizontal)
|
||||
}
|
||||
}
|
||||
|
||||
struct VideoCellsHorizontal_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
VideosCellsHorizontal(videos: Video.allFixtures)
|
||||
.environmentObject(NavigationState())
|
||||
.environmentObject(Subscriptions())
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import Defaults
|
||||
import SwiftUI
|
||||
|
||||
struct VideosCellsView: View {
|
||||
struct VideosCellsVertical: View {
|
||||
#if os(iOS)
|
||||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||||
#endif
|
||||
@@ -49,7 +49,7 @@ struct VideosCellsView: View {
|
||||
[GridItem(.adaptive(minimum: adaptiveGridItemMinimumSize))]
|
||||
}
|
||||
|
||||
var adaptiveGridItemMinimumSize: CGFloat {
|
||||
var adaptiveGridItemMinimumSize: Double {
|
||||
#if os(iOS)
|
||||
return verticalSizeClass == .regular ? 320 : 800
|
||||
#elseif os(tvOS)
|
||||
@@ -14,12 +14,12 @@ struct VideosView: View {
|
||||
VStack {
|
||||
#if os(tvOS)
|
||||
if layout == .cells {
|
||||
VideosCellsView(videos: videos)
|
||||
VideosCellsVertical(videos: videos)
|
||||
} else {
|
||||
VideosListView(videos: videos)
|
||||
}
|
||||
#else
|
||||
VideosCellsView(videos: videos)
|
||||
VideosCellsVertical(videos: videos)
|
||||
#endif
|
||||
}
|
||||
#if os(macOS)
|
||||
|
||||
25
Shared/Watch Now/WatchNowPlaylistSection.swift
Normal file
25
Shared/Watch Now/WatchNowPlaylistSection.swift
Normal file
@@ -0,0 +1,25 @@
|
||||
import Siesta
|
||||
import SwiftUI
|
||||
|
||||
struct WatchNowPlaylistSection: View {
|
||||
@ObservedObject private var store = Store<Playlist>()
|
||||
|
||||
let id: String
|
||||
|
||||
var resource: Resource {
|
||||
InvidiousAPI.shared.playlist(id)
|
||||
}
|
||||
|
||||
init(id: String) {
|
||||
self.id = id
|
||||
|
||||
resource.addObserver(store)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
WatchNowSectionBody(label: store.item?.title ?? "Loading", videos: store.item?.videos ?? [])
|
||||
.onAppear {
|
||||
resource.loadIfNeeded()
|
||||
}
|
||||
}
|
||||
}
|
||||
23
Shared/Watch Now/WatchNowSection.swift
Normal file
23
Shared/Watch Now/WatchNowSection.swift
Normal file
@@ -0,0 +1,23 @@
|
||||
import Siesta
|
||||
import SwiftUI
|
||||
|
||||
struct WatchNowSection: View {
|
||||
@ObservedObject private var store = Store<[Video]>()
|
||||
|
||||
let resource: Resource
|
||||
let label: String
|
||||
|
||||
init(resource: Resource, label: String) {
|
||||
self.resource = resource
|
||||
self.label = label
|
||||
|
||||
self.resource.addObserver(store)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
WatchNowSectionBody(label: label, videos: store.collection)
|
||||
.onAppear {
|
||||
resource.loadIfNeeded()
|
||||
}
|
||||
}
|
||||
}
|
||||
21
Shared/Watch Now/WatchNowSectionBody.swift
Normal file
21
Shared/Watch Now/WatchNowSectionBody.swift
Normal file
@@ -0,0 +1,21 @@
|
||||
import SwiftUI
|
||||
|
||||
struct WatchNowSectionBody: View {
|
||||
let label: String
|
||||
let videos: [Video]
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(label)
|
||||
.font(.title3.bold())
|
||||
.foregroundColor(.secondary)
|
||||
#if os(tvOS)
|
||||
.padding(.leading, 40)
|
||||
#else
|
||||
.padding(.leading, 15)
|
||||
#endif
|
||||
|
||||
VideosCellsHorizontal(videos: videos)
|
||||
}
|
||||
}
|
||||
}
|
||||
38
Shared/Watch Now/WatchNowView.swift
Normal file
38
Shared/Watch Now/WatchNowView.swift
Normal file
@@ -0,0 +1,38 @@
|
||||
import Siesta
|
||||
import SwiftUI
|
||||
|
||||
struct WatchNowView: View {
|
||||
var body: some View {
|
||||
ScrollView(.vertical, showsIndicators: false) {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
WatchNowSection(resource: InvidiousAPI.shared.feed, label: "Subscriptions")
|
||||
WatchNowSection(resource: InvidiousAPI.shared.popular, label: "Popular")
|
||||
WatchNowSection(resource: InvidiousAPI.shared.trending(category: .default, country: .pl), label: "Trending")
|
||||
WatchNowSection(resource: InvidiousAPI.shared.trending(category: .movies, country: .pl), label: "Movies")
|
||||
WatchNowSection(resource: InvidiousAPI.shared.trending(category: .music, country: .pl), label: "Music")
|
||||
|
||||
// TODO: adding sections to view
|
||||
// ===================
|
||||
// WatchNowPlaylistSection(id: "IVPLmRFYLGYZpq61SpujNw3EKbzzGNvoDmH")
|
||||
// WatchNowSection(resource: InvidiousAPI.shared.channelVideos("UCBJycsmduvYEL83R_U4JriQ"), label: "MKBHD")
|
||||
}
|
||||
}
|
||||
#if os(tvOS)
|
||||
.edgesIgnoringSafeArea(.horizontal)
|
||||
#else
|
||||
.navigationTitle("Watch Now")
|
||||
#endif
|
||||
#if os(macOS)
|
||||
.background()
|
||||
.frame(minWidth: 360)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
|
||||
struct WatchNowView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
WatchNowView()
|
||||
.environmentObject(Subscriptions())
|
||||
.environmentObject(NavigationState())
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user