improve player controls RTL layout

huynhsontung · Dec 12, 2024 · d66e7f1 · d66e7f1
1 parent 0eea240
commit d66e7f1
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 52 deletions.
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"
@@ -346,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" />
@@ -382,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"
@@ -441,7 +441,6 @@
                 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}"
@@ -495,7 +494,6 @@
                 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;" MirroredWhenRightToLeft="True" />
@@ -564,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);
             }

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
@@ -5,43 +5,57 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:strings="using:Screenbox.Strings"
-    d:DesignHeight="300"
-    d:DesignWidth="400"
+    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"
+                d:Text="43:21"
                 Style="{x:Bind TextBlockStyle, Mode=OneWay}"
-                ToolTipService.ToolTip="{strings:Resources Key=TimeElapsed}">
-                <Run Text="{x:Bind Time, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}" /><Run Text=" /" />
-            </TextBlock>
+                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}"
-                Visibility="Collapsed">
-                <Run Text="{x:Bind GetRemainingTime(Time), Mode=OneWay}" /><Run Text=" /" />
-            </TextBlock>
+                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}"
                 Text="{x:Bind Length, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}"
-                ToolTipService.ToolTip="{strings:Resources Key=TimeLength}" />
+                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>
@@ -54,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>