Merge pull request #15520 from bdach/beatmap-card/favourite-button

Add favourite button to beatmap card

osu.Game.Tests/Visual/Beatmaps/TestSceneBeatmapCard.cs

@@ -9,8 +9,11 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Testing;
 using osu.Game.Beatmaps;
 using osu.Game.Beatmaps.Drawables.Cards;
+using osu.Game.Online.API;
+using osu.Game.Online.API.Requests;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays;
 using osuTK;
@@ -20,6 +23,8 @@ namespace osu.Game.Tests.Visual.Beatmaps
 {
     public class TestSceneBeatmapCard : OsuTestScene
     {
+        private DummyAPIAccess dummyAPI => (DummyAPIAccess)API;
+
         private APIBeatmapSet[] testCases;
 
         #region Test case generation
@@ -164,6 +169,19 @@ namespace osu.Game.Tests.Visual.Beatmaps
 
         #endregion
 
+        [SetUpSteps]
+        public void SetUpSteps()
+        {
+            AddStep("register request handling", () => dummyAPI.HandleRequest = request =>
+            {
+                if (!(request is PostBeatmapFavouriteRequest))
+                    return false;
+
+                request.TriggerSuccess();
+                return true;
+            });
+        }
+
         private Drawable createContent(OverlayColourScheme colourScheme, Func<APIBeatmapSet, Drawable> creationFunc)
         {
             var colourProvider = new OverlayColourProvider(colourScheme);

osu.Game.Tests/Visual/Beatmaps/TestSceneBeatmapCardFavouriteButton.cs

@@ -0,0 +1,86 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System.Linq;
+using NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Testing;
+using osu.Game.Beatmaps.Drawables.Cards.Buttons;
+using osu.Game.Online.API;
+using osu.Game.Online.API.Requests;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays;
+using osu.Game.Resources.Localisation.Web;
+using osuTK;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.Beatmaps
+{
+    public class TestSceneBeatmapCardFavouriteButton : OsuManualInputManagerTestScene
+    {
+        private DummyAPIAccess dummyAPI => (DummyAPIAccess)API;
+
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
+        [Test]
+        public void TestInitialState([Values] bool favourited)
+        {
+            APIBeatmapSet beatmapSetInfo = null;
+            FavouriteButton button = null;
+
+            AddStep("create beatmap set", () =>
+            {
+                beatmapSetInfo = CreateAPIBeatmapSet(Ruleset.Value);
+                beatmapSetInfo.HasFavourited = favourited;
+            });
+            AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo) { Scale = new Vector2(2) });
+
+            assertCorrectIcon(favourited);
+            AddAssert("correct tooltip text", () => button.TooltipText == (favourited ? BeatmapsetsStrings.ShowDetailsUnfavourite : BeatmapsetsStrings.ShowDetailsFavourite));
+        }
+
+        [Test]
+        public void TestRequestHandling()
+        {
+            APIBeatmapSet beatmapSetInfo = null;
+            FavouriteButton button = null;
+            BeatmapFavouriteAction? lastRequestAction = null;
+
+            AddStep("create beatmap set", () => beatmapSetInfo = CreateAPIBeatmapSet(Ruleset.Value));
+            AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo) { Scale = new Vector2(2) });
+
+            assertCorrectIcon(false);
+
+            AddStep("register request handling", () => dummyAPI.HandleRequest = request =>
+            {
+                if (!(request is PostBeatmapFavouriteRequest favouriteRequest))
+                    return false;
+
+                lastRequestAction = favouriteRequest.Action;
+                request.TriggerSuccess();
+                return true;
+            });
+
+            AddStep("click icon", () =>
+            {
+                InputManager.MoveMouseTo(button);
+                InputManager.Click(MouseButton.Left);
+            });
+            AddUntilStep("favourite request sent", () => lastRequestAction == BeatmapFavouriteAction.Favourite);
+            assertCorrectIcon(true);
+
+            AddStep("click icon", () =>
+            {
+                InputManager.MoveMouseTo(button);
+                InputManager.Click(MouseButton.Left);
+            });
+            AddUntilStep("unfavourite request sent", () => lastRequestAction == BeatmapFavouriteAction.UnFavourite);
+            assertCorrectIcon(false);
+        }
+
+        private void assertCorrectIcon(bool favourited) => AddAssert("icon correct",
+            () => this.ChildrenOfType<SpriteIcon>().Single().Icon.Equals(favourited ? FontAwesome.Solid.Heart : FontAwesome.Regular.Heart));
+    }
+}

osu.Game/Beatmaps/Drawables/Cards/BeatmapCard.cs

@@ -3,12 +3,14 @@
 
 using System.Collections.Generic;
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
+using osu.Game.Beatmaps.Drawables.Cards.Buttons;
 using osu.Game.Beatmaps.Drawables.Cards.Statistics;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
@@ -21,6 +23,7 @@ using osuTK;
 using osu.Game.Overlays.BeatmapListing.Panels;
 using osu.Game.Resources.Localisation.Web;
 using osuTK.Graphics;
+using DownloadButton = osu.Game.Beatmaps.Drawables.Cards.Buttons.DownloadButton;
 
 namespace osu.Game.Beatmaps.Drawables.Cards
 {
@@ -33,9 +36,12 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         private const float corner_radius = 10;
 
         private readonly APIBeatmapSet beatmapSet;
+        private readonly Bindable<BeatmapSetFavouriteState> favouriteState;
 
         private UpdateableOnlineBeatmapSetCover leftCover;
-        private FillFlowContainer iconArea;
+        private FillFlowContainer leftIconArea;
+
+        private Container rightButtonArea;
 
         private Container mainContent;
         private BeatmapCardContentBackground mainContentBackground;
@@ -51,6 +57,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             : base(HoverSampleSet.Submit)
         {
             this.beatmapSet = beatmapSet;
+            favouriteState = new Bindable<BeatmapSetFavouriteState>(new BeatmapSetFavouriteState(beatmapSet.HasFavourited, beatmapSet.FavouriteCount));
         }
 
         [BackgroundDependencyLoader]
@@ -79,7 +86,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                             RelativeSizeAxes = Axes.Both,
                             OnlineInfo = beatmapSet
                         },
-                        iconArea = new FillFlowContainer
+                        leftIconArea = new FillFlowContainer
                         {
                             Margin = new MarginPadding(5),
                             AutoSizeAxes = Axes.Both,
@@ -88,6 +95,27 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                         }
                     }
                 },
+                rightButtonArea = new Container
+                {
+                    Name = @"Right (button) area",
+                    Width = 30,
+                    RelativeSizeAxes = Axes.Y,
+                    Origin = Anchor.TopRight,
+                    Anchor = Anchor.TopRight,
+                    Child = new FillFlowContainer<BeatmapCardIconButton>
+                    {
+                        AutoSizeAxes = Axes.Both,
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Direction = FillDirection.Vertical,
+                        Spacing = new Vector2(0, 14),
+                        Children = new BeatmapCardIconButton[]
+                        {
+                            new FavouriteButton(beatmapSet) { Current = favouriteState },
+                            new DownloadButton(beatmapSet)
+                        }
+                    }
+                },
                 mainContent = new Container
                 {
                     Name = @"Main content",
@@ -226,10 +254,10 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             };
 
             if (beatmapSet.HasVideo)
-                iconArea.Add(new IconPill(FontAwesome.Solid.Film));
+                leftIconArea.Add(new IconPill(FontAwesome.Solid.Film));
 
             if (beatmapSet.HasStoryboard)
-                iconArea.Add(new IconPill(FontAwesome.Solid.Image));
+                leftIconArea.Add(new IconPill(FontAwesome.Solid.Image));
 
             if (beatmapSet.HasExplicitContent)
             {
@@ -287,7 +315,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             if (beatmapSet.HypeStatus != null && beatmapSet.NominationStatus != null)
                 yield return new NominationsStatistic(beatmapSet.NominationStatus);
 
-            yield return new FavouritesStatistic(beatmapSet);
+            yield return new FavouritesStatistic(beatmapSet) { Current = favouriteState };
             yield return new PlayCountStatistic(beatmapSet);
 
             var dateStatistic = BeatmapCardDateStatistic.CreateFor(beatmapSet);
@@ -306,6 +334,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards
 
             leftCover.FadeColour(IsHovered ? OsuColour.Gray(0.2f) : Color4.White, TRANSITION_DURATION, Easing.OutQuint);
             statisticsContainer.FadeTo(IsHovered ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
+            rightButtonArea.FadeTo(IsHovered ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
         }
     }
 }

osu.Game/Beatmaps/Drawables/Cards/BeatmapSetFavouriteState.cs

@@ -0,0 +1,31 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Game.Beatmaps.Drawables.Cards.Buttons;
+using osu.Game.Beatmaps.Drawables.Cards.Statistics;
+
+namespace osu.Game.Beatmaps.Drawables.Cards
+{
+    /// <summary>
+    /// Stores the current favourite state of a beatmap set.
+    /// Used to coordinate between <see cref="FavouriteButton"/> and <see cref="FavouritesStatistic"/>.
+    /// </summary>
+    public readonly struct BeatmapSetFavouriteState
+    {
+        /// <summary>
+        /// Whether the currently logged-in user has favourited this beatmap.
+        /// </summary>
+        public bool Favourited { get; }
+
+        /// <summary>
+        /// The number of favourites that the beatmap set has received, including the currently logged-in user.
+        /// </summary>
+        public int FavouriteCount { get; }
+
+        public BeatmapSetFavouriteState(bool favourited, int favouriteCount)
+        {
+            Favourited = favourited;
+            FavouriteCount = favouriteCount;
+        }
+    }
+}

osu.Game/Beatmaps/Drawables/Cards/Buttons/BeatmapCardIconButton.cs

@@ -0,0 +1,46 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.Containers;
+using osu.Game.Overlays;
+using osuTK;
+
+namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
+{
+    public abstract class BeatmapCardIconButton : OsuHoverContainer
+    {
+        protected readonly SpriteIcon Icon;
+
+        private float size;
+
+        public new float Size
+        {
+            get => size;
+            set
+            {
+                size = value;
+                Icon.Size = new Vector2(size);
+            }
+        }
+
+        protected BeatmapCardIconButton()
+        {
+            Add(Icon = new SpriteIcon());
+
+            AutoSizeAxes = Axes.Both;
+            Size = 12;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            Anchor = Origin = Anchor.Centre;
+
+            IdleColour = colourProvider.Light1;
+            HoverColour = colourProvider.Content1;
+        }
+    }
+}

osu.Game/Beatmaps/Drawables/Cards/Buttons/DownloadButton.cs

@@ -0,0 +1,18 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
+{
+    public class DownloadButton : BeatmapCardIconButton
+    {
+        public DownloadButton(APIBeatmapSet beatmapSet)
+        {
+            Icon.Icon = FontAwesome.Solid.FileDownload;
+        }
+
+        // TODO: implement behaviour
+    }
+}

osu.Game/Beatmaps/Drawables/Cards/Buttons/FavouriteButton.cs

@@ -0,0 +1,86 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Framework.Logging;
+using osu.Game.Online.API;
+using osu.Game.Online.API.Requests;
+using osu.Game.Resources.Localisation.Web;
+
+namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
+{
+    public class FavouriteButton : BeatmapCardIconButton, IHasCurrentValue<BeatmapSetFavouriteState>
+    {
+        private readonly BindableWithCurrent<BeatmapSetFavouriteState> current;
+
+        public Bindable<BeatmapSetFavouriteState> Current
+        {
+            get => current.Current;
+            set => current.Current = value;
+        }
+
+        private readonly APIBeatmapSet beatmapSet;
+
+        private PostBeatmapFavouriteRequest favouriteRequest;
+
+        [Resolved]
+        private IAPIProvider api { get; set; }
+
+        public FavouriteButton(APIBeatmapSet beatmapSet)
+        {
+            current = new BindableWithCurrent<BeatmapSetFavouriteState>(new BeatmapSetFavouriteState(beatmapSet.HasFavourited, beatmapSet.FavouriteCount));
+            this.beatmapSet = beatmapSet;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Action = toggleFavouriteStatus;
+            current.BindValueChanged(_ => updateState(), true);
+        }
+
+        private void toggleFavouriteStatus()
+        {
+            var actionType = current.Value.Favourited ? BeatmapFavouriteAction.UnFavourite : BeatmapFavouriteAction.Favourite;
+
+            favouriteRequest?.Cancel();
+            favouriteRequest = new PostBeatmapFavouriteRequest(beatmapSet.OnlineID, actionType);
+
+            Enabled.Value = false;
+            favouriteRequest.Success += () =>
+            {
+                bool favourited = actionType == BeatmapFavouriteAction.Favourite;
+
+                current.Value = new BeatmapSetFavouriteState(favourited, current.Value.FavouriteCount + (favourited ? 1 : -1));
+
+                Enabled.Value = true;
+            };
+            favouriteRequest.Failure += e =>
+            {
+                Logger.Error(e, $"Failed to {actionType.ToString().ToLower()} beatmap: {e.Message}");
+                Enabled.Value = true;
+            };
+
+            api.Queue(favouriteRequest);
+        }
+
+        private void updateState()
+        {
+            if (current.Value.Favourited)
+            {
+                Icon.Icon = FontAwesome.Solid.Heart;
+                TooltipText = BeatmapsetsStrings.ShowDetailsUnfavourite;
+            }
+            else
+            {
+                Icon.Icon = FontAwesome.Regular.Heart;
+                TooltipText = BeatmapsetsStrings.ShowDetailsFavourite;
+            }
+        }
+    }
+}

osu.Game/Beatmaps/Drawables/Cards/Statistics/FavouritesStatistic.cs

@@ -2,8 +2,10 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using Humanizer;
+using osu.Framework.Bindables;
 using osu.Framework.Extensions.LocalisationExtensions;
 using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.UserInterface;
 using osu.Game.Resources.Localisation.Web;
 
 namespace osu.Game.Beatmaps.Drawables.Cards.Statistics
@@ -11,13 +13,32 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Statistics
     /// <summary>
     /// Shows the number of favourites that a beatmap set has received.
     /// </summary>
-    public class FavouritesStatistic : BeatmapCardStatistic
+    public class FavouritesStatistic : BeatmapCardStatistic, IHasCurrentValue<BeatmapSetFavouriteState>
     {
+        private readonly BindableWithCurrent<BeatmapSetFavouriteState> current;
+
+        public Bindable<BeatmapSetFavouriteState> Current
+        {
+            get => current.Current;
+            set => current.Current = value;
+        }
+
         public FavouritesStatistic(IBeatmapSetOnlineInfo onlineInfo)
         {
-            Icon = onlineInfo.HasFavourited ? FontAwesome.Solid.Heart : FontAwesome.Regular.Heart;
-            Text = onlineInfo.FavouriteCount.ToMetric(decimals: 1);
-            TooltipText = BeatmapsStrings.PanelFavourites(onlineInfo.FavouriteCount.ToLocalisableString(@"N0"));
+            current = new BindableWithCurrent<BeatmapSetFavouriteState>(new BeatmapSetFavouriteState(onlineInfo.HasFavourited, onlineInfo.FavouriteCount));
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            current.BindValueChanged(_ => updateState(), true);
+        }
+
+        private void updateState()
+        {
+            Icon = current.Value.Favourited ? FontAwesome.Solid.Heart : FontAwesome.Regular.Heart;
+            Text = current.Value.FavouriteCount.ToMetric(decimals: 1);
+            TooltipText = BeatmapsStrings.PanelFavourites(current.Value.FavouriteCount.ToLocalisableString(@"N0"));
         }
     }
 }

osu.Game/Online/API/Requests/PostBeatmapFavouriteRequest.cs

@@ -8,20 +8,21 @@ namespace osu.Game.Online.API.Requests
 {
     public class PostBeatmapFavouriteRequest : APIRequest
     {
+        public readonly BeatmapFavouriteAction Action;
+
         private readonly int id;
-        private readonly BeatmapFavouriteAction action;
 
         public PostBeatmapFavouriteRequest(int id, BeatmapFavouriteAction action)
         {
             this.id = id;
-            this.action = action;
+            Action = action;
         }
 
         protected override WebRequest CreateWebRequest()
         {
             var req = base.CreateWebRequest();
             req.Method = HttpMethod.Post;
-            req.AddParameter(@"action", action.ToString().ToLowerInvariant());
+            req.AddParameter(@"action", Action.ToString().ToLowerInvariant());
             return req;
         }