Merge pull request #603 from peppy/music-controller-improvements

Improve clickability and visuals of MusicController buttons.

osu.Desktop.VisualTests/Tests/TestCaseMusicController.cs

@@ -30,7 +30,9 @@ namespace osu.Desktop.VisualTests.Tests
                 Anchor = Anchor.Centre
             };
             Add(mc);
-            AddToggleStep(@"Show", state => mc.State = state ? Visibility.Visible : Visibility.Hidden);
+
+            AddToggleStep(@"toggle visibility", state => mc.State = state ? Visibility.Visible : Visibility.Hidden);
+            AddStep(@"show", () => mc.State = Visibility.Visible);
         }
     }
 }

osu.Game/Overlays/DragBar.cs

@@ -5,7 +5,9 @@ using System;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Transforms;
 using osu.Framework.Input;
+using OpenTK;
 
 namespace osu.Game.Overlays
 {
@@ -14,9 +16,10 @@ namespace osu.Game.Overlays
         private readonly Box fill;
 
         public Action<float> SeekRequested;
-        private bool isDragging;
 
-        private bool enabled;
+        public bool IsSeeking { get; private set; }
+
+        private bool enabled = true;
         public bool IsEnabled
         {
             get { return enabled; }
@@ -46,9 +49,9 @@ namespace osu.Game.Overlays
 
         public void UpdatePosition(float position)
         {
-            if (isDragging || !IsEnabled) return;
+            if (IsSeeking || !IsEnabled) return;
 
-            fill.Width = position;
+            updatePosition(position);
         }
 
         private void seek(InputState state)
@@ -56,7 +59,13 @@ namespace osu.Game.Overlays
             if (!IsEnabled) return;
             float seekLocation = state.Mouse.Position.X / DrawWidth;
             SeekRequested?.Invoke(seekLocation);
-            fill.Width = seekLocation;
+            updatePosition(seekLocation);
+        }
+
+        private void updatePosition(float position)
+        {
+            position = MathHelper.Clamp(position, 0, 1);
+            fill.TransformTo(fill.Width, position, 200, EasingTypes.OutQuint, new TransformSeek());
         }
 
         protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
@@ -71,12 +80,21 @@ namespace osu.Game.Overlays
             return true;
         }
 
-        protected override bool OnDragStart(InputState state) => isDragging = true;
+        protected override bool OnDragStart(InputState state) => IsSeeking = true;
 
         protected override bool OnDragEnd(InputState state)
         {
-            isDragging = false;
+            IsSeeking = false;
             return true;
         }
+
+        private class TransformSeek : TransformFloat
+        {
+            public override void Apply(Drawable d)
+            {
+                base.Apply(d);
+                d.Width = CurrentValue;
+            }
+        }
     }
 }

osu.Game/Overlays/MusicController.cs

@@ -30,7 +30,7 @@ namespace osu.Game.Overlays
     {
         private Drawable currentBackground;
         private DragBar progress;
-        private TextAwesome playButton;
+        private Button playButton;
         private SpriteText title, artist;
 
         private List<BeatmapSetInfo> playList;
@@ -46,6 +46,10 @@ namespace osu.Game.Overlays
 
         private Container dragContainer;
 
+        private const float progress_height = 10;
+
+        private const float bottom_black_area_height = 50;
+
         public MusicController()
         {
             Width = 400;
@@ -115,89 +119,63 @@ namespace osu.Game.Overlays
                             Text = @"Nothing to play",
                             Font = @"Exo2.0-BoldItalic"
                         },
-                        new ClickableContainer
+                        new Container
                         {
-                            AutoSizeAxes = Axes.Both,
+                            Padding = new MarginPadding { Bottom = progress_height },
-                            Origin = Anchor.Centre,
+                            Height = bottom_black_area_height,
+                            RelativeSizeAxes = Axes.X,
+                            Origin = Anchor.BottomCentre,
                             Anchor = Anchor.BottomCentre,
-                            Position = new Vector2(0, -30),
-                            Action = () =>
-                            {
-                                if (current?.Track == null) return;
-                                if (current.Track.IsRunning)
-                                    current.Track.Stop();
-                                else
-                                    current.Track.Start();
-                            },
                             Children = new Drawable[]
                             {
-                                playButton = new TextAwesome
+                                new FillFlowContainer<Button>
                                 {
-                                    TextSize = 30,
+                                    AutoSizeAxes = Axes.Both,
-                                    Icon = FontAwesome.fa_play_circle_o,
+                                    Direction = FillDirection.Horizontal,
+                                    Spacing = new Vector2(5),
                                     Origin = Anchor.Centre,
-                                    Anchor = Anchor.Centre
+                                    Anchor = Anchor.Centre,
-                                }
+                                    Children = new[]
-                            }
+                                    {
-                        },
+                                        new Button
-                        new ClickableContainer
+                                        {
-                        {
+                                            Action = prev,
-                            AutoSizeAxes = Axes.Both,
+                                            Icon = FontAwesome.fa_step_backward,
-                            Origin = Anchor.Centre,
+                                        },
-                            Anchor = Anchor.BottomCentre,
+                                        playButton = new Button
-                            Position = new Vector2(-30, -30),
+                                        {
-                            Action = prev,
+                                            //Scale = new Vector2(1.3f),
-                            Children = new Drawable[]
+                                            Action = () =>
-                            {
+                                            {
-                                new TextAwesome
+                                                if (current?.Track == null) return;
+                                                if (current.Track.IsRunning)
+                                                    current.Track.Stop();
+                                                else
+                                                    current.Track.Start();
+                                            },
+                                            Icon = FontAwesome.fa_play_circle_o,
+                                        },
+                                        new Button
+                                        {
+                                            Action = next,
+                                            Icon = FontAwesome.fa_step_forward,
+                                        },
+                                    }
+                                },
+                                new Button
                                 {
-                                    TextSize = 15,
-                                    Icon = FontAwesome.fa_step_backward,
                                     Origin = Anchor.Centre,
-                                    Anchor = Anchor.Centre
+                                    Anchor = Anchor.CentreRight,
-                                }
+                                    Position = new Vector2(-bottom_black_area_height / 2, 0),
-                            }
-                        },
-                        new ClickableContainer
-                        {
-                            AutoSizeAxes = Axes.Both,
-                            Origin = Anchor.Centre,
-                            Anchor = Anchor.BottomCentre,
-                            Position = new Vector2(30, -30),
-                            Action = next,
-                            Children = new Drawable[]
-                            {
-                                new TextAwesome
-                                {
-                                    TextSize = 15,
-                                    Icon = FontAwesome.fa_step_forward,
-                                    Origin = Anchor.Centre,
-                                    Anchor = Anchor.Centre
-                                }
-                            }
-                        },
-                        new ClickableContainer
-                        {
-                            AutoSizeAxes = Axes.Both,
-                            Origin = Anchor.Centre,
-                            Anchor = Anchor.BottomRight,
-                            Position = new Vector2(20, -30),
-                            Children = new Drawable[]
-                            {
-                                new TextAwesome
-                                {
-                                    TextSize = 15,
                                     Icon = FontAwesome.fa_bars,
-                                    Origin = Anchor.Centre,
+                                },
-                                    Anchor = Anchor.Centre
-                                }
                             }
                         },
                         progress = new DragBar
                         {
                             Origin = Anchor.BottomCentre,
                             Anchor = Anchor.BottomCentre,
-                            Height = 10,
+                            Height = progress_height,
                             Colour = colours.Yellow,
                             SeekRequested = seek
                         }
@@ -237,7 +215,7 @@ namespace osu.Game.Overlays
 
             if (current?.TrackLoaded ?? false)
             {
-                progress.UpdatePosition((float)(current.Track.CurrentTime / current.Track.Length));
+                progress.UpdatePosition(current.Track.Length == 0 ? 0 : (float)(current.Track.CurrentTime / current.Track.Length));
                 playButton.Icon = current.Track.IsRunning ? FontAwesome.fa_pause_circle_o : FontAwesome.fa_play_circle_o;
 
                 if (current.Track.HasCompleted && !current.Track.Looping) next();
@@ -416,7 +394,7 @@ namespace osu.Game.Overlays
                     new Box
                     {
                         RelativeSizeAxes = Axes.X,
-                        Height = 50,
+                        Height = bottom_black_area_height,
                         Origin = Anchor.BottomCentre,
                         Anchor = Anchor.BottomCentre,
                         Colour = Color4.Black.Opacity(0.5f)
@@ -430,5 +408,91 @@ namespace osu.Game.Overlays
                 sprite.Texture = beatmap?.Background ?? textures.Get(@"Backgrounds/bg4");
             }
         }
+
+        private class Button : ClickableContainer
+        {
+            private readonly TextAwesome icon;
+            private readonly Box hover;
+            private readonly Container content;
+
+            public FontAwesome Icon
+            {
+                get { return icon.Icon; }
+                set { icon.Icon = value; }
+            }
+
+            private const float button_size = 30;
+
+            public Button()
+            {
+                AutoSizeAxes = Axes.Both;
+
+                Origin = Anchor.Centre;
+                Anchor = Anchor.Centre;
+
+                Children = new Drawable[]
+                {
+                    content = new Container
+                    {
+                        Size = new Vector2(button_size),
+                        CornerRadius = 5,
+                        Masking = true,
+
+                        Origin = Anchor.Centre,
+                        Anchor = Anchor.Centre,
+                        EdgeEffect = new EdgeEffect
+                        {
+                            Colour = Color4.Black.Opacity(0.04f),
+                            Type = EdgeEffectType.Shadow,
+                            Radius = 5,
+                        },
+                        Children = new Drawable[]
+                        {
+                            hover = new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Alpha = 0,
+                            },
+                            icon = new TextAwesome
+                            {
+                                TextSize = 18,
+                                Origin = Anchor.Centre,
+                                Anchor = Anchor.Centre
+                            }
+                        }
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                hover.Colour = colours.Yellow.Opacity(0.6f);
+            }
+
+            protected override bool OnHover(InputState state)
+            {
+                hover.FadeIn(500, EasingTypes.OutQuint);
+                return base.OnHover(state);
+            }
+
+            protected override void OnHoverLost(InputState state)
+            {
+                hover.FadeOut(500, EasingTypes.OutQuint);
+                base.OnHoverLost(state);
+            }
+
+            protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
+            {
+                content.ScaleTo(1, 2000, EasingTypes.OutQuint);
+                return base.OnMouseDown(state, args);
+            }
+
+            protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
+            {
+                content.ScaleTo(1, 1000, EasingTypes.OutElastic);
+                return base.OnMouseUp(state, args);
+            }
+        }
     }
 }