Add ability to load long comment trees in CommentsContainer

This commit is contained in:
Andrei Zavatski
2020-02-10 15:43:11 +03:00
parent 6a38f4d13d
commit 26afe0f31e
9 changed files with 420 additions and 213 deletions

View File

@ -12,11 +12,14 @@ using osu.Game.Graphics.Containers;
using osu.Game.Utils;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Bindables;
using osu.Framework.Graphics.Shapes;
using System.Linq;
using osu.Game.Graphics.Sprites;
using osu.Game.Online.Chat;
using osu.Framework.Allocation;
using osuTK.Graphics;
using System.Collections.Generic;
using System;
using osu.Framework.Graphics.Shapes;
namespace osu.Game.Overlays.Comments
{
@ -25,24 +28,35 @@ namespace osu.Game.Overlays.Comments
private const int avatar_size = 40;
private const int margin = 10;
public Action<DrawableComment, int> RepliesRequested;
public readonly Comment Comment;
public readonly BindableBool ShowDeleted = new BindableBool();
public readonly Bindable<CommentsSortCriteria> Sort = new Bindable<CommentsSortCriteria>();
public readonly List<Comment> LoadedReplies = new List<Comment>();
private readonly BindableBool childrenExpanded = new BindableBool(true);
private int currentPage;
private FillFlowContainer childCommentsVisibilityContainer;
private readonly Comment comment;
private FillFlowContainer childCommentsContainer;
private LoadMoreCommentsButton loadMoreCommentsButton;
private ShowMoreButton showMoreButton;
private RepliesButton repliesButton;
private ChevronButton chevronButton;
private DeletedCommentsCounter deletedCommentsCounter;
public DrawableComment(Comment comment)
{
this.comment = comment;
Comment = comment;
}
[BackgroundDependencyLoader]
private void load()
{
LinkFlowContainer username;
FillFlowContainer childCommentsContainer;
DeletedCommentsCounter deletedCommentsCounter;
FillFlowContainer info;
LinkFlowContainer message;
GridContainer content;
@ -50,234 +64,267 @@ namespace osu.Game.Overlays.Comments
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
InternalChild = new FillFlowContainer
InternalChildren = new Drawable[]
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
new FillFlowContainer
{
new Container
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding(margin) { Left = margin + 5 },
Child = content = new GridContainer
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
ColumnDimensions = new[]
Padding = new MarginPadding(margin) { Left = margin + 5 },
Child = content = new GridContainer
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize)
},
Content = new[]
{
new Drawable[]
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
ColumnDimensions = new[]
{
new FillFlowContainer
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize)
},
Content = new[]
{
new Drawable[]
{
AutoSizeAxes = Axes.Both,
Margin = new MarginPadding { Horizontal = margin },
Direction = FillDirection.Horizontal,
Spacing = new Vector2(5, 0),
Children = new Drawable[]
new FillFlowContainer
{
new Container
AutoSizeAxes = Axes.Both,
Margin = new MarginPadding { Horizontal = margin },
Direction = FillDirection.Horizontal,
Spacing = new Vector2(5, 0),
Children = new Drawable[]
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Width = 40,
AutoSizeAxes = Axes.Y,
Child = votePill = new VotePill(comment)
new Container
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
}
},
new UpdateableAvatar(comment.User)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(avatar_size),
Masking = true,
CornerRadius = avatar_size / 2f,
CornerExponent = 2,
},
}
},
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Spacing = new Vector2(0, 3),
Children = new Drawable[]
{
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(7, 0),
Children = new Drawable[]
{
username = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true))
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Width = 40,
AutoSizeAxes = Axes.Y,
Child = votePill = new VotePill(Comment)
{
AutoSizeAxes = Axes.Both,
},
new ParentUsername(comment),
new OsuSpriteText
{
Alpha = comment.IsDeleted ? 1 : 0,
Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true),
Text = @"deleted",
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
}
}
},
message = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14))
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Right = 40 }
},
info = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(10, 0),
Colour = OsuColour.Gray(0.7f),
Children = new Drawable[]
},
new UpdateableAvatar(Comment.User)
{
new OsuSpriteText
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(avatar_size),
Masking = true,
CornerRadius = avatar_size / 2f,
CornerExponent = 2,
},
}
},
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Spacing = new Vector2(0, 3),
Children = new Drawable[]
{
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(7, 0),
Children = new Drawable[]
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: 12),
Text = HumanizerUtils.Humanize(comment.CreatedAt)
},
new RepliesButton(comment.RepliesCount)
username = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true))
{
AutoSizeAxes = Axes.Both,
},
new ParentUsername(Comment),
new OsuSpriteText
{
Alpha = Comment.IsDeleted ? 1 : 0,
Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true),
Text = @"deleted",
}
}
},
message = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14))
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Right = 40 }
},
info = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(10, 0),
Children = new Drawable[]
{
Expanded = { BindTarget = childrenExpanded }
},
new OsuSpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: 12),
Colour = OsuColour.Gray(0.7f),
Text = HumanizerUtils.Humanize(Comment.CreatedAt)
},
repliesButton = new RepliesButton(Comment.RepliesCount)
{
Expanded = { BindTarget = childrenExpanded }
},
loadMoreCommentsButton = new LoadMoreCommentsButton
{
Action = () => RepliesRequested(this, ++currentPage)
}
}
}
}
}
}
}
}
}
},
childCommentsVisibilityContainer = new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
},
childCommentsVisibilityContainer = new FillFlowContainer
{
childCommentsContainer = new FillFlowContainer
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
Padding = new MarginPadding { Left = 20 },
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical
},
deletedCommentsCounter = new DeletedCommentsCounter
{
ShowDeleted = { BindTarget = ShowDeleted }
childCommentsContainer = new FillFlowContainer
{
Padding = new MarginPadding { Left = 20 },
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical
},
deletedCommentsCounter = new DeletedCommentsCounter
{
ShowDeleted = { BindTarget = ShowDeleted }
},
showMoreButton = new ShowMoreButton
{
Action = () => RepliesRequested(this, ++currentPage)
}
}
}
},
}
},
chevronButton = new ChevronButton
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Margin = new MarginPadding { Right = 30, Top = margin },
Expanded = { BindTarget = childrenExpanded },
Alpha = 0
}
};
deletedCommentsCounter.Count.Value = comment.DeletedChildrenCount;
if (comment.UserId.HasValue)
username.AddUserLink(comment.User);
if (Comment.UserId.HasValue)
username.AddUserLink(Comment.User);
else
username.AddText(comment.LegacyName);
username.AddText(Comment.LegacyName);
if (comment.EditedAt.HasValue)
if (Comment.EditedAt.HasValue)
{
info.Add(new OsuSpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: 12),
Text = $@"edited {HumanizerUtils.Humanize(comment.EditedAt.Value)} by {comment.EditedUser.Username}"
Text = $@"edited {HumanizerUtils.Humanize(Comment.EditedAt.Value)} by {Comment.EditedUser.Username}"
});
}
if (comment.HasMessage)
if (Comment.HasMessage)
{
var formattedSource = MessageFormatter.FormatText(comment.Message);
var formattedSource = MessageFormatter.FormatText(Comment.Message);
message.AddLinks(formattedSource.Text, formattedSource.Links);
}
if (comment.IsDeleted)
if (Comment.IsDeleted)
{
content.FadeColour(OsuColour.Gray(0.5f));
votePill.Hide();
}
if (comment.IsTopLevel)
if (Comment.IsTopLevel)
{
AddInternal(new Container
AddInternal(new Box
{
RelativeSizeAxes = Axes.X,
Height = 1.5f,
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(0.1f)
}
RelativeSizeAxes = Axes.X,
Height = 1.5f,
Colour = OsuColour.Gray(0.1f)
});
if (comment.ChildComments.Any())
{
AddInternal(new ChevronButton(comment)
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Margin = new MarginPadding { Right = 30, Top = margin },
Expanded = { BindTarget = childrenExpanded }
});
}
}
comment.ChildComments.ForEach(c => childCommentsContainer.Add(new DrawableComment(c)
{
ShowDeleted = { BindTarget = ShowDeleted }
}));
}
protected override void LoadComplete()
{
ShowDeleted.BindValueChanged(show =>
{
if (comment.IsDeleted)
if (Comment.IsDeleted)
this.FadeTo(show.NewValue ? 1 : 0);
}, true);
childrenExpanded.BindValueChanged(expanded => childCommentsVisibilityContainer.FadeTo(expanded.NewValue ? 1 : 0), true);
updateButtonsState();
base.LoadComplete();
}
public void AddReplies(IEnumerable<DrawableComment> replies)
{
LoadComponentAsync(createRepliesPage(replies), page =>
{
var newReplies = replies.Select(reply => reply.Comment);
LoadedReplies.AddRange(newReplies);
deletedCommentsCounter.Count.Value += newReplies.Count(reply => reply.IsDeleted);
childCommentsContainer.Add(page);
updateButtonsState();
});
}
private FillFlowContainer<DrawableComment> createRepliesPage(IEnumerable<DrawableComment> replies) => new FillFlowContainer<DrawableComment>
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = replies.ToList()
};
private void updateButtonsState()
{
var loadedReplesCount = LoadedReplies.Count;
var hasUnloadedReplies = loadedReplesCount != Comment.RepliesCount;
loadMoreCommentsButton.FadeTo(hasUnloadedReplies && loadedReplesCount == 0 ? 1 : 0);
showMoreButton.FadeTo(hasUnloadedReplies && loadedReplesCount > 0 ? 1 : 0);
repliesButton.FadeTo(loadedReplesCount != 0 ? 1 : 0);
if (Comment.IsTopLevel)
chevronButton.FadeTo(loadedReplesCount != 0 ? 1 : 0);
showMoreButton.IsLoading = loadMoreCommentsButton.IsLoading = false;
}
private class ChevronButton : ShowChildrenButton
{
private readonly SpriteIcon icon;
public ChevronButton(Comment comment)
public ChevronButton()
{
Alpha = comment.IsTopLevel && comment.ChildComments.Any() ? 1 : 0;
Child = icon = new SpriteIcon
{
Size = new Vector2(12),
Colour = OsuColour.Gray(0.7f)
};
}
@ -296,7 +343,6 @@ namespace osu.Game.Overlays.Comments
{
this.count = count;
Alpha = count == 0 ? 0 : 1;
Child = text = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
@ -309,6 +355,30 @@ namespace osu.Game.Overlays.Comments
}
}
private class LoadMoreCommentsButton : GetCommentRepliesButton
{
public LoadMoreCommentsButton()
{
IdleColour = OsuColour.Gray(0.7f);
HoverColour = Color4.White;
}
protected override string GetText() => @"[+] load replies";
}
private class ShowMoreButton : GetCommentRepliesButton
{
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
Margin = new MarginPadding { Vertical = 10, Left = 80 };
IdleColour = colourProvider.Light2;
HoverColour = colourProvider.Light1;
}
protected override string GetText() => @"Show More";
}
private class ParentUsername : FillFlowContainer, IHasTooltip
{
public string TooltipText => getParentMessage();