Улучшен layout и contextualbar

PlaylistShared.Pwa/Components/Global/ContextualBarContent.razor

@@ -2,20 +2,20 @@
 @inject ContextualActionBarService ContextualActionBarService
 
 @code {
-    [Parameter] public bool Bottom { get; set; } = false; 
+    [Parameter] public ContextualActionBarPosition Position { get; set; } = ContextualActionBarPosition.Default;
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
     protected override void OnParametersSet()
     {
         ContextualActionBarService.Content = ChildContent;
-        ContextualActionBarService.Bottom = Bottom;
+        ContextualActionBarService.Position = Position;
         ContextualActionBarService.ChangeParameters();
     }
 
     public void Dispose()
     {
         ContextualActionBarService.Content = null;
-        ContextualActionBarService.Bottom = null;
+        ContextualActionBarService.Position = ContextualActionBarPosition.Default;
         ContextualActionBarService.ChangeParameters();
     }
 }

PlaylistShared.Pwa/Layout/MainLayout.razor

@@ -1,8 +1,11 @@
+@using MudBlazor.Services
 @using PlaylistShared.Pwa.Components.Global
 @inherits LayoutComponentBase
 @inject PwaUpdateService PwaUpdateService
 @inject IJSRuntime JSRuntime
 @inject ContextualActionBarService ContextualActionBarService
+@inject IBrowserViewportService BrowserViewportService
+@implements IBrowserViewportObserver
 
 <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
@@ -38,7 +41,14 @@
 
 @code {
     private RenderFragment? _actionBarContent;
-    private bool _actionBarBottom = false;
+    private bool _actionBarBottom => _contextualPosition switch
+        {
+            ContextualActionBarPosition.Bottom => true,
+            ContextualActionBarPosition.Top => false,
+            _ => _isMobile,
+        };
+    private bool _isMobile = false;
+    private ContextualActionBarPosition _contextualPosition = ContextualActionBarPosition.Default;
 
     private bool _drawerOpen = true;
     private bool _isDarkMode = true;
@@ -66,13 +76,14 @@
         {
             _dotNetRef = DotNetObjectReference.Create(PwaUpdateService);
             await JSRuntime.InvokeVoidAsync("registerSWMessageHandler", _dotNetRef);
+            await BrowserViewportService.SubscribeAsync(this, fireImmediately: true);
         }
     }
 
     private void OnContextualChangedHandler()
     {
         _actionBarContent = ContextualActionBarService.Content;
-        _actionBarBottom = ContextualActionBarService.Bottom ?? false;
+        _contextualPosition = ContextualActionBarService.Position;
         StateHasChanged();
     }
 
@@ -130,4 +141,21 @@
         true => Icons.Material.Rounded.AutoMode,
         false => Icons.Material.Outlined.DarkMode,
     };
+
+    
+
+    Guid IBrowserViewportObserver.Id { get; } = Guid.NewGuid();
+
+    ResizeOptions IBrowserViewportObserver.ResizeOptions { get; } = new()
+    {
+        ReportRate = 250,
+        NotifyOnBreakpointOnly = true
+    };
+
+    Task IBrowserViewportObserver.NotifyBrowserViewportChangeAsync(BrowserViewportEventArgs browserViewportEventArgs)
+    {
+        _isMobile = browserViewportEventArgs.Breakpoint <= Breakpoint.Sm;
+
+        return InvokeAsync(StateHasChanged);
+    }
 }

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -36,8 +36,6 @@
                                                 OnClick="ToggleFavorite" 
                                                 Disabled="_favoriteLoading" 
                                                 Size="Size.Medium" />
-
-                                    <ShareButton />
                                     
                                     @if (_isCreator && _isAuthenticated)
                                     {
@@ -96,7 +94,7 @@
                     </div>
 
                     @* Кастомная панель навигации внизу *@
-                    <ContextualBarContent Bottom>
+                    <ContextualBarContent>
                             <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
                                             Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
                                             OnClick="() => _activeMobileTab = 0" />

PlaylistShared.Pwa/Services/ContextualActionBarService.cs

@@ -9,10 +9,17 @@ public class ContextualActionBarService
 
     public RenderFragment? Content { get; set; } = null;
 
-    public bool? Bottom { get; set; }
+    public ContextualActionBarPosition Position { get; set; } = ContextualActionBarPosition.Default;
 
     public void ChangeParameters()
     {
         OnChanged?.Invoke();
     }
+}
+
+public enum ContextualActionBarPosition
+{
+    Default,
+    Top,
+    Bottom,
 }