BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsSearchControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="BetterLyrics.WinUI3.Controls.LyricsSearchControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:BetterLyrics.WinUI3.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

    <Grid Padding="16" RowSpacing="6">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
                    <controls:SettingsExpander x:Uid="LyricsSearchControlSongInfoMapping" IsExpanded="True">
                        <controls:SettingsExpander.Items>
                            <controls:SettingsCard x:Uid="LyricsSearchControlTitle" Description="{x:Bind ViewModel.MappedSongSearchQuery.OriginalTitle, Mode=OneWay}">
                                <StackPanel Orientation="Horizontal" Spacing="6">
                                    <TextBlock x:Uid="LyricsSearchControlMappedAs" VerticalAlignment="Center" />
                                    <TextBox Text="{x:Bind ViewModel.MappedSongSearchQuery.MappedTitle, Mode=TwoWay}" TextWrapping="Wrap" />
                                    <Button
                                        VerticalAlignment="Center"
                                        Command="{x:Bind ViewModel.ResetMappedTitleCommand}"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE777;}"
                                        Style="{StaticResource GhostButtonStyle}" />
                                </StackPanel>
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="LyricsSearchControlArtist" Description="{x:Bind ViewModel.MappedSongSearchQuery.OriginalArtist, Mode=OneWay}">
                                <StackPanel Orientation="Horizontal" Spacing="6">
                                    <TextBlock x:Uid="LyricsSearchControlMappedAs" VerticalAlignment="Center" />
                                    <TextBox Text="{x:Bind ViewModel.MappedSongSearchQuery.MappedArtist, Mode=TwoWay}" TextWrapping="Wrap" />
                                    <Button
                                        VerticalAlignment="Center"
                                        Command="{x:Bind ViewModel.ResetMappedArtistCommand}"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE777;}"
                                        Style="{StaticResource GhostButtonStyle}" />
                                </StackPanel>
                            </controls:SettingsCard>
                            <controls:SettingsCard x:Uid="LyricsSearchControlAlbum" Description="{x:Bind ViewModel.MappedSongSearchQuery.OriginalAlbum, Mode=OneWay}">
                                <StackPanel Orientation="Horizontal" Spacing="6">
                                    <TextBlock x:Uid="LyricsSearchControlMappedAs" VerticalAlignment="Center" />
                                    <TextBox Text="{x:Bind ViewModel.MappedSongSearchQuery.MappedAlbum, Mode=TwoWay}" TextWrapping="Wrap" />
                                    <Button
                                        VerticalAlignment="Center"
                                        Command="{x:Bind ViewModel.ResetMappedAlbumCommand}"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE777;}"
                                        Style="{StaticResource GhostButtonStyle}" />
                                </StackPanel>
                            </controls:SettingsCard>
                            <controls:SettingsCard>
                                <CheckBox x:Uid="LyricsSearchControlMarkAsPureMusic" IsChecked="{x:Bind ViewModel.MappedSongSearchQuery.IsMarkedAsPureMusic, Mode=TwoWay}" />
                            </controls:SettingsCard>
                        </controls:SettingsExpander.Items>
                    </controls:SettingsExpander>

                    <controls:SettingsCard x:Uid="LyricsSearchControlTargetSearchProvider">
                        <Button
                            x:Uid="LyricsSearchControlSearch"
                            Command="{x:Bind ViewModel.SearchCommand}"
                            Style="{StaticResource AccentButtonStyle}" />
                    </controls:SettingsCard>

                </StackPanel>
            </Grid>
            <Grid Grid.Column="1">
                <ListView ItemsSource="{x:Bind ViewModel.LyricsSearchResults, Mode=OneWay}" SelectedItem="{x:Bind ViewModel.SelectedLyricsSearchResult, Mode=TwoWay}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ListViewItem IsEnabled="{Binding IsFound}">
                                <Grid Opacity="{Binding IsFound, Converter={StaticResource BoolToOpacityConverter}}">
                                    <RelativePanel Padding="0,6">
                                        <TextBlock
                                            x:Name="SearchedTitle"
                                            RelativePanel.AlignLeftWithPanel="True"
                                            Text="{Binding Title}"
                                            TextWrapping="Wrap"
                                            Visibility="{Binding IsFound, Converter={StaticResource BoolToVisibilityConverter}}" />
                                        <TextBlock
                                            x:Name="SearchedArtists"
                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                            RelativePanel.AlignLeftWithPanel="True"
                                            RelativePanel.Below="SearchedTitle"
                                            Text="{Binding Artist}"
                                            TextWrapping="Wrap"
                                            Visibility="{Binding IsFound, Converter={StaticResource BoolToVisibilityConverter}}" />
                                        <TextBlock
                                            x:Name="SearchedAlbum"
                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                            RelativePanel.Below="SearchedArtists"
                                            Text="{Binding Album}"
                                            TextWrapping="Wrap"
                                            Visibility="{Binding IsFound, Converter={StaticResource BoolToVisibilityConverter}}" />
                                        <TextBlock
                                            x:Name="SearchedProvider"
                                            RelativePanel.AlignRightWithPanel="True"
                                            RelativePanel.AlignVerticalCenterWithPanel="True"
                                            Text="{Binding Provider, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}}" />
                                    </RelativePanel>
                                    <TextBlock
                                        x:Uid="LyricsSearchControlNotFound"
                                        VerticalAlignment="Center"
                                        Text="Not found"
                                        Visibility="{Binding IsFound, Converter={StaticResource BoolNegationToVisibilityConverter}}" />
                                </Grid>
                            </ListViewItem>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <interactivity:Interaction.Behaviors>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsSearchResults.Count, Mode=OneWay}"
                            ComparisonCondition="Equal"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                        </interactivity:DataTriggerBehavior>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsSearchResults.Count, Mode=OneWay}"
                            ComparisonCondition="NotEqual"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                        </interactivity:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </ListView>
                <StackPanel
                    Padding="0,36"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Spacing="12">
                    <Image MaxWidth="100" Source="/Assets/Empty.png" />
                    <interactivity:Interaction.Behaviors>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsSearchResults.Count, Mode=OneWay}"
                            ComparisonCondition="NotEqual"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                        </interactivity:DataTriggerBehavior>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsSearchResults.Count, Mode=OneWay}"
                            ComparisonCondition="Equal"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                        </interactivity:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </StackPanel>
                <ProgressBar
                    VerticalAlignment="Top"
                    IsIndeterminate="True"
                    ShowError="False"
                    ShowPaused="False"
                    Visibility="{x:Bind ViewModel.IsSearching, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
            </Grid>
            <Grid Grid.Column="2">
                <Pivot ItemsSource="{x:Bind ViewModel.LyricsDataArr, Mode=OneWay}">
                    <interactivity:Interaction.Behaviors>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsDataArr, Mode=OneWay}"
                            ComparisonCondition="Equal"
                            Value="{x:Null}">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                        </interactivity:DataTriggerBehavior>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsDataArr, Mode=OneWay}"
                            ComparisonCondition="NotEqual"
                            Value="{x:Null}">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                        </interactivity:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                    <Pivot.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{Binding LanguageCode, Mode=OneWay, Converter={StaticResource LanguageCodeToDisplayedNameConverter}}" />
                        </DataTemplate>
                    </Pivot.HeaderTemplate>
                    <Pivot.ItemTemplate>
                        <DataTemplate>
                            <ListView ItemsSource="{Binding LyricsLines, Mode=OneWay}" SelectionChanged="ListView_SelectionChanged">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Foreground="{ThemeResource SystemFillColorNeutralBrush}" Text="{Binding StartMs, Converter={StaticResource MillisecondsToFormattedTimeConverter}}" />
                                            <TextBlock
                                                Margin="1,0"
                                                Foreground="{ThemeResource SystemFillColorNeutralBrush}"
                                                Text="-" />
                                            <TextBlock Foreground="{ThemeResource SystemFillColorNeutralBrush}" Text="{Binding EndMs, Converter={StaticResource MillisecondsToFormattedTimeConverter}}" />
                                            <TextBlock Margin="6,0" Text="{Binding OriginalText}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </DataTemplate>
                    </Pivot.ItemTemplate>
                </Pivot>
                <StackPanel
                    Padding="0,36"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Spacing="12">
                    <Image MaxWidth="100" Source="/Assets/Page.png" />
                    <interactivity:Interaction.Behaviors>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsDataArr, Mode=OneWay}"
                            ComparisonCondition="NotEqual"
                            Value="{x:Null}">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                        </interactivity:DataTriggerBehavior>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.LyricsDataArr, Mode=OneWay}"
                            ComparisonCondition="Equal"
                            Value="{x:Null}">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                        </interactivity:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </StackPanel>
            </Grid>
        </Grid>
        <Grid Grid.Row="1">
            <RelativePanel>
                <TextBlock
                    x:Uid="LyricsSearchControlHelp"
                    Margin="0,0,24,0"
                    FontSize="12"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    RelativePanel.AlignVerticalCenterWithPanel="True"
                    RelativePanel.LeftOf="Reset"
                    TextWrapping="Wrap" />
                <Button
                    x:Name="Reset"
                    x:Uid="LyricsSearchControlReset"
                    Margin="0,0,6,0"
                    Command="{x:Bind ViewModel.ResetCommand}"
                    RelativePanel.AlignVerticalCenterWithPanel="True"
                    RelativePanel.LeftOf="SaveChanges" />
                <Button
                    x:Name="SaveChanges"
                    x:Uid="LyricsSearchControlSaveChanges"
                    Command="{x:Bind ViewModel.SaveCommand}"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.AlignVerticalCenterWithPanel="True"
                    Style="{StaticResource AccentButtonStyle}" />
            </RelativePanel>
        </Grid>
    </Grid>
</UserControl>