From 4b8bd989aa6a4dcdec1df423be1ef792b468bc61 Mon Sep 17 00:00:00 2001
From: NeoCoderMatrix86 <40752681+NeoCoderMatrix86@users.noreply.github.com>
Date: Mon, 11 Nov 2024 16:30:24 +0100
Subject: [PATCH] New component for tracklist control column

---
 .../Shared/TrackList/TrackListItem.razor      | 117 +---------
 .../TrackListItemControlColumn.razor          | 212 ++++++++++++++++++
 2 files changed, 222 insertions(+), 107 deletions(-)
 create mode 100644 AudioCuesheetEditor/Shared/TrackList/TrackListItemControlColumn.razor

diff --git a/AudioCuesheetEditor/Shared/TrackList/TrackListItem.razor b/AudioCuesheetEditor/Shared/TrackList/TrackListItem.razor
index f9bf3450..cfb6e292 100644
--- a/AudioCuesheetEditor/Shared/TrackList/TrackListItem.razor
+++ b/AudioCuesheetEditor/Shared/TrackList/TrackListItem.razor
@@ -33,94 +33,7 @@ along with Foobar.  If not, see
             <TrackLinkControl TrackReference="track" TrackSelectionVisible="TrackSelectionVisible" />
             <TableRow Color="((AudioPlayer != null) && (AudioPlayer.CurrentlyPlayingTrack != null) && (AudioPlayer.CurrentlyPlayingTrack == track)) ? Color.Primary : Color.Default">
                 <TrackSelection Visible="TrackSelectionVisible" Selected="SelectedTracks.Contains(track)" SelectedChanged="(selected) => SelectedTrackChanged(track, selected)" />
-                @switch (_sessionStateContainer.CurrentViewMode)
-                {
-                    case ViewMode.ViewModeRecord:
-                        <TableRowCell>
-                            <Button Size="Size.Small" Color="Color.Warning" Clicked="() => Cuesheet?.RemoveTrack(track)">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
-                                </svg>
-                            </Button>
-                        </TableRowCell>
-                        <TableRowCell>@track.Position</TableRowCell>
-                        break;
-                    case ViewMode.ViewModeFull:
-                    case ViewMode.ViewModeImport:
-                        <TableRowCell>
-                            <Tooltip Placement="TooltipPlacement.Top" Text="@GetLocalizedString((AudioPlayer != null) && (AudioPlayer.AudioIsPlaying == true) && (AudioPlayer.CurrentlyPlayingTrack == track),"Current track is played")">
-                                <Buttons Role="ButtonsRole.Toolbar">
-                                    <Div Flex="Flex.JustifyContent.Start.AlignItems.Center">
-                                        <Buttons Margin="Margin.Is1.FromEnd">
-                                            <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Edit track tooltip"]">
-                                                <Button Size="Size.Small" Color="Color.Secondary" Clicked="() => EditTrackModal(track)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
-                                                        <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
-                                                        <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
-                                                    </svg>
-                                                </Button>
-                                            </Tooltip>
-                                        </Buttons>
-                                        <Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.Flex.Row.OnWidescreen">
-                                            <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Copy track tooltip"]">
-                                                <Button Size="Size.Small" Color="Color.Success" Clicked="() => CopyTrackClicked(track)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16">
-                                                        <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
-                                                        <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z" />
-                                                    </svg>
-                                                </Button>
-                                            </Tooltip>
-                                        </Buttons>
-                                        <Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.Flex.Row.OnWidescreen">
-                                            <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Start playback this track"]">
-                                                <Button Size="Size.Small" Color="Color.Info" Disabled="(AudioPlayer == null) || ((AudioPlayer != null) && (AudioPlayer.PlaybackPossible == false))" Clicked="() => OnPlayTrackClicked(track)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
-                                                        <path fill-rule="evenodd" d="M14 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z" />
-                                                        <path fill-rule="evenodd" d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z" />
-                                                    </svg>
-                                                </Button>
-                                            </Tooltip>
-                                        </Buttons>
-                                        <Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.Flex.Row.OnDesktop">
-                                            <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Move track up tooltip"]">
-                                                <Button Size="Size.Small" Color="Color.Secondary" Disabled="!(Cuesheet != null && Cuesheet.MoveTrackPossible(track, MoveDirection.Up))" Clicked="() => Cuesheet?.MoveTrack(track, MoveDirection.Up)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
-                                                        <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z" />
-                                                    </svg>
-                                                </Button>
-                                            </Tooltip>
-                                            <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Move track down tooltip"]">
-                                                <Button Size="Size.Small" Color="Color.Secondary" Disabled="!(Cuesheet != null && Cuesheet.MoveTrackPossible(track, MoveDirection.Down))" Clicked="() => Cuesheet?.MoveTrack(track, MoveDirection.Down)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
-                                                        <path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z" />
-                                                    </svg>
-                                                </Button>
-                                            </Tooltip>
-                                        </Buttons>
-                                        <Buttons Margin="Margin.Is1.FromEnd">
-                                            <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Delete track tooltip"]">
-                                                <Button Size="Size.Small" Color="Color.Danger" Clicked="() => OnDeleteTrackClicked(track)">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
-                                                        <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
-                                                    </svg>
-                                                </Button>
-                                            </Tooltip>
-                                        </Buttons>
-                                    </Div>
-                                </Buttons>
-                            </Tooltip>
-                        </TableRowCell>
-                        <TableRowCell>
-                            <Validation AsyncValidator="(args, token) => ValidatorUtility<Track>.Validate(args, track, x => x.Position, _validationMessageLocalizer, token)">
-                                <NumericEdit TValue="uint?" @bind-Value="track.Position" Immediate="false">
-                                    <Feedback>
-                                        <ValidationError />
-                                    </Feedback>
-                                </NumericEdit>
-                            </Validation>
-                        </TableRowCell>
-                        break;
-                }
+                <TrackListItemControlColumn TrackReference="track" AudioPlayer="AudioPlayer" TrackDeleted="() => TrackDeleted(track)" />
                 <TableRowCell>
                     <Tooltip Placement="TooltipPlacement.Top" Text="@GetLocalizedString((AudioPlayer != null) && (AudioPlayer.AudioIsPlaying == true) && (AudioPlayer.CurrentlyPlayingTrack == track),"Current track is played")">
                         <Autocomplete TItem="MusicBrainzArtist" TValue="Guid" Data="autocompleteTrackArtists" FreeTyping TextField="@((item) => item.Name)" ValueField="@((item) => item.Id)" @bind-SelectedText="track.Artist" ReadData="OnReadDataAutocompleteTrackArtist" AsyncValidator="(args, token) => ValidatorUtility<Track>.Validate(args, track, x => x.Artist, _validationMessageLocalizer, token)">
@@ -217,10 +130,9 @@ along with Foobar.  If not, see
 <EditTrackModal @ref="modalTrackEdit" SaveClicked="() => StateHasChanged()" />
 
 @code {
-    //TODO: More little components, like TrackLink, TrackSelection, etc. ;)
     //TODO: Localization
-    Validations? validations;
     EditTrackModal? modalTrackEdit;
+    Validations? validations;
     IEnumerable<MusicBrainzArtist>? autocompleteTrackArtists;
     IEnumerable<MusicBrainzTrack>? autocompleteTrackTitles;
 
@@ -238,7 +150,7 @@ along with Foobar.  If not, see
     [Parameter]
     public EventCallback<List<Track>> SelectedTracksChanged { get; set; }
 
-    [Parameter]
+    [Parameter, EditorRequired]
     public AudioPlayer? AudioPlayer { get; set; }
 
     public Cuesheet? Cuesheet
@@ -301,14 +213,6 @@ along with Foobar.  If not, see
         await EditTrackModal(copy);
     }
 
-    async Task OnPlayTrackClicked(Track track)
-    {
-        if (AudioPlayer != null)
-        {
-            await AudioPlayer.OnPlayTrackClicked(track);
-        }
-    }
-
     void SelectedTrackChanged(Track track, bool selected)
     {
         var selectedTracks = new List<Track>(SelectedTracks);
@@ -323,14 +227,6 @@ along with Foobar.  If not, see
         SelectedTracksChanged.InvokeAsync(selectedTracks);
     }
 
-    void OnDeleteTrackClicked(Track track)
-    {
-        Cuesheet?.RemoveTrack(track);
-        var selectedTracks = new List<Track>(SelectedTracks);
-        selectedTracks.Remove(track);
-        SelectedTracksChanged.InvokeAsync(selectedTracks);
-    }
-
     async Task OnReadDataAutocompleteTrackArtist(AutocompleteReadDataEventArgs autocompleteReadDataEventArgs)
     {
         if (!autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested)
@@ -373,4 +269,11 @@ along with Foobar.  If not, see
                 break;
         }
     }
+
+    void TrackDeleted(Track track)
+    {
+        var selectedTracks = new List<Track>(SelectedTracks);
+        selectedTracks.Remove(track);
+        SelectedTracksChanged.InvokeAsync(selectedTracks);
+    }
 }
diff --git a/AudioCuesheetEditor/Shared/TrackList/TrackListItemControlColumn.razor b/AudioCuesheetEditor/Shared/TrackList/TrackListItemControlColumn.razor
new file mode 100644
index 00000000..84a75095
--- /dev/null
+++ b/AudioCuesheetEditor/Shared/TrackList/TrackListItemControlColumn.razor
@@ -0,0 +1,212 @@
+<!--
+This file is part of AudioCuesheetEditor.
+
+AudioCuesheetEditor is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+AudioCuesheetEditor is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with Foobar.  If not, see
+<http: //www.gnu.org/licenses />.
+
+@implements IDisposable
+
+@inject ITextLocalizer<TrackListItemControlColumn> _localizer
+@inject ITextLocalizerService _localizationService
+@inject SessionStateContainer _sessionStateContainer
+@inject ITextLocalizer<ValidationMessage> _validationMessageLocalizer
+@inject TraceChangeManager _traceChangeManager
+@inject ILocalStorageOptionsProvider _localStorageOptionsProvider
+
+@if (TrackReference != null)
+{
+    switch (_sessionStateContainer.CurrentViewMode)
+    {
+        case ViewMode.ViewModeRecord:
+            <TableRowCell>
+                <Button Size="Size.Small" Color="Color.Warning" Clicked="() => Cuesheet?.RemoveTrack(TrackReference)">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+                    </svg>
+                </Button>
+            </TableRowCell>
+            <TableRowCell>@TrackReference?.Position</TableRowCell>
+            break;
+        case ViewMode.ViewModeFull:
+        case ViewMode.ViewModeImport:
+            <TableRowCell>
+                <Tooltip Placement="TooltipPlacement.Top" Text="@GetLocalizedString((AudioPlayer != null) && (AudioPlayer.AudioIsPlaying == true) && (AudioPlayer.CurrentlyPlayingTrack == TrackReference),"Current track is played")">
+                    <Buttons Role="ButtonsRole.Toolbar">
+                        <Div Flex="Flex.JustifyContent.Start.AlignItems.Center">
+                            <Buttons Margin="Margin.Is1.FromEnd">
+                                <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Edit track tooltip"]">
+                                    <Button Size="Size.Small" Color="Color.Secondary" Clicked="() => EditTrackModal(TrackReference)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
+                                            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+                                            <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
+                                        </svg>
+                                    </Button>
+                                </Tooltip>
+                            </Buttons>
+                            <Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.Flex.Row.OnWidescreen">
+                                <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Copy track tooltip"]">
+                                    <Button Size="Size.Small" Color="Color.Success" Clicked="() => CopyTrackClicked(TrackReference)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16">
+                                            <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+                                            <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z" />
+                                        </svg>
+                                    </Button>
+                                </Tooltip>
+                            </Buttons>
+                            <Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.None.OnDesktop.Flex.Row.OnWidescreen">
+                                <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Start playback this track"]">
+                                    <Button Size="Size.Small" Color="Color.Info" Disabled="(AudioPlayer == null) || ((AudioPlayer != null) && (AudioPlayer.PlaybackPossible == false))" Clicked="() => OnPlayTrackClicked(TrackReference)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M14 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z" />
+                                            <path fill-rule="evenodd" d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z" />
+                                        </svg>
+                                    </Button>
+                                </Tooltip>
+                            </Buttons>
+                            <Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.Flex.Row.OnDesktop">
+                                <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Move track up tooltip"]">
+                                    <Button Size="Size.Small" Color="Color.Secondary" Disabled="!(Cuesheet != null && Cuesheet.MoveTrackPossible(TrackReference, MoveDirection.Up))" Clicked="() => Cuesheet?.MoveTrack(TrackReference, MoveDirection.Up)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z" />
+                                        </svg>
+                                    </Button>
+                                </Tooltip>
+                                <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Move track down tooltip"]">
+                                                    <Button Size="Size.Small" Color="Color.Secondary" Disabled="!(Cuesheet != null && Cuesheet.MoveTrackPossible(TrackReference, MoveDirection.Down))" Clicked="() => Cuesheet?.MoveTrack(TrackReference, MoveDirection.Down)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z" />
+                                        </svg>
+                                    </Button>
+                                </Tooltip>
+                            </Buttons>
+                            <Buttons Margin="Margin.Is1.FromEnd">
+                                <Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Delete track tooltip"]">
+                                    <Button Size="Size.Small" Color="Color.Danger" Clicked="() => OnDeleteTrackClicked(TrackReference)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+                                        </svg>
+                                    </Button>
+                                </Tooltip>
+                            </Buttons>
+                        </Div>
+                    </Buttons>
+                </Tooltip>
+            </TableRowCell>
+            <TableRowCell>
+                <Validation AsyncValidator="(args, token) => ValidatorUtility<Track>.Validate(args, TrackReference, x => x.Position, _validationMessageLocalizer, token)">
+                    <NumericEdit TValue="uint?" @bind-Value="TrackReference.Position" Immediate="false">
+                        <Feedback>
+                            <ValidationError />
+                        </Feedback>
+                    </NumericEdit>
+                </Validation>
+            </TableRowCell>
+            break;
+    }
+}
+
+<EditTrackModal @ref="modalTrackEdit" SaveClicked="() => StateHasChanged()" />
+
+@code {
+    //TODO: Localization
+
+    EditTrackModal? modalTrackEdit;
+
+    [Parameter, EditorRequired]
+    public AudioPlayer? AudioPlayer { get; set; }
+
+    [Parameter, EditorRequired]
+    public Track? TrackReference { get; set; }
+
+    [Parameter]
+    public EventCallback TrackDeleted { get; set; }
+
+    public Cuesheet? Cuesheet
+    {
+        get
+        {
+            Cuesheet? cuesheet;
+            switch (_sessionStateContainer.CurrentViewMode)
+            {
+                case ViewMode.ViewModeImport:
+                    cuesheet = _sessionStateContainer.ImportCuesheet;
+                    break;
+                default:
+                    cuesheet = _sessionStateContainer.Cuesheet;
+                    break;
+            }
+            return cuesheet;
+        }
+    }
+
+    public void Dispose()
+    {
+        _localizationService.LocalizationChanged -= LocalizationService_LocalizationChanged;
+    }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        _localizationService.LocalizationChanged += LocalizationService_LocalizationChanged;
+    }
+
+    void LocalizationService_LocalizationChanged(object? sender, EventArgs args)
+    {
+        StateHasChanged();
+    }
+
+    String? GetLocalizedString(Boolean expressionToCheck, String localizedStringName)
+    {
+        if (expressionToCheck == true)
+        {
+            return _localizer[localizedStringName];
+        }
+        else
+        {
+            return null;
+        }
+    }
+
+    async Task EditTrackModal(Track trackToEdit)
+    {
+        if (modalTrackEdit != null)
+        {
+            modalTrackEdit.TracksToEdit = new List<Track>() { trackToEdit };
+            await modalTrackEdit.Show();
+        }
+    }
+
+    async Task CopyTrackClicked(Track trackToCopy)
+    {
+        var copy = new Track(trackToCopy);
+        var applicationOptions = await _localStorageOptionsProvider.GetOptions<ApplicationOptions>();
+        Cuesheet?.AddTrack(copy, applicationOptions);
+        _traceChangeManager.TraceChanges(copy);
+        await EditTrackModal(copy);
+    }
+
+    async Task OnPlayTrackClicked(Track track)
+    {
+        if (AudioPlayer != null)
+        {
+            await AudioPlayer.OnPlayTrackClicked(track);
+        }
+    }
+
+    void OnDeleteTrackClicked(Track track)
+    {
+        Cuesheet?.RemoveTrack(track);
+        TrackDeleted.InvokeAsync();
+    }
+}