Browse Source

fix: playlist missing or empty colspan; disc dialog isolate; playlist item delete confirm; playlist item cover click show disc;

HOME 2 năm trước cách đây
mục cha
commit
9a967f00bd

+ 0 - 1
FNZCM/FNZCM.BlazorWasm/FNZCM.BlazorWasm.csproj

@@ -6,7 +6,6 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <_WebToolingArtifacts Remove="Properties\PublishProfiles\Debug.pubxml" />
     <_WebToolingArtifacts Remove="Properties\PublishProfiles\Release.pubxml" />
   </ItemGroup>
  

+ 10 - 2
FNZCM/FNZCM.BlazorWasm/Helpers/PlaylistHelper.cs

@@ -1,7 +1,11 @@
-namespace FNZCM.BlazorWasm.Helpers
+using Microsoft.AspNetCore.Components;
+
+namespace FNZCM.BlazorWasm.Helpers
 {
     public class PlaylistHelper
     {
+        public event Action Changed ;
+
         private readonly LocalStorageHelper localStorage;
 
         public PlaylistHelper(LocalStorageHelper localStorage) => this.localStorage = localStorage;
@@ -19,6 +23,7 @@
             var pls = PlayListLoadSave;
             pls[Guid.NewGuid()] = name;
             PlayListLoadSave = pls;
+            Changed?.Invoke();
         }
 
         public void AddTrackToPlaylist(string trackPath, Guid playlistId)
@@ -26,6 +31,7 @@
             var p = this[playlistId];
             p.Add(trackPath);
             this[playlistId] = p;
+            Changed?.Invoke();
         }
 
         public void DeleteTrackInPlaylist(Guid playlistId, int index, string trackPathForConfirm)
@@ -33,15 +39,16 @@
             var p = this[playlistId];
             if (index < p.Count && p[index] == trackPathForConfirm) p.RemoveAt(index);
             this[playlistId] = p;
+            Changed?.Invoke();
         }
 
         public void Deleteplaylist(Guid playlistId)
         {
             localStorage.Remove($"playlist-{playlistId}");
-
             var pls = PlayListLoadSave;
             pls.Remove(playlistId);
             PlayListLoadSave = pls;
+            Changed?.Invoke();
         }
 
         public void UpdatePlaylistName(Guid playlistId,string name)
@@ -49,6 +56,7 @@
             var pls = PlayListLoadSave;
             pls[playlistId] = name;
             PlayListLoadSave = pls;
+            Changed?.Invoke();
         }
 
         //TODO: Move order track in playlist

+ 5 - 0
FNZCM/FNZCM.BlazorWasm/UI/Components/Bases/FnzComponentBase.cs

@@ -16,5 +16,10 @@ namespace FNZCM.BlazorWasm.UI.Components.Bases
         public Dictionary<string, object> InputAttributes { get; set; }
 
         public ElementReference? Element { get; protected set; }
+
+        protected virtual string Prefix => "fnz";
+
+        public Guid InstanceId { get; } = Guid.NewGuid();
+        public string ElementId => Prefix.Replace(".", "-") + "-" + InstanceId.ToString("n");
     }
 }

+ 45 - 38
FNZCM/FNZCM.BlazorWasm/UI/Components/DiscDialog.razor

@@ -4,12 +4,13 @@
     private FeDisc Disc { get; set; }
     private FnzBoostrapModal modalDisc { get; set; }
     private PlaylistAddDialog dlgPlaylistAdd { get; set; }
+    private bool IsShown { get; set; } = false;
 
     public void Show(FeDisc disc)
     {
         Disc = disc;
+        IsShown = true;
         StateHasChanged();
-        JSRuntime.InvokeVoidAsync("ResetModalDisc");
         modalDisc.Show();
     }
 }
@@ -17,46 +18,52 @@
 <FnzBoostrapModal @ref="modalDisc" CssClass="modal-xl">
     <Title>@Disc?.Name</Title>
     <Body>
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-md-4 mb-1"><img class="card-img-top" src="@Disc?.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 (Disc?.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">
-                                    @subSet.item?.Name
-                                </button>
-                            </li>
-                        }
-                        @if (Disc?.Bks != null)
-                        {
-                            <li class="nav-item " role="presentation">
-                                <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK" type="button">
-                                    PIC
-                                </button>
-                            </li>
-                        }
-                    </ul>
-                    <div class="tab-content" id="ModalDiscTabContent">
-                        @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
-                        {
-                            <div class="tab-pane fade" id="tracks-@subSet.index" role="tabpanel">
-                                <DiscDialogTrackSetTable TrackSet="subSet.item" OnAddToPlaylist="dlgPlaylistAdd.Show"></DiscDialogTrackSetTable>
-                            </div>
-                        }
-                        @if (Disc?.Bks != null)
-                        {
-                            <div class="tab-pane fade p-2" id="tracks-BK" role="tabpanel">
-                                <DiscDialogBkSilder Bks="Disc.Bks"></DiscDialogBkSilder>
-                            </div>
-                        }
+        @if (IsShown)
+        {
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-4 mb-1"><img class="card-img-top" src="@Disc?.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-@ElementId" role="tablist">
+                            @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
+                            {
+                                <li class="nav-item" role="presentation">
+                                    <button class="nav-link @(subSet.index==0?"active":"")" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index-@ElementId" type="button">
+                                        @subSet.item?.Name
+                                    </button>
+                                </li>
+                            }
+                            @if (Disc?.Bks != null)
+                            {
+                                <li class="nav-item" role="presentation">
+                                    <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK-@ElementId" type="button">
+                                        PIC
+                                    </button>
+                                </li>
+                            }
+                        </ul>
+                        <div class="tab-content" id="ModalDiscTabContent-@ElementId">
+                            @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
+                            {
+                                <div class="tab-pane fade @(subSet.index==0?"active show":"")" id="tracks-@subSet.index-@ElementId" role="tabpanel">
+                                    <DiscDialogTrackSetTable TrackSet="subSet.item" OnAddToPlaylist="dlgPlaylistAdd.Show"></DiscDialogTrackSetTable>
+                                </div>
+                            }
+                            @if (Disc?.Bks != null)
+                            {
+                                <div class="tab-pane fade p-2" id="tracks-BK-@ElementId" role="tabpanel">
+                                    <DiscDialogBkSilder Bks="Disc.Bks"></DiscDialogBkSilder>
+                                </div>
+                            }
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        }
     </Body>
 </FnzBoostrapModal>
 
-<PlaylistAddDialog @ref="dlgPlaylistAdd"></PlaylistAddDialog>
+@if (IsShown)
+{
+    <PlaylistAddDialog @ref="dlgPlaylistAdd"></PlaylistAddDialog>
+}

+ 1 - 3
FNZCM/FNZCM.BlazorWasm/UI/Components/FnzBoostrap/Bases/FnzBoostrapComponentBase.cs

@@ -12,9 +12,7 @@ namespace FNZCM.BlazorWasm.UI.Components.FnzBoostrap.Bases
 
         public FnzBoostrapComponentBase() => dotNetRef = DotNetObjectReference.Create(this);
 
-        public Guid InstanceId { get; } = Guid.NewGuid();
-        public string ElementId => Prefix + "-" + InstanceId.ToString("n");
-        protected virtual string Prefix => "fnz.boostrap";
+        protected override string Prefix => base.Prefix + ".boostrap";
 
         protected TOptions _options = new TOptions();
 

+ 5 - 8
FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Browse/BrowseView.razor

@@ -1,11 +1,5 @@
 @inherits ViewBase
-
-@code{
-    private DiscDialog dlgDisc;
-}
-
-<DiscDialog @ref="dlgDisc"></DiscDialog>
-
+ 
 <div class="row mt-2">
     <div class="col">
         <LibSelector CurrentLibrary="@CurrentLibrary" OnValueChanged="SelectedLibraryChanged"></LibSelector>
@@ -23,7 +17,10 @@
 <div class="row">
     <div class="col-12">
         <div class="row">
-            <DiscCardList Discs="CurrentLibrary?.Discs" OnClick="(d)=>dlgDisc.Show(d)"></DiscCardList>
+            @foreach (var disc in (CurrentLibrary?.Discs).KeepNoEmpty())
+            {
+                <DiscCard Disc="disc"></DiscCard>
+            }
         </div>
     </div>
 </div>

+ 35 - 0
FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Browse/DiscCard.razor

@@ -0,0 +1,35 @@
+@code {
+    [Parameter, Required] public FeDisc Disc { get; set; }
+
+    private DiscDialog dlgDisc;
+}
+
+<DiscDialog @ref="dlgDisc"></DiscDialog>
+
+<div class="col-md-3 d-flex align-items-stretch">
+    <div class="card mb-3 shadow-sm" @onclick="()=>{ if (Disc!=null) dlgDisc.Show(Disc); }">
+        <div class="card-img-top disc-card-cover" style="background-image:url('@Disc?.CoverPath.UrlEscape()'),url('blazor-192.png')">
+        </div>
+        <div class="card-body d-flex align-content-between flex-wrap p-2">
+            <p class="card-text w-100 position-relative">
+                @Disc?.Name
+                @if (Disc?.Bks != null)
+                {
+                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary border border-primary">PIC</span>
+                }
+            </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>

+ 0 - 35
FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Browse/DiscCardList.razor

@@ -1,35 +0,0 @@
-@code {
-    [Parameter, Required] public FeDisc[] Discs { get; set; }
-    [Parameter] public EventCallback<FeDisc> OnClick { get; set; } = EventCallback<FeDisc>.Empty;
-}
-
- @foreach (var disc in (Discs).KeepNoEmpty())
-{
-    <div class="col-md-3 d-flex align-items-stretch">
-        <div class="card mb-3 shadow-sm" @onclick="()=>{ if (disc!=null) OnClick.InvokeAsync(disc); }">
-            <div class="card-img-top disc-card-cover" style="background-image:url('@disc?.CoverPath.UrlEscape()'),url('blazor-192.png')">
-            </div>
-            <div class="card-body d-flex align-content-between flex-wrap p-2">
-                <p class="card-text w-100 position-relative">
-                    @disc?.Name
-                    @if (disc?.Bks != null)
-                    {
-                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary border border-primary">PIC</span>
-                    }
-                </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>
-}

+ 14 - 37
FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTableItem.razor

@@ -6,12 +6,12 @@
     [Parameter] public EventCallback<Guid> DeletePlaylist { get; set; } = EventCallback<Guid>.Empty;
 
     private bool IsExpand;
+    private DiscDialog dlgDisc;
 }
 
 <div class="table-responsive">
     <table class="table w-100">
         <tbody>
-
             @if (Playlist != null)
             {
                 var arr = PlaylistHelper[Playlist.Value.Key];
@@ -48,6 +48,7 @@
                         </button>
                     </td>
                     <td class="align-middle text-nowrap">
+
                         <button type="button" class="btn btn-danger p-2" @onclick="()=>DeletePlaylist.InvokeAsync(Playlist.Value.Key)">
                             <i class="bi bi-trash"></i>
                         </button>
@@ -63,51 +64,31 @@
                             var track = DataSet.AllTracks.FirstOrDefault(p => p.Path == item.item);
                             if (track != null)
                             {
-                                <tr class="mouse-hilight">
-                                    <td colspan="2" style="width:0">
-                                        <img src="@track.Disc.CoverPath" style="height:50px" />
-                                    </td>
-                                    <td class="align-middle" style="width:250px">
-                                        <FileIcon Track="@track" ShowParam="true"></FileIcon>
-                                    </td>
-                                    <td class="align-middle w-100">
-                                        <div class="text-nowrap">@track.GetTitleOrFilename()</div>
-                                        <div class="text-nowrap text-muted"> @track.Tag?.Artist</div>
-                                    </td>
-                                    <td class="text-center" colspan="2">
-                                        <div class="text-nowrap">@track.Tag?.Duration.SecondToDur()</div>
-                                        <div class="text-nowrap text-muted"> @track.Tag?.Length.BytesToFileSize()</div>
-                                    </td>
-                                    <td>
-                                        <button type="button" class="btn btn-danger p-2" @onclick="()=>Remove(Playlist.Value.Key, item.index,item.item)">
-                                            <i class="bi bi-folder-minus"></i>
-                                        </button>
-                                    </td>
-                                </tr>
+                                <PlaylistTableItemTrack Track="track" RemoveClick="()=>Remove(Playlist.Value.Key, item.index,item.item)"></PlaylistTableItemTrack>
                             }
                             else
                             {
                                 var uri = new Uri(item.item);
                                 var paths = uri.AbsolutePath.Split('/').Skip(2).ToArray();
                                 <tr>
-                                    <td></td>
                                     <td><img src="blazor-192.png" style="height:50px" /></td>
-                                    <td class="align-middle w-100">
+                                    <td colspan="5" class="align-middle w-100">
                                         <div class="text-nowrap">- broken reference -</div>
                                         @foreach (var p in paths)
                                         {
-                                            <div class="text-nowrap text-muted">@Uri.UnescapeDataString(p)</div>
+                                            <span style="display:inline-block" class="text-nowrap text-muted border border-1 m-1 p-1 rounded">@Uri.UnescapeDataString(p)</span>
                                         }
                                     </td>
-                                    <td></td>
-                                    <td></td>
                                     <td>
-                                        <button type="button" class="btn btn-primary p-2" @onclick="()=>Remove(Playlist.Value.Key, item.index,item.item)">
-                                            <i class="bi bi-trash"></i>
-                                        </button>
+                                        <div class="dropstart">
+                                            <button type="button" class="btn btn-danger p-2" data-bs-toggle="dropdown">
+                                                <i class="bi bi-folder-minus"></i>
+                                            </button>
+                                            <ul class="dropdown-menu mx-2">
+                                                <li><button class="dropdown-item text-danger" @onclick="()=>Remove(Playlist.Value.Key, item.index,item.item)">Confirm Remove</button></li>
+                                            </ul>
+                                        </div>
                                     </td>
-                                    <td></td>
-                                    <td></td>
                                 </tr>
                             }
                         }
@@ -115,13 +96,9 @@
                         {
                             <tr>
                                 <td></td>
-                                <td></td>
-                                <td class="align-middle w-100">
+                                <td colspan="6" class="align-middle w-100">
                                     <div class="text-nowrap">- empty -</div>
                                 </td>
-                                <td></td>
-                                <td></td>
-                                <td></td>
                             </tr>
                         }
                     }

+ 35 - 0
FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTableItemTrack.razor

@@ -0,0 +1,35 @@
+@inherits FnzComponentBase
+
+@code {
+    [Parameter, Required] public FeTrack Track { get; set; }
+    [Parameter] public EventCallback RemoveClick { get; set; } = EventCallback.Empty;
+    private DiscDialog dlgDisc;
+}
+
+<tr class="mouse-hilight">
+    <td colspan="2" style="width:0">
+        <img src="@Track.Disc.CoverPath" style="height:50px" @onclick="()=>dlgDisc.Show(Track.Disc)" />
+        <DiscDialog @ref="dlgDisc"></DiscDialog>
+    </td>
+    <td class="align-middle" style="width:250px">
+        <FileIcon Track="@Track" ShowParam="true"></FileIcon>
+    </td>
+    <td class="align-middle w-100">
+        <div class="text-nowrap">@Track.GetTitleOrFilename()</div>
+        <div class="text-nowrap text-muted"> @Track.Tag?.Artist</div>
+    </td>
+    <td class="text-center" colspan="2">
+        <div class="text-nowrap">@Track.Tag?.Duration.SecondToDur()</div>
+        <div class="text-nowrap text-muted"> @Track.Tag?.Length.BytesToFileSize()</div>
+    </td>
+    <td>
+        <div class="dropstart">
+            <button type="button" class="btn btn-danger p-2" data-bs-toggle="dropdown">
+                <i class="bi bi-folder-minus"></i>
+            </button>
+            <ul class="dropdown-menu mx-2">
+                <li><button class="dropdown-item text-danger" @onclick="()=>RemoveClick.InvokeAsync()">Confirm Remove</button></li>
+            </ul>
+        </div>
+    </td>
+</tr>

+ 12 - 0
FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistView.razor

@@ -1,4 +1,6 @@
 @inherits ViewBase
+@implements IDisposable
+
 
 @code {
     private Guid CurrentEditPlaylistId;
@@ -8,6 +10,16 @@
     private FnzBoostrapModal DeletePlaylistDialog;
 
     private string EditListNameClass => string.IsNullOrWhiteSpace(CurrentEditPlaylistName) ? "is-invalid form-control" : "form-control";
+
+    private void PlaylistChanged() => StateHasChanged();
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+        if (firstRender) PlaylistHelper.Changed += PlaylistChanged;
+    }
+
+    void IDisposable.Dispose() => PlaylistHelper.Changed -= PlaylistChanged;
 }
 
 <div class="container mt-3">

+ 1 - 17
FNZCM/FNZCM.BlazorWasm/wwwroot/fnz.js

@@ -5,20 +5,4 @@ function BlockDownloadAndOpenHtmlPage(a) {
     return false;
 }
 
-// ModalDisc
-
-function ResetModalDisc() {
-    var arrTabs = Array.from(document.querySelectorAll("#ModalDiscTab>.nav-item>.nav-link"));
-    if (arrTabs.length > 0) {
-        arrTabs.forEach(p => p.classList.remove("active"))
-        arrTabs[0].classList.add("active")
-    }
-    var arrTabContents = Array.from(document.querySelectorAll('#ModalDiscTabContent>.tab-pane'));
-    if (arrTabContents.length > 0) {
-        arrTabContents.forEach(p => p.classList.remove("active"))
-        arrTabContents[0].classList.add("active")
-        arrTabContents[0].classList.add("show")
-    }
-    var id = "DiscBkSlider";
-    $("#" + id).carousel(0);
-}
+