Implement basic behaviour of play button

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

@@ -1,17 +1,24 @@
 // 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;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Testing;
 using osu.Game.Beatmaps.Drawables.Cards;
+using osu.Game.Beatmaps.Drawables.Cards.Buttons;
 using osu.Game.Overlays;
 using osuTK;
+using osuTK.Input;
 
 namespace osu.Game.Tests.Visual.Beatmaps
 {
-    public class TestSceneBeatmapCardThumbnail : OsuTestScene
+    public class TestSceneBeatmapCardThumbnail : OsuManualInputManagerTestScene
     {
+        private PlayButton playButton => this.ChildrenOfType<PlayButton>().Single();
+
         [Cached]
         private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
 
@@ -26,7 +33,38 @@ namespace osu.Game.Tests.Visual.Beatmaps
                 Origin = Anchor.Centre,
                 Size = new Vector2(200)
             });
-            AddToggleStep("toggle dim", dimmed => thumbnail.Dimmed.Value = dimmed);
+            AddStep("enable dim", () => thumbnail.Dimmed.Value = true);
+            AddUntilStep("button visible", () => playButton.IsPresent);
+
+            AddStep("click button", () =>
+            {
+                InputManager.MoveMouseTo(playButton);
+                InputManager.Click(MouseButton.Left);
+            });
+            iconIs(FontAwesome.Solid.Stop);
+
+            AddStep("click again", () =>
+            {
+                InputManager.MoveMouseTo(playButton);
+                InputManager.Click(MouseButton.Left);
+            });
+            iconIs(FontAwesome.Solid.Play);
+
+            AddStep("click again", () =>
+            {
+                InputManager.MoveMouseTo(playButton);
+                InputManager.Click(MouseButton.Left);
+            });
+            iconIs(FontAwesome.Solid.Stop);
+
+            AddStep("disable dim", () => thumbnail.Dimmed.Value = false);
+            AddWaitStep("wait some", 3);
+            AddAssert("button still visible", () => playButton.IsPresent);
+
+            AddStep("end track playback", () => playButton.Playing.Value = false);
+            AddUntilStep("button hidden", () => !playButton.IsPresent);
         }
+
+        private void iconIs(IconUsage usage) => AddAssert("icon is correct", () => playButton.ChildrenOfType<SpriteIcon>().Single().Icon.Equals(usage));
     }
 }

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

@@ -4,6 +4,7 @@
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Game.Beatmaps.Drawables.Cards.Buttons;
 using osu.Game.Graphics;
 using osu.Game.Online.API.Requests.Responses;
 using osuTK.Graphics;
@@ -33,7 +34,10 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                     RelativeSizeAxes = Axes.Both,
                     OnlineInfo = beatmapSetInfo
                 },
-                playButton = new PlayButton(),
+                playButton = new PlayButton(beatmapSetInfo)
+                {
+                    RelativeSizeAxes = Axes.Both
+                },
                 content = new Container
                 {
                     RelativeSizeAxes = Axes.Both
@@ -44,14 +48,17 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         protected override void LoadComplete()
         {
             base.LoadComplete();
-            Dimmed.BindValueChanged(_ => updateState(), true);
+            Dimmed.BindValueChanged(_ => updateState());
+            playButton.Playing.BindValueChanged(_ => updateState(), true);
             FinishTransforms(true);
         }
 
         private void updateState()
         {
-            playButton.FadeTo(Dimmed.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+            bool shouldDim = Dimmed.Value || playButton.Playing.Value;
-            cover.FadeColour(Dimmed.Value ? OsuColour.Gray(0.2f) : Color4.White, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+            playButton.FadeTo(shouldDim ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+            cover.FadeColour(shouldDim ? OsuColour.Gray(0.2f) : Color4.White, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
         }
     }
 }

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

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
@@ -12,17 +13,30 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
 {
     public class PlayButton : OsuHoverContainer
     {
-        public PlayButton()
+        public BindableBool Playing { get; } = new BindableBool();
+
+        private readonly BeatmapSetInfo beatmapSetInfo;
+
+        private readonly SpriteIcon icon;
+
+        public PlayButton(BeatmapSetInfo beatmapSetInfo)
         {
+            this.beatmapSetInfo = beatmapSetInfo;
+
             Anchor = Origin = Anchor.Centre;
 
-            Child = new SpriteIcon
+            Children = new Drawable[]
             {
-                Anchor = Anchor.Centre,
+                icon = new SpriteIcon
-                Origin = Anchor.Centre,
+                {
-                Icon = FontAwesome.Solid.Play,
+                    Anchor = Anchor.Centre,
-                Size = new Vector2(14)
+                    Origin = Anchor.Centre,
+                    Icon = FontAwesome.Solid.Play,
+                    Size = new Vector2(14)
+                },
             };
+
+            Action = () => Playing.Toggle();
         }
 
         [BackgroundDependencyLoader]
@@ -30,5 +44,17 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
         {
             HoverColour = colours.Yellow;
         }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Playing.BindValueChanged(_ => updateState(), true);
+        }
+
+        private void updateState()
+        {
+            icon.Icon = Playing.Value ? FontAwesome.Solid.Stop : FontAwesome.Solid.Play;
+        }
     }
 }