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:dev="using:DevWinUI"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:BetterLyrics.WinUI3.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:BetterLyrics.WinUI3.Models"
    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">
                <ScrollViewer>
                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                        <TextBlock x:Uid="LyricsSearchControlSongInfoMapping" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                        <Grid
                            Padding="16"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                            CornerRadius="4">
                            <StackPanel Spacing="6">

                                <local:PropertyRow x:Uid="LyricsSearchControlTitle" Value="{x:Bind ViewModel.MappedSongSearchQuery.OriginalTitle, Mode=OneWay}" />

                                <Grid ColumnSpacing="6">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock
                                        x:Uid="LyricsSearchControlMappedAs"
                                        Grid.Column="0"
                                        VerticalAlignment="Center" />
                                    <TextBox
                                        Grid.Column="1"
                                        Text="{x:Bind ViewModel.MappedSongSearchQuery.MappedTitle, Mode=TwoWay}"
                                        TextWrapping="Wrap" />
                                    <Button
                                        Grid.Column="2"
                                        VerticalAlignment="Center"
                                        Command="{x:Bind ViewModel.ResetMappedTitleCommand}"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE777;}"
                                        Style="{StaticResource GhostButtonStyle}" />
                                </Grid>

                            </StackPanel>
                        </Grid>

                        <Grid
                            Padding="16"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                            CornerRadius="4">
                            <StackPanel Spacing="6">

                                <local:PropertyRow x:Uid="LyricsSearchControlArtist" Value="{x:Bind ViewModel.MappedSongSearchQuery.OriginalArtist, Mode=OneWay}" />

                                <Grid ColumnSpacing="6">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock
                                        x:Uid="LyricsSearchControlMappedAs"
                                        Grid.Column="0"
                                        VerticalAlignment="Center" />
                                    <TextBox
                                        Grid.Column="1"
                                        Text="{x:Bind ViewModel.MappedSongSearchQuery.MappedArtist, Mode=TwoWay}"
                                        TextWrapping="Wrap" />
                                    <Button
                                        Grid.Column="2"
                                        VerticalAlignment="Center"
                                        Command="{x:Bind ViewModel.ResetMappedArtistCommand}"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE777;}"
                                        Style="{StaticResource GhostButtonStyle}" />
                                </Grid>

                                <RichTextBlock
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    TextWrapping="Wrap">
                                    <Paragraph>
                                        <Run Text="*" />
                                        <Run x:Uid="ArtistsSplitHint" />
                                    </Paragraph>
                                </RichTextBlock>

                                <RichTextBlock
                                    FontSize="12"
                                    FontWeight="Bold"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Loaded="ArtistsSplitHintRichTextBlock_Loaded"
                                    TextWrapping="Wrap">
                                    <Paragraph>
                                        <Run Text=";    ,    /    ；    、    ，" />
                                    </Paragraph>
                                </RichTextBlock>

                            </StackPanel>
                        </Grid>

                        <Grid
                            Padding="16"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                            CornerRadius="4">
                            <StackPanel Spacing="6">

                                <local:PropertyRow x:Uid="LyricsSearchControlAlbum" Value="{x:Bind ViewModel.MappedSongSearchQuery.OriginalAlbum, Mode=OneWay}" />

                                <Grid ColumnSpacing="6">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <TextBlock
                                        x:Uid="LyricsSearchControlMappedAs"
                                        Grid.Column="0"
                                        VerticalAlignment="Center" />
                                    <TextBox
                                        Grid.Column="1"
                                        Text="{x:Bind ViewModel.MappedSongSearchQuery.MappedAlbum, Mode=TwoWay}"
                                        TextWrapping="Wrap" />
                                    <Button
                                        Grid.Column="2"
                                        VerticalAlignment="Center"
                                        Command="{x:Bind ViewModel.ResetMappedAlbumCommand}"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE777;}"
                                        Style="{StaticResource GhostButtonStyle}" />
                                </Grid>

                            </StackPanel>
                        </Grid>

                        <dev:SettingsCard>
                            <CheckBox x:Uid="LyricsSearchControlMarkAsPureMusic" IsChecked="{x:Bind ViewModel.MappedSongSearchQuery.IsMarkedAsPureMusic, Mode=TwoWay}" />
                        </dev:SettingsCard>

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

                    </StackPanel>
                </ScrollViewer>
            </Grid>
            <Grid Grid.Column="1">
                <ListView ItemsSource="{x:Bind ViewModel.LyricsSearchResults, Mode=OneWay}" SelectedItem="{x:Bind ViewModel.SelectedLyricsSearchResult, Mode=TwoWay}">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="models:LyricsSearchResult">
                            <ListViewItem IsEnabled="{x:Bind IsFound}">
                                <StackPanel Padding="0,6" Opacity="{x:Bind IsFound, Converter={StaticResource BoolToPartialOpacityConverter}}">
                                    <local:PropertyRow
                                        Margin="-8,0,0,0"
                                        Link="{x:Bind Reference, Mode=OneWay}"
                                        ToolTipService.ToolTip="{x:Bind Reference, TargetNullValue=N/A, Mode=OneWay}"
                                        Value="{x:Bind Provider, Mode=OneWay, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}}" />
                                    <!--  Lyrics search result  -->
                                    <StackPanel Visibility="{x:Bind IsFound, Converter={StaticResource BoolToVisibilityConverter}}">
                                        <local:PropertyRow x:Uid="SettingsPageSongTitle" Value="{x:Bind Title, TargetNullValue=N/A, Mode=OneWay}" />
                                        <local:PropertyRow x:Uid="SettingsPageArtist" Value="{x:Bind DisplayArtists, TargetNullValue=N/A, Mode=OneWay}" />
                                        <local:PropertyRow x:Uid="SettingsPageAlbum" Value="{x:Bind Album, TargetNullValue=N/A, Mode=OneWay}" />
                                        <local:PropertyRow
                                            x:Uid="LyricsSearchControlDurauion"
                                            Unit="s"
                                            Value="{x:Bind Duration, TargetNullValue=N/A, Mode=OneWay}" />
                                        <local:PropertyRow
                                            x:Uid="LyricsPageMatchPercentage"
                                            Unit="%"
                                            Value="{x:Bind MatchPercentage, Mode=OneWay}" />
                                        <local:PropertyRow
                                            x:Uid="LyricsPageCachePath"
                                            Link="{x:Bind SelfPath, TargetNullValue=N/A, Mode=OneWay}"
                                            ToolTipService.ToolTip="{x:Bind SelfPath, TargetNullValue=N/A, Mode=OneWay}" />
                                    </StackPanel>
                                    <!--  NOT FOUND  -->
                                    <TextBlock
                                        x:Uid="LyricsSearchControlNotFound"
                                        VerticalAlignment="Center"
                                        Visibility="{x:Bind IsFound, Converter={StaticResource BoolNegationToVisibilityConverter}}" />
                                </StackPanel>
                            </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 x:DataType="models:LyricsData">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{x:Bind LanguageCode, Mode=OneWay, Converter={StaticResource LanguageCodeToDisplayedNameConverter}}" />
                                <InfoBadge
                                    x:Uid="LyricsSearchControlAutoGenerated"
                                    Margin="6,0,0,0"
                                    Style="{StaticResource StringInfoBadgeStyle}"
                                    Visibility="{x:Bind AutoGenerated, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
                            </StackPanel>
                        </DataTemplate>
                    </Pivot.HeaderTemplate>
                    <Pivot.ItemTemplate>
                        <DataTemplate x:DataType="models:LyricsData">
                            <ListView ItemsSource="{x:Bind LyricsLines, Mode=OneWay}" SelectionChanged="ListView_SelectionChanged">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="models:LyricsLine">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Foreground="{ThemeResource SystemFillColorNeutralBrush}" Text="{x:Bind StartMs, Mode=OneWay, Converter={StaticResource MillisecondsToFormattedTimeConverter}}" />
                                            <TextBlock
                                                Margin="1,0"
                                                Foreground="{ThemeResource SystemFillColorNeutralBrush}"
                                                Text="-" />
                                            <TextBlock Foreground="{ThemeResource SystemFillColorNeutralBrush}" Text="{x:Bind EndMs, Mode=OneWay, Converter={StaticResource MillisecondsToFormattedTimeConverter}}" />
                                            <TextBlock Margin="6,0" Text="{x:Bind OriginalText, Mode=OneWay}" />
                                        </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" ColumnSpacing="6">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock
                x:Uid="LyricsSearchControlHelp"
                Grid.Column="1"
                VerticalAlignment="Center"
                FontSize="12"
                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                TextWrapping="Wrap" />
            <Button
                x:Uid="LyricsSearchControlReset"
                Grid.Column="2"
                Command="{x:Bind ViewModel.ResetCommand}" />
            <Button
                x:Uid="LyricsSearchControlSaveChanges"
                Grid.Column="3"
                Command="{x:Bind ViewModel.SaveCommand}"
                Style="{StaticResource AccentButtonStyle}" />
        </Grid>
    </Grid>
</UserControl>