mirror of
https://github.com/yattee/yattee.git
synced 2025-08-05 18:24:02 +00:00
Comments improvements
* Show text when there is no comments or comments are disabled * Show progress indicator for loading comments/replies * Improve layout of icons and text spacing
This commit is contained in:
@@ -40,7 +40,7 @@ struct CommentView: View {
|
||||
|
||||
Spacer()
|
||||
|
||||
VStack(spacing: 5) {
|
||||
VStack(alignment: .trailing, spacing: 8) {
|
||||
likes
|
||||
statusIcons
|
||||
}
|
||||
@@ -65,7 +65,14 @@ struct CommentView: View {
|
||||
commentText
|
||||
|
||||
if comment.hasReplies {
|
||||
repliesButton
|
||||
HStack(spacing: repliesButtonStackSpacing) {
|
||||
repliesButton
|
||||
|
||||
ProgressView()
|
||||
.scaleEffect(progressViewScale, anchor: .center)
|
||||
.opacity(repliesID == comment.id && !comments.repliesLoaded ? 1 : 0)
|
||||
.frame(maxHeight: 0)
|
||||
}
|
||||
|
||||
if comment.id == repliesID {
|
||||
repliesList
|
||||
@@ -148,16 +155,15 @@ struct CommentView: View {
|
||||
comments.loadReplies(page: comment.repliesPage!)
|
||||
} label: {
|
||||
HStack(spacing: 5) {
|
||||
Image(systemName: self.repliesID == comment.id ? "arrow.turn.left.up" : "arrow.turn.right.down")
|
||||
Image(systemName: repliesID == comment.id ? "arrow.turn.left.up" : "arrow.turn.right.down")
|
||||
Text("Replies")
|
||||
}
|
||||
#if os(tvOS)
|
||||
.padding(10)
|
||||
#endif
|
||||
}
|
||||
|
||||
.buttonStyle(.plain)
|
||||
.padding(.top, 2)
|
||||
.padding(.vertical, 2)
|
||||
#if os(tvOS)
|
||||
.padding(.leading, 5)
|
||||
#else
|
||||
@@ -165,6 +171,24 @@ struct CommentView: View {
|
||||
#endif
|
||||
}
|
||||
|
||||
private var repliesButtonStackSpacing: Double {
|
||||
#if os(tvOS)
|
||||
24
|
||||
#elseif os(iOS)
|
||||
4
|
||||
#else
|
||||
2
|
||||
#endif
|
||||
}
|
||||
|
||||
private var progressViewScale: Double {
|
||||
#if os(macOS)
|
||||
0.4
|
||||
#else
|
||||
0.8
|
||||
#endif
|
||||
}
|
||||
|
||||
private var repliesList: some View {
|
||||
Group {
|
||||
let last = comments.replies.last
|
||||
@@ -179,8 +203,8 @@ struct CommentView: View {
|
||||
.padding(.vertical, 5)
|
||||
}
|
||||
}
|
||||
.padding(.leading, 22)
|
||||
}
|
||||
.padding(.leading, 22)
|
||||
}
|
||||
|
||||
private var commentText: some View {
|
||||
@@ -219,3 +243,13 @@ struct CommentView: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct CommentView_Previews: PreviewProvider {
|
||||
static var fixture: Comment {
|
||||
Comment.fixture
|
||||
}
|
||||
|
||||
static var previews: some View {
|
||||
CommentView(comment: fixture, repliesID: .constant(fixture.id))
|
||||
}
|
||||
}
|
||||
|
@@ -7,41 +7,73 @@ struct CommentsView: View {
|
||||
@EnvironmentObject<PlayerModel> private var player
|
||||
|
||||
var body: some View {
|
||||
ScrollView(.vertical, showsIndicators: false) {
|
||||
VStack(alignment: .leading) {
|
||||
let last = comments.all.last
|
||||
ForEach(comments.all) { comment in
|
||||
CommentView(comment: comment, repliesID: $repliesID)
|
||||
Group {
|
||||
if comments.disabled {
|
||||
Text("Comments are disabled for this video")
|
||||
.foregroundColor(.secondary)
|
||||
} else if comments.loaded && comments.all.isEmpty {
|
||||
Text("No comments")
|
||||
.foregroundColor(.secondary)
|
||||
} else if !comments.loaded {
|
||||
progressView
|
||||
} else {
|
||||
ScrollView(.vertical, showsIndicators: false) {
|
||||
VStack(alignment: .leading) {
|
||||
let last = comments.all.last
|
||||
ForEach(comments.all) { comment in
|
||||
CommentView(comment: comment, repliesID: $repliesID)
|
||||
|
||||
if comment != last {
|
||||
Divider()
|
||||
.padding(.vertical, 5)
|
||||
if comment != last {
|
||||
Divider()
|
||||
.padding(.vertical, 5)
|
||||
}
|
||||
}
|
||||
|
||||
HStack {
|
||||
if comments.nextPageAvailable {
|
||||
Button {
|
||||
repliesID = nil
|
||||
comments.loadNextPage()
|
||||
} label: {
|
||||
Label("Show more", systemImage: "arrow.turn.down.right")
|
||||
}
|
||||
}
|
||||
|
||||
if !comments.firstPage {
|
||||
Button {
|
||||
repliesID = nil
|
||||
comments.load(page: nil)
|
||||
} label: {
|
||||
Label("Show first", systemImage: "arrow.turn.down.left")
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.padding(.vertical, 8)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
|
||||
HStack {
|
||||
if comments.nextPageAvailable {
|
||||
Button {
|
||||
comments.loadNextPage()
|
||||
} label: {
|
||||
Label("Show more", systemImage: "arrow.turn.down.right")
|
||||
}
|
||||
}
|
||||
|
||||
if !comments.firstPage {
|
||||
Button {
|
||||
comments.load(page: nil)
|
||||
} label: {
|
||||
Label("Show first", systemImage: "arrow.turn.down.left")
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.padding(.vertical, 5)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.onAppear {
|
||||
if !comments.loaded {
|
||||
comments.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private var progressView: some View {
|
||||
VStack {
|
||||
Spacer()
|
||||
|
||||
HStack {
|
||||
Spacer()
|
||||
ProgressView()
|
||||
Spacer()
|
||||
}
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -141,6 +141,8 @@ struct VideoDetails: View {
|
||||
player.closeCurrentItem()
|
||||
if !sidebarQueue {
|
||||
currentPage = .queue
|
||||
} else {
|
||||
currentPage = .info
|
||||
}
|
||||
} label: {
|
||||
Label("Close Video", systemImage: "xmark.circle")
|
||||
|
Reference in New Issue
Block a user