ersatztv/ErsatzTV/Shared/MediaCard.razor

@using ErsatzTV.Application.MediaCards
@using Unit = LanguageExt.Unit
@inject IMediator Mediator

<div class="@((ContainerClass ?? "media-card-container mr-6") + " pb-3")">
    @if (!string.IsNullOrWhiteSpace(Link))
    {
        <div style="position: relative">
            <MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
                @if (string.IsNullOrWhiteSpace(Data.Poster))
                {
                    <MudText Align="Align.Center" Typo="Typo.h1" Class="media-card-poster-placeholder mud-text-disabled">
                        @GetPlaceholder(Data.SortTitle)
                    </MudText>
                }
            </MudPaper>
            <div class="media-card-overlay" style="">
                <MudButton Link="@Link" Style="height: 100%; width: 100%">
                </MudButton>
                @if (AddToCollectionClicked.HasDelegate)
                {
                    <MudIconButton Color="Color.Tertiary"
                                   Icon="@Icons.Material.Filled.PlaylistAdd"
                                   Style="bottom: 0; left: 0; position: absolute;"
                                   OnClick="@(() => AddToCollectionClicked.InvokeAsync(Data))"/>
                }
                @if (DeleteClicked.HasDelegate)
                {
                    <MudIconButton Color="Color.Tertiary"
                                   Icon="@Icons.Material.Filled.Delete"
                                   Style="bottom: 0; position: absolute; right: 0;"
                                   OnClick="@(() => DeleteClicked.InvokeAsync(Data))"/>
                }
            </div>
        </div>
    }
    else
    {
        <MudPaper Class="@($"media-card {CardClass}")" Style="@ArtworkForItem()">
            @if (string.IsNullOrWhiteSpace(Data.Poster))
            {
                <MudText Align="Align.Center" Typo="Typo.h1" Class="media-card-poster-placeholder mud-text-disabled">
                    @GetPlaceholder(Data.SortTitle)
                </MudText>
            }
        </MudPaper>
    }
    <MudText Align="Align.Center" Class="media-card-title" UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })">
        @(Title ?? Data.Title)
    </MudText>
    <MudText Typo="Typo.body2" Align="Align.Center" Class="mud-text-secondary">
        @(Subtitle ?? Data.Subtitle)
    </MudText>
</div>

@code {

    [Parameter]
    public MediaCardViewModel Data { get; set; }

    [Parameter]
    public string Link { get; set; }

    [Parameter]
    public EventCallback<Unit> DataRefreshed { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public string Subtitle { get; set; }

    [Parameter]
    public string ContainerClass { get; set; }

    [Parameter]
    public string CardClass { get; set; }

    [Parameter]
    public ArtworkKind ArtworkKind { get; set; }

    [Parameter]
    public EventCallback<MediaCardViewModel> DeleteClicked { get; set; }

    [Parameter]
    public EventCallback<MediaCardViewModel> AddToCollectionClicked { get; set; }

    private string GetPlaceholder(string sortTitle)
    {
        if (Placeholder != null)
        {
            return Placeholder;
        }

        string first = sortTitle?.Substring(0, 1).ToUpperInvariant() ?? string.Empty;
        return int.TryParse(first, out _) ? "#" : first;
    }

    private string ArtworkForItem() => string.IsNullOrWhiteSpace(Data.Poster)
        ? "position: relative"
        : $"position: relative; background-image: url(/artwork/{PathForArtwork()}/{Data.Poster}); background-size: cover";

    private string PathForArtwork() => ArtworkKind switch
    {
        ArtworkKind.Thumbnail => "thumbnails",
        _ => "posters"
        };

}