style: improve RTL iconography and layout (#505)

* improve icon behavior for RTL update custom symbol font * add RTL visual state group * add optional debugger settings * add time display tooltips * improve player controls RTL layout * add font data update custom fonts * use state trigger for rtl visual state * remove unused OnNavigatedTo override --------- Co-authored-by: Tung Huynh <tung75605@gmail.com>
huynhsontung · Dec 22, 2024 · 9571470 · 9571470
1 parent 433362a
commit 9571470
Show file tree

Hide file tree

Showing 110 changed files with 6,334 additions and 85 deletions.
diff --git a/Screenbox/App.xaml.cs b/Screenbox/App.xaml.cs
@@ -226,6 +226,18 @@ protected override void OnLaunched(LaunchActivatedEventArgs e)
 
             // Ensure the current window is active
             Window.Current.Activate();
+
+#if DEBUG
+            if (System.Diagnostics.Debugger.IsAttached)
+            {
+                //DebugSettings.EnableFrameRateCounter = true;
+                //DebugSettings.EnableRedrawRegions = true;
+                //DebugSettings.FailFastOnErrors = true;
+                //DebugSettings.IsBindingTracingEnabled = true;
+                //DebugSettings.IsOverdrawHeatMapEnabled = true;
+                //DebugSettings.IsTextPerformanceVisualizationEnabled = true;
+            }
+#endif
         }
 
         /// <summary>

diff --git a/Screenbox/Assets/Fonts/ScreenboxFluentIcons.ttf b/Screenbox/Assets/Fonts/ScreenboxFluentIcons.ttf
diff --git a/Screenbox/Assets/Fonts/ScreenboxMDL2Assets.ttf b/Screenbox/Assets/Fonts/ScreenboxMDL2Assets.ttf
diff --git a/Screenbox/Controls/PlayerControls.xaml b/Screenbox/Controls/PlayerControls.xaml
@@ -3,7 +3,6 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:commands="using:Screenbox.Commands"
-    xmlns:contract13NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,13)"
     xmlns:controls="using:Screenbox.Controls"
     xmlns:converters="using:Screenbox.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -36,7 +35,7 @@
             <converters:ToggleButtonCheckToRepeatModeConverter x:Key="ToggleButtonCheckToRepeatModeConverter" />
             <toolkitConverters:BoolToObjectConverter
                 x:Key="ShuffleModeGlyphConverter"
-                FalseValue="&#xF83D;"
+                FalseValue="&#xF002A;"
                 TrueValue="&#xE8B1;" />
 
             <Flyout x:Key="VolumeControlFlyout">
@@ -224,7 +223,8 @@
                 <MenuFlyoutItem
                     AccessKey="{strings:KeyboardResources Key=MenuItemCastKey}"
                     Click="CastMenuFlyoutItem_OnClick"
-                    Icon="{ui:FontIcon Glyph=&#xEC15;}"
+                    Icon="{ui:FontIcon Glyph=&#xEC15;,
+                                       MirroredWhenRightToLeft=True}"
                     IsEnabled="{x:Bind IsCastButtonEnabled(ViewModel.HasActiveItem), Mode=OneWay}"
                     KeyTipPlacementMode="Left"
                     Text="{x:Bind strings:Resources.Cast}">
@@ -345,7 +345,6 @@
         Padding="{x:Bind Padding, Mode=OneWay}"
         Background="{x:Bind Background, Mode=OneWay}"
         BackgroundTransition="{x:Bind BackgroundTransition, Mode=OneWay}"
-        FlowDirection="LeftToRight"
         KeyTipPlacementMode="Top">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
@@ -381,40 +380,42 @@
                 AutomationProperties.Name="{x:Bind PlayPauseButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
                 Command="{x:Bind ViewModel.PlayPauseCommand}"
                 Style="{StaticResource PlayerButtonStyle}">
-                <FontIcon Glyph="{x:Bind ViewModel.IsPlaying, Converter={StaticResource PlayPauseGlyphConverter}, Mode=OneWay}" />
+                <FontIcon FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}" Glyph="{x:Bind ViewModel.IsPlaying, Converter={StaticResource PlayPauseGlyphConverter}, Mode=OneWay}" />
                 <Button.KeyboardAccelerators>
                     <KeyboardAccelerator Key="P" Invoked="{x:Bind ViewModel.PlayPauseKeyboardAccelerator_OnInvoked}" />
                     <KeyboardAccelerator Key="K" Invoked="{x:Bind ViewModel.PlayPauseKeyboardAccelerator_OnInvoked}" />
                     <KeyboardAccelerator Key="Space" Invoked="{x:Bind ViewModel.PlayPauseKeyboardAccelerator_OnInvoked}" />
                 </Button.KeyboardAccelerators>
             </Button>
             <!--  Previous/Next  -->
-            <Button
-                x:Name="PreviousButton"
-                controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Previous}"
-                AccessKey="{strings:KeyboardResources Key=PlayerPreviousKey}"
-                AutomationProperties.Name="{x:Bind PreviousButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
-                Command="{x:Bind ViewModel.Playlist.PreviousCommand}"
-                CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                Style="{StaticResource PlayerButtonStyle}">
-                <FontIcon Glyph="&#xE892;" />
-                <Button.KeyboardAccelerators>
-                    <KeyboardAccelerator Key="PageUp" />
-                </Button.KeyboardAccelerators>
-            </Button>
-            <Button
-                x:Name="NextButton"
-                controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Next}"
-                AccessKey="{strings:KeyboardResources Key=PlayerNextKey}"
-                AutomationProperties.Name="{x:Bind NextButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
-                Command="{x:Bind ViewModel.Playlist.NextCommand}"
-                CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}"
-                Style="{StaticResource PlayerButtonStyle}">
-                <FontIcon Glyph="&#xE893;" />
-                <Button.KeyboardAccelerators>
-                    <KeyboardAccelerator Key="PageDown" />
-                </Button.KeyboardAccelerators>
-            </Button>
+            <StackPanel FlowDirection="LeftToRight" Orientation="Horizontal">
+                <Button
+                    x:Name="PreviousButton"
+                    controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Previous}"
+                    AccessKey="{strings:KeyboardResources Key=PlayerPreviousKey}"
+                    AutomationProperties.Name="{x:Bind PreviousButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
+                    Command="{x:Bind ViewModel.Playlist.PreviousCommand}"
+                    CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                    Style="{StaticResource PlayerButtonStyle}">
+                    <FontIcon Glyph="&#xE892;" />
+                    <Button.KeyboardAccelerators>
+                        <KeyboardAccelerator Key="PageUp" />
+                    </Button.KeyboardAccelerators>
+                </Button>
+                <Button
+                    x:Name="NextButton"
+                    controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Next}"
+                    AccessKey="{strings:KeyboardResources Key=PlayerNextKey}"
+                    AutomationProperties.Name="{x:Bind NextButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
+                    Command="{x:Bind ViewModel.Playlist.NextCommand}"
+                    CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                    Style="{StaticResource PlayerButtonStyle}">
+                    <FontIcon Glyph="&#xE893;" />
+                    <Button.KeyboardAccelerators>
+                        <KeyboardAccelerator Key="PageDown" />
+                    </Button.KeyboardAccelerators>
+                </Button>
+            </StackPanel>
             <!--  Time & Chapter  -->
             <controls:TimeDisplay
                 x:Name="TimeDisplay"
@@ -440,12 +441,11 @@
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Volume}"
                 AccessKey="{strings:KeyboardResources Key=PlayerVolumeButtonSliderKey}"
                 AutomationProperties.Name="{x:Bind VolumeButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
-                FlowDirection="{x:Bind FlowDirection}"
                 Flyout="{StaticResource VolumeControlFlyout}"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 Style="{StaticResource PlayerButtonStyle}"
                 Visibility="Collapsed">
-                <FontIcon Glyph="{x:Bind VolumeControl.ViewModel.VolumeGlyph, Mode=OneWay}" />
+                <FontIcon Glyph="{x:Bind VolumeControl.ViewModel.VolumeGlyph, Mode=OneWay}" MirroredWhenRightToLeft="True" />
                 <Button.KeyboardAccelerators>
                     <KeyboardAccelerator Key="M" />
                 </Button.KeyboardAccelerators>
@@ -482,7 +482,7 @@
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 IsThreeState="True"
                 Style="{StaticResource PlayerToggleButtonStyle}">
-                <FontIcon contract13NotPresent:FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}" Glyph="{x:Bind GetRepeatModeGlyph(ViewModel.Playlist.RepeatMode), Mode=OneWay}" />
+                <FontIcon FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}" Glyph="{x:Bind GetRepeatModeGlyph(ViewModel.Playlist.RepeatMode), Mode=OneWay}" />
                 <ToggleButton.KeyboardAccelerators>
                     <KeyboardAccelerator Key="R" Modifiers="Control" />
                 </ToggleButton.KeyboardAccelerators>
@@ -494,10 +494,9 @@
                 controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.AudioAndCaption}"
                 AccessKey="{strings:KeyboardResources Key=PlayerAudioAndCaptionsKey}"
                 AutomationProperties.Name="{x:Bind AudioAndCaptionButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
-                FlowDirection="{x:Bind FlowDirection}"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
                 Style="{StaticResource PlayerButtonStyle}">
-                <FontIcon Glyph="&#xED1F;" />
+                <FontIcon Glyph="&#xED1F;" MirroredWhenRightToLeft="True" />
                 <Button.KeyboardAccelerators>
                     <KeyboardAccelerator Key="C" Invoked="{x:Bind ViewModel.ToggleSubtitle}" />
                     <KeyboardAccelerator
@@ -531,8 +530,9 @@
                 Visibility="{x:Bind helpers:SystemInformation.IsDesktop}">
                 <FontIcon
                     x:Name="CompactOverlayButtonIcon"
-                    contract13NotPresent:FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}"
-                    Glyph="&#xEE49;" />
+                    FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}"
+                    Glyph="&#xEE49;"
+                    MirroredWhenRightToLeft="True" />
                 <Button.KeyboardAccelerators>
                     <KeyboardAccelerator Key="M" Modifiers="Control" />
                     <KeyboardAccelerator Key="Escape" IsEnabled="{x:Bind ViewModel.IsCompact, Mode=OneWay}" />
@@ -548,7 +548,10 @@
                 Command="{x:Bind ViewModel.ToggleFullscreenCommand}"
                 Style="{StaticResource PlayerButtonStyle}"
                 Visibility="{x:Bind helpers:SystemInformation.IsDesktop}">
-                <FontIcon x:Name="FullscreenButtonIcon" Glyph="&#xE740;" />
+                <FontIcon
+                    x:Name="FullscreenButtonIcon"
+                    Glyph="&#xE740;"
+                    MirroredWhenRightToLeft="True" />
                 <Button.KeyboardAccelerators>
                     <KeyboardAccelerator Key="F" />
                     <KeyboardAccelerator Key="Escape" IsEnabled="{x:Bind ViewModel.IsFullscreen, Mode=OneWay}" />
@@ -559,7 +562,6 @@
                 x:Name="MoreButton"
                 AccessKey="{strings:KeyboardResources Key=PlayerMoreKey}"
                 AutomationProperties.Name="{x:Bind MoreButton.(ToolTipService.ToolTip)}"
-                FlowDirection="{x:Bind FlowDirection}"
                 Flyout="{StaticResource NormalPlayerContextMenu}"
                 IsAccessKeyScope="True"
                 IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"

diff --git a/Screenbox/Controls/PlayerControls.xaml.cs b/Screenbox/Controls/PlayerControls.xaml.cs
@@ -102,11 +102,11 @@ private string GetRepeatModeGlyph(MediaPlaybackAutoRepeatMode repeatMode)
             switch (repeatMode)
             {
                 case MediaPlaybackAutoRepeatMode.None:
-                    return "\uf5e7";
+                    return App.IsRightToLeftLanguage ? "\U000F0127" : "\uF5E7";
                 case MediaPlaybackAutoRepeatMode.List:
-                    return "\ue8ee";
+                    return App.IsRightToLeftLanguage ? "\U000F004E" : "\uE8EE";
                 case MediaPlaybackAutoRepeatMode.Track:
-                    return "\ue8ed";
+                    return App.IsRightToLeftLanguage ? "\U000F004D" : "\uE8ED";
                 default:
                     throw new ArgumentOutOfRangeException(nameof(repeatMode), repeatMode, null);
             }
@@ -136,11 +136,11 @@ private string GetPlaybackSpeedGlyph(double playbackSpeed)
         {
             return playbackSpeed switch
             {
-                >= 1.75 => "\ueb24",
-                > 1.01 => "\uec4a",
-                <= 0.25 => "\uec48",
-                < 0.99 => "\uf823",
-                _ => "\uec49"
+                >= 1.75 => "\uEB24",
+                > 1.01 => "\uEC4A",
+                <= 0.25 => "\uEC48",
+                < 0.99 => "\U000F00A4",
+                _ => "\uEC49"
             };
         }
 

diff --git a/Screenbox/Controls/PlaylistView.xaml b/Screenbox/Controls/PlaylistView.xaml
@@ -2,6 +2,7 @@
     x:Class="Screenbox.Controls.PlaylistView"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:class="using:Screenbox"
     xmlns:commands="using:Screenbox.Commands"
     xmlns:controls="using:Screenbox.Controls"
     xmlns:ctAnimations="using:CommunityToolkit.WinUI.Animations"
@@ -142,7 +143,10 @@
                 KeyTipPlacementMode="Bottom"
                 XYFocusLeft="{x:Bind ClearButton}">
                 <StackPanel Orientation="Horizontal">
-                    <FontIcon Margin="{StaticResource IconButtonStandardIconMargin}" Glyph="&#xE762;" />
+                    <FontIcon
+                        x:Name="MultiSelectToggleIcon"
+                        Margin="{StaticResource IconButtonStandardIconMargin}"
+                        Glyph="&#xE762;" />
                     <TextBlock
                         x:Name="MultiSelectToggleLabel"
                         Margin="8,0,0,0"
@@ -365,6 +369,19 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+
+            <VisualStateGroup x:Name="FlowDirectionStates">
+                <VisualState x:Name="LeftToRight" />
+
+                <VisualState x:Name="RightToLeft">
+                    <VisualState.StateTriggers>
+                        <StateTrigger IsActive="{x:Bind class:App.IsRightToLeftLanguage}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="MultiSelectToggleIcon.Glyph" Value="&#xEA98;" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>
diff --git a/Screenbox/Controls/SeekBar.xaml b/Screenbox/Controls/SeekBar.xaml
@@ -21,7 +21,7 @@
         </ResourceDictionary>
     </UserControl.Resources>
 
-    <Grid>
+    <Grid FlowDirection="LeftToRight">
         <controls:ChapterProgressBar
             x:Name="PlayerProgressBar"
             HorizontalAlignment="Stretch"

diff --git a/Screenbox/Controls/TimeDisplay.xaml b/Screenbox/Controls/TimeDisplay.xaml
@@ -4,38 +4,58 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="300"
-    d:DesignWidth="400"
+    xmlns:strings="using:Screenbox.Strings"
+    d:DesignHeight="32"
+    d:DesignWidth="256"
     mc:Ignorable="d">
 
-    <StackPanel Orientation="Horizontal">
+    <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
         <StackPanel
-            VerticalAlignment="Center"
+            FlowDirection="LeftToRight"
             Orientation="Horizontal"
             Tapped="TimeDisplay_OnTapped">
             <TextBlock
                 x:Name="TimeText"
-                Margin="0,0,4,0"
-                Style="{x:Bind TextBlockStyle, Mode=OneWay}">
-                <Run Text="{x:Bind Time, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}" /><Run Text=" /" />
-            </TextBlock>
+                d:Text="43:21"
+                Style="{x:Bind TextBlockStyle, Mode=OneWay}"
+                Text="{x:Bind Time, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}"
+                ToolTipService.ToolTip="{strings:Resources Key=TimeElapsed}"
+                Typography.NumeralAlignment="Tabular" />
             <TextBlock
                 x:Name="RemainingText"
-                Margin="0,0,4,0"
+                d:Text="-58:39"
+                Style="{x:Bind TextBlockStyle, Mode=OneWay}"
+                Text="{x:Bind GetRemainingTime(Time), Mode=OneWay}"
+                ToolTipService.ToolTip="{strings:Resources Key=TimeRemaining}"
+                Typography.NumeralAlignment="Tabular"
+                Visibility="Collapsed" />
+            <TextBlock
+                Margin="2,0"
+                Style="{x:Bind TextBlockStyle, Mode=OneWay}"
+                Text="/" />
+            <TextBlock
+                d:Text="1:23:45"
                 Style="{x:Bind TextBlockStyle, Mode=OneWay}"
-                Visibility="Collapsed">
-                <Run Text="{x:Bind GetRemainingTime(Time), Mode=OneWay}" /><Run Text=" /" />
-            </TextBlock>
-            <TextBlock Style="{x:Bind TextBlockStyle, Mode=OneWay}" Text="{x:Bind Length, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}" />
+                Text="{x:Bind Length, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}"
+                ToolTipService.ToolTip="{strings:Resources Key=TimeLength}"
+                Typography.NumeralAlignment="Tabular" />
         </StackPanel>
+
+        <TextBlock
+            x:Name="SeparatorText"
+            d:Visibility="Visible"
+            Style="{x:Bind TextBlockStyle, Mode=OneWay}"
+            Text=" •"
+            Visibility="Collapsed" />
+
         <TextBlock
             x:Name="NameText"
             MinWidth="0"
-            Margin="4,0,0,0"
-            VerticalAlignment="Center"
+            Margin="2,0,0,0"
+            d:Visibility="Visible"
             Style="{x:Bind TextBlockStyle, Mode=OneWay}"
             Visibility="Collapsed">
-            <Run Text="• " /><Run Text="{x:Bind TitleName, Mode=OneWay}" /><Run x:Name="Separator" Text=": " /><Run Text="{x:Bind ChapterName, Mode=OneWay}" />
+            <Run d:Text="Title" Text="{x:Bind TitleName, Mode=OneWay}" /><Run x:Name="Separator" Text=": " /><Run d:Text="Chapter 1" Text="{x:Bind ChapterName, Mode=OneWay}" />
         </TextBlock>
 
         <VisualStateManager.VisualStateGroups>
@@ -48,15 +68,18 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+
             <VisualStateGroup x:Name="NameStates">
                 <VisualState x:Name="None" />
                 <VisualState x:Name="Both">
                     <VisualState.Setters>
+                        <Setter Target="SeparatorText.Visibility" Value="Visible" />
                         <Setter Target="NameText.Visibility" Value="Visible" />
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="Either">
                     <VisualState.Setters>
+                        <Setter Target="SeparatorText.Visibility" Value="Visible" />
                         <Setter Target="NameText.Visibility" Value="Visible" />
                         <Setter Target="Separator.Text" Value="{x:Null}" />
                     </VisualState.Setters>

diff --git a/Screenbox/Controls/VolumeControl.xaml b/Screenbox/Controls/VolumeControl.xaml
@@ -50,7 +50,10 @@
             AutomationProperties.Name="{Binding ElementName=VolumeToggleButton, Path=(ToolTipService.ToolTip), Mode=OneWay}"
             IsChecked="{x:Bind ViewModel.IsMute, Mode=TwoWay}"
             Style="{x:Bind VolumeToggleButtonStyle, Mode=OneWay}">
-            <FontIcon d:Glyph="&#xE994;" Glyph="{x:Bind ViewModel.VolumeGlyph, Mode=OneWay}" />
+            <FontIcon
+                d:Glyph="&#xE994;"
+                Glyph="{x:Bind ViewModel.VolumeGlyph, Mode=OneWay}"
+                MirroredWhenRightToLeft="True" />
             <ToggleButton.KeyboardAccelerators>
                 <KeyboardAccelerator Key="M" />
             </ToggleButton.KeyboardAccelerators>