CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/BrowseView.razor

@inherits ViewBase

<div class="row justify-content-evenly mt-2">
    <div class="d-flex flex-row">
        <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
        <LibSelector SelectedLibs="@SelectedLibs" OnValueChanged="SelectedLibraryChanged"></LibSelector>
    </div>
</div>
<div class="row mt-2">
    <div class="col-12">
        <ul class="nav justify-content-start align-items-center">
            <li class="nav-item mb-1">
                <span>
                    Play all track (@(CurrentLibrary?.Discs.Sum(p => p.TrackSets.First().Tracks.Length).ToString() ?? "..."))
                </span>
            </li>

            @if (CurrentLibrary != null)
            {
                foreach (var cat in (CurrentLibrary?.Catalogs).KeepNoEmpty())
                {
                    <li class="nav-item mb-1 mx-2">
                        <a class="nav-link btn btn-secondary"
                   href="@cat?.PlaylistPath"
                   target="@FnzConst.PlaylistPageTarget"
                   onclick="return BlockDownloadAndOpenHtmlPage(this)">
                            <small class="font-monospace text-muted">@cat?.TotalDuration.SecondToDur() @cat?.TotalBytes.BytesToFileSize()</small>
                            @cat?.Name
                        </a>
                    </li>
                }
            }
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="row">
            @foreach (var disc in (CurrentLibrary?.Discs).KeepNoEmpty())
            {
                <div class="col-md-3 d-flex align-items-stretch">
                    @*TODO: Card Component*@
                    <div class="card mb-3 shadow-sm" @onclick="()=>{ if (disc!=null) SelectDisc(disc); }">
                        <img class="card-img-top" src="@disc.CoverPath" onerror="this.src='blazor-192.png'">
                        <div class="card-body d-flex align-content-between flex-wrap p-2">
                            <p class="card-text">@disc?.Name</p>
                            <div class="w-100">
                                <div class="w-100 text-center">
                                    <small class="font-monospace text-muted">Track @disc.TrackSets.First().Tracks.Length</small>
                                </div>
                                @foreach (var tSet in (disc?.TrackSets).KeepNoEmpty())
                                {
                                    <div class="d-flex justify-content-between w-100">
                                        <span class="align-self-center">@(tSet?.Name.StartsWith("AAC_Q1.00") == true ? "Q1" + tSet?.Name.Substring(9) : tSet?.Name)</span>
                                        <small class="text-nowrap font-monospace text-muted align-self-center">@tSet?.TotalDuration.SecondToDur() @tSet?.TotalBytes.BytesToFileSize()</small>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<div class="modal fade" id="ModalDisc" aria-hidden="true" aria-labelledby="ModalDiscLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalDiscLabel">@CurrentDisc?.Name</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @*TODO: Disc Modal*@
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4 mb-1"><img class="card-img-top" src="@CurrentDisc?.CoverPath" onerror="this.src='blazor-192.png'"></div>
                        <div class="col-md-8">
                            <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
                                @foreach (var subSet in (CurrentDisc?.TrackSets).KeepNoEmpty().WithIndex())
                                {
                                    <li class="nav-item " role="presentation">
                                        <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button" role="tab" aria-controls="home" aria-selected="true">
                                            @subSet.item?.Name
                                        </button>
                                    </li>
                                }
                            </ul>
                            <div class="tab-content" id="ModalDiscTabContent">
                                @foreach (var subSet in (CurrentDisc?.TrackSets).KeepNoEmpty().WithIndex())
                                {
                                    <div class="tab-pane fade" id="tracks-@subSet.index" role="tabpanel" aria-labelledby="home-tab">
                                        <TrackSetTable TrackSet="subSet.item"></TrackSetTable>
                                    </div>
                                }
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>