<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FoxTube"
    xmlns:controls="using:FoxTube.Controls"
    xmlns:adverts="using:FoxTube.Controls.Adverts">

    <Style TargetType="local:PlayerControls">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="IsTextScaleFactorEnabled" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:PlayerControls">
                    <Grid Background="Transparent" Name="root">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.Resources>
                            <Style x:Key="PlayerSeek" TargetType="Slider">
                                <Setter Property="Margin" Value="0"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Slider">
                                            <Grid>
                                                <Grid.Resources>
                                                    <Style TargetType="Thumb">
                                                        <Setter Property="Background" Value="Red" />
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate TargetType="Thumb">
                                                                    <Ellipse Fill="{TemplateBinding Background}"/>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                    </Style>
                                                </Grid.Resources>
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPressed}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPointerOver}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                    <VisualStateGroup x:Name="FocusEngagementStates">
                                                        <VisualState x:Name="FocusDisengaged"/>
                                                        <VisualState x:Name="FocusEngagedHorizontal">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>

                                                <Grid x:Name="SliderContainer" Control.IsTemplateFocusTarget="True" Background="{ThemeResource SliderContainerBackground}">
                                                    <Grid x:Name="HorizontalTemplate">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition/>
                                                        </Grid.ColumnDefinitions>

                                                        <Rectangle x:Name="HorizontalTrackRect" Height="{StaticResource SliderTrackThemeHeight}" Fill="{TemplateBinding Background}" Grid.ColumnSpan="3"/>

                                                        <ProgressBar x:Name="DownloadProgressIndicator" Grid.ColumnSpan="3"
                                                 Height="{ThemeResource SliderTrackThemeHeight}"
                                                 Foreground="{ThemeResource SystemControlHighlightChromeAltLowBrush}"
                                                 Background="Transparent"
                                                 BorderBrush="Transparent"
                                                 BorderThickness="1"/>

                                                        <Rectangle Height="4" x:Name="HorizontalDecreaseRect" Fill="{StaticResource SystemAccentColor}"/>

                                                        <Thumb x:Name="HorizontalThumb"
                                                    Height="15" Width="15" Grid.Column="1"
                                                    AutomationProperties.AccessibilityView="Raw">
                                                            <Thumb.DataContext>
                                                                <Grid>
                                                                    <Grid.RowDefinitions>
                                                                        <RowDefinition Height="112"/>
                                                                        <RowDefinition Height="Auto"/>
                                                                    </Grid.RowDefinitions>
                                                                    <Image x:Name="ThumbnailImage" Width="192"/>
                                                                    <TextBlock Grid.Row="1" x:Name="TimeElapsedPreview"/>
                                                                </Grid>
                                                            </Thumb.DataContext>
                                                        </Thumb>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ControlPanelVisibilityStates">
                                <VisualState x:Name="ControlPanelFadeIn">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ControlPanelFadeOut">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Border">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="MediaStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Buffering">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BufferingProgressBar">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Loading">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BufferingProgressBar">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="ProgressSlider"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0" />
                                    </Storyboard>
                                </VisualState>
                                <!--<VisualState x:Name="Error">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ErrorBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>-->
                                <VisualState x:Name="Disabled">
                                    <Storyboard/>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="PlayPauseStates">
                                <VisualState x:Name="PlayState" />
                                <VisualState x:Name="PauseState">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseSymbol" Storyboard.TargetProperty="Symbol">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Pause" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FullWindowStates">
                                <VisualState x:Name="NonFullWindowState" />
                                <VisualState x:Name="FullWindowState">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullWindowSymbol" Storyboard.TargetProperty="Symbol">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="BackToWindow" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="Border">
                            <Border.Resources>
                                <Style TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}">
                                    <Setter Property="Width" Value="50"/>
                                    <Setter Property="Height" Value="50"/>
                                    <Setter Property="FontSize" Value="20"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="FontFamily" Value="Segoe UI, Segoe MDL2 Assets"/>
                                </Style>
                            </Border.Resources>
                            <Grid x:Name="ControlPanelGrid">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <Grid x:Name="header">
                                    <Grid.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black"/>
                                            <GradientStop Color="#00000000" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <Button x:Name="MinimizeButton" HorizontalAlignment="Left" VerticalAlignment="Top" Content="&#xE011;"/>

                                    <StackPanel VerticalAlignment="Top" Grid.Column="1" Margin="10,0">
                                        <TextBlock x:Name="title" Text="Name" TextTrimming="CharacterEllipsis" MaxLines="1" Style="{StaticResource TitleTextBlockStyle}"/>
                                        <TextBlock x:Name="channel" Text="Channel" TextTrimming="CharacterEllipsis" FontStyle="Italic"/>
                                    </StackPanel>

                                    <StackPanel x:Name="RightHeaderControls" Orientation="Horizontal" VerticalAlignment="Top" Grid.Column="2">
                                        <Button x:Name="CloseButton" HorizontalAlignment="Right" VerticalAlignment="Top" Content="&#xE106;"/>
                                        <Button x:Name="CastButton" Content="&#xEC15;"/>
                                        <Button x:Name="CompactOverlayButton" HorizontalAlignment="Right" VerticalAlignment="Top" Content="&#xE2B3;"/>
                                    </StackPanel>
                                </Grid>

                                <Grid x:Name="centerTrigger" Grid.Row="1"/>

                                <Grid x:Name="center" Grid.Row="1" Visibility="Collapsed" Background="#7F000000">
                                    <Button x:Name="drag" IsHitTestVisible="False" Height="32" Width="47" Margin="0,0,47,0" Content="&#xE700;" Visibility="Collapsed" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                                    <StackPanel x:Name="centerControls" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    <ProgressBar x:Name="SeekIndicator" Background="Transparent" VerticalAlignment="Bottom"/>
                                </Grid>

                                <Grid x:Name="footer" Grid.Row="2">
                                    <Grid.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="1"/>
                                            <GradientStop Color="#00000000" Offset="0"/>
                                        </LinearGradientBrush>
                                    </Grid.Background>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <ProgressBar x:Name="BufferingProgressBar" VerticalAlignment="Bottom" Grid.ColumnSpan="3" Background="Transparent" IsIndeterminate="True" Visibility="Collapsed"/>

                                    <StackPanel x:Name="LeftFooterControls" Orientation="Horizontal" VerticalAlignment="Bottom">
                                        <Button x:Name="PlayPauseButton">
                                            <SymbolIcon x:Name="PlayPauseSymbol" Symbol="Play"/>
                                            <Button.KeyboardAccelerators>
                                                <KeyboardAccelerator Key="Space"/>
                                            </Button.KeyboardAccelerators>
                                        </Button>
                                        <Button x:Name="NextButton" Content="&#xE101;"/>
                                        <Button x:Name="VolumeMenuButton" Content="&#xE15D;">
                                            <Button.Flyout>
                                                <Flyout>
                                                    <StackPanel Orientation="Horizontal" Margin="-10">
                                                        <Button x:Name="AudioMuteButton" Content="&#xE15D;" FontFamily="Segoe MDL2 Assets" Height="50" Width="50" Background="Transparent" FontSize="20"/>
                                                        <Slider x:Name="VolumeSlider" Width="150" Margin="10,5,10,0" VerticalAlignment="Center" TickPlacement="Outside" TickFrequency="10"/>
                                                    </StackPanel>
                                                </Flyout>
                                            </Button.Flyout>
                                        </Button>
                                        <Button x:Name="PlayLiveButton" Width="NaN" Visibility="Collapsed">
                                            <TextBlock x:Uid="/VideoPage/live" Text="🔴 LIVE"/>
                                        </Button>
                                    </StackPanel>

                                    <Grid x:Name="CenterFooterControls" Height="50" Grid.Column="1" VerticalAlignment="Bottom">
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Grid.Row="1" Margin="5,0" VerticalAlignment="Center" HorizontalAlignment="Left" x:Name="TimeElapsedElement" Text="00:00"/>
                                        <TextBlock Grid.Row="1" Margin="5,0" VerticalAlignment="Center" HorizontalAlignment="Right" x:Name="TimeRemainingElement" Text="00:00"/>
                                        <Slider x:Name="ProgressSlider" Style="{StaticResource PlayerSeek}" IsThumbToolTipEnabled="False" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5,0"/>
                                    </Grid>

                                    <StackPanel x:Name="RightFooterControls" Grid.Column="2" VerticalAlignment="Bottom" Orientation="Horizontal">
                                        <Button x:Name="SkipBackwardButton" Content="&#xED3C;">
                                            <Button.KeyboardAccelerators>
                                                <KeyboardAccelerator Key="Left"/>
                                            </Button.KeyboardAccelerators>
                                        </Button>
                                        <Button x:Name="SkipForwardButton" Content="&#xED3D;">
                                            <Button.KeyboardAccelerators>
                                                <KeyboardAccelerator Key="Right"/>
                                            </Button.KeyboardAccelerators>
                                        </Button>
                                        <Line Stroke="White" StrokeThickness="2" Y1="5" Y2="45"/>
                                        <Button x:Name="CaptionsMenuButton" Content="&#xE7F0;">
                                            <Button.Flyout>
                                                <Flyout>
                                                    <StackPanel Width="225">
                                                        <ToggleSwitch x:Name="CaptionsToggleSwitch" OnContent="Subtitles" OffContent="Subtitles" x:Uid="/VideoPage/subsSwitch"/>
                                                        <ComboBox x:Name="CaptionsSelector" Header="Language" x:Uid="/VideoPage/subsSelector" PlaceholderText="No captions are available" HorizontalAlignment="Stretch"/>
                                                    </StackPanel>
                                                </Flyout>
                                            </Button.Flyout>
                                        </Button>
                                        <Button x:Name="SettingsMenuButton" Content="&#xE115;">
                                            <Button.Flyout>
                                                <Flyout>
                                                    <StackPanel>
                                                        <Slider x:Name="PlaybackSpeedSlider" x:Uid="/VideoPage/playbackSpeed" Orientation="Horizontal" TickPlacement="Outside" StepFrequency=".1" Value="1" Maximum="3" Header="Playback speed"/>
                                                        <ComboBox Width="225" x:Name="QualitySelector" Header="Language" x:Uid="/VideoPage/qualitySelector"/>
                                                    </StackPanel>
                                                </Flyout>
                                            </Button.Flyout>
                                        </Button>
                                        <Button x:Name="FullWindowButton">
                                            <SymbolIcon x:Name="FullWindowSymbol" Symbol="FullScreen"/>
                                            <Button.KeyboardAccelerators>
                                                <KeyboardAccelerator Key="F11"/>
                                            </Button.KeyboardAccelerators>
                                        </Button>
                                    </StackPanel>
                                </Grid>
                            </Grid>
                        </Border>

                        <controls:LiveCaptions Visibility="Collapsed" x:Name="CaptionControl"/>

                        <adverts:PlayerAdvert Grid.Row="1" x:Name="AdvertControl" VerticalAlignment="Bottom"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
