DiscDialogTrackSetTable.razor 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. @code {
  2. [Parameter, Required] public FeTrackSet TrackSet { get; set; }
  3. [Parameter] public EventCallback<FeTrack> OnAddToPlaylist { get; set; } = EventCallback<FeTrack>.Empty;
  4. }
  5. <div class="table-responsive">
  6. <table class="table">
  7. <thead>
  8. <tr class="table-primary">
  9. <th scope="col" class="p-1 text-center">
  10. <i class="bi bi-file-earmark-music"></i>
  11. </th>
  12. <th scope="col" class="p-1">
  13. <a href="@TrackSet?.M3U8Path" target="@FnzConst.PlayPageTarget" onclick="return fnz.blockDownloadAndOpenHtmlPage(this)">Play all</a>
  14. </th>
  15. <th scope="col" class="p-1 text-center">@TrackSet?.TotalDuration.SecondToDur()</th>
  16. <th scope="col" class="p-1 text-center">@TrackSet?.TotalBytes.BytesToFileSize()</th>
  17. <th scope="col" class="p-1 text-center">
  18. <i class="bi bi-list-ul"></i>
  19. </th>
  20. </tr>
  21. </thead>
  22. <tbody>
  23. @foreach (var t in (TrackSet?.Tracks).KeepNoEmpty().WithIndex())
  24. {
  25. <tr class="@(t.index%2==0?"":"table-primary") mouse-hilight">
  26. <td scope="col" class="p-1 text-center">
  27. <FileIcon Track="@t.item"></FileIcon>
  28. </td>
  29. <td scope="row" class="p-0 text-nowrap">
  30. <span onclick="@(async () => { await WavePlayerModuleCsCore.InitFlacAsync(t.item.Path); })">LP</span>
  31. <span onclick="@WavePlayerModuleCsCore.Play">P</span>
  32. <span onclick="@WavePlayerModuleCsCore.Stop">S</span>
  33. <a href="@t.item?.Path" target="@FnzConst.PlayPageTarget">@t.item?.GetTitleOrFilename()</a>
  34. </td>
  35. <td class="p-0 text-center">@(t.item?.Tag?.Duration.SecondToDur() ?? "?")</td>
  36. <td class="p-0 text-center">@(t.item?.Tag?.Length.BytesToFileSize() ?? "?")</td>
  37. <td class="p-0 text-center">
  38. <button type="button" class="btn btn-link" style="padding:0.1rem" @onclick="()=>OnAddToPlaylist.InvokeAsync(t.item)">
  39. <i class="bi bi-folder-plus"></i>
  40. </button>
  41. </td>
  42. </tr>
  43. }
  44. </tbody>
  45. </table>
  46. </div>