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

@using Newtonsoft.Json
@using System.Runtime.InteropServices.JavaScript
@inherits FnzComponentBase

@code {
    [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;


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        await JSRuntime.InvokeVoidAsync(Prefix + ".initDragSource", ElementId, DotNetRef, FnzConst.DragDropTypePlaylistItem);
        await JSRuntime.InvokeVoidAsync(Prefix + ".initDropZone", ElementId, DotNetRef, FnzConst.DragDropTypePlaylistItem);
    }

    private async Task EnableDragDrop() => await JSRuntime.InvokeVoidAsync(Prefix + ".setDraggableOn", ElementId);

    private async Task DisableDragDrop() => await JSRuntime.InvokeVoidAsync(Prefix + ".setDraggableOff", ElementId);

    [JSInvokable("FnzDragStartProvideContent")]
    public string FnzDragStartProvideContent(string dataType)
    {
        if (dataType != FnzConst.DragDropTypePlaylistItem) return null;
        var ds = new PlaylistDragSource { PlaylistId = PlaylistId, TrackIndex = TrackIndex, Path = Track.Path };
        var str = JsonConvert.SerializeObject(ds);
        return str;
    }

    [JSInvokable("FnzDragDropContent")]
    public void FnzDragDropContent(string dataType, string c)
    {
        if (dataType != FnzConst.DragDropTypePlaylistItem) return;
        var ds = JsonConvert.DeserializeObject<PlaylistDragSource>(c);
        if (ds == null || ds.Path == null || string.IsNullOrWhiteSpace(ds.Path)) return;
        PlaylistHelper.TrackMove(ds.PlaylistId, ds.TrackIndex, ds.Path, PlaylistId, TrackIndex);
    }
}

<tr id="@ElementId" class="mouse-hilight" @ondragend="DisableDragDrop">
    <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 colspan="1" class="align-top w-100">
        <div class="text-nowrap">
            <a @onclick="() => App.Instance.PlayTrack(Track)" @onclick:preventDefault href="@Track.Path" target="@FnzConst.PlayPageTarget">
                @Track.GetTitleOrFilename()
            </a>
        </div>
        <div class="text-nowrap text-muted"> @Track.Tag?.Artist</div>
    </td>
    <td>
        <div class="dropend">
            <div id="@(ElementId)-handle" data-bs-toggle="dropdown" class="p-2 border border-primary" style="cursor: move" @onmousedown="EnableDragDrop" @onmouseup="DisableDragDrop">
                <i class="bi bi-list"></i>
            </div>
            @if (TrackCount > 1)
            {
                var isFirst = TrackIndex == 0;
                var isLast = TrackIndex == TrackCount - 1;

                <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>