mirror of
https://github.com/yattee/yattee.git
synced 2024-12-22 13:33:42 +00:00
Improve videos layout
This commit is contained in:
parent
9c5e427c7b
commit
36f94ffd72
@ -10,11 +10,7 @@ struct VideoContextMenuView: View {
|
||||
@Default(.videoIDToAddToPlaylist) var videoIDToAddToPlaylist
|
||||
|
||||
var body: some View {
|
||||
if navigationState.tabSelection == .channel {
|
||||
closeChannelButton(from: video)
|
||||
} else {
|
||||
openChannelButton(from: video)
|
||||
}
|
||||
openChannelButton(from: video)
|
||||
|
||||
openVideoDetailsButton
|
||||
|
||||
|
@ -405,8 +405,8 @@
|
||||
37AAF29F26741C97007FC770 /* SubscriptionsView.swift */,
|
||||
3705B17F267B4DFB00704544 /* TrendingCountrySelection.swift */,
|
||||
3714166E267A8ACC006CA35D /* TrendingView.swift */,
|
||||
37F4AE7126828F0900BD60EA /* VideosCellsView.swift */,
|
||||
37BE0BCE26A0E2D50092E2DB /* VideoPlayerView.swift */,
|
||||
37F4AE7126828F0900BD60EA /* VideosCellsView.swift */,
|
||||
37AAF29926740A01007FC770 /* VideosListView.swift */,
|
||||
37D4B18B26717B3800C925CA /* VideoView.swift */,
|
||||
37754C9C26B7500000DBD602 /* VideosView.swift */,
|
||||
|
@ -13,28 +13,41 @@ struct VideoView: View {
|
||||
|
||||
var body: some View {
|
||||
Button(action: { navigationState.playVideo(video) }) {
|
||||
if layout == .cells {
|
||||
#if os(iOS)
|
||||
if verticalSizeClass == .compact {
|
||||
horizontalRow
|
||||
.padding(.vertical, 4)
|
||||
} else {
|
||||
VStack {
|
||||
if layout == .cells {
|
||||
#if os(iOS)
|
||||
if verticalSizeClass == .compact {
|
||||
horizontalRow
|
||||
.padding(.vertical, 4)
|
||||
} else {
|
||||
verticalRow
|
||||
}
|
||||
#else
|
||||
verticalRow
|
||||
}
|
||||
#else
|
||||
verticalRow
|
||||
#endif
|
||||
} else {
|
||||
horizontalRow
|
||||
#endif
|
||||
} else {
|
||||
horizontalRow
|
||||
}
|
||||
}
|
||||
#if os(macOS)
|
||||
.background()
|
||||
#endif
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.modifier(ButtonStyleModifier(layout: layout))
|
||||
.contentShape(RoundedRectangle(cornerRadius: 12))
|
||||
.contextMenu { VideoContextMenuView(video: video) }
|
||||
}
|
||||
|
||||
var horizontalRow: some View {
|
||||
HStack(alignment: .top, spacing: 2) {
|
||||
thumbnailImage(quality: .medium)
|
||||
.frame(maxWidth: 320)
|
||||
Section {
|
||||
#if os(tvOS)
|
||||
thumbnailImage(quality: .medium)
|
||||
#else
|
||||
thumbnail
|
||||
#endif
|
||||
}
|
||||
.frame(maxWidth: 320)
|
||||
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
videoDetail(video.title)
|
||||
@ -49,28 +62,30 @@ struct VideoView: View {
|
||||
.padding()
|
||||
.frame(minHeight: 180)
|
||||
|
||||
if video.playTime != nil || video.live || video.upcoming {
|
||||
Spacer()
|
||||
|
||||
VStack(alignment: .center) {
|
||||
#if os(tvOS)
|
||||
if video.playTime != nil || video.live || video.upcoming {
|
||||
Spacer()
|
||||
|
||||
if let time = video.playTime {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: "clock")
|
||||
Text(time)
|
||||
.fontWeight(.bold)
|
||||
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)
|
||||
}
|
||||
.foregroundColor(.secondary)
|
||||
} else if video.live {
|
||||
DetailBadge(text: "Live", style: .outstanding)
|
||||
} else if video.upcoming {
|
||||
DetailBadge(text: "Upcoming", style: .informational)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
#endif
|
||||
}
|
||||
.padding(.trailing)
|
||||
}
|
||||
@ -81,10 +96,14 @@ struct VideoView: View {
|
||||
|
||||
VStack(alignment: .leading) {
|
||||
videoDetail(video.title, lineLimit: additionalDetailsAvailable ? 2 : 3)
|
||||
.frame(minHeight: 80, alignment: .top)
|
||||
#if os(tvOS)
|
||||
.padding(.bottom)
|
||||
.frame(minHeight: additionalDetailsAvailable ? 80 : 120, alignment: .top)
|
||||
#elseif os(macOS)
|
||||
.frame(minHeight: 30, alignment: .top)
|
||||
#else
|
||||
.frame(minHeight: 50, alignment: .top)
|
||||
#endif
|
||||
.padding(.bottom)
|
||||
|
||||
if additionalDetailsAvailable {
|
||||
additionalDetails
|
||||
@ -94,8 +113,7 @@ struct VideoView: View {
|
||||
}
|
||||
}
|
||||
#if os(tvOS)
|
||||
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 150, alignment: .leading)
|
||||
.padding(10)
|
||||
.padding(.horizontal, 8)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
@ -169,6 +187,9 @@ struct VideoView: View {
|
||||
}
|
||||
}
|
||||
.frame(minWidth: 320, maxWidth: .infinity, minHeight: 180, maxHeight: .infinity)
|
||||
#if os(tvOS)
|
||||
.frame(minHeight: 320)
|
||||
#endif
|
||||
.aspectRatio(1.777, contentMode: .fit)
|
||||
}
|
||||
|
||||
@ -178,6 +199,24 @@ struct VideoView: View {
|
||||
.lineLimit(lineLimit)
|
||||
.truncationMode(.middle)
|
||||
}
|
||||
|
||||
struct ButtonStyleModifier: ViewModifier {
|
||||
var layout: ListingLayout
|
||||
|
||||
func body(content: Content) -> some View {
|
||||
Section {
|
||||
#if os(tvOS)
|
||||
if layout == .cells {
|
||||
content.buttonStyle(.plain)
|
||||
} else {
|
||||
content
|
||||
}
|
||||
#else
|
||||
content.buttonStyle(.plain)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct VideoListRowPreview: PreviewProvider {
|
||||
|
@ -14,7 +14,9 @@ struct VideosCellsView: View {
|
||||
LazyVGrid(columns: items, alignment: .center) {
|
||||
ForEach(videos) { video in
|
||||
VideoView(video: video, layout: .cells)
|
||||
.contextMenu { VideoContextMenuView(video: video) }
|
||||
#if os(tvOS)
|
||||
.padding(.horizontal)
|
||||
#endif
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
@ -26,22 +28,30 @@ struct VideosCellsView: View {
|
||||
|
||||
scrollView.scrollTo(video.id, anchor: .top)
|
||||
}
|
||||
#if os(tvOS)
|
||||
.padding(.horizontal, 10)
|
||||
#endif
|
||||
}
|
||||
.edgesIgnoringSafeArea(.horizontal)
|
||||
}
|
||||
|
||||
var items: [GridItem] {
|
||||
[GridItem(.adaptive(minimum: adaptiveGridItemMinimumSize))]
|
||||
#if os(tvOS)
|
||||
videos.count < 3 ? Array(repeating: GridItem(.fixed(540)), count: videos.count) : adaptiveItem
|
||||
#else
|
||||
adaptiveItem
|
||||
#endif
|
||||
}
|
||||
|
||||
var gridColumns: Int {
|
||||
videos.count < 3 ? videos.count : 3
|
||||
var adaptiveItem: [GridItem] {
|
||||
[GridItem(.adaptive(minimum: adaptiveGridItemMinimumSize))]
|
||||
}
|
||||
|
||||
var adaptiveGridItemMinimumSize: CGFloat {
|
||||
#if os(iOS)
|
||||
return verticalSizeClass == .regular ? 340 : 800
|
||||
#elseif os(tvOS)
|
||||
return 560
|
||||
return 540
|
||||
#else
|
||||
return 340
|
||||
#endif
|
||||
|
@ -10,8 +10,6 @@ struct VideosListView: View {
|
||||
List {
|
||||
ForEach(videos) { video in
|
||||
VideoView(video: video, layout: .list)
|
||||
.frame(maxHeight: 200)
|
||||
.contextMenu { VideoContextMenuView(video: video) }
|
||||
.listRowInsets(EdgeInsets())
|
||||
}
|
||||
.onChange(of: videos) { videos in
|
||||
|
@ -24,5 +24,8 @@ struct VideosView: View {
|
||||
VideosCellsView(videos: videos)
|
||||
#endif
|
||||
}
|
||||
#if os(macOS)
|
||||
.background()
|
||||
#endif
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user