Watch Now section, horizontal cells

This commit is contained in:
Arkadiusz Fal
2021-09-18 22:36:42 +02:00
parent 5e403c7f15
commit 8571822f23
21 changed files with 377 additions and 133 deletions

View File

@@ -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 }
}
}

View File

@@ -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"))

View File

@@ -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()

View File

@@ -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)

View File

@@ -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
}

View File

@@ -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

View File

@@ -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

View File

@@ -25,7 +25,7 @@ struct PlaylistsView: View {
currentPlaylist?.videos ?? []
}
var videosViewMaxHeight: CGFloat {
var videosViewMaxHeight: Double {
#if os(tvOS)
videos.isEmpty ? 150 : .infinity
#else

View File

@@ -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
}
}

View 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())
}
}

View File

@@ -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)

View File

@@ -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)

View 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()
}
}
}

View 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()
}
}
}

View 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)
}
}
}

View 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())
}
}