deepdrft/DeepDrftPublic.Client/Pages/TrackDetail.razor

@page "/track/{EntryKey}"
@using DeepDrftPublic.Client.Controls

<PageTitle>@(ViewModel.Track?.TrackName ?? "Track") - DeepDrft</PageTitle>

@if (ViewModel.IsLoading)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-cover">
            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="320px" />
        </div>
        <div class="deepdrft-track-detail-masthead">
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="70%" Height="56px" />
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="40%" Height="32px" />
        </div>
        <div class="deepdrft-track-detail-meta">
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="30%" Height="24px" />
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="25%" Height="24px" />
        </div>
    </div>
}
else if (ViewModel.NotFound)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-masthead">
            <MudText Typo="Typo.h4" Align="Align.Center">Track not found.</MudText>
            <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">
                This track may have been moved or removed.
            </MudText>
            <div class="d-flex justify-center mt-4">
                <MudButton Href="/tracks"
                           Variant="Variant.Text"
                           StartIcon="@Icons.Material.Filled.ArrowBack">
                    All tracks
                </MudButton>
            </div>
        </div>
    </div>
}
else if (ViewModel.Track is not null)
{
    var track = ViewModel.Track;
    var isThisTrackPlaying = PlayerService.CurrentTrack?.Id == track.Id
                             && PlayerService.IsPlaying
                             && !PlayerService.IsPaused;
    var release = track.Release;
    var hasMeta = release is not null
                  && (release.Title is not null || release.Genre is not null || release.ReleaseDate is not null);

    <div class="deepdrft-track-detail-container">

        <MudLink Href="/tracks" Typo="Typo.body2" Class="deepdrft-track-detail-back">
            &larr; All tracks
        </MudLink>

        <MudStack Row AlignItems="AlignItems.Start" Justify="Justify.SpaceBetween" Style="margin: 2rem 0 1.5rem;">
            <div class="deepdrft-track-detail-masthead">
                <MudText Typo="Typo.h3">@track.TrackName</MudText>
                <MudText Typo="Typo.h6" Color="Color.Primary">@release?.Artist</MudText>
            </div>
            
            <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
                <SharePopover EntryKey="@track.EntryKey" />
                <PlayStateIcon Size="Size.Large" Color="Color.Secondary" OnToggle="@PlayTrack"/>
            </MudStack>
        </MudStack>

        <div class="deepdrft-track-detail-cover">
            @if (!string.IsNullOrEmpty(release?.ImagePath))
            {
                <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
                          Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath)}');")" />
            }
            else
            {
                <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
                    <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
                </MudPaper>
            }
        </div>

        @if (hasMeta)
        {
            <MudDivider />

            <div class="deepdrft-track-detail-meta">
                @if (release?.Title is not null)
                {
                    <div>
                        <MudText Typo="Typo.overline">Album</MudText>
                        <MudText Typo="Typo.body1">@release.Title</MudText>
                    </div>
                }

                @if (release?.Genre is not null)
                {
                    <div>
                        <MudChip T="string"
                                 Variant="Variant.Outlined"
                                 Color="Color.Tertiary"
                                 Class="deepdrft-genre-chip">
                            @release.Genre
                        </MudChip>
                    </div>
                }

                @if (release?.ReleaseDate is not null)
                {
                    <div>
                        <MudText Typo="Typo.overline">Released</MudText>
                        <MudText Typo="Typo.body1">@release.ReleaseDate.Value.ToString("MMMM yyyy")</MudText>
                    </div>
                }
            </div>
        }

    </div>
}