Added playing song view. Adding styling to playing song. Fixed caching cancellation issue.

Harmonia.Core/Caching/Cache.cs

@@ -32,30 +32,39 @@ public abstract class Cache<TKey, TValue> : ICache<TKey, TValue> where TKey : no
 
         SemaphoreSlim lockObject = _locks.GetOrAdd(actualKey, (key) => new SemaphoreSlim(1, 1));
 
+        bool throttlerAcquired = false;
+        bool lockAcquired = false;
+
         try
         {
             await _throttler.WaitAsync(cancellationToken);
+            throttlerAcquired = true;
 
             if (cancellationToken.IsCancellationRequested)
                 return default;
 
             await lockObject.WaitAsync(cancellationToken);
+            lockAcquired = true;
 
             if (cancellationToken.IsCancellationRequested)
                 return default;
 
             return TryGetValue(actualKey) ?? await FetchAsync2(key, cancellationToken);
         }
+        catch (OperationCanceledException)
+        {
+            return default;
+        }
         finally
         {
-            lockObject.Release();
+            if (lockAcquired)
+                lockObject.Release();
 
             _locks.TryRemove(lockObject, out _);
 
-            _throttler.Release();
+            if (throttlerAcquired)
+                _throttler.Release();
         }
-
-        //return TryGetValue(actualKey) ?? Refresh(key);
     }
 
     private async Task<TValue?> FetchAsync2(TKey key, CancellationToken cancellationToken)

Harmonia.WinUI/App.xaml.cs

@@ -22,7 +22,7 @@ public partial class App : Application
 
         //services.AddSingleton<MainViewModel>();
         services.AddSingleton<PlayerViewModel>();
-        //services.AddSingleton<PlayingSongInfoViewModel>();
+        services.AddSingleton<PlayingSongViewModel>();
         services.AddSingleton<PlaylistViewModel>();
 
         services.AddSingleton<IAudioBitmapImageCache, AudioBitmapImageCache>();

Harmonia.WinUI/Harmonia.WinUI.csproj

@@ -65,6 +65,9 @@
 	  <Page Update="Resources\Converters.xaml">
 	    <SubType>Designer</SubType>
 	  </Page>
+	  <Page Update="Views\PlayingSongView.xaml">
+	    <SubType>Designer</SubType>
+	  </Page>
 	  <Page Update="Views\PlaylistView.xaml">
 	    <SubType>Designer</SubType>
 	  </Page>

Harmonia.WinUI/MainWindow.xaml

@@ -33,9 +33,9 @@
                 <ColumnDefinition></ColumnDefinition>
                 <ColumnDefinition></ColumnDefinition>
             </Grid.ColumnDefinitions>
+            <views:PlayingSongView Grid.Column="0"></views:PlayingSongView>
             <views:PlaylistView Grid.Column="1"></views:PlaylistView>
         </Grid>
-        <!--<views:PlayingSongInfo Grid.Row="0"></views:PlayingSongInfo>-->
         <views:PlayerView Grid.Row="1"></views:PlayerView>
     </Grid>
     

Harmonia.WinUI/Resources/Geometry.xaml

@@ -126,6 +126,17 @@
         M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4
     </x:String>
 
+    <x:String x:Key="AddFileIcon">
+        M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5
+        M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z
+    </x:String>
+
+    <x:String x:Key="AddFolderIcon">
+        m.5 3 .04.87a2 2 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2m5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19q-.362.002-.683.12L1.5 2.98a1 1 0 0 1 1-.98z
+        M13.5 9a.5.5 0 0 1 .5.5V11h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V12h-1.5a.5.5 0 0 1 0-1H13V9.5a.5.5 0 0 1 .5-.5
+    </x:String>
+
+
     <x:String x:Key="MoreIcon">
         M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3
     </x:String>

Harmonia.WinUI/Resources/Styles.xaml

@@ -71,4 +71,9 @@
         <Setter Property="Height" Value="36"/>
     </Style>
     
+    <!-- Selected List View Item -->
+    <!--<Style x:Name="SelectedListViewItem" TargetType="ListViewItem">
+        <Setter Property="Foreground" Value="Red" />
+    </Style>-->
+    
 </ResourceDictionary>

Harmonia.WinUI/ViewModels/PlayingSongViewModel.cs

@@ -0,0 +1,79 @@
+using Harmonia.Core.Models;
+using Harmonia.Core.Player;
+using Harmonia.WinUI.Caching;
+using Microsoft.UI.Dispatching;
+using Microsoft.UI.Xaml.Media.Imaging;
+using System;
+using System.Threading;
+using System.Threading.Tasks;
+
+namespace Harmonia.WinUI.ViewModels;
+
+public class PlayingSongViewModel : ViewModelBase
+{
+    private readonly IAudioPlayer _audioPlayer;
+    private readonly IAudioBitmapImageCache _audioBitmapImageCache;
+    private readonly DispatcherQueue _dispatcherQueue;
+
+    private CancellationTokenSource? _songImageCancellationTokenSource;
+
+    private Song? _song;
+    public Song? Song
+    {
+        get
+        {
+            return _song;
+        }
+        private set
+        {
+            SetProperty(ref _song, value);
+        }
+    }
+
+    private BitmapImage? _songImageSource;
+    public BitmapImage? SongImageSource
+    {
+        get
+        {
+            return _songImageSource;
+        }
+        private set
+        {
+            SetProperty(ref _songImageSource, value);
+        }
+    }
+
+    public PlayingSongViewModel(IAudioPlayer audioPlayer, IAudioBitmapImageCache audioBitmapImageCache)
+    {
+        _audioPlayer = audioPlayer;
+        _audioPlayer.PlayingSongChanged += OnAudioPlayerPlayingSongChanged;
+
+        _audioBitmapImageCache = audioBitmapImageCache;
+        _dispatcherQueue = DispatcherQueue.GetForCurrentThread();
+    }
+
+    private void OnAudioPlayerPlayingSongChanged(object? sender, EventArgs e)
+    {
+        Song = _audioPlayer.PlayingSong?.Song;
+        Task.Run(UpdateImage);
+    }
+
+    private async Task UpdateImage()
+    {
+        // TODO: Show default picture
+        if (Song == null)
+            return;
+
+        if (_songImageCancellationTokenSource != null)
+            await _songImageCancellationTokenSource.CancelAsync();
+
+        _songImageCancellationTokenSource = new();
+        CancellationToken cancellationToken = _songImageCancellationTokenSource.Token;
+
+        _dispatcherQueue.TryEnqueue(async () =>
+        {
+            BitmapImage? bitmapImage = await _audioBitmapImageCache.GetAsync(Song, cancellationToken);
+            SongImageSource = bitmapImage;
+        });
+    }
+}

Harmonia.WinUI/ViewModels/PlaylistViewModel.cs

@@ -6,9 +6,9 @@ using Harmonia.Core.Playlists;
 using Harmonia.Core.Scanner;
 using Harmonia.WinUI.Caching;
 using Harmonia.WinUI.Storage;
-using Microsoft.UI.Dispatching;
 using Microsoft.UI.Xaml.Media.Imaging;
 using System;
+using System.Collections;
 using System.Collections.Concurrent;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
@@ -20,8 +20,8 @@ using System.Threading;
 using System.Threading.Tasks;
 using System.Timers;
 using System.Windows.Input;
+using Windows.ApplicationModel.Contacts;
 using Windows.ApplicationModel.DataTransfer;
-using Windows.System;
 using DispatcherQueue = Microsoft.UI.Dispatching.DispatcherQueue;
 using Timer = System.Timers.Timer;
 
@@ -288,7 +288,38 @@ public partial class PlaylistViewModel : ViewModelBase
             return;
 
         List<PlaylistSong> filteredPlaylistSongs = [.. Playlist.Songs.Where(playlistSong => IsFiltered(playlistSong.Song))];
-        FilteredPlaylistSongs = [.. filteredPlaylistSongs];
+        //FilteredPlaylistSongs = [.. filteredPlaylistSongs];
+
+        for (int i = FilteredPlaylistSongs.Count -1; i >= 0; i--)
+        {
+            PlaylistSong playlistSong = FilteredPlaylistSongs[i];
+
+            bool inPlaylist = Playlist.Songs.Contains(playlistSong);
+            bool inFilter = filteredPlaylistSongs.Contains(playlistSong);
+
+            if (!inPlaylist || !inFilter)
+            {
+                FilteredPlaylistSongs.Remove(playlistSong);
+            }
+        }
+
+        int insertionIndex = 0;
+
+        foreach (PlaylistSong playlistSong in Playlist.Songs)
+        {
+            bool inFilter = filteredPlaylistSongs.Contains(playlistSong);
+            bool inCurrentFilteredList = FilteredPlaylistSongs.Contains(playlistSong);
+
+            if (inFilter)
+            {
+                if (!inCurrentFilteredList)
+                {
+                    FilteredPlaylistSongs.Insert(insertionIndex, playlistSong);
+                }
+
+                insertionIndex++;
+            }
+        }
     }
 
     private bool IsFiltered(Song song)

Harmonia.WinUI/ViewModels/ViewModelLocator.cs

@@ -10,8 +10,8 @@ public class ViewModelLocator
     public static PlayerViewModel PlayerViewModel
         => App.ServiceProvider.GetRequiredService<PlayerViewModel>();
 
-    //public static PlayingSongInfoViewModel PlayingSongInfoViewModel
+    public static PlayingSongViewModel PlayingSongViewModel
-    //    => App.ServiceProvider.GetRequiredService<PlayingSongInfoViewModel>();
+        => App.ServiceProvider.GetRequiredService<PlayingSongViewModel>();
 
     public static PlaylistViewModel PlaylistViewModel
         => App.ServiceProvider.GetRequiredService<PlaylistViewModel>();

Harmonia.WinUI/Views/PlayingSongView.xaml

@@ -0,0 +1,17 @@
+<UserControl
+    x:Class="Harmonia.WinUI.Views.PlayingSongView"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Harmonia.WinUI.Views"
+    xmlns:vm="using:Harmonia.WinUI.ViewModels"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    DataContext="{Binding Source={StaticResource Locator}, Path=PlayingSongViewModel}"
+    d:DataContext="{d:DesignInstance Type=vm:PlayingSongViewModel, IsDesignTimeCreatable=True}"
+    mc:Ignorable="d">
+    <Grid HorizontalAlignment="Center" VerticalAlignment="Center"  Margin="20">
+        <Image Source="{Binding SongImageSource, Mode=OneWay}" Stretch="Uniform">
+        </Image>
+        <Canvas Background="#19000000"></Canvas>
+    </Grid>
+</UserControl>

Harmonia.WinUI/Views/PlayingSongView.xaml.cs

@@ -0,0 +1,15 @@
+using Harmonia.WinUI.ViewModels;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Harmonia.WinUI.Views;
+
+public sealed partial class PlayingSongView : UserControl
+{
+    private readonly PlayingSongViewModel _viewModel;
+
+    public PlayingSongView()
+    {
+        InitializeComponent();
+        _viewModel = (PlayingSongViewModel)DataContext;
+    }
+}

Harmonia.WinUI/Views/PlaylistView.xaml

@@ -31,9 +31,37 @@
             <Setter Property="CornerRadius" Value="8"/>
         </Style>
         
+        <!-- Song Item Title Text Block -->
+        <Style x:Key="SongTitleTextBlock" TargetType="TextBlock">
+            <Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
+            <Setter Property="FontSize" Value="15"/>
+            <Setter Property="FontWeight" Value="Medium"/>
+            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
+            <Setter Property="VerticalAlignment" Value="Center"/>
+            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
+            <Setter Property="LineHeight" Value="0"/>
+        </Style>
+
+        <Style x:Key="PlayingSongTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource SongTitleTextBlock}">
+            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
+        </Style>
+
+        <!-- Song Item Subtitle Text Block -->
+        <Style x:Key="SongSubtitleTextBlock" TargetType="TextBlock">
+            <Setter Property="Foreground" Value="{StaticResource SongItemSubtitleBrush}"/>
+            <Setter Property="FontSize" Value="13"/>
+            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
+            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
+            <Setter Property="LineHeight" Value="0"/>
+        </Style>
+
+        <Style x:Key="PlayingSongSubtitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource SongSubtitleTextBlock}">
+            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorSecondaryBrush}"/>
+        </Style>
+
         <DataTemplate x:Key="SongTemplate" x:DataType="playlists:PlaylistSong">
             <!-- Background was formerly transparent -->
-            <Border DoubleTapped="PlaylistListViewItem_DoubleTapped" RightTapped="PlaylistListViewItem_RightTapped" Background="Transparent">
+            <Border x:Name="PlaylistSongListViewItem" DataContextChanged="PlaylistSongListViewItem_DataContextChanged" DoubleTapped="PlaylistListViewItem_DoubleTapped" RightTapped="PlaylistListViewItem_RightTapped" Background="Transparent">
                 <Grid Padding="10">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto"></ColumnDefinition>
@@ -55,15 +83,15 @@
                             <RowDefinition></RowDefinition>
                             <RowDefinition></RowDefinition>
                         </Grid.RowDefinitions>
-                        <TextBlock Grid.Column="0" Grid.Row="0" Foreground="{StaticResource SongItemTitleBrush}" Text="{x:Bind Song, Converter={StaticResource SongTitle}, Mode=OneWay}" FontSize="15" FontWeight="Medium" LineStackingStrategy="BlockLineHeight" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" LineHeight="0">
+                        <TextBlock Grid.Column="0" Grid.Row="0" x:Name="SongTitleTextBlock" Text="{x:Bind Song, Converter={StaticResource SongTitle}, Mode=OneWay}" Style="{StaticResource SongTitleTextBlock}" >
                         </TextBlock>
-                        <TextBlock Grid.Row="1" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Margin="0 0 0 0">
+                        <TextBlock Grid.Row="1" x:Name="SongArtistsTextBlock" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}" Style="{StaticResource SongSubtitleTextBlock}">
                         </TextBlock>
-                        <TextBlock Grid.Row="2" Text="{Binding Song.Album}" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight"  LineHeight="0" FontSize="13" Margin="0 0 0 0">
+                        <TextBlock Grid.Row="2" x:Name="SongAlbumTextBlock" Text="{Binding Song.Album}" Style="{StaticResource SongSubtitleTextBlock}">
                         </TextBlock>
-                        <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Right" HorizontalTextAlignment="Right" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Text="{Binding Song.Length.TotalSeconds, Converter={StaticResource SecondsToString}}"></TextBlock>
+                        <TextBlock Grid.Row="0" x:Name="SongLengthTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Right" HorizontalTextAlignment="Right" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Text="{Binding Song.Length.TotalSeconds, Converter={StaticResource SecondsToString}}"></TextBlock>
-                        <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12" Text="{Binding Song.FileType}"></TextBlock>
+                        <TextBlock Grid.Row="1" x:Name="SongFormatTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12" Text="{Binding Song.FileType}"></TextBlock>
-                        <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12">
+                        <TextBlock Grid.Row="2" x:Name="SongBitRateTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12">
                      <Run Text="{Binding Song.BitRate}"></Run><Run Text=" kbps"></Run>
                         </TextBlock>
                     </Grid>
@@ -88,16 +116,28 @@
                         <Path Style="{StaticResource FlatButtonPath}" Fill="#7FD184" Data="{StaticResource AddIcon}"></Path>
                     </Button.Content>
                     <Button.Flyout>
-                        <MenuFlyout Placement="Bottom">
+                        <MenuFlyout Placement="Bottom" ShouldConstrainToRootBounds="False" SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}">
+                            <MenuFlyout.MenuFlyoutPresenterStyle>
+                                <Style TargetType="MenuFlyoutPresenter">
+                                    <Setter Property="Padding" Value="10"></Setter>
+                                    <Setter Property="Background" Value="Transparent"></Setter>
+                                </Style>
+                            </MenuFlyout.MenuFlyoutPresenterStyle>
                             <MenuFlyoutItem Text="Add Files..." Command="{Binding AddFilesCommand}">
                                 <MenuFlyoutItem.Icon>
-                                    <PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
+                                    <PathIcon Data="{StaticResource AddFileIcon}"></PathIcon>
                                 </MenuFlyoutItem.Icon>
+                                <MenuFlyoutItem.KeyboardAccelerators>
+                                    <KeyboardAccelerator Key="Insert"/>
+                                </MenuFlyoutItem.KeyboardAccelerators>
                             </MenuFlyoutItem>
                             <MenuFlyoutItem Text="Add Folder..." Command="{Binding AddFolderCommand}">
                                 <MenuFlyoutItem.Icon>
-                                    <PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
+                                    <PathIcon Data="{StaticResource AddFolderIcon}"></PathIcon>
                                 </MenuFlyoutItem.Icon>
+                                <MenuFlyoutItem.KeyboardAccelerators>
+                                    <KeyboardAccelerator Key="Insert" Modifiers="Control" />
+                                </MenuFlyoutItem.KeyboardAccelerators>
                             </MenuFlyoutItem>
                         </MenuFlyout>
                     </Button.Flyout>
@@ -107,16 +147,32 @@
                         <Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource MoreIcon}"></Path>
                     </Button.Content>
                     <Button.Flyout>
-                        <MenuFlyout Placement="Bottom">
+                        <MenuFlyout Placement="Bottom" ShouldConstrainToRootBounds="False" SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}">
-                            <MenuFlyoutItem Text="Add Files..." Command="{Binding AddFilesCommand}">
+                            <MenuFlyout.MenuFlyoutPresenterStyle>
-                                <MenuFlyoutItem.Icon>
+                                <Style TargetType="MenuFlyoutPresenter">
-                                    <PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
+                                    <Setter Property="Padding" Value="10"></Setter>
-                                </MenuFlyoutItem.Icon>
+                                    <Setter Property="Background" Value="Transparent"></Setter>
+                                </Style>
+                            </MenuFlyout.MenuFlyoutPresenterStyle>
+                            <MenuFlyoutItem Text="Refresh Tags" Command="{Binding RefreshTagsCommand}">
+                                
                             </MenuFlyoutItem>
-                            <MenuFlyoutItem Text="Add Folder..." Command="{Binding AddFolderCommand}">
+                            <MenuFlyoutItem Text="Remove Duplicates" Command="{Binding RemoveDuplicateSongsCommand}">
-                                <MenuFlyoutItem.Icon>
+                                
-                                    <PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
+                            </MenuFlyoutItem>
-                                </MenuFlyoutItem.Icon>
+                            <MenuFlyoutItem Text="Remove Missing" Command="{Binding RemoveMissingSongsCommand}">
+                                
+                            </MenuFlyoutItem>
+                            <MenuFlyoutItem Text="Lock Playlist">
+                                
+                            </MenuFlyoutItem>
+                            <MenuFlyoutSeparator></MenuFlyoutSeparator>
+                            <MenuFlyoutItem Text="Remove Playlist" Foreground="#ff99a4">
+                                
+                            </MenuFlyoutItem>
+                            <MenuFlyoutSeparator></MenuFlyoutSeparator>
+                            <MenuFlyoutItem Text="Settings">
+                                
                             </MenuFlyoutItem>
                         </MenuFlyout>
                     </Button.Flyout>
@@ -147,9 +203,9 @@
                         </MenuFlyoutItem.KeyboardAccelerators>
                     </MenuFlyoutItem>
                     <MenuFlyoutSeparator></MenuFlyoutSeparator>
-                    <MenuFlyoutItem Text="Remove" Command="{Binding RemoveSongsCommand}">
+                    <MenuFlyoutItem Text="Remove" Command="{Binding RemoveSongsCommand}" Foreground="#ff99a4">
                         <MenuFlyoutItem.Icon>
-                            <PathIcon Data="{StaticResource DeleteIcon}"></PathIcon>
+                            <PathIcon Data="{StaticResource DeleteIcon}" Foreground="#ff99a4"></PathIcon>
                         </MenuFlyoutItem.Icon>
                         <MenuFlyoutItem.KeyboardAccelerators>
                             <KeyboardAccelerator Key="Delete"/>

Harmonia.WinUI/Views/PlaylistView.xaml.cs

@@ -6,9 +6,13 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Data;
 using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Media.Imaging;
 using System;
+using System.Collections.Generic;
+using System.ComponentModel;
 using System.Linq;
+using Windows.UI.Popups;
 
 namespace Harmonia.WinUI.Views;
 
@@ -21,6 +25,8 @@ public sealed partial class PlaylistView : UserControl
         InitializeComponent();
 
         _viewModel = (PlaylistViewModel)DataContext;
+        _viewModel.PropertyChanging += OnViewModelPropertyChanging;
+        _viewModel.PropertyChanged += OnViewModelPropertyChanged;
         _viewModel.PlayingSongChangedAutomatically += OnPlayingSongChangedAutomatically;
 
         foreach (MenuFlyoutItemBase item in PlaylistListViewMenuFlyout.Items)
@@ -29,6 +35,75 @@ public sealed partial class PlaylistView : UserControl
         }
     }
 
+    private void OnViewModelPropertyChanging(object? sender, PropertyChangingEventArgs e)
+    {
+        if (e.PropertyName == nameof(_viewModel.PlayingSong))
+        {
+            ListViewItem listViewItem = (ListViewItem)PlaylistListView.ContainerFromItem(_viewModel.PlayingSong);
+
+            if (listViewItem != null)
+            {
+                UpdateListViewItemStyle(listViewItem, false);
+            }
+        }
+    }
+
+    private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == nameof(_viewModel.PlayingSong))
+        {
+            ListViewItem listViewItem = (ListViewItem)PlaylistListView.ContainerFromItem(_viewModel.PlayingSong);
+
+            UpdateListViewItemStyle(listViewItem, true);
+        }
+    }
+
+    private void UpdateListViewItemStyle(FrameworkElement listViewItem, bool isPlaying)
+    {
+        if (listViewItem == null)
+            return;
+
+        FrameworkElement? frameworkElement;
+
+        if (listViewItem.Name == "PlaylistSongListViewItem")
+        {
+            frameworkElement = listViewItem;
+        }
+        else
+        {
+            if (listViewItem.FindDescendant("PlaylistSongListViewItem") is not FrameworkElement frameworkElement2)
+                return;
+
+            frameworkElement = frameworkElement2;
+        }
+
+        if (frameworkElement == null)
+            return;
+
+        string songItemTitleBrushName = isPlaying ? "PlayingSongTitleTextBlock" : "SongTitleTextBlock";
+        string songItemSubtitleBrushName = isPlaying ? "PlayingSongSubtitleTextBlock" : "SongSubtitleTextBlock";
+
+        UpdateElementStyle(frameworkElement, "SongTitleTextBlock", songItemTitleBrushName);
+        UpdateElementStyle(frameworkElement, "SongArtistsTextBlock", songItemSubtitleBrushName);
+        UpdateElementStyle(frameworkElement, "SongAlbumTextBlock", songItemSubtitleBrushName);
+    }
+
+    private void UpdateElementStyle(FrameworkElement dependencyObject, string elementName, string resourceName)
+    {
+        if (dependencyObject.FindDescendant(elementName) is not FrameworkElement frameworkElement)
+            return;
+
+        Resources.TryGetValue(resourceName, out object? resource);
+
+        if (resource == null)
+            Application.Current.Resources.TryGetValue(resourceName, out resource);
+
+        if (resource is not Style style)
+            return;
+
+        frameworkElement.Style = style;
+    }
+
     private void OnPlayingSongChangedAutomatically(object? sender, EventArgs e)
     {
         BringPlayingSongIntoView();
@@ -112,6 +187,16 @@ public sealed partial class PlaylistView : UserControl
         });
     }
 
+    private void PlaylistSongListViewItem_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
+    {
+        if (args.NewValue is not PlaylistSong playlistSong)
+            return;
+
+        bool isPlaying = playlistSong == _viewModel.PlayingSong;
+        
+        UpdateListViewItemStyle(sender, isPlaying);
+    }
+
     private async void PlaylistListViewItem_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
     {
         if (sender is not FrameworkElement element)