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:
Arkadiusz Fal
2021-12-05 18:14:49 +01:00
parent 37b99c59e1
commit 1f495562fc
7 changed files with 142 additions and 52 deletions

View File

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

View File

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

View File

@@ -141,6 +141,8 @@ struct VideoDetails: View {
player.closeCurrentItem()
if !sidebarQueue {
currentPage = .queue
} else {
currentPage = .info
}
} label: {
Label("Close Video", systemImage: "xmark.circle")