add previews to osu!direct

osu.Game/Overlays/Direct/DirectGridPanel.cs

@@ -13,6 +13,8 @@ using osu.Game.Graphics.Sprites;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
 using osu.Framework.Input;
+using osu.Framework.Audio;
+using osu.Framework.Configuration;
 
 namespace osu.Game.Overlays.Direct
 {
@@ -22,6 +24,11 @@ namespace osu.Game.Overlays.Direct
         private const float vertical_padding = 5;
 
         private FillFlowContainer bottomPanel;
+        private PlayButton playButton;
+        private Box progressBar;
+
+        protected override PlayButton PlayButton => playButton;
+        public override Bindable<bool> PreviewPlaying { get; } = new Bindable<bool>();
 
         public DirectGridPanel(BeatmapSetInfo beatmap) : base(beatmap)
         {
@@ -88,6 +95,15 @@ namespace osu.Game.Overlays.Direct
                                 {
                                     RelativeSizeAxes = Axes.Both,
                                 },
+                                progressBar = new Box
+                                {
+                                    Origin = Anchor.BottomLeft,
+                                    RelativeSizeAxes = Axes.X,
+                                    BypassAutoSizeAxes = Axes.Both,
+                                    Size = new Vector2(0, 3),
+                                    Alpha = 0,
+                                    Colour = colours.Yellow,
+                                },
                                 new FillFlowContainer
                                 {
                                     RelativeSizeAxes = Axes.X,
@@ -170,7 +186,25 @@ namespace osu.Game.Overlays.Direct
                         new Statistic(FontAwesome.fa_heart, SetInfo.OnlineInfo?.FavouriteCount ?? 0),
                     },
                 },
+                playButton = new PlayButton(PreviewPlaying)
+                {
+                    Margin = new MarginPadding { Top = 5, Left = 10 },
+                    Size = new Vector2(30),
+                    Alpha = 0,
+                    TrackURL = "https://b.ppy.sh/preview/" + SetInfo.OnlineBeatmapSetID + ".mp3",
+                },
             });
+
+            PreviewPlaying.ValueChanged += newValue => playButton.FadeTo(newValue || IsHovered ? 1 : 0, 120, Easing.InOutQuint);
+            PreviewPlaying.ValueChanged += newValue => progressBar.FadeTo(newValue ? 1 : 0, 120, Easing.InOutQuint);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            if (PreviewPlaying && playButton.Track != null)
+                progressBar.Width = (float)(playButton.Track.CurrentTime / playButton.Track.Length);
         }
 
         protected override bool OnClick(InputState state)

osu.Game/Overlays/Direct/DirectListPanel.cs

@@ -15,6 +15,8 @@ using osu.Framework.Input;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
 using osu.Game.Graphics.Containers;
+using osu.Framework.Configuration;
+using osu.Framework.Audio;
 
 namespace osu.Game.Overlays.Direct
 {
@@ -30,8 +32,14 @@ namespace osu.Game.Overlays.Direct
             Height = height;
         }
 
+        private PlayButton playButton;
+        private Box progressBar;
+
+        protected override PlayButton PlayButton => playButton;
+        public override Bindable<bool> PreviewPlaying { get; } = new Bindable<bool>();
+
         [BackgroundDependencyLoader]
-        private void load(LocalisationEngine localisation)
+        private void load(LocalisationEngine localisation, OsuColour colours)
         {
             Content.CornerRadius = 5;
 
@@ -48,6 +56,26 @@ namespace osu.Game.Overlays.Direct
                     Padding = new MarginPadding { Top = vertical_padding, Bottom = vertical_padding, Left = horizontal_padding, Right = vertical_padding },
                     Children = new Drawable[]
                     {
+                        new FillFlowContainer
+                        {
+                            Origin = Anchor.CentreLeft,
+                            Anchor = Anchor.CentreLeft,
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            LayoutEasing = Easing.OutQuint,
+                            LayoutDuration = 120,
+                            Spacing = new Vector2(10, 0),
+                            Children = new Drawable[]
+                            {
+                                playButton = new PlayButton(PreviewPlaying)
+                                {
+                                    Origin = Anchor.CentreLeft,
+                                    Anchor = Anchor.CentreLeft,
+                                    Size = new Vector2(height / 2),
+                                    FillMode = FillMode.Fit,
+                                    Alpha = 0,
+                                    TrackURL = "https://b.ppy.sh/preview/" + SetInfo.OnlineBeatmapSetID + ".mp3",
+                                },
                                 new FillFlowContainer
                                 {
                                     AutoSizeAxes = Axes.Both,
@@ -74,6 +102,8 @@ namespace osu.Game.Overlays.Direct
                                         },
                                     },
                                 },
+                            }
+                        },
                         new FillFlowContainer
                         {
                             Anchor = Anchor.TopRight,
@@ -128,7 +158,28 @@ namespace osu.Game.Overlays.Direct
                         },
                     },
                 },
+                progressBar = new Box
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    RelativeSizeAxes = Axes.X,
+                    BypassAutoSizeAxes = Axes.Y,
+                    Size = new Vector2(0, 3),
+                    Alpha = 0,
+                    Colour = colours.Yellow,
+                },
             });
+
+            PreviewPlaying.ValueChanged += newValue => playButton.FadeTo(newValue || IsHovered ? 1 : 0, 120, Easing.InOutQuint);
+            PreviewPlaying.ValueChanged += newValue => progressBar.FadeTo(newValue ? 1 : 0, 120, Easing.InOutQuint);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            if (PreviewPlaying && playButton.Track != null)
+                progressBar.Width = (float)(playButton.Track.CurrentTime / playButton.Track.Length);
         }
 
         private class DownloadButton : OsuClickableContainer

osu.Game/Overlays/Direct/DirectPanel.cs

@@ -20,6 +20,7 @@ using osu.Game.Online.API;
 using osu.Framework.Logging;
 using osu.Game.Overlays.Notifications;
 using osu.Game.Online.API.Requests;
+using osu.Framework.Configuration;
 
 namespace osu.Game.Overlays.Direct
 {
@@ -38,6 +39,9 @@ namespace osu.Game.Overlays.Direct
         private BeatmapManager beatmaps;
         private NotificationOverlay notifications;
 
+        public abstract Bindable<bool> PreviewPlaying { get; }
+        protected abstract PlayButton PlayButton { get; }
+
         protected override Container<Drawable> Content => content;
 
         protected DirectPanel(BeatmapSetInfo setInfo)
@@ -106,6 +110,7 @@ namespace osu.Game.Overlays.Direct
         {
             content.TweenEdgeEffectTo(edgeEffectHovered, hover_transition_time, Easing.OutQuint);
             content.MoveToY(-4, hover_transition_time, Easing.OutQuint);
+            PlayButton.FadeIn(120, Easing.InOutQuint);
 
             return base.OnHover(state);
         }
@@ -114,6 +119,8 @@ namespace osu.Game.Overlays.Direct
         {
             content.TweenEdgeEffectTo(edgeEffectNormal, hover_transition_time, Easing.OutQuint);
             content.MoveToY(0, hover_transition_time, Easing.OutQuint);
+            if (!PreviewPlaying)
+                PlayButton.FadeOut(120, Easing.InOutQuint);
 
             base.OnHoverLost(state);
         }

osu.Game/Overlays/Direct/PlayButton.cs

@@ -0,0 +1,105 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Audio;
+using osu.Framework.Audio.Track;
+using osu.Framework.Configuration;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Input;
+using osu.Game.Beatmaps;
+using osu.Game.Graphics;
+using System.Threading.Tasks;
+
+namespace osu.Game.Overlays.Direct
+{
+    public class PlayButton : Container
+    {
+        public string TrackURL;
+
+        public Bindable<bool> Playing;
+
+        public Track Track;
+        private Bindable<WorkingBeatmap> gameBeatmap;
+        private AudioManager audio;
+
+        private Color4 hoverColour;
+        private readonly SpriteIcon icon;
+
+        public PlayButton(Bindable<bool> playing)
+        {
+            Playing = playing;
+            Add(icon = new SpriteIcon()
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                FillMode = FillMode.Fit,
+                RelativeSizeAxes = Axes.Both,
+                Icon = FontAwesome.fa_play,
+            });
+
+            Playing.ValueChanged += newValue => icon.Icon = newValue ? (Track == null ? FontAwesome.fa_spinner : FontAwesome.fa_pause) : FontAwesome.fa_play;
+
+            Playing.ValueChanged += newValue =>
+            {
+                if (newValue)
+                    Track?.Start();
+                else
+                    Track?.Stop();
+            };
+
+            Playing.ValueChanged += newValue => icon.FadeColour(newValue || IsHovered ? hoverColour : Color4.White, 120, Easing.InOutQuint);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colour, OsuGameBase game, AudioManager audio)
+        {
+            hoverColour = colour.Yellow;
+            gameBeatmap = game.Beatmap;
+            this.audio = audio;
+        }
+
+        private Task loadTask;
+
+        protected override bool OnClick(InputState state)
+        {
+            gameBeatmap.Value.Track.Stop();
+
+            Playing.Value = !Playing.Value;
+
+            if (loadTask == null)
+            {
+                icon.Spin(2000, RotationDirection.Clockwise);
+
+                loadTask = Task.Run(() =>
+                {
+                    Track = audio.Track.Get(TrackURL);
+                    Track.Looping = true;
+                    if (Playing)
+                        Track.Start();
+
+                    icon.ClearTransforms();
+                    icon.Rotation = 0;
+                    Playing.TriggerChange();
+                });
+            }
+
+            return true;
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            icon.FadeColour(hoverColour, 120, Easing.InOutQuint);
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            if(!Playing)
+                icon.FadeColour(Color4.White, 120, Easing.InOutQuint);
+            base.OnHoverLost(state);
+        }
+    }
+}

osu.Game/Overlays/DirectOverlay.cs

@@ -32,6 +32,7 @@ namespace osu.Game.Overlays
         private readonly FillFlowContainer resultCountsContainer;
         private readonly OsuSpriteText resultCountsText;
         private FillFlowContainer<DirectPanel> panels;
+        private DirectPanel playing;
 
         protected override Color4 BackgroundColour => OsuColour.FromHex(@"485e74");
         protected override Color4 TrianglesColourLight => OsuColour.FromHex(@"465b71");
@@ -201,6 +202,12 @@ namespace osu.Game.Overlays
                 panels.FadeOut(200);
                 panels.Expire();
                 panels = null;
+
+                if (playing != null)
+                {
+                    playing.PreviewPlaying.Value = false;
+                    playing = null;
+                }
             }
 
             if (BeatmapSets == null) return;
@@ -223,6 +230,17 @@ namespace osu.Game.Overlays
                 })
             };
 
+            foreach (DirectPanel panel in newPanels.Children)
+                panel.PreviewPlaying.ValueChanged += newValue =>
+                {
+                    if (newValue)
+                    {
+                        if (playing != null && playing != panel)
+                            playing.PreviewPlaying.Value = false;
+                        playing = panel;
+                    }
+                };
+
             LoadComponentAsync(newPanels, p =>
             {
                 if (panels != null) ScrollFlow.Remove(panels);

osu.Game/osu.Game.csproj

@@ -105,6 +105,7 @@
     <Compile Include="Online\Chat\ErrorMessage.cs" />
     <Compile Include="Online\Chat\LocalEchoMessage.cs" />
     <Compile Include="Overlays\Chat\ChatTabControl.cs" />
+    <Compile Include="Overlays\Direct\PlayButton.cs" />
     <Compile Include="Overlays\KeyBinding\GlobalKeyBindingsSection.cs" />
     <Compile Include="Overlays\KeyBinding\KeyBindingRow.cs" />
     <Compile Include="Overlays\KeyBinding\KeyBindingsSubsection.cs" />