205 lines
12 KiB
XML
205 lines
12 KiB
XML
<UserControl
|
|
x:Class="Harmonia.WinUI.Views.PlayerView"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:local="using:Harmonia.WinUI.Views"
|
|
xmlns:vm="using:Harmonia.WinUI.ViewModels"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
DataContext="{Binding Source={StaticResource Locator}, Path=PlayerViewModel}"
|
|
d:DataContext="{d:DesignInstance Type=vm:PlayerViewModel, IsDesignTimeCreatable=True}"
|
|
mc:Ignorable="d">
|
|
|
|
<UserControl.Resources>
|
|
<SolidColorBrush x:Key="SongItemTitleBrush" Color="#dddddd"/>
|
|
<SolidColorBrush x:Key="SongItemSubtitleBrush" Color="#aaaaaa"/>
|
|
|
|
<SolidColorBrush x:Key="SongItemTitleBrush2" Color="#FCF8ED" />
|
|
<SolidColorBrush x:Key="SongItemSubtitleBrush2" Color="#B5B8B8" />
|
|
|
|
<LinearGradientBrush x:Key="LightGradientBrush" StartPoint="0,0" EndPoint="0,1">
|
|
<GradientStop Color="#F6F2E3" Offset="0"/>
|
|
<GradientStop Color="#C9B59F" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
|
|
<LinearGradientBrush x:Key="DarkGradientBrush" StartPoint="0,0" EndPoint="0,1">
|
|
<GradientStop Color="#F9EBC6" Offset="0"/>
|
|
<GradientStop Color="#A66831" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
|
|
<LinearGradientBrush x:Key="PurpleGradientBrush" StartPoint="0,0" EndPoint="0,1">
|
|
<GradientStop Color="#EFD6F5" Offset="0"/>
|
|
<GradientStop Color="#AC8CC4" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
|
|
<LinearGradientBrush x:Key="SliderGradientBrush" StartPoint="0,0" EndPoint="0,1">
|
|
<GradientStop Color="#E1B88A" Offset="0"/>
|
|
<GradientStop Color="#E9B578" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
|
|
<Style x:Key="PlayerGrid" TargetType="Grid">
|
|
<Setter Property="Padding" Value="10"/>
|
|
<Setter Property="Background">
|
|
<Setter.Value>
|
|
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
|
|
<GradientStop Color="#101215" Offset="0"/>
|
|
<GradientStop Color="#101214" Offset="1"/>
|
|
</LinearGradientBrush>
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Property="BorderBrush" Value="#3B332B" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
</Style>
|
|
<Style x:Key="SongTitleTextBlock" TargetType="TextBlock">
|
|
<Setter Property="FontSize" Value="16"/>
|
|
<Setter Property="FontWeight" Value="SemiBold"/>
|
|
<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
|
|
<Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
|
|
</Style>
|
|
<Style x:Key="SongImage" TargetType="Image">
|
|
<Setter Property="Width" Value="80"/>
|
|
<Setter Property="Height" Value="80"/>
|
|
</Style>
|
|
</UserControl.Resources>
|
|
|
|
<Grid Style="{StaticResource PlayerGrid}">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition></ColumnDefinition>
|
|
<ColumnDefinition></ColumnDefinition>
|
|
<ColumnDefinition></ColumnDefinition>
|
|
</Grid.ColumnDefinitions>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"></RowDefinition>
|
|
<RowDefinition></RowDefinition>
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- Position Slider -->
|
|
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Center" Margin="0 0 0 10">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto"></ColumnDefinition>
|
|
<ColumnDefinition></ColumnDefinition>
|
|
<ColumnDefinition Width="Auto"></ColumnDefinition>
|
|
</Grid.ColumnDefinitions>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"></RowDefinition>
|
|
</Grid.RowDefinitions>
|
|
<Border Grid.Column="0" Background="Transparent" Padding="0 8" Width="60" CornerRadius="4" VerticalAlignment="Center" Margin="0 0 6 0">
|
|
<TextBlock
|
|
Foreground="#aaaaaa"
|
|
Text="{Binding Position, Converter={StaticResource SecondsToString}}"
|
|
FontSize="13"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center">
|
|
</TextBlock>
|
|
</Border>
|
|
|
|
<Slider
|
|
Name="PositionSlider"
|
|
Loaded="PositionSlider_Loaded"
|
|
Grid.Column="1"
|
|
Value="{Binding CurrentPosition, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
|
|
Minimum="0"
|
|
Foreground="{StaticResource SliderGradientBrush}"
|
|
Maximum="{Binding MaxPosition, Mode=OneWay}"
|
|
IsEnabled="{Binding CanUpdatePosition, Mode=OneWay}"
|
|
ThumbToolTipValueConverter="{StaticResource SecondsToString}"
|
|
VerticalAlignment="Center"
|
|
VerticalContentAlignment="Center">
|
|
<Slider.Resources>
|
|
<!-- Thumb (the "ball") -->
|
|
<StaticResource x:Key="SliderThumbBackground" ResourceKey="DarkGradientBrush"/>
|
|
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="DarkGradientBrush"/>
|
|
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="DarkGradientBrush"/>
|
|
|
|
<!-- Filled portion of the track (defaults to system accent on hover/press) -->
|
|
<StaticResource x:Key="SliderTrackValueFill" ResourceKey="SliderGradientBrush"/>
|
|
<StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="SliderGradientBrush"/>
|
|
<StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="SliderGradientBrush"/>
|
|
</Slider.Resources>
|
|
</Slider>
|
|
|
|
<Border Grid.Column="2" Background="Transparent" Padding="0 8" Width="60" CornerRadius="4" VerticalAlignment="Center" Margin="6 0 0 0">
|
|
<TextBlock
|
|
Foreground="#aaaaaa"
|
|
Text="{Binding MaxPosition, Converter={StaticResource SecondsToString}}"
|
|
FontSize="13"
|
|
VerticalAlignment="Center">
|
|
</TextBlock>
|
|
</Border>
|
|
|
|
</Grid>
|
|
|
|
<!-- Song Info -->
|
|
<Grid Grid.Row="1" Grid.Column="0" Name="PlayingSongGrid">
|
|
<StackPanel Orientation="Horizontal">
|
|
<Grid Margin="0 0 10 0" BorderBrush="#2D2930" BorderThickness="1" CornerRadius="4">
|
|
<Image Source="{Binding SongImageSource, Mode=OneWay}" Style="{StaticResource SongImage}"></Image>
|
|
<Canvas Background="#19000000"></Canvas>
|
|
</Grid>
|
|
<StackPanel VerticalAlignment="Center">
|
|
<TextBlock Foreground="{StaticResource SongItemTitleBrush2}" FontWeight="SemiBold" FontSize="16" Text="{Binding Song, Converter={StaticResource SongTitle}}"></TextBlock>
|
|
<TextBlock Foreground="{StaticResource SongItemSubtitleBrush2}" FontSize="14" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}"></TextBlock>
|
|
<TextBlock Foreground="{StaticResource SongItemSubtitleBrush2}" FontSize="14" Text="{Binding Song.Album}"></TextBlock>
|
|
<TextBlock Foreground="#777" FontSize="12" Visibility="{Binding Song, Converter={StaticResource NullVisibility}}">
|
|
<Run Text="{Binding Song.FileType}"></Run><Run Text=" - "></Run><Run Text="{Binding Song.BitRate}"></Run><Run Text=" kbps - "></Run><Run Text="{Binding Song.SampleRate}"></Run><Run Text=" Hz"></Run>
|
|
</TextBlock>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Grid>
|
|
|
|
<!-- Playback Actions -->
|
|
<Grid Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">
|
|
<StackPanel Orientation="Horizontal" Spacing="16">
|
|
<Button Style="{StaticResource FlatButton}" Command="{Binding PreviousSongCommand}">
|
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource SkipStartFillIcon}"></Path>
|
|
</Button>
|
|
<Button Style="{StaticResource FlatButton}" Command="{Binding StopSongCommand}">
|
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource StopFillIcon}"></Path>
|
|
</Button>
|
|
<Button Style="{StaticResource FlatButton}" Command="{Binding PlaySongCommand}" BorderBrush="{StaticResource DarkGradientBrush}" BorderThickness="2" CornerRadius="48" Padding="16">
|
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource DarkGradientBrush}" Data="{StaticResource PlayFillIcon}" Margin="1,0,-1,0"></Path>
|
|
</Button>
|
|
<Button Style="{StaticResource FlatButton}" Command="{Binding PauseSongCommand}">
|
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource PauseFillIcon}"></Path>
|
|
</Button>
|
|
<Button Style="{StaticResource FlatButton}" Command="{Binding NextSongCommand}">
|
|
<Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource SkipEndFillIcon}"></Path>
|
|
</Button>
|
|
</StackPanel>
|
|
</Grid>
|
|
|
|
<!-- Volume Slider -->
|
|
<Grid Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
|
|
<StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
|
|
<Button Style="{StaticResource FlatButton}" BorderBrush="{StaticResource DarkGradientBrush}" Command="{Binding ToggleMuteCommand}">
|
|
<Viewbox Width="24" Height="24">
|
|
<Canvas Width="512" Height="512">
|
|
<Path Stretch="None" Fill="{Binding VolumeState, Converter={StaticResource VolumeStateToFill}, ConverterParameter={StaticResource DarkGradientBrush}}" Stroke="{StaticResource DarkGradientBrush}" StrokeThickness="32" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Data="{Binding VolumeState, Converter={StaticResource VolumeStateToIcon}}"></Path>
|
|
</Canvas>
|
|
</Viewbox>
|
|
</Button>
|
|
<Slider
|
|
Width="200"
|
|
Minimum="0.0"
|
|
Maximum="1.0"
|
|
StepFrequency="0.01"
|
|
VerticalAlignment="Center"
|
|
PointerWheelChanged="VolumeSlider_PointerWheelChanged"
|
|
Value="{Binding Volume, Mode=TwoWay}">
|
|
<Slider.Resources>
|
|
<!-- Thumb (the "ball") -->
|
|
<StaticResource x:Key="SliderThumbBackground" ResourceKey="DarkGradientBrush"/>
|
|
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="DarkGradientBrush"/>
|
|
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="DarkGradientBrush"/>
|
|
|
|
<!-- Filled portion of the track (defaults to system accent on hover/press) -->
|
|
<StaticResource x:Key="SliderTrackValueFill" ResourceKey="SliderGradientBrush"/>
|
|
<StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="SliderGradientBrush"/>
|
|
<StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="SliderGradientBrush"/>
|
|
</Slider.Resources>
|
|
</Slider>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Grid>
|
|
</UserControl>
|