Merge pull request #14256 from smoogipoo/multiplayer-header-redesign

Update multiplayer header to the latest designs

osu.Game.Tests/Visual/Multiplayer/TestSceneMultiplayer.cs

@@ -87,6 +87,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
         public void TestEmpty()
         {
             // used to test the flow of multiplayer from visual tests.
+            AddStep("empty step", () => { });
         }
 
         [Test]
@@ -408,8 +409,6 @@ namespace osu.Game.Tests.Visual.Multiplayer
 
             AddAssert("dialog overlay is hidden", () => DialogOverlay.State.Value == Visibility.Hidden);
 
-            testLeave("lounge tab item", () => this.ChildrenOfType<BreadcrumbControl<IScreen>.BreadcrumbTabItem>().First().TriggerClick());
-
             testLeave("back button", () => multiplayerScreen.OnBackButton());
 
             // mimics home button and OS window close

osu.Game.Tests/Visual/Playlists/TestScenePlaylistsFilterControl.cs

@@ -1,23 +0,0 @@
-// 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;
-using osu.Game.Screens.OnlinePlay.Lounge.Components;
-
-namespace osu.Game.Tests.Visual.Playlists
-{
-    public class TestScenePlaylistsFilterControl : OsuTestScene
-    {
-        public TestScenePlaylistsFilterControl()
-        {
-            Child = new PlaylistsFilterControl
-            {
-                Anchor = Anchor.Centre,
-                Origin = Anchor.Centre,
-                RelativeSizeAxes = Axes.X,
-                Width = 0.7f,
-                Height = 80,
-            };
-        }
-    }
-}

osu.Game/Screens/OnlinePlay/Header.cs

@@ -2,19 +2,15 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using Humanizer;
+using JetBrains.Annotations;
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Screens;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.OnlinePlay
 {
@@ -22,52 +18,30 @@ namespace osu.Game.Screens.OnlinePlay
     {
         public const float HEIGHT = 80;
 
+        private readonly ScreenStack stack;
+        private readonly MultiHeaderTitle title;
+
         public Header(string mainTitle, ScreenStack stack)
         {
+            this.stack = stack;
+
             RelativeSizeAxes = Axes.X;
             Height = HEIGHT;
+            Padding = new MarginPadding { Left = WaveOverlayContainer.WIDTH_PADDING };
 
-            HeaderBreadcrumbControl breadcrumbs;
+            Child = title = new MultiHeaderTitle(mainTitle)
-            MultiHeaderTitle title;
-
-            Children = new Drawable[]
             {
-                new Box
+                Anchor = Anchor.CentreLeft,
-                {
+                Origin = Anchor.CentreLeft,
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = Color4Extensions.FromHex(@"#1f1921"),
-                },
-                new Container
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Left = WaveOverlayContainer.WIDTH_PADDING + OsuScreen.HORIZONTAL_OVERFLOW_PADDING },
-                    Children = new Drawable[]
-                    {
-                        title = new MultiHeaderTitle(mainTitle)
-                        {
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.BottomLeft,
-                        },
-                        breadcrumbs = new HeaderBreadcrumbControl(stack)
-                        {
-                            Anchor = Anchor.BottomLeft,
-                            Origin = Anchor.BottomLeft
-                        }
-                    },
-                },
             };
 
-            breadcrumbs.Current.ValueChanged += screen =>
+            // unnecessary to unbind these as this header has the same lifetime as the screen stack we are attaching to.
-            {
+            stack.ScreenPushed += (_, __) => updateSubScreenTitle();
-                if (screen.NewValue is IOnlinePlaySubScreen onlineSubScreen)
+            stack.ScreenExited += (_, __) => updateSubScreenTitle();
-                    title.Screen = onlineSubScreen;
-            };
-
-            breadcrumbs.Current.TriggerChange();
         }
 
+        private void updateSubScreenTitle() => title.Screen = stack.CurrentScreen as IOnlinePlaySubScreen;
+
         private class MultiHeaderTitle : CompositeDrawable
         {
             private const float spacing = 6;
@@ -75,9 +49,10 @@ namespace osu.Game.Screens.OnlinePlay
             private readonly OsuSpriteText dot;
             private readonly OsuSpriteText pageTitle;
 
+            [CanBeNull]
             public IOnlinePlaySubScreen Screen
             {
-                set => pageTitle.Text = value.ShortTitle.Titleize();
+                set => pageTitle.Text = value?.ShortTitle.Titleize() ?? string.Empty;
             }
 
             public MultiHeaderTitle(string mainTitle)
@@ -125,35 +100,5 @@ namespace osu.Game.Screens.OnlinePlay
                 pageTitle.Colour = dot.Colour = colours.Yellow;
             }
         }
-
-        private class HeaderBreadcrumbControl : ScreenBreadcrumbControl
-        {
-            public HeaderBreadcrumbControl(ScreenStack stack)
-                : base(stack)
-            {
-                RelativeSizeAxes = Axes.X;
-                StripColour = Color4.Transparent;
-            }
-
-            protected override void LoadComplete()
-            {
-                base.LoadComplete();
-                AccentColour = Color4Extensions.FromHex("#e35c99");
-            }
-
-            protected override TabItem<IScreen> CreateTabItem(IScreen value) => new HeaderBreadcrumbTabItem(value)
-            {
-                AccentColour = AccentColour
-            };
-
-            private class HeaderBreadcrumbTabItem : BreadcrumbTabItem
-            {
-                public HeaderBreadcrumbTabItem(IScreen value)
-                    : base(value)
-                {
-                    Bar.Colour = Color4.Transparent;
-                }
-            }
-        }
     }
 }

osu.Game/Screens/OnlinePlay/Lounge/Components/FilterControl.cs

@@ -1,125 +0,0 @@
-// 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;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Threading;
-using osu.Game.Graphics;
-using osu.Game.Graphics.UserInterface;
-using osu.Game.Rulesets;
-using osuTK;
-
-namespace osu.Game.Screens.OnlinePlay.Lounge.Components
-{
-    public abstract class FilterControl : CompositeDrawable
-    {
-        protected readonly FillFlowContainer Filters;
-
-        [Resolved(CanBeNull = true)]
-        private Bindable<FilterCriteria> filter { get; set; }
-
-        [Resolved]
-        private IBindable<RulesetInfo> ruleset { get; set; }
-
-        private readonly SearchTextBox search;
-        private readonly Dropdown<RoomStatusFilter> statusDropdown;
-
-        protected FilterControl()
-        {
-            RelativeSizeAxes = Axes.X;
-            Height = 70;
-
-            InternalChild = new FillFlowContainer
-            {
-                RelativeSizeAxes = Axes.Both,
-                Direction = FillDirection.Vertical,
-                Spacing = new Vector2(10),
-                Children = new Drawable[]
-                {
-                    search = new FilterSearchTextBox
-                    {
-                        Anchor = Anchor.TopRight,
-                        Origin = Anchor.TopRight,
-                        RelativeSizeAxes = Axes.X,
-                        Width = 0.6f,
-                    },
-                    Filters = new FillFlowContainer
-                    {
-                        Anchor = Anchor.TopRight,
-                        Origin = Anchor.TopRight,
-                        AutoSizeAxes = Axes.Both,
-                        Direction = FillDirection.Horizontal,
-                        Spacing = new Vector2(10),
-                        Child = statusDropdown = new SlimEnumDropdown<RoomStatusFilter>
-                        {
-                            Anchor = Anchor.TopRight,
-                            Origin = Anchor.TopRight,
-                            RelativeSizeAxes = Axes.None,
-                            Width = 160,
-                        }
-                    },
-                }
-            };
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            filter ??= new Bindable<FilterCriteria>();
-        }
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-
-            search.Current.BindValueChanged(_ => updateFilterDebounced());
-            ruleset.BindValueChanged(_ => UpdateFilter());
-            statusDropdown.Current.BindValueChanged(_ => UpdateFilter(), true);
-        }
-
-        private ScheduledDelegate scheduledFilterUpdate;
-
-        private void updateFilterDebounced()
-        {
-            scheduledFilterUpdate?.Cancel();
-            scheduledFilterUpdate = Scheduler.AddDelayed(UpdateFilter, 200);
-        }
-
-        protected void UpdateFilter() => Scheduler.AddOnce(updateFilter);
-
-        private void updateFilter()
-        {
-            scheduledFilterUpdate?.Cancel();
-
-            var criteria = CreateCriteria();
-            criteria.SearchString = search.Current.Value;
-            criteria.Status = statusDropdown.Current.Value;
-            criteria.Ruleset = ruleset.Value;
-
-            filter.Value = criteria;
-        }
-
-        protected virtual FilterCriteria CreateCriteria() => new FilterCriteria();
-
-        public bool HoldFocus
-        {
-            get => search.HoldFocus;
-            set => search.HoldFocus = value;
-        }
-
-        public void TakeFocus() => search.TakeFocus();
-
-        private class FilterSearchTextBox : SearchTextBox
-        {
-            [BackgroundDependencyLoader]
-            private void load()
-            {
-                BackgroundUnfocused = OsuColour.Gray(0.06f);
-                BackgroundFocused = OsuColour.Gray(0.12f);
-            }
-        }
-    }
-}

osu.Game/Screens/OnlinePlay/Lounge/Components/PlaylistsFilterControl.cs

@@ -1,57 +0,0 @@
-// 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;
-using osu.Framework.Graphics.UserInterface;
-using osu.Game.Graphics.UserInterface;
-
-namespace osu.Game.Screens.OnlinePlay.Lounge.Components
-{
-    public class PlaylistsFilterControl : FilterControl
-    {
-        private readonly Dropdown<PlaylistsCategory> categoryDropdown;
-
-        public PlaylistsFilterControl()
-        {
-            Filters.Add(categoryDropdown = new SlimEnumDropdown<PlaylistsCategory>
-            {
-                Anchor = Anchor.TopRight,
-                Origin = Anchor.TopRight,
-                RelativeSizeAxes = Axes.None,
-                Width = 160,
-            });
-        }
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-
-            categoryDropdown.Current.BindValueChanged(_ => UpdateFilter());
-        }
-
-        protected override FilterCriteria CreateCriteria()
-        {
-            var criteria = base.CreateCriteria();
-
-            switch (categoryDropdown.Current.Value)
-            {
-                case PlaylistsCategory.Normal:
-                    criteria.Category = "normal";
-                    break;
-
-                case PlaylistsCategory.Spotlight:
-                    criteria.Category = "spotlight";
-                    break;
-            }
-
-            return criteria;
-        }
-
-        private enum PlaylistsCategory
-        {
-            Any,
-            Normal,
-            Spotlight
-        }
-    }
-}

osu.Game/Screens/OnlinePlay/Lounge/LoungeSubScreen.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using JetBrains.Annotations;
 using osu.Framework.Allocation;
@@ -9,18 +10,20 @@ using osu.Framework.Bindables;
 using osu.Framework.Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
 using osu.Framework.Screens;
+using osu.Framework.Threading;
+using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.Rooms;
 using osu.Game.Overlays;
+using osu.Game.Rulesets;
 using osu.Game.Screens.OnlinePlay.Lounge.Components;
 using osu.Game.Screens.OnlinePlay.Match;
 using osu.Game.Users;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.OnlinePlay.Lounge
 {
@@ -41,7 +44,6 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
         private readonly IBindable<bool> initialRoomsReceived = new Bindable<bool>();
         private readonly IBindable<bool> operationInProgress = new Bindable<bool>();
 
-        private FilterControl filter;
         private LoadingLayer loadingLayer;
 
         [Resolved]
@@ -53,31 +55,33 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
         [Resolved(CanBeNull = true)]
         private OngoingOperationTracker ongoingOperationTracker { get; set; }
 
+        [Resolved(CanBeNull = true)]
+        private Bindable<FilterCriteria> filter { get; set; }
+
+        [Resolved]
+        private IBindable<RulesetInfo> ruleset { get; set; }
+
         [CanBeNull]
         private IDisposable joiningRoomOperation { get; set; }
 
         private RoomsContainer roomsContainer;
+        private SearchTextBox searchTextBox;
+        private Dropdown<RoomStatusFilter> statusDropdown;
 
         [BackgroundDependencyLoader]
         private void load()
         {
+            filter ??= new Bindable<FilterCriteria>(new FilterCriteria());
+
             OsuScrollContainer scrollContainer;
 
             InternalChildren = new Drawable[]
             {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.X,
-                    Height = 100,
-                    Colour = Color4.Black,
-                    Alpha = 0.5f,
-                },
                 new Container
                 {
                     RelativeSizeAxes = Axes.Both,
                     Padding = new MarginPadding
                     {
-                        Top = 20,
                         Left = WaveOverlayContainer.WIDTH_PADDING,
                         Right = WaveOverlayContainer.WIDTH_PADDING,
                     },
@@ -86,26 +90,50 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
                         RelativeSizeAxes = Axes.Both,
                         RowDimensions = new[]
                         {
-                            new Dimension(GridSizeMode.AutoSize),
+                            new Dimension(GridSizeMode.Absolute, Header.HEIGHT),
+                            new Dimension(GridSizeMode.Absolute, 25),
                             new Dimension(GridSizeMode.Absolute, 20)
                         },
                         Content = new[]
                         {
+                            new Drawable[]
+                            {
+                                searchTextBox = new LoungeSearchTextBox
+                                {
+                                    Anchor = Anchor.CentreRight,
+                                    Origin = Anchor.CentreRight,
+                                    RelativeSizeAxes = Axes.X,
+                                    Width = 0.6f,
+                                },
+                            },
                             new Drawable[]
                             {
                                 new Container
                                 {
-                                    RelativeSizeAxes = Axes.X,
+                                    RelativeSizeAxes = Axes.Both,
-                                    Height = 70,
+                                    Depth = float.MinValue, // Contained filters should appear over the top of rooms.
-                                    Depth = -1,
                                     Children = new Drawable[]
                                     {
-                                        filter = CreateFilterControl(),
                                         Buttons.WithChild(CreateNewRoomButton().With(d =>
                                         {
-                                            d.Size = new Vector2(150, 25);
+                                            d.Anchor = Anchor.BottomLeft;
+                                            d.Origin = Anchor.BottomLeft;
+                                            d.Size = new Vector2(150, 37.5f);
                                             d.Action = () => Open();
-                                        }))
+                                        })),
+                                        new FillFlowContainer
+                                        {
+                                            Anchor = Anchor.TopRight,
+                                            Origin = Anchor.TopRight,
+                                            AutoSizeAxes = Axes.Both,
+                                            Direction = FillDirection.Horizontal,
+                                            Spacing = new Vector2(10),
+                                            ChildrenEnumerable = CreateFilterControls().Select(f => f.With(d =>
+                                            {
+                                                d.Anchor = Anchor.TopRight;
+                                                d.Origin = Anchor.TopRight;
+                                            }))
+                                        }
                                     }
                                 }
                             },
@@ -145,6 +173,9 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
         {
             base.LoadComplete();
 
+            searchTextBox.Current.BindValueChanged(_ => updateFilterDebounced());
+            ruleset.BindValueChanged(_ => UpdateFilter());
+
             initialRoomsReceived.BindTo(RoomManager.InitialRoomsReceived);
             initialRoomsReceived.BindValueChanged(_ => updateLoadingLayer());
 
@@ -153,13 +184,50 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
                 operationInProgress.BindTo(ongoingOperationTracker.InProgress);
                 operationInProgress.BindValueChanged(_ => updateLoadingLayer(), true);
             }
+
+            updateFilter();
         }
 
-        protected override void OnFocus(FocusEvent e)
+        #region Filtering
+
+        protected void UpdateFilter() => Scheduler.AddOnce(updateFilter);
+
+        private ScheduledDelegate scheduledFilterUpdate;
+
+        private void updateFilterDebounced()
         {
-            filter.TakeFocus();
+            scheduledFilterUpdate?.Cancel();
+            scheduledFilterUpdate = Scheduler.AddDelayed(UpdateFilter, 200);
         }
 
+        private void updateFilter()
+        {
+            scheduledFilterUpdate?.Cancel();
+            filter.Value = CreateFilterCriteria();
+        }
+
+        protected virtual FilterCriteria CreateFilterCriteria() => new FilterCriteria
+        {
+            SearchString = searchTextBox.Current.Value,
+            Ruleset = ruleset.Value,
+            Status = statusDropdown.Current.Value
+        };
+
+        protected virtual IEnumerable<Drawable> CreateFilterControls()
+        {
+            statusDropdown = new SlimEnumDropdown<RoomStatusFilter>
+            {
+                RelativeSizeAxes = Axes.None,
+                Width = 160,
+            };
+
+            statusDropdown.Current.BindValueChanged(_ => UpdateFilter());
+
+            yield return statusDropdown;
+        }
+
+        #endregion
+
         public override void OnEntering(IScreen last)
         {
             base.OnEntering(last);
@@ -191,14 +259,19 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
             base.OnSuspending(next);
         }
 
+        protected override void OnFocus(FocusEvent e)
+        {
+            searchTextBox.TakeFocus();
+        }
+
         private void onReturning()
         {
-            filter.HoldFocus = true;
+            searchTextBox.HoldFocus = true;
         }
 
         private void onLeaving()
         {
-            filter.HoldFocus = false;
+            searchTextBox.HoldFocus = false;
 
             // ensure any password prompt is dismissed.
             this.HidePopover();
@@ -243,8 +316,6 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
             this.Push(CreateRoomSubScreen(room));
         }
 
-        protected abstract FilterControl CreateFilterControl();
-
         protected abstract OsuButton CreateNewRoomButton();
 
         /// <summary>
@@ -262,5 +333,15 @@ namespace osu.Game.Screens.OnlinePlay.Lounge
             else
                 loadingLayer.Hide();
         }
+
+        private class LoungeSearchTextBox : SearchTextBox
+        {
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                BackgroundUnfocused = OsuColour.Gray(0.06f);
+                BackgroundFocused = OsuColour.Gray(0.12f);
+            }
+        }
     }
 }

osu.Game/Screens/OnlinePlay/Match/RoomSubScreen.cs

@@ -8,8 +8,10 @@ using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Screens;
 using osu.Game.Audio;
 using osu.Game.Beatmaps;
@@ -62,8 +64,15 @@ namespace osu.Game.Screens.OnlinePlay.Match
 
         protected RoomSubScreen()
         {
+            Padding = new MarginPadding { Top = Header.HEIGHT };
+
             AddRangeInternal(new Drawable[]
             {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4Extensions.FromHex(@"3e3a44") // This is super temporary.
+                },
                 BeatmapAvailabilityTracker = new OnlinePlayBeatmapAvailabilityTracker
                 {
                     SelectedItem = { BindTarget = SelectedItem }

osu.Game/Screens/OnlinePlay/Multiplayer/MultiplayerFilterControl.cs

@@ -1,17 +0,0 @@
-// 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.Screens.OnlinePlay.Lounge.Components;
-
-namespace osu.Game.Screens.OnlinePlay.Multiplayer
-{
-    public class MultiplayerFilterControl : FilterControl
-    {
-        protected override FilterCriteria CreateCriteria()
-        {
-            var criteria = base.CreateCriteria();
-            criteria.Category = "realtime";
-            return criteria;
-        }
-    }
-}

osu.Game/Screens/OnlinePlay/Multiplayer/MultiplayerLoungeSubScreen.cs

@@ -21,7 +21,12 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer
         [Resolved]
         private MultiplayerClient client { get; set; }
 
-        protected override FilterControl CreateFilterControl() => new MultiplayerFilterControl();
+        protected override FilterCriteria CreateFilterCriteria()
+        {
+            var criteria = base.CreateFilterCriteria();
+            criteria.Category = @"realtime";
+            return criteria;
+        }
 
         protected override OsuButton CreateNewRoomButton() => new CreateMultiplayerMatchButton();
 

osu.Game/Screens/OnlinePlay/OnlinePlayScreen.cs

@@ -21,8 +21,9 @@ using osu.Game.Screens.Menu;
 using osu.Game.Screens.OnlinePlay.Components;
 using osu.Game.Screens.OnlinePlay.Lounge;
 using osu.Game.Screens.OnlinePlay.Lounge.Components;
-using osu.Game.Screens.OnlinePlay.Match;
 using osu.Game.Users;
+using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Screens.OnlinePlay
 {
@@ -71,9 +72,6 @@ namespace osu.Game.Screens.OnlinePlay
         [Resolved(CanBeNull = true)]
         private OsuLogo logo { get; set; }
 
-        private Drawable header;
-        private Drawable headerBackground;
-
         protected OnlinePlayScreen()
         {
             Anchor = Anchor.Centre;
@@ -104,42 +102,26 @@ namespace osu.Game.Screens.OnlinePlay
                     new Container
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Padding = new MarginPadding { Top = Header.HEIGHT },
+                        Children = new Drawable[]
-                        Children = new[]
                         {
-                            header = new Container
+                            new BufferedContainer
                             {
-                                RelativeSizeAxes = Axes.X,
+                                RelativeSizeAxes = Axes.Both,
-                                Height = 400,
+                                BlurSigma = new Vector2(10),
-                                Children = new[]
+                                Child = new BeatmapBackgroundSprite
                                 {
-                                    headerBackground = new Container
+                                    RelativeSizeAxes = Axes.Both
-                                    {
-                                        RelativeSizeAxes = Axes.Both,
-                                        Width = 1.25f,
-                                        Masking = true,
-                                        Children = new Drawable[]
-                                        {
-                                            new HeaderBackgroundSprite
-                                            {
-                                                RelativeSizeAxes = Axes.X,
-                                                Height = 400 // Keep a static height so the header doesn't change as it's resized between subscreens
-                                            },
-                                        }
-                                    },
-                                    new Container
-                                    {
-                                        RelativeSizeAxes = Axes.Both,
-                                        Padding = new MarginPadding { Bottom = -1 }, // 1px padding to avoid a 1px gap due to masking
-                                        Child = new Box
-                                        {
-                                            RelativeSizeAxes = Axes.Both,
-                                            Colour = ColourInfo.GradientVertical(backgroundColour.Opacity(0.5f), backgroundColour)
-                                        },
-                                    }
                                 }
                             },
-                            screenStack = new OnlinePlaySubScreenStack { RelativeSizeAxes = Axes.Both }
+                            new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(0.9f), Color4.Black.Opacity(0.6f))
+                            },
+                            screenStack = new OnlinePlaySubScreenStack
+                            {
+                                RelativeSizeAxes = Axes.Both
+                            }
                         }
                     },
                     new Header(ScreenTitle, screenStack),
@@ -292,19 +274,6 @@ namespace osu.Game.Screens.OnlinePlay
 
         private void subScreenChanged(IScreen lastScreen, IScreen newScreen)
         {
-            switch (newScreen)
-            {
-                case LoungeSubScreen _:
-                    header.Delay(OnlinePlaySubScreen.RESUME_TRANSITION_DELAY).ResizeHeightTo(400, OnlinePlaySubScreen.APPEAR_DURATION, Easing.OutQuint);
-                    headerBackground.MoveToX(0, OnlinePlaySubScreen.X_MOVE_DURATION, Easing.OutQuint);
-                    break;
-
-                case RoomSubScreen _:
-                    header.ResizeHeightTo(135, OnlinePlaySubScreen.APPEAR_DURATION, Easing.OutQuint);
-                    headerBackground.MoveToX(-OnlinePlaySubScreen.X_SHIFT, OnlinePlaySubScreen.X_MOVE_DURATION, Easing.OutQuint);
-                    break;
-            }
-
             if (lastScreen is IOsuScreen lastOsuScreen)
                 Activity.UnbindFrom(lastOsuScreen.Activity);
 
@@ -335,13 +304,13 @@ namespace osu.Game.Screens.OnlinePlay
             }
         }
 
-        private class HeaderBackgroundSprite : OnlinePlayBackgroundSprite
+        private class BeatmapBackgroundSprite : OnlinePlayBackgroundSprite
         {
             protected override UpdateableBeatmapBackgroundSprite CreateBackgroundSprite() => new BackgroundSprite { RelativeSizeAxes = Axes.Both };
 
             private class BackgroundSprite : UpdateableBeatmapBackgroundSprite
             {
-                protected override double TransformDuration => 200;
+                protected override double LoadDelay => 200;
             }
         }
 

osu.Game/Screens/OnlinePlay/OnlinePlaySongSelect.cs

@@ -59,6 +59,8 @@ namespace osu.Game.Screens.OnlinePlay
         [BackgroundDependencyLoader]
         private void load()
         {
+            LeftArea.Padding = new MarginPadding { Top = Header.HEIGHT };
+
             initialBeatmap = Beatmap.Value;
             initialRuleset = Ruleset.Value;
             initialMods = Mods.Value.ToList();

osu.Game/Screens/OnlinePlay/Playlists/PlaylistsLoungeSubScreen.cs

@@ -1,7 +1,11 @@
 // 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.Collections.Generic;
+using System.Linq;
 using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API;
 using osu.Game.Online.Rooms;
@@ -16,7 +20,38 @@ namespace osu.Game.Screens.OnlinePlay.Playlists
         [Resolved]
         private IAPIProvider api { get; set; }
 
-        protected override FilterControl CreateFilterControl() => new PlaylistsFilterControl();
+        private Dropdown<PlaylistsCategory> categoryDropdown;
+
+        protected override IEnumerable<Drawable> CreateFilterControls()
+        {
+            categoryDropdown = new SlimEnumDropdown<PlaylistsCategory>
+            {
+                RelativeSizeAxes = Axes.None,
+                Width = 160,
+            };
+
+            categoryDropdown.Current.BindValueChanged(_ => UpdateFilter());
+
+            return base.CreateFilterControls().Append(categoryDropdown);
+        }
+
+        protected override FilterCriteria CreateFilterCriteria()
+        {
+            var criteria = base.CreateFilterCriteria();
+
+            switch (categoryDropdown.Current.Value)
+            {
+                case PlaylistsCategory.Normal:
+                    criteria.Category = @"normal";
+                    break;
+
+                case PlaylistsCategory.Spotlight:
+                    criteria.Category = @"spotlight";
+                    break;
+            }
+
+            return criteria;
+        }
 
         protected override OsuButton CreateNewRoomButton() => new CreatePlaylistsRoomButton();
 
@@ -30,5 +65,12 @@ namespace osu.Game.Screens.OnlinePlay.Playlists
         }
 
         protected override RoomSubScreen CreateRoomSubScreen(Room room) => new PlaylistsRoomSubScreen(room);
+
+        private enum PlaylistsCategory
+        {
+            Any,
+            Normal,
+            Spotlight
+        }
     }
 }

osu.Game/Screens/Select/SongSelect.cs

@@ -79,6 +79,8 @@ namespace osu.Game.Screens.Select
 
         protected BeatmapCarousel Carousel { get; private set; }
 
+        protected Container LeftArea { get; private set; }
+
         private BeatmapInfoWedge beatmapInfoWedge;
         private DialogOverlay dialogOverlay;
 
@@ -186,12 +188,12 @@ namespace osu.Game.Screens.Select
                             {
                                 new Drawable[]
                                 {
-                                    new Container
+                                    LeftArea = new Container
                                     {
                                         Origin = Anchor.BottomLeft,
                                         Anchor = Anchor.BottomLeft,
                                         RelativeSizeAxes = Axes.Both,
-
+                                        Padding = new MarginPadding { Top = left_area_padding },
                                         Children = new Drawable[]
                                         {
                                             beatmapInfoWedge = new BeatmapInfoWedge
@@ -200,7 +202,6 @@ namespace osu.Game.Screens.Select
                                                 RelativeSizeAxes = Axes.X,
                                                 Margin = new MarginPadding
                                                 {
-                                                    Top = left_area_padding,
                                                     Right = left_area_padding,
                                                 },
                                             },
@@ -210,7 +211,7 @@ namespace osu.Game.Screens.Select
                                                 Padding = new MarginPadding
                                                 {
                                                     Bottom = Footer.HEIGHT,
-                                                    Top = WEDGE_HEIGHT + left_area_padding,
+                                                    Top = WEDGE_HEIGHT,
                                                     Left = left_area_padding,
                                                     Right = left_area_padding * 2,
                                                 },