BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="BetterLyrics.WinUI3.Views.LyricsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:labs="using:CommunityToolkit.Labs.WinUI.MarqueeTextRns"
    xmlns:local="using:BetterLyrics.WinUI3.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:media="using:CommunityToolkit.WinUI.Media"
    xmlns:renderer="using:BetterLyrics.WinUI3.Renderer"
    xmlns:uc="using:BetterLyrics.WinUI3.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

    <Grid x:Name="RootGrid" SizeChanged="RootGrid_SizeChanged">
        <!--  Lyrics area  -->
        <renderer:LyricsRenderer />
        <!--<Image Source="/Assets/Cover.jpg" />-->

        <!--  No music playing placeholder  -->
        <Grid x:Name="NoMusicPlayingGrid" Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}">
            <TextBlock
                x:Uid="MainPageNoMusicPlaying"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontFamily="{x:Bind ViewModel.LiveStates.LyricsStyleSettings.LyricsFontFamily, Mode=OneWay}"
                FontSize="{x:Bind ViewModel.LiveStates.LyricsStyleSettings.LyricsFontSize, Mode=OneWay}" />
            <Grid.OpacityTransition>
                <ScalarTransition />
            </Grid.OpacityTransition>
            <interactivity:Interaction.Behaviors>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.SongInfo, Mode=OneWay}"
                    ComparisonCondition="Equal"
                    Value="{x:Null}">
                    <interactivity:ChangePropertyAction PropertyName="Opacity" Value="1" />
                </interactivity:DataTriggerBehavior>
                <interactivity:DataTriggerBehavior
                    Binding="{x:Bind ViewModel.SongInfo, Mode=OneWay}"
                    ComparisonCondition="NotEqual"
                    Value="{x:Null}">
                    <interactivity:ChangePropertyAction PropertyName="Opacity" Value="0" />
                </interactivity:DataTriggerBehavior>
            </interactivity:Interaction.Behaviors>
        </Grid>

        <!--  Bottom command area  -->
        <Grid
            x:Name="BottomCommandGrid"
            Margin="12"
            VerticalAlignment="Bottom"
            Background="Transparent"
            Opacity="{x:Bind ViewModel.BottomCommandGridOpacity, Mode=OneWay}"
            PointerEntered="BottomCommandGrid_PointerEntered"
            PointerExited="BottomCommandGrid_PointerExited">
            <Grid.OpacityTransition>
                <ScalarTransition />
            </Grid.OpacityTransition>

            <Grid x:Name="BottomCommandContent">
                <Grid Padding="3" HorizontalAlignment="Left">
                    <StackPanel
                        x:Name="BottomLeftCommandStackPanel"
                        Orientation="Horizontal"
                        Spacing="3">

                        <StackPanel
                            Margin="0,0,0,2"
                            VerticalAlignment="Center"
                            Orientation="Horizontal"
                            Spacing="2">
                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{Binding ElementName=TimelineSlider, Path=Value, Converter={StaticResource SecondsToFormattedTimeConverter}}" />
                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="/" />
                            <TextBlock Text="{Binding ElementName=TimelineSlider, Path=Maximum, Converter={StaticResource SecondsToFormattedTimeConverter}}" />
                        </StackPanel>

                    </StackPanel>
                </Grid>

                <Grid Padding="3" HorizontalAlignment="Center">
                    <StackPanel
                        x:Name="BottomCenterCommandStackPanel"
                        Orientation="Horizontal"
                        Spacing="3">
                        <Button
                            Command="{x:Bind ViewModel.PreviousSongCommand}"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xE622;}"
                            Style="{StaticResource GhostButtonStyle}" />
                        <Button
                            Command="{x:Bind ViewModel.PauseSongCommand}"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xF8AE;}"
                            Style="{StaticResource GhostButtonStyle}">
                            <interactivity:Interaction.Behaviors>
                                <interactivity:DataTriggerBehavior
                                    Binding="{x:Bind ViewModel.IsSongPlaying, Mode=OneWay}"
                                    ComparisonCondition="Equal"
                                    Value="True">
                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                </interactivity:DataTriggerBehavior>
                                <interactivity:DataTriggerBehavior
                                    Binding="{x:Bind ViewModel.IsSongPlaying, Mode=OneWay}"
                                    ComparisonCondition="Equal"
                                    Value="False">
                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                </interactivity:DataTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Button>
                        <Button
                            Command="{x:Bind ViewModel.PlaySongCommand}"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xF5B0;}"
                            Style="{StaticResource GhostButtonStyle}">
                            <interactivity:Interaction.Behaviors>
                                <interactivity:DataTriggerBehavior
                                    Binding="{x:Bind ViewModel.IsSongPlaying, Mode=OneWay}"
                                    ComparisonCondition="Equal"
                                    Value="True">
                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                </interactivity:DataTriggerBehavior>
                                <interactivity:DataTriggerBehavior
                                    Binding="{x:Bind ViewModel.IsSongPlaying, Mode=OneWay}"
                                    ComparisonCondition="Equal"
                                    Value="False">
                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                </interactivity:DataTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Button>
                        <Button
                            Command="{x:Bind ViewModel.NextSongCommand}"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xE623;}"
                            Style="{StaticResource GhostButtonStyle}" />
                    </StackPanel>
                </Grid>

                <Grid Padding="3" HorizontalAlignment="Right">
                    <StackPanel
                        x:Name="BottomRightCommandStackPanel"
                        Orientation="Horizontal"
                        Spacing="3">

                        <!--  Volume  -->
                        <!--<Button Click="VolumeButton_Click" Style="{StaticResource GhostButtonStyle}">
                            <Grid>

                        -->
                        <!--  Volumn: 0  -->
                        <!--
                                <FontIcon
                                    x:Name="VolumeLevel0"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    Glyph="&#xE74F;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>

                        -->
                        <!--  Volumn: 1-32  -->
                        <!--
                                <FontIcon
                                    x:Name="VolumeLevel1"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    Glyph="&#xE993;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>

                        -->
                        <!--  Volumn: 33-65  -->
                        <!--
                                <FontIcon
                                    x:Name="VolumeLevel2"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    Glyph="&#xE994;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>

                        -->
                        <!--  Volumn: 66-100  -->
                        <!--
                                <FontIcon
                                    x:Name="VolumeLevel3"
                                    FontFamily="{StaticResource IconFontFamily}"
                                    Glyph="&#xE995;">
                                    <FontIcon.OpacityTransition>
                                        <ScalarTransition />
                                    </FontIcon.OpacityTransition>
                                </FontIcon>
                            </Grid>
                            <Button.ContextFlyout>
                                <Flyout x:Name="VolumeFlyout" ShouldConstrainToRootBounds="False">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.Volume, Mode=OneWay}" />
                                        <TextBlock Margin="0,0,14,0" VerticalAlignment="Center" />
                                        <Slider
                                            Width="150"
                                            Maximum="100"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="None"
                                            Value="{x:Bind ViewModel.Volume, Mode=TwoWay}" />
                                    </StackPanel>
                                </Flyout>
                            </Button.DataContext>
                        </Button>-->

                        <Button
                            Click="LyricsSettingsShortcutButton_Click"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xEDC6;}"
                            Style="{StaticResource GhostButtonStyle}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="LyricsPageLyricsSettingsButtonToolTip" />
                            </ToolTipService.ToolTip>
                            <Button.ContextFlyout>
                                <Flyout
                                    x:Name="LyricsSettingsFlyout"
                                    Closed="LyricsSettingsFlyout_Closed"
                                    FlyoutPresenterStyle="{StaticResource FlyoutPageStyle}"
                                    Placement="Right"
                                    ShouldConstrainToRootBounds="False" />
                            </Button.ContextFlyout>
                        </Button>

                        <Button
                            Click="LyricsSearchShortcutButton_Click"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xE721;}"
                            Style="{StaticResource GhostButtonStyle}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="LyricsPageLyricsSearchButtonToolTip" />
                            </ToolTipService.ToolTip>
                        </Button>

                        <!--  Playback shortcut settings  -->
                        <Button
                            Click="PlaybackSettingsShortcutButton_Click"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xEA69;}"
                            Style="{StaticResource GhostButtonStyle}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="LyricsPagePlaybackSourceButtonToolTip" />
                            </ToolTipService.ToolTip>
                            <Button.ContextFlyout>
                                <Flyout
                                    x:Name="PlaybackSettingsFlyout"
                                    Closed="PlaybackSettingsFlyout_Closed"
                                    FlyoutPresenterStyle="{StaticResource FlyoutPageStyle}"
                                    Placement="Right"
                                    ShouldConstrainToRootBounds="False" />
                            </Button.ContextFlyout>
                        </Button>

                        <!--  Settings  -->
                        <Button
                            x:Name="SettingsButton"
                            Command="{x:Bind ViewModel.OpenSettingsWindowCommand}"
                            Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                  Glyph=&#xF8B0;}"
                            Style="{StaticResource GhostButtonStyle}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Name="SettingsToolTip" x:Uid="LyricsPageSettingsButtonToolTip" />
                            </ToolTipService.ToolTip>
                        </Button>

                    </StackPanel>
                </Grid>

                <Slider
                    x:Name="TimelineSlider"
                    Margin="0,-32,0,0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Top"
                    Maximum="{x:Bind ViewModel.SongDurationSeconds, Mode=OneWay}"
                    Minimum="0"
                    Style="{StaticResource GhostSliderStyle}"
                    ThumbToolTipValueConverter="{StaticResource SecondsToFormattedTimeConverter}"
                    Value="{x:Bind ViewModel.TimelinePositionSeconds, Mode=OneWay}" />
                <Grid
                    x:Name="TimelineSliderLyricsLineInfo"
                    Margin="0,-48,0,0"
                    Padding="8,4"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
                    CornerRadius="6"
                    Opacity="{x:Bind ViewModel.TimelineSliderThumbOpacity, Mode=OneWay}">
                    <Grid.OpacityTransition>
                        <ScalarTransition />
                    </Grid.OpacityTransition>
                    <Grid.TranslationTransition>
                        <Vector3Transition />
                    </Grid.TranslationTransition>
                    <StackPanel Orientation="Horizontal" Spacing="6">
                        <TextBlock
                            Margin="0,0,0,2"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Text="{x:Bind ViewModel.TimelineSliderThumbLyricsLine.StartMs, Converter={StaticResource MillisecondsToFormattedTimeConverter}, Mode=OneWay}" />
                        <TextBlock Margin="0,0,0,2" Text="{x:Bind ViewModel.TimelineSliderThumbLyricsLine.DisplayedText, Mode=OneWay}" />
                    </StackPanel>
                </Grid>
                <Grid
                    Height="32"
                    Margin="0,-32,0,0"
                    VerticalAlignment="Top"
                    Background="Transparent"
                    PointerEntered="TimelineSliderOverlay_PointerEntered"
                    PointerExited="TimelineSliderOverlay_PointerExited"
                    PointerMoved="TimelineSliderOverlay_PointerMoved"
                    PointerPressed="TimelineSliderOverlay_PointerPressed" />
            </Grid>

        </Grid>

        <!--  Bottom command flyout trigger  -->
        <Grid
            x:Name="BottomCommandFlyoutTrigger"
            Height="12"
            VerticalAlignment="Bottom"
            Background="Transparent"
            CornerRadius="3,3,0,0"
            Opacity="{x:Bind ViewModel.BottomCommandFlyoutTriggerOpacity, Mode=OneWay}"
            PointerEntered="BottomCommandFlyoutTrigger_PointerEntered"
            PointerExited="BottomCommandFlyoutTrigger_PointerExited"
            Tapped="BottomCommandFlyoutTrigger_Tapped">
            <Grid.OpacityTransition>
                <ScalarTransition />
            </Grid.OpacityTransition>
            <Grid
                x:Name="BottomCommandFlyoutTriggerHint"
                Width="150"
                Margin="4"
                Background="{ThemeResource TextFillColorPrimaryBrush}"
                CornerRadius="2"
                Translation="0,0,0">
                <Grid.TranslationTransition>
                    <Vector3Transition />
                </Grid.TranslationTransition>
            </Grid>
            <Grid.ContextFlyout>
                <Flyout x:Name="BottomCommandFlyout" ShouldConstrainToRootBounds="False">
                    <Flyout.FlyoutPresenterStyle>
                        <Style TargetType="FlyoutPresenter">
                            <Setter Property="MinWidth" Value="500" />
                            <Setter Property="MinHeight" Value="100" />
                            <Setter Property="CornerRadius" Value="12" />
                        </Style>
                    </Flyout.FlyoutPresenterStyle>
                    <Grid x:Name="BottomCommandFlyoutContainer" VerticalAlignment="Bottom" />
                </Flyout>
            </Grid.ContextFlyout>
        </Grid>

        <uc:SystemTray />

        <VisualStateManager.VisualStateGroups>
            <!--<VisualStateGroup x:Name="VolumeState">
                <VisualState x:Name="Volume0">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="Equal"
                            Value="{x:Bind ViewModel.Volume, Mode=OneWay}"
                            To="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="VolumeLevel0.Opacity" Value="1" />
                        <Setter Target="VolumeLevel1.Opacity" Value="0" />
                        <Setter Target="VolumeLevel2.Opacity" Value="0" />
                        <Setter Target="VolumeLevel3.Opacity" Value="0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Volume1">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="LessThanOrEqual"
                            Value="{x:Bind ViewModel.Volume, Mode=OneWay}"
                            To="32" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="VolumeLevel0.Opacity" Value="0" />
                        <Setter Target="VolumeLevel1.Opacity" Value="1" />
                        <Setter Target="VolumeLevel2.Opacity" Value="0" />
                        <Setter Target="VolumeLevel3.Opacity" Value="0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Volume2">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="LessThanOrEqual"
                            Value="{x:Bind ViewModel.Volume, Mode=OneWay}"
                            To="65" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="VolumeLevel0.Opacity" Value="0" />
                        <Setter Target="VolumeLevel1.Opacity" Value="0" />
                        <Setter Target="VolumeLevel2.Opacity" Value="1" />
                        <Setter Target="VolumeLevel3.Opacity" Value="0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Volume3">
                    <VisualState.StateTriggers>
                        <ui:CompareStateTrigger
                            Comparison="LessThanOrEqual"
                            Value="{x:Bind ViewModel.Volume, Mode=OneWay}"
                            To="100" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="VolumeLevel0.Opacity" Value="0" />
                        <Setter Target="VolumeLevel1.Opacity" Value="0" />
                        <Setter Target="VolumeLevel2.Opacity" Value="0" />
                        <Setter Target="VolumeLevel3.Opacity" Value="1" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>-->
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>