BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/PlaybackSettingsControl.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="BetterLyrics.WinUI3.Controls.PlaybackSettingsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:constants="using:BetterLyrics.WinUI3.Constants"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:dev="using:DevWinUI"
    xmlns:globalization="using:Windows.Globalization"
    xmlns:helper="using:BetterLyrics.WinUI3.Helper"
    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 ColumnSpacing="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0">
            <ScrollViewer Margin="0,72,0,0" Style="{StaticResource SettingsScrollViewerStyle}">
                <Grid Style="{StaticResource SettingsGridStyle}">
                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                        <dev:SettingsCard x:Uid="SettingsPageMediaSourceProvidersConfig">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <dev:SettingsCard x:Uid="SettingsPageLastFMTrack" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsLastFMTrackEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  时间轴相关配置  -->
                        <dev:SettingsExpander x:Uid="SettingsPageLyricsTimeline" IsExpanded="True">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.IsTimelineSyncEnabled, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="SettingsPageLyricsTimelineThreshold" IsEnabled="{x:Bind ViewModel.SelectedMediaSourceProvider.IsTimelineSyncEnabled, Mode=OneWay}">
                                    <local:ExtendedSlider
                                        Frequency="100"
                                        Maximum="1000"
                                        Minimum="0"
                                        ResetButtonVisibility="Collapsed"
                                        Unit="ms"
                                        Value="{x:Bind ViewModel.SelectedMediaSourceProvider.TimelineSyncThreshold, Mode=TwoWay}" />
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>
                        <dev:SettingsExpander x:Uid="MainPagePositionOffsetSlider" IsExpanded="True">
                            <local:ExtendedSlider
                                x:Uid="SettingsPagePositionOffsetReset"
                                Default="0"
                                Frequency="100"
                                Maximum="5000"
                                Minimum="-5000"
                                Unit="ms"
                                Value="{x:Bind ViewModel.SelectedMediaSourceProvider.PositionOffset, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="LyricsPagePositionOffsetHint">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.SelectedMediaSourceProvider.ResetPositionOffsetOnSongChanged, Mode=TwoWay}" />
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>

                        <!--  专辑封面源配置  -->
                        <TextBlock x:Uid="SettingsPageAlbumArtSearchProvidersConfig" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <ListView
                            x:Name="AlbumArtSearchProvidersListView"
                            AllowDrop="True"
                            CanDragItems="True"
                            CanReorderItems="True"
                            DragItemsCompleted="AlbumArtSearchProvidersListView_DragItemsCompleted"
                            ItemContainerStyle="{StaticResource ListViewStretchedItemContainerStyle}"
                            ItemsSource="{x:Bind ViewModel.SelectedMediaSourceProvider.AlbumArtSearchProvidersInfo, Mode=OneWay}"
                            SelectionMode="None">
                            <ListView.OpacityTransition>
                                <ScalarTransition />
                            </ListView.OpacityTransition>
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="models:AlbumArtSearchProviderInfo">
                                    <dev:SettingsCard Header="{Binding Provider, Converter={StaticResource AlbumArtSearchProviderToDisplayNameConverter}, Mode=OneWay}">
                                        <dev:SettingsCard.HeaderIcon>
                                            <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x283F;" />
                                        </dev:SettingsCard.HeaderIcon>
                                        <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" />
                                    </dev:SettingsCard>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                        <!--  歌词源配置  -->
                        <TextBlock x:Uid="SettingsPageLyricsSearchProvidersConfig" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <ListView
                            x:Name="LyricsSearchProvidersListView"
                            AllowDrop="True"
                            CanDragItems="True"
                            CanReorderItems="True"
                            DragItemsCompleted="LyricsSearchProvidersListView_DragItemsCompleted"
                            ItemsSource="{x:Bind ViewModel.SelectedMediaSourceProvider.LyricsSearchProvidersInfo, Mode=OneWay}"
                            SelectionMode="None">
                            <ListView.OpacityTransition>
                                <ScalarTransition />
                            </ListView.OpacityTransition>
                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                    <Setter Property="Margin" Value="0" />
                                    <Setter Property="Padding" Value="0" />
                                </Style>
                            </ListView.ItemContainerStyle>
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="models:LyricsSearchProviderInfo">
                                    <dev:SettingsCard Header="{Binding Provider, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}, Mode=OneWay}">
                                        <dev:SettingsCard.HeaderIcon>
                                            <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x283F;" />
                                        </dev:SettingsCard.HeaderIcon>
                                        <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" />
                                    </dev:SettingsCard>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                    </StackPanel>
                </Grid>
            </ScrollViewer>

            <!--  播放源列表  -->
            <ListView
                x:Name="MediaSourceProvidersListView"
                VerticalAlignment="Top"
                AllowDrop="True"
                CanDragItems="True"
                CanReorderItems="True"
                DragItemsCompleted="MediaSourceProvidersListView_DragItemsCompleted"
                ItemsSource="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo, Mode=OneWay}"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                ScrollViewer.HorizontalScrollMode="Enabled"
                ScrollViewer.VerticalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollMode="Disabled"
                SelectedItem="{x:Bind ViewModel.SelectedMediaSourceProvider, Mode=TwoWay}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="models:MediaSourceProviderInfo">
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <FontIcon
                                FontFamily="Segoe UI Symbol"
                                FontSize="12"
                                Glyph="&#x283F;" />
                            <ImageIcon Height="16" Source="{Binding Provider, Converter={StaticResource MediaSourceProviderToLogoUriConverter}, Mode=OneWay}" />
                            <TextBlock
                                MaxWidth="200"
                                Text="{Binding Provider, Converter={StaticResource MediaSourceProviderToDisplayedNameConverter}, Mode=OneWay}"
                                TextWrapping="Wrap" />
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <interactivity:Interaction.Behaviors>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="NotEqual"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                </interactivity:DataTriggerBehavior>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="Equal"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                </interactivity:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>
        </Grid>

        <StackPanel
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Spacing="12">
            <interactivity:Interaction.Behaviors>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="Equal"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                </interactivity:DataTriggerBehavior>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.AppSettings.MediaSourceProvidersInfo.Count, Mode=OneWay}"
                    ComparisonCondition="NotEqual"
                    Value="0">
                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                </interactivity:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <Image MaxWidth="200" Source="/Assets/Leaf.png" />
            <TextBlock
                x:Uid="SettingsPagePlaybackNotFound"
                HorizontalAlignment="Center"
                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
        </StackPanel>
        <Grid Grid.Column="1">
            <ScrollViewer Style="{StaticResource SettingsScrollViewerStyle}">
                <Grid Style="{StaticResource SettingsGridStyle}">
                    <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                        <!--  Provider info  -->
                        <TextBlock x:Uid="SettingsPageRealtimeStatus" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsCard x:Uid="LyricsPageLyricsProviderPrefix">
                            <HyperlinkButton
                                Content="{x:Bind ViewModel.LyricsSearchProvider, Mode=OneWay, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}}"
                                IsEnabled="False"
                                NavigateUri="{x:Bind ViewModel.OriginalLyricsRef, Mode=OneWay}" />
                        </dev:SettingsCard>
                        <dev:SettingsCard x:Uid="LyricsPageTranslationProviderPrefix">
                            <HyperlinkButton
                                Content="{x:Bind ViewModel.TranslationSearchProvider, Mode=OneWay, Converter={StaticResource TranslationSearchProviderToDisplayNameConverter}}"
                                IsEnabled="False"
                                NavigateUri="{x:Bind ViewModel.TranslatedLyricsRef, Mode=OneWay}" />
                        </dev:SettingsCard>

                        <!--  Lyrics translation  -->
                        <TextBlock x:Uid="SettingsPageTranslation" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsExpander x:Uid="LyricsPageTranslationEnabled" IsExpanded="True">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTranslationEnabled, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="SettingsPageTargetLanguage" IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTranslationEnabled, Mode=OneWay}">
                                    <ComboBox ItemsSource="{x:Bind helper:LanguageHelper.SupportedTranslationTargetLanguages}" SelectedIndex="{x:Bind ViewModel.SelectedTargetLanguageIndex, Mode=TwoWay}">
                                        <ComboBox.ItemTemplate>
                                            <DataTemplate x:DataType="models:ExtendedLanguage">
                                                <StackPanel Orientation="Horizontal" Spacing="6">
                                                    <TextBlock Text="{x:Bind Name}" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </ComboBox.ItemTemplate>
                                    </ComboBox>
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageTranslationConfig" IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTranslationEnabled, Mode=OneWay}">
                                    <dev:SettingsCard.Description>
                                        <HyperlinkButton Margin="0,6,0,0" NavigateUri="https://github.com/LibreTranslate/LibreTranslate">
                                            <TextBlock
                                                x:Uid="SettingsPageTranslationInfoLink"
                                                FontSize="14"
                                                TextWrapping="Wrap" />
                                        </HyperlinkButton>
                                    </dev:SettingsCard.Description>
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsLibreTranslateEnabled, Mode=TwoWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageLibreTranslateServer" IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsLibreTranslateEnabled, Mode=OneWay}">
                                    <StackPanel Orientation="Horizontal" Spacing="12">
                                        <TextBox
                                            x:Uid="LibreTranslateServerTextBox"
                                            IsEnabled="{x:Bind ViewModel.IsLibreTranslateServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
                                            Text="{x:Bind ViewModel.AppSettings.TranslationSettings.LibreTranslateServer, Mode=TwoWay}" />
                                        <Button
                                            x:Uid="SettingsPageServerTestButton"
                                            Command="{x:Bind ViewModel.LibreTranslateServerTestCommand}"
                                            IsEnabled="{x:Bind ViewModel.IsLibreTranslateServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" />
                                    </StackPanel>
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>

                        <!--  Lyrics phonetic  -->
                        <TextBlock x:Uid="SettingsPagePhonetic" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsExpander x:Uid="SettingsPageChinese" IsExpanded="{x:Bind ViewModel.AppSettings.TranslationSettings.IsChineseRomanizationEnabled, Mode=OneWay}">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsChineseRomanizationEnabled, Mode=TwoWay}" />
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard IsEnabled="{x:Bind ViewModel.AppSettings.TranslationSettings.IsChineseRomanizationEnabled, Mode=OneWay}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.AppSettings.TranslationSettings.ChineseRomanization, Converter={StaticResource EnumToIntConverter}, Mode=TwoWay}">
                                        <ComboBoxItem x:Uid="SettingsPagePinyin" />
                                        <ComboBoxItem x:Uid="SettingsPageJyutping" />
                                    </ComboBox>
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>
                        <dev:SettingsCard x:Uid="SettingsPageJapanese">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsJapaneseRomanizationEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  中文简体繁体偏好  -->
                        <TextBlock x:Uid="SettingsPageChineseLyrics" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsCard x:Uid="SettingsPageChinesePreference">
                            <ToggleSwitch IsOn="{x:Bind ViewModel.AppSettings.TranslationSettings.IsTraditionalChineseEnabled, Mode=TwoWay}" />
                        </dev:SettingsCard>

                        <!--  Last.fm  -->
                        <TextBlock x:Uid="SettingsPageLastFM" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsExpander
                            x:Uid="SettingsPageLastFMManager"
                            HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/LastFM.png}"
                            IsExpanded="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                            <StackPanel Orientation="Horizontal" Spacing="6">
                                <Button
                                    x:Uid="SettingsPageLastFMAuth"
                                    Command="{x:Bind ViewModel.LastFMAuthCommand}"
                                    IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" />
                                <Button
                                    x:Uid="SettingsPageLastFMUnAuth"
                                    Command="{x:Bind ViewModel.LastFMUnAuthCommand}"
                                    IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}" />
                            </StackPanel>
                            <dev:SettingsExpander.Items>
                                <dev:SettingsCard x:Uid="SettingsPageLastFMUsername" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <HyperlinkButton Content="{x:Bind ViewModel.LastFMUser.Name, Mode=OneWay}" NavigateUri="{x:Bind ViewModel.LastFMUser.Url, Mode=OneWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageLastFMPlaycount" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <TextBlock Text="{x:Bind ViewModel.LastFMUser.Playcount, Mode=OneWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard x:Uid="SettingsPageLastFMRegistered" IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <TextBlock Text="{x:Bind ViewModel.LastFMUser.Registered.ToLongDateString(), Mode=OneWay}" />
                                </dev:SettingsCard>
                                <dev:SettingsCard IsEnabled="{x:Bind ViewModel.IsLastFMAuthenticated, Mode=OneWay}">
                                    <Button x:Uid="SettingsPageLastFMRefresh" Command="{x:Bind ViewModel.LastFMRefreshCommand}" />
                                </dev:SettingsCard>
                            </dev:SettingsExpander.Items>
                        </dev:SettingsExpander>

                        <!--  LX music server  -->
                        <TextBlock x:Uid="SettingsPageLXMusicServer" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
                        <dev:SettingsCard x:Uid="SettingsPageServerAddress">
                            <StackPanel Orientation="Horizontal" Spacing="6">
                                <TextBox
                                    x:Uid="SettingsPageLXMusicServerInput"
                                    IsEnabled="{x:Bind ViewModel.IsLXMusicServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
                                    Text="{x:Bind ViewModel.AppSettings.GeneralSettings.LXMusicServer, Mode=TwoWay}" />
                                <Button
                                    x:Uid="SettingsPageServerTestButton"
                                    Command="{x:Bind ViewModel.LXMusicServerTestCommand}"
                                    IsEnabled="{x:Bind ViewModel.IsLXMusicServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" />
                            </StackPanel>
                        </dev:SettingsCard>

                        <!--  Apple Music token  -->
                        <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="Apple Muisc media-user-token" />
                        <dev:SettingsCard
                            Background="{ThemeResource SystemFillColorCautionBackgroundBrush}"
                            Description="Use at your own risk"
                            Foreground="{ThemeResource SystemFillColorCautionBrush}"
                            Header="WARNING">
                            <StackPanel Orientation="Horizontal" Spacing="6">
                                <TextBox
                                    MaxWidth="250"
                                    PlaceholderText="media-user-token"
                                    Text="{x:Bind ViewModel.AppleMusicMediaUserToken, Mode=TwoWay}"
                                    TextWrapping="Wrap" />
                                <HyperlinkButton Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, FontSize=12, Glyph=&#xE897;}" NavigateUri="{x:Bind constants:Link.AppleMusicCfgUrl}" />
                                <Button
                                    Command="{x:Bind ViewModel.SaveAppleMusicMediaUserTokenCommand}"
                                    Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                          FontSize=12,
                                                          Glyph=&#xE8FB;}"
                                    Style="{StaticResource GhostButtonStyle}" />
                            </StackPanel>
                        </dev:SettingsCard>

                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </Grid>
    </Grid>

</UserControl>