add media card overflow menu (#2180)

* add media card overflow menu

* remove commented code

ErsatzTV/Shared/MediaCard.razor

@@ -1,6 +1,9 @@
 @using ErsatzTV.Application.MediaCards
+@using ErsatzTV.Application.MediaItems
 @using static Prelude
 @inject NavigationManager NavigationManager
+@inject IDialogService Dialog
+@inject IMediator Mediator
 
 <div class="@((ContainerClass ?? "media-card-container mr-6") + " pb-3")" id="@($"item_{Data.MediaItemId}")">
     @if (SelectClicked.HasDelegate || !string.IsNullOrWhiteSpace(Href))
@@ -35,32 +38,53 @@
                     <MudIcon Icon="@Icons.Material.Filled.Warning" Color="Color.Warning"/>
                 </div>
             }
-            <div class="media-card-overlay" style="">
-                <MudButton Style="height: 100%; width: 100%"
-                           OnClick="OnOverlayClick">
-                </MudButton>
+            <MudElement HtmlTag="div" Class="@_overlayClass" Style="">
+                <MudButton Style="height: 100%; width: 100%" OnClick="@OnOverlayClick" />
                 @if (SelectClicked.HasDelegate)
                 {
                     <MudIconButton Color="@SelectColor"
                                    Icon="@(IsSelected ? Icons.Material.Filled.CheckBox : Icons.Material.Filled.CheckBoxOutlineBlank)"
                                    Style="left: 0; position: absolute; top: 0;"
+                                   Class="media-card-select-checkbox"
                                    OnClick="@(e => SelectClicked.InvokeAsync(e))"/>
                 }
-                @if (AddToCollectionClicked.HasDelegate && !IsSelectMode)
+                @if (!IsSelectMode)
                 {
-                    <MudIconButton Color="Color.Tertiary"
-                                   Icon="@Icons.Material.Filled.PlaylistAdd"
-                                   Style="bottom: 0; left: 0; position: absolute;"
-                                   OnClick="@(() => AddToCollectionClicked.InvokeAsync(Data))"/>
+                    @if (AddToCollectionClicked.HasDelegate || AddToPlaylistClicked.HasDelegate || Data.HasMediaInfo)
+                    {
+                        <MudMenu Icon="@Icons.Material.Filled.MoreVert"
+                                 Style="bottom: 0; left: 0; position: absolute;"
+                                 OpenChanged="@OnMenuOpenChanged">
+                            @if (AddToCollectionClicked.HasDelegate)
+                            {
+                                <MudMenuItem Icon="@Icons.Material.Filled.Add"
+                                             Label="Add To Collection"
+                                             OnClick="@(() => AddToCollectionClicked.InvokeAsync(Data))"/>
+                            }
+                            @if (AddToPlaylistClicked.HasDelegate)
+                            {
+                                <MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd"
+                                             Label="Add To Playlist"
+                                             OnClick="@(() => AddToPlaylistClicked.InvokeAsync(Data))"/>
+                            }
+                            @if (Data.HasMediaInfo)
+                            {
+                                <MudMenuItem Icon="@Icons.Material.Filled.Info"
+                                             Label="Show Media Info"
+                                             OnClick="@ShowMediaInfo"/>
+                            }
+                        </MudMenu>
+                    }
+
+                    @if (DeleteClicked.HasDelegate)
+                    {
+                        <MudIconButton Color="Color.Error"
+                                       Icon="@Icons.Material.Filled.Delete"
+                                       Style="bottom: 0; position: absolute; right: 0;"
+                                       OnClick="@(() => DeleteClicked.InvokeAsync(Data))"/>
+                    }
                 }
-                @if (DeleteClicked.HasDelegate && !IsSelectMode)
-                {
-                    <MudIconButton Color="Color.Error"
-                                   Icon="@Icons.Material.Filled.Delete"
-                                   Style="bottom: 0; position: absolute; right: 0;"
-                                   OnClick="@(() => DeleteClicked.InvokeAsync(Data))"/>
-                }
-            </div>
+            </MudElement>
         </div>
     }
     else
@@ -117,6 +141,9 @@
     [Parameter]
     public EventCallback<MediaCardViewModel> AddToCollectionClicked { get; set; }
 
+    [Parameter]
+    public EventCallback<MediaCardViewModel> AddToPlaylistClicked { get; set; }
+
     [Parameter]
     public EventCallback<MouseEventArgs> SelectClicked { get; set; }
 
@@ -132,6 +159,8 @@
     [Parameter]
     public bool IsRemoteArtwork { get; set; }
 
+    private string _overlayClass = "media-card-overlay";
+
     private string GetPlaceholder(string sortTitle)
     {
         if (Placeholder != null)
@@ -173,4 +202,25 @@
         }
     }
 
+    private void OnMenuOpenChanged(bool open)
+    {
+        _overlayClass = open
+            ? "media-card-overlay media-card-overlay-menu-open"
+            : "media-card-overlay";
+
+        StateHasChanged();
+    }
+
+    private async Task ShowMediaInfo()
+    {
+        Either<BaseError, MediaItemInfo> maybeInfo = await Mediator.Send(new GetMediaItemInfo(Data.MediaItemId));
+        foreach (MediaItemInfo info in maybeInfo.RightToSeq())
+        {
+            var parameters = new DialogParameters { { "MediaItemInfo", info } };
+            var options = new DialogOptions { CloseButton = true, CloseOnEscapeKey = true, MaxWidth = MaxWidth.Medium, FullWidth = true };
+            IDialogReference dialog = await Dialog.ShowAsync<MediaItemInfoDialog>(Data.Title, parameters, options);
+            DialogResult _ = await dialog.Result;
+        }
+    }
+
 }

ErsatzTV/wwwroot/css/site.css

@@ -31,15 +31,6 @@
 
 .media-card-poster-placeholder { font-weight: bold; }
 
-.media-card-menu {
-    bottom: 0;
-    display: none;
-    position: absolute;
-    right: 0;
-}
-
-.media-card:hover .media-card-menu { display: block; }
-
 .media-card-overlay {
     background: rgba(0, 0, 0, 0.4);
     border-radius: 4px;
@@ -54,6 +45,10 @@
 
 .media-card-overlay:hover { opacity: 1; }
 
+.media-card-overlay:not(:hover) button.media-card-select-checkbox { opacity: 0; }
+
+.media-card-overlay-menu-open { opacity: 1; }
+
 .search-bar .mud-input { height: 42px; }
 
 .search-bar {