Cleanup; fix: loading parse model count; bottom bar player auto scroll space; Minor UI change

FNZCM/FNZCM.BlazorWasm/Helpers/FnzDataSetHelper.cs

@@ -206,7 +206,7 @@ namespace FNZCM.BlazorWasm.Helpers
                 feLib.Catalogs = lstCatalogOfLib.ToArray();
             }// end foreach lib
 
-            await progress[2].SetProgress(((float)(currentDisc++)) / numberOfDisc, $"Parsing model {currentDisc}/{numberOfDisc}...OK", true);
+            await progress[2].SetProgress(((float)(currentDisc)) / numberOfDisc, $"Parsing model {currentDisc}/{numberOfDisc}...OK", true);
 
             dataSet.AllTracks = lstAllTrack.ToArray();
             dataSet.AllTracksSet = lstAllTrackSet.ToArray();

FNZCM/FNZCM.BlazorWasm/Helpers/PlaylistHelper.cs

@@ -1,6 +1,4 @@
-using FNZCM.BlazorWasm.Utility;
-using Microsoft.AspNetCore.Components;
-using System.Collections.ObjectModel;
+using System.Collections.ObjectModel;
 
 namespace FNZCM.BlazorWasm.Helpers
 {

FNZCM/FNZCM.BlazorWasm/UI/Components/FnzBootstrap/Modal/FnzBootstrapModal.razor

@@ -6,7 +6,6 @@
     [Parameter] public bool Focus { get => _options.Focus; set => _options.Focus = value; }
     [Parameter] public string CssClass { get; set; }
     [Parameter] public RenderFragment Title { get; set; }
-    [Parameter] public RenderFragment Icon { get; set; }
     [Parameter] public RenderFragment Body { get; set; }
     [Parameter] public RenderFragment Footer { get; set; }
     [Parameter] public bool ShowCloseButton { get; set; } = true;
@@ -18,7 +17,6 @@
     <div class="modal-dialog modal-dialog-centered @CssClass" @attributes="@InputAttributes">
         <div class="modal-content">
             <div class="modal-header align-items-baseline">
-                @Icon
                 <h5 class="modal-title mx-1">@Title</h5>
                 @if (ShowCloseButton)
                 {

FNZCM/FNZCM.BlazorWasm/UI/Components/FnzDiv.razor

@@ -0,0 +1,13 @@
+@inherits FnzComponentBase
+@code {
+    protected override string Prefix => base.Prefix + ".div";
+
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}
+
+<div id="@ElementId" @attributes="InputAttributes">@ChildContent</div>
+
+@code
+{
+    public async Task<int> GetClientHeight() => await JSRuntime.InvokeAsync<int>(Prefix + ".getClientHeight", ElementId);
+}

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/App.razor

@@ -1,4 +1,4 @@
-@inherits ViewBase
+@inherits ViewBase
 @code {
 
     public static App Instance { get; private set; }
@@ -6,13 +6,13 @@
     [Inject]
     private FnzDataSetHelper DataSetHelper { get; set; }
 
-    private bool IsLoading = true;
-    private string LoadingErrorMessage;
+    private bool isLoading = true;
+    private string loadingErrorMessage;
 
-    private ProgressBar ProgressBar1;
-    private ProgressBar ProgressBar2;
-    private ProgressBar ProgressBar3;
-    private ProgressBar ProgressBar4;
+    private ProgressBar progressBar1;
+    private ProgressBar progressBar2;
+    private ProgressBar progressBar3;
+    private ProgressBar progressBar4;
 
     private SettingDialog dlgSetting;
     private PlaylistAddDialog dlgPlaylistAdd;
@@ -23,31 +23,19 @@
     protected override async Task OnInitializedAsync()
     {
         Instance = this;
-
         if (CurrentView == 0) CurrentView = ViewNames.Browse;
-        base.OnInitialized();
+        await base.OnInitializedAsync();
         await LoadData();
     }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
 }
 
 <SettingDialog @ref="dlgSetting" ReloadData="async ()=>await LoadData()" />
 
+<div class="container" style="margin-bottom: @(BottomBarHeight)px">
 
-<div class="container">
-    @if (RequestedPlay)
-    {
-        <div class="sticky-top" style="z-index: 4096">
-            <audio @ref="AudioElement" src="@CurrentPlayingUrl" autoplay controls class="w-100" style="height: 30px;"></audio>
-        </div>
-    }
     <a style="float: right" href="/classic-index">Back OLD Home Page</a>
     <h3>Blazor WASM UI</h3>
+
     <ul class="nav nav-tabs justify-content-center nav-fill" id="MainNavBar">
         @foreach (ViewNames item in Enum.GetValues(typeof(ViewNames)))
         {
@@ -64,33 +52,33 @@
         </li>
     </ul>
 
-    @if (IsLoading)
+    @if (isLoading)
     {
-        @if (LoadingErrorMessage != null)
+        @if (loadingErrorMessage != null)
         {
             <div class="p-3">
                 <span class="bi bi-x-circle text-danger" role="status" />
-                <span>@LoadingErrorMessage</span>
+                <span>@loadingErrorMessage</span>
             </div>
         }
         else
         {
             <div class="p-3">
-                <ProgressBar @ref="ProgressBar1" Throttle="500"></ProgressBar>
+                <ProgressBar @ref="progressBar1" Throttle="500"></ProgressBar>
             </div>
             <div class="p-3">
-                <ProgressBar @ref="ProgressBar2" Throttle="500"></ProgressBar>
+                <ProgressBar @ref="progressBar2" Throttle="500"></ProgressBar>
             </div>
             <div class="p-3">
-                <ProgressBar @ref="ProgressBar3" Throttle="500"></ProgressBar>
+                <ProgressBar @ref="progressBar3" Throttle="500"></ProgressBar>
             </div>
             <div class="p-3">
-                <ProgressBar @ref="ProgressBar4" Throttle="500"></ProgressBar>
+                <ProgressBar @ref="progressBar4" Throttle="500"></ProgressBar>
             </div>
         }
     }
 
-    @if (!IsLoading)
+    @if (!isLoading)
     {
         switch (CurrentView)
         {
@@ -105,7 +93,7 @@
                 break;
         }
     }
-    
+
     <PlaylistAddDialog @ref="dlgPlaylistAdd"></PlaylistAddDialog>
 
 </div>
@@ -113,14 +101,14 @@
 @code {
     private async Task LoadData()
     {
-        IsLoading = true;
+        isLoading = true;
         StateHasChanged();
         await Task.Delay(10);
 
-        await ProgressBar1.SetProgress(0, "Waiting server ready...", true);
-        await ProgressBar2.SetProgress(0, "Pending load fileset...", true);
-        await ProgressBar3.SetProgress(0, "Pending load tags...", true);
-        await ProgressBar4.SetProgress(0, "Pending parse models...", true);
+        await progressBar1.SetProgress(0, "Waiting server ready...", true);
+        await progressBar2.SetProgress(0, "Pending load fileset...", true);
+        await progressBar3.SetProgress(0, "Pending load tags...", true);
+        await progressBar4.SetProgress(0, "Pending parse models...", true);
 
         StateHasChanged();
         await Task.Delay(10);
@@ -130,10 +118,10 @@
             do
             {
                 var r = await ApiClient.GetProgressAsync();
-                await ProgressBar1.SetProgress((float)r.LoadedTags / r.TotalTrackCount, $"Waiting server ready {r.LoadedTags}/{r.TotalTrackCount}");
+                await progressBar1.SetProgress((float)r.LoadedTags / r.TotalTrackCount, $"Waiting server ready {r.LoadedTags}/{r.TotalTrackCount}");
                 if (r?.IsLoading == false)
                 {
-                    await ProgressBar1.SetProgress(100, "Waiting server ready...OK", true);
+                    await progressBar1.SetProgress(100, "Waiting server ready...OK", true);
                     break;
                 }
                 await Task.Delay(1000);
@@ -142,32 +130,95 @@
             StateHasChanged();
             await Task.Delay(10);
 
-            await DataSetHelper.InitFeModulesAsync(new[] { ProgressBar2, ProgressBar3, ProgressBar4, });
+            await DataSetHelper.InitFeModulesAsync(new[] { progressBar2, progressBar3, progressBar4, });
 
             StateHasChanged();
             await Task.Delay(500);
 
-            IsLoading = false;
+            isLoading = false;
         }
         catch (Exception ex)
         {
-            LoadingErrorMessage = ex.Message;
+            loadingErrorMessage = ex.Message;
         }
     }
+
+    public void ShowAddTrackToPlaylistDialog(FeTrack track) => dlgPlaylistAdd.Show(track);
+}
+
+@if (requestedPlay)
+{
+    <style>
+        .bottom-bar {
+            pointer-events: none;
+        }
+
+            .bottom-bar *:not(div) {
+                pointer-events: auto;
+            }
+    </style>
+    <FnzDiv @ref="bottomBar" class="fixed-bottom bottom-bar" style="z-index: 4096;">
+        <div class="row">
+            <div class="col-5">
+                <video @ref="audioElement" src="@currentPlayingUrl" autoplay controls class="w-100 m-0 p-0" @onloadeddata="@PlayerLoaded"></video>
+            </div>
+            <div class="col-2 d-flex align-items-end">
+                <div class="btn-group dropup">
+                    <button class="align-bottom btn btn-secondary dropdown-toggle p-2" type="button" data-bs-toggle="dropdown">
+                        <i class="bi bi-card-list"></i>
+                    </button>
+                    <div class="dropdown-menu">
+                        <div class="text-center"><a class="btn-link" @onclick="@StopAndClose">Stop and close</a></div>
+                    </div>
+                </div>
+               
+            </div>
+            @*<div class="col-2 d-flex align-items-end">
+                <button class="btn btn-secondary p-2" type="button">
+                    <i class="bi bi-chevron-bar-left"></i>
+                </button>
+            </div>
+            <div class="col-2 d-flex align-items-end">
+                <button class="btn btn-secondary p-2" type="button">
+                    <i class="bi bi-chevron-bar-right"></i>
+                </button>
+            </div>*@
+        </div>
+    </FnzDiv>
 }
 
 @code {
-    private bool RequestedPlay = false;
-    private ElementReference AudioElement;
-    private string CurrentPlayingUrl;
+    public Action BottomBarHeightChanged;
+    public int BottomBarHeight { get; private set; }
+
+    private bool requestedPlay;
+    private ElementReference audioElement;
+    private string currentPlayingUrl;
+    private FnzDiv bottomBar;
 
     public void PlayTrack(FeTrack track) => PlayTrack(track.Path);
     public void PlayTrack(string path)
     {
-        CurrentPlayingUrl = path;
-        RequestedPlay = true;
+        currentPlayingUrl = path;
+        requestedPlay = true;
         StateHasChanged();
     }
 
-    public void ShowAddTrackToPlaylistDialog(FeTrack track) => dlgPlaylistAdd.Show(track);
+    private async Task PlayerLoaded(EventArgs args)
+    {
+        BottomBarHeight = bottomBar == null ? 0 : await bottomBar.GetClientHeight();
+        StateHasChanged();
+        BottomBarHeightChanged?.Invoke();
+    }
+
+    private void StopAndClose()
+    {
+        currentPlayingUrl = null;
+        StateHasChanged();
+        requestedPlay = false;
+        StateHasChanged();
+        BottomBarHeight = 0;
+        StateHasChanged();
+        BottomBarHeightChanged?.Invoke();
+    }
 }

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Dialogs/DiscDialog.razor

@@ -1,4 +1,5 @@
 @inherits FnzComponentBase
+@implements IDisposable
 
 @code {
     private FeDisc currentDisc;
@@ -13,11 +14,22 @@
         StateHasChanged();
         modalDisc.Show();
     }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        App.Instance.BottomBarHeightChanged += UpdateMarginBottom;
+    }
+
+    private void UpdateMarginBottom() => StateHasChanged();
+
+    public void Dispose() => App.Instance.BottomBarHeightChanged -= UpdateMarginBottom;
+
+    private string StyleString => $"margin-bottom: {App.Instance.BottomBarHeight}px";
 }
 
-<FnzBootstrapModal @ref="modalDisc" CssClass="modal-xl">
-    <Icon><span class="badge bg-light">@currentDisc?.Lib.Name</span></Icon>  
-    <Title>@currentDisc?.Name </Title>
+<FnzBootstrapModal @ref="modalDisc" CssClass="modal-xl" style="@StyleString">
+    <Title><span class="badge bg-light">@currentDisc?.Lib.Name</span> @currentDisc?.Name </Title>
     <Body>
         @if (IsShown)
         {

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Search/SearchView.razor

@@ -85,7 +85,7 @@
             </div>
             <div class="row mt-3">
                 <div class="col-12 text-end">
-                    <button @onclick="@SearchGo" class="btn btn-outline-primary" type="button">Search</button>
+                    <button @onclick="@SearchGo" class="btn btn-primary" type="button">Search</button>
                 </div>
             </div>
         </fieldset>

FNZCM/FNZCM.BlazorWasm/wwwroot/index.html

@@ -62,6 +62,7 @@
     <script src="lib/KeudellCoding.Select2JsInterop.js"></script>
 
     <script src="lib/fnz/fnz.js"></script>
+    <script src="lib/fnz/fnz-div.js"></script>
     <script src="lib/fnz/fnz-bootstrap.js"></script>
     <script src="lib/fnz/fnz-bootstrap-modal.js"></script>
     <script src="lib/fnz/fnz-bootstrap-collapse.js"></script>

FNZCM/FNZCM.BlazorWasm/wwwroot/lib/fnz/fnz-div.js

@@ -0,0 +1,5 @@
+fnz.div = (function () {
+    return {
+        getClientHeight: function (id) { return fnz.getEl(id).clientHeight; }
+    }
+})();