CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/App.razor

<div class="container">
    <a style="float:right" href="/classic-index">Back OLD Home Page</a>
    <h3>Blazor WASM UI</h3>

    @if (Progress?.IsLoading != false)
    {
        <span>Waiting server ready...</span>
        <span>@(Progress?.LoadedTags ?? 0)</span>
        <span>/</span>
        <span>@(Progress?.TotalTrackCount ?? 0)</span>
    }
    else if (FnzDataSet.Libraries == null)
    {
        <span>Loading file set...</span>
    }
    else if (FnzDataSet.MediaTags == null)
    {
        <span>Loading tags...</span>
    }
    else
    {
        <ul class="nav nav-tabs justify-content-center nav-fill" id="RootTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                    Browse
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                    Search
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                    Playlists
                </button>
            </li>
        </ul>
        <div class="tab-content" id="RootTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="row justify-content-evenly mt-2">
                    <div class="d-flex flex-row">
                        <span>Library (@FnzDataSet.Libraries.Count):&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 (@FnzDataSet.Libraries[CurrentLibraryKey].Discs.Sum(p=>p.Value.MainTracks.Count))</span>
                            </li>
                            <li class="nav-item mb-1 mx-2">
                                <a class="nav-link btn btn-secondary"
                                   href="@ApiClient.GetListUrl(CurrentLibraryKey)"
                                   target="@FnzConst.PlaylistPageTarget"
                                   onclick="return BlockDownloadAndOpenHtmlPage(this)">
                                   <small class="font-monospace text-muted">@FnzDataSet.GetDuration(CurrentLibraryKey).SecondToDur() @FnzDataSet.GetFileSize(CurrentLibraryKey).BytesToFileSize()</small>
                                   Main
                               </a>
                            </li>
                            @foreach (var sub in CurrentLibrary.Discs.SelectMany(p => p.Value.SubTracks.Keys).Distinct())
                            {
                                <li class="nav-item mb-1 mx-2">
                                    <a class="nav-link btn btn-secondary"
                                       href="@ApiClient.GetListUrl(CurrentLibraryKey,null,sub)"
                                       target="@FnzConst.PlaylistPageTarget"
                               onclick="return BlockDownloadAndOpenHtmlPage(this)">
                                       <small class="font-monospace text-muted">@FnzDataSet.GetDuration(CurrentLibraryKey,null,sub).SecondToDur() @FnzDataSet.GetFileSize(CurrentLibraryKey,null,sub).BytesToFileSize()</small>
                                       @sub.ToUpper()
                                    </a>
                                </li>
                            }
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        @if (CurrentLibrary != null)
                        {
                            <div class="row">
                                @foreach (var d in CurrentLibrary.Discs.OrderByDescending(p => p.Key).WithIndex())
                                {
                                    <div class="col-md-3 d-flex align-items-stretch">
                                        @*TODO: Card Component*@
                                        <div class="card mb-3 shadow-sm" @onclick="()=>SelectDisc(d.item.Key)">
                                            <img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,d.item.Key)" onerror="this.src='blazor-192.png'">
                                            <div class="card-body d-flex align-content-between flex-wrap p-2">
                                                <p class="card-text">@d.item.Value.Name</p>
                                                <div class="w-100">
                                                    <div class="w-100 text-center">
                                                        <small class="font-monospace text-muted">Track @FnzDataSet.Libraries[CurrentLibraryKey].Discs[d.item.Key].MainTracks.Count</small>
                                                    </div>
                                                    <div class="d-flex justify-content-between w-100">
                                                        <span class="align-self-center">Main</span>
                                                        <small class="text-nowrap font-monospace text-muted align-self-center">@FnzDataSet.GetDuration(CurrentLibraryKey,d.item.Key).SecondToDur() @FnzDataSet.GetFileSize(CurrentLibraryKey,d.item.Key).BytesToFileSize()</small>
                                                    </div>
                                                    @foreach (var subSet in d.item.Value.SubTracks.OrderBy(p => p.Key))
                                                    {
                                                        <div class="d-flex justify-content-between w-100">
                                                            <span class="align-self-center">@(subSet.Value.Name.StartsWith("AAC_Q1.00") ? "Q1" + subSet.Value.Name.Substring(9) : subSet.Value.Name)</span>
                                                            <small class="text-nowrap font-monospace text-muted align-self-center">@FnzDataSet.GetDuration(CurrentLibraryKey,d.item.Key,subSet.Key).SecondToDur() @FnzDataSet.GetFileSize(CurrentLibraryKey,d.item.Key,subSet.Key).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">
                                        @if (CurrentDisc != null)
                                        {
                                            <div class="col-md-4 mb-1"><img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,CurrentDiscKey)" 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">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-main" type="button" role="tab" aria-controls="home" aria-selected="true">
                                                            Main
                                                        </button>
                                                    </li>
                                                    @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).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.Value.Name
                                                            </button>
                                                        </li>
                                                    }
                                                </ul>
                                                <div class="tab-content" id="ModalDiscTabContent">
                                                    <div class="tab-pane fade show active" id="tracks-main" role="tabpanel" aria-labelledby="home-tab">
                                                        <TrackSetTable LibraryKey="@CurrentLibraryKey"
                                                               DiscKey="@CurrentDiscKey"
                                                               TrackSetKey="@null"
                                                               Tracks="@CurrentDisc?.MainTracks"></TrackSetTable>
                                                    </div>
                                                    @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).WithIndex())
                                                    {
                                                        <div class="tab-pane fade show" id="tracks-@subSet.index" role="tabpanel" aria-labelledby="home-tab">
                                                            <TrackSetTable LibraryKey="@CurrentLibraryKey"
                                                               DiscKey="@CurrentDiscKey"
                                                               TrackSetKey="@subSet.item.Key"
                                                               Tracks="@subSet.item.Value.Tracks"></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>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="container">
                    <h1>此处应有搜索界面</h1>
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="container">
                    <h1>此处应有列表界面</h1>
                </div>
            </div>
        </div>
    }

</div>