track in playlist:basic reorder

FNZCM/FNZCM.BlazorWasm/Helpers/PlaylistHelper.cs

@@ -1,4 +1,6 @@
-using Microsoft.AspNetCore.Components;
+using FNZCM.BlazorWasm.Utility;
+using Microsoft.AspNetCore.Components;
+using System.Collections.ObjectModel;
 
 namespace FNZCM.BlazorWasm.Helpers
 {
@@ -34,7 +36,7 @@ namespace FNZCM.BlazorWasm.Helpers
             Changed?.Invoke();
         }
 
-        public void DeleteTrackInPlaylist(Guid playlistId, int index, string trackPathForConfirm)
+        public void RemoveTrackInPlaylist(Guid playlistId, int index, string trackPathForConfirm)
         {
             var p = this[playlistId];
             if (index < p.Count && p[index] == trackPathForConfirm) p.RemoveAt(index);
@@ -59,19 +61,17 @@ namespace FNZCM.BlazorWasm.Helpers
             Changed?.Invoke();
         }
 
-        //TODO: Move order track in playlist
-
         public void ListMoveUp(int index)
         {
             if (index < 1) return;
 
-            // let's say index = 3
+            // let's say index = 3 and count = 6
 
             var pls = PlayListLoadSave;
 
             var re = new Dictionary<Guid, string>();
 
-            foreach (var item in pls.Take(index - 1)) // take2  0 1
+            foreach (var item in pls.Take(index - 1)) // take2  01→01
             {
                 re.Add(item.Key, item.Value);
             }
@@ -86,7 +86,7 @@ namespace FNZCM.BlazorWasm.Helpers
                 re.Add(item.Key, item.Value);
             }
 
-            foreach (var item in pls.Skip(index + 1)) // skip4 4 5
+            foreach (var item in pls.Skip(index + 1)) // skip4 45→45
             {
                 re.Add(item.Key, item.Value);
             }
@@ -109,7 +109,7 @@ namespace FNZCM.BlazorWasm.Helpers
                 re.Add(item.Key, item.Value);
             }
 
-            foreach (var item in pls.Skip(index+1).Take(1)) // skip4t1 4→3
+            foreach (var item in pls.Skip(index + 1).Take(1)) // skip4t1 4→3
             {
                 re.Add(item.Key, item.Value);
             }
@@ -127,5 +127,21 @@ namespace FNZCM.BlazorWasm.Helpers
             PlayListLoadSave = re;
             Changed?.Invoke();
         }
+
+        public void TrackMoveUp(Guid playlistId, int index)
+        {
+            var l = new ObservableCollection<string>(this[playlistId]);
+            if (index > 0) l.Move(index, index - 1);
+            this[playlistId] = l.ToList();
+            Changed?.Invoke();
+        }
+
+        public void TrackMoveDown(Guid playlistId, int index)
+        {
+            var l = new ObservableCollection<string>(this[playlistId]);
+            if (index < l.Count - 1) l.Move(index, index + 1);
+            this[playlistId] = l.ToList();
+            Changed?.Invoke();
+        }
     }
 }

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTable.razor

@@ -0,0 +1,145 @@
+@inherits FnzComponentBase
+
+@code {
+    [Parameter, Required] public KeyValuePair<Guid, string>? Playlist { get; set; }
+    [Parameter, Required] public int ListItemIndex { get; set; }
+    [Parameter, Required] public int ListItemCount { get; set; }
+
+    [Parameter] public EventCallback<Guid> EditPlaylist { get; set; } = EventCallback<Guid>.Empty;
+    [Parameter] public EventCallback<Guid> DeletePlaylist { get; set; } = EventCallback<Guid>.Empty;
+
+    private bool IsExpand;
+    private PlaylistExportDialog dlgExport;
+}
+
+<div class="table-responsive">
+    <table class="table w-100">
+        <tbody>
+            @if (Playlist != null)
+            {
+                var arr = PlaylistHelper[Playlist.Value.Key];
+
+                <tr class="table-primary">
+                    <td style="width:0" @onclick="()=>{IsExpand=!IsExpand;}">
+                        <button type="button" class="btn btn-primary p-2">
+                            @if (IsExpand)
+                            {
+                                <i class="bi bi-dash-square"></i>
+                            }
+                            else
+                            {
+                                <i class="bi bi-plus-square"></i>
+                            }
+                        </button>
+                    </td>
+                    <td class="text-left w-100 align-middle" @onclick="()=>{IsExpand=!IsExpand;}" colspan="3">
+                        <div class="text-nowrap">@Playlist.Value.Value</div>
+                        <div class="text-nowrap text-muted">
+                            (@arr.Count)
+                            @arr.Sum(p=>DataSet.AllTracks.Where(q=>q.Path==p).Select(q=>q.Tag?.Duration??0).FirstOrDefault()).SecondToDur()
+                            @arr.Sum(p=>DataSet.AllTracks.Where(q=>q.Path==p).Select(q=>q.Tag?.Length??0).FirstOrDefault()).BytesToFileSize()
+                        </div>
+                    </td>
+                    <td>
+                        @if (ListItemCount > 1)
+                        {
+                            var isFirst = ListItemIndex == 0;
+                            var isLast = ListItemIndex == ListItemCount - 1;
+
+                            <div class="dropstart">
+                                <button type="button" class="btn btn-primary p-2" data-bs-toggle="dropdown">
+                                    <i class="bi bi-arrow-down-up"></i>
+                                </button>
+                                <div class="dropdown-menu text-end p-1 text-nowrap" style="width: initial;min-width: initial;">
+                                    <button class="btn btn-primary p-2" disabled="@isFirst" @onclick="()=>PlaylistHelper.ListMoveUp(ListItemIndex)">
+                                        <i class="bi bi-arrow-bar-up"></i>
+                                        Up
+                                    </button>
+                                    <button class="btn btn-primary p-2" disabled="@isLast" @onclick="()=>PlaylistHelper.ListMoveDown(ListItemIndex)">
+                                        <i class="bi bi-arrow-bar-down"></i>
+                                        Down
+                                    </button>
+                                </div>
+                            </div>
+                        }
+                    </td>
+                    <td>
+                        <button type="button" class="btn btn-primary p-2" @onclick="()=>DownloadPlaylist(Playlist.Value.Key)">
+                            <i class="bi bi-download"></i>
+                        </button>
+                    </td>
+                    <td>
+                        <button type="button" class="btn btn-primary p-2" @onclick="()=>EditPlaylist.InvokeAsync(Playlist.Value.Key)">
+                            <i class="bi bi-pencil-square"></i>
+                        </button>
+                    </td>
+                    <td>
+                        <button type="button" class="btn btn-danger p-2" @onclick="()=>DeletePlaylist.InvokeAsync(Playlist.Value.Key)">
+                            <i class="bi bi-trash"></i>
+                        </button>
+                    </td>
+                </tr>
+
+                @if (IsExpand)
+                {
+                    @foreach (var item in arr.KeepNoEmpty().WithIndex())
+                    {
+                        if (item.item != null)
+                        {
+                            var track = DataSet.AllTracks.FirstOrDefault(p => p.Path == item.item);
+                            if (track != null)
+                            {
+                                <PlaylistTableItem PlaylistId="Playlist.Value.Key" TrackIndex="item.index" TrackCount="arr.Count" Track="track"  RemoveClick="()=>Remove(Playlist.Value.Key, item.index,item.item)"></PlaylistTableItem>
+                            }
+                            else
+                            {
+                                var uri = new Uri(item.item);
+                                var paths = uri.AbsolutePath.Split('/').Skip(2).ToArray();
+
+                                <tr>
+                                    <td><img src="blazor-192.png" style="height:50px" /></td>
+                                    <td colspan="6" class="align-middle w-100">
+                                        <div class="text-nowrap">- broken reference -</div>
+                                        @foreach (var p in paths)
+                                        {
+                                            <span style="display:inline-block" class="text-nowrap text-muted border border-1 m-1 p-1 rounded">@Uri.UnescapeDataString(p)</span>
+                                        }
+                                    </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="()=>PlaylistHelper.RemoveTrackInPlaylist(Playlist.Value.Key, item.index,item.item)">Confirm Remove</button></li>
+                                            </ul>
+                                        </div>
+                                    </td>
+                                </tr>
+                            }
+                        }
+                        else
+                        {
+                            <tr>
+                                <td></td>
+                                <td colspan="7" class="align-middle w-100">
+                                    <div class="text-nowrap">- empty -</div>
+                                </td>
+                            </tr>
+                        }
+                    }
+                }
+            }
+        </tbody>
+    </table>
+</div>
+
+<PlaylistExportDialog @ref="dlgExport">
+</PlaylistExportDialog>
+
+@code {
+    private void DownloadPlaylist(Guid playlistId)
+    {
+        dlgExport.Show(playlistId);
+    }        
+}

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTableItem.razor

@@ -1,152 +1,60 @@
 @inherits FnzComponentBase
 
 @code {
-    [Parameter, Required] public KeyValuePair<Guid, string>? Playlist { get; set; }
-    [Parameter, Required] public int ListItemIndex { get; set; }
-    [Parameter, Required] public int ListItemCount { get; set; }
-
-    [Parameter] public EventCallback<Guid> EditPlaylist { get; set; } = EventCallback<Guid>.Empty;
-    [Parameter] public EventCallback<Guid> DeletePlaylist { get; set; } = EventCallback<Guid>.Empty;
-
-    private bool IsExpand;
-    private PlaylistExportDialog dlgExport;
+    [Parameter, Required] public Guid PlaylistId { get; set; }
+    [Parameter, Required] public int TrackCount { get; set; }
+    [Parameter, Required] public int TrackIndex { get; set; }
+    [Parameter, Required] public FeTrack Track { get; set; }
+    private DiscDialog dlgDisc;
 }
 
-<div class="table-responsive">
-    <table class="table w-100">
-        <tbody>
-            @if (Playlist != null)
-            {
-                var arr = PlaylistHelper[Playlist.Value.Key];
-
-                <tr class="table-primary">
-                    <td style="width:0" @onclick="()=>{IsExpand=!IsExpand;}">
-                        <button type="button" class="btn btn-primary p-2">
-                            @if (IsExpand)
-                            {
-                                <i class="bi bi-dash-square"></i>
-                            }
-                            else
-                            {
-                                <i class="bi bi-plus-square"></i>
-                            }
-                        </button>
-                    </td>
-                    <td class="text-left w-100 align-middle" @onclick="()=>{IsExpand=!IsExpand;}" colspan="3">
-                        <div class="text-nowrap">@Playlist.Value.Value</div>
-                        <div class="text-nowrap text-muted">
-                            (@arr.Count)
-                            @arr.Sum(p=>DataSet.AllTracks.Where(q=>q.Path==p).Select(q=>q.Tag?.Duration??0).FirstOrDefault()).SecondToDur()
-                            @arr.Sum(p=>DataSet.AllTracks.Where(q=>q.Path==p).Select(q=>q.Tag?.Length??0).FirstOrDefault()).BytesToFileSize()
-                        </div>
-                    </td>
-                    <td>
-                        @if (ListItemCount > 1)
-                        {
-                            var isFirst = ListItemIndex == 0;
-                            var isLast = ListItemIndex == ListItemCount - 1;
-
-                            <div class="dropstart">
-                                <button type="button" class="btn btn-primary p-2" data-bs-toggle="dropdown">
-                                    <i class="bi bi-arrow-down-up"></i>
-                                </button>
-                                <div class="dropdown-menu text-end p-1 text-nowrap" style="width: initial;min-width: initial;transform: translateY(-10);">
-                                    <button class="btn btn-primary p-2" disabled="@isFirst" @onclick="()=>PlaylistHelper.ListMoveUp(ListItemIndex)">
-                                        <i class="bi bi-arrow-bar-up"></i>
-                                        Up
-                                    </button>
-                                    <button class="btn btn-primary p-2" disabled="@isLast" @onclick="()=>PlaylistHelper.ListMoveDown(ListItemIndex)">
-                                        <i class="bi bi-arrow-bar-down"></i>
-                                        Down
-                                    </button>
-                                </div>
-                            </div>
-                        }
-                    </td>
-                    <td>
-                        <button type="button" class="btn btn-primary p-2" @onclick="()=>DownloadPlaylist(Playlist.Value.Key)">
-                            <i class="bi bi-download"></i>
-                        </button>
-                    </td>
-                    <td>
-                        <button type="button" class="btn btn-primary p-2" @onclick="()=>EditPlaylist.InvokeAsync(Playlist.Value.Key)">
-                            <i class="bi bi-pencil-square"></i>
-                        </button>
-                    </td>
-                    <td>
-                        <button type="button" class="btn btn-danger p-2" @onclick="()=>DeletePlaylist.InvokeAsync(Playlist.Value.Key)">
-                            <i class="bi bi-trash"></i>
-                        </button>
-                    </td>
-                </tr>
-
-                @if (IsExpand)
-                {
-                    @foreach (var item in arr.KeepNoEmpty().WithIndex())
-                    {
-                        if (item.item != null)
-                        {
-                            var track = DataSet.AllTracks.FirstOrDefault(p => p.Path == item.item);
-                            if (track != null)
-                            {
-                                <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><img src="blazor-192.png" style="height:50px" /></td>
-                                    <td colspan="6" class="align-middle w-100">
-                                        <div class="text-nowrap">- broken reference -</div>
-                                        @foreach (var p in paths)
-                                        {
-                                            <span style="display:inline-block" class="text-nowrap text-muted border border-1 m-1 p-1 rounded">@Uri.UnescapeDataString(p)</span>
-                                        }
-                                    </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="()=>Remove(Playlist.Value.Key, item.index,item.item)">Confirm Remove</button></li>
-                                            </ul>
-                                        </div>
-                                    </td>
-                                </tr>
-                            }
-                        }
-                        else
-                        {
-                            <tr>
-                                <td></td>
-                                <td colspan="7" class="align-middle w-100">
-                                    <div class="text-nowrap">- empty -</div>
-                                </td>
-                            </tr>
-                        }
-                    }
-                }
-            }
-        </tbody>
-    </table>
-</div>
-
-<PlaylistExportDialog @ref="dlgExport">
-</PlaylistExportDialog>
-
-@code {
-    private void DownloadPlaylist(Guid playlistId)
-    {
-        dlgExport.Show(playlistId);
-
-    }
-
-    private void Remove(Guid playlistId, int index, string path)
-    {
-        PlaylistHelper.DeleteTrackInPlaylist(playlistId, index, path);
-        StateHasChanged();
-    }
-}
+<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>
+        @if (TrackCount > 1)
+        {
+            var isFirst = TrackIndex == 0;
+            var isLast = TrackIndex == TrackCount - 1;
+
+            <div class="dropstart">
+                <button type="button" class="btn btn-primary p-2" data-bs-toggle="dropdown">
+                    <i class="bi bi-arrow-down-up"></i>
+                </button>
+                <div class="dropdown-menu text-end p-1 text-nowrap" style="width: initial;min-width: initial;">
+                    <button class="btn btn-primary p-2" disabled="@isFirst" @onclick="()=>PlaylistHelper.TrackMoveUp(PlaylistId,TrackIndex)">
+                        <i class="bi bi-arrow-bar-up"></i>
+                        Up
+                    </button>
+                    <button class="btn btn-primary p-2" disabled="@isLast" @onclick="()=>PlaylistHelper.TrackMoveDown(PlaylistId,TrackIndex)">
+                        <i class="bi bi-arrow-bar-down"></i>
+                        Down
+                    </button>
+                </div>
+            </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="()=>PlaylistHelper.RemoveTrackInPlaylist(PlaylistId,TrackIndex,Track.Path)">Confirm Remove</button></li>
+            </ul>
+        </div>
+    </td>
+</tr>

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTableItemTrack.razor

@@ -1,35 +0,0 @@
-@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="3">
-        <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>

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistView.razor

@@ -27,7 +27,7 @@
     {
         if (item.item.Value != null)
         {
-            <PlaylistTableItem Playlist="@item.item" ListItemIndex="@item.index" ListItemCount="@PlaylistHelper.PlayListLoadSave.Count" EditPlaylist="ShowPlaylistEdit" DeletePlaylist="ShowPlaylistDelete"></PlaylistTableItem>
+            <PlaylistTable Playlist="@item.item" ListItemIndex="@item.index" ListItemCount="@PlaylistHelper.PlayListLoadSave.Count" EditPlaylist="ShowPlaylistEdit" DeletePlaylist="ShowPlaylistDelete"></PlaylistTable>
         }
         else
         {