QuickLook/QuickLook.Plugin/QuickLook.Plugin.VideoViewer/ViewerPanel.xaml

<UserControl x:Class="QuickLook.Plugin.VideoViewer.ViewerPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:fa="http://schemas.fontawesome.io/icons/"
             xmlns:local="clr-namespace:QuickLook.Plugin.VideoViewer"
             xmlns:ffmpeg="clr-namespace:Unosquare.FFME;assembly=ffme"
             mc:Ignorable="d"
             x:Name="userControl"
             Background="#CC4E4E4E"
             d:DesignHeight="450" d:DesignWidth="450">
    <Grid>
        <Grid.Resources>
            <ResourceDictionary>
                <local:TimeSpanToSecondsConverter x:Key="TimeSpanToSecondsConverter" />
                <local:BooleanToVisibilityVisibleConverter x:Key="BooleanToVisibilityVisibleConverter" />
                <local:BooleanToVisibilityHiddenConverter x:Key="BooleanToVisibilityHiddenConverter" />
                <local:DurationToTimeSpanConverter x:Key="DurationToTimeSpanConverter" />
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Styles.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Grid.Resources>

        <ffmpeg:MediaElement x:Name="mediaElement" />

        <Image Margin="50" Source="Resources/compact-disc.png">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsOpen, ElementName=mediaElement}" Value="True" />
                                <Condition Binding="{Binding HasVideo, ElementName=mediaElement}" Value="False" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.Setters>
                                <Setter Property="Visibility" Value="Visible" />
                            </MultiDataTrigger.Setters>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="100">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Offset="0.0" Color="#00000000" />
                    <GradientStop Offset="0.25" Color="#66000000" />
                    <GradientStop Offset="1" Color="#D6000000" />
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="30" />
                <RowDefinition Height="75" />
            </Grid.RowDefinitions>
            <Grid.Style>
                <Style TargetType="{x:Type Grid}">
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}"
                                           Value="True" />
                                <Condition Binding="{Binding IsOpen, ElementName=mediaElement}" Value="True" />
                                <Condition Binding="{Binding HasVideo, ElementName=mediaElement}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1"
                                                         Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0"
                                                         Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>

            <Slider Grid.Row="1" x:Name="sliderProgress" Style="{StaticResource PositionSliderStyle}"
                    SmallChange="{Binding FrameStepDuration, ElementName=mediaElement,Converter={StaticResource TimeSpanToSecondsConverter}}"
                    LargeChange="{Binding FrameStepDuration, ElementName=mediaElement, Converter={StaticResource TimeSpanToSecondsConverter}}"
                    Maximum="{Binding NaturalDuration, ElementName=mediaElement,Converter={StaticResource TimeSpanToSecondsConverter}}"
                    Value="{Binding Position, ElementName=mediaElement, Converter={StaticResource TimeSpanToSecondsConverter}}" />

            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="149" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" VerticalAlignment="Center"
                            Visibility="{Binding HasAudio, ElementName=mediaElement,Converter={StaticResource BooleanToVisibilityVisibleConverter}}"
                            Orientation="Horizontal" Margin="10,0,0,0">
                    <Grid x:Name="buttonMute" Style="{StaticResource ControlButtonStyle}">
                        <fa:ImageAwesome Height="23" Width="23" Foreground="#FFEFEFEF">
                            <fa:ImageAwesome.Style>
                                <Style TargetType="fa:ImageAwesome">
                                    <Setter Property="Icon" Value="VolumeOff" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMuted, ElementName=mediaElement}"
                                                     Value="False">
                                            <Setter Property="Icon" Value="VolumeUp" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </fa:ImageAwesome.Style>
                        </fa:ImageAwesome>
                    </Grid>
                    <Slider Style="{StaticResource CustomSliderStyle}" Width="75" Maximum="1"
                            Value="{Binding Volume, ElementName=mediaElement}"
                            Visibility="{Binding IsMuted, ElementName=mediaElement, Converter={StaticResource BooleanToVisibilityHiddenConverter}}"
                            BorderThickness="0,0,5,0" />
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Grid x:Name="buttonBackward" Style="{StaticResource ControlButtonStyle}">
                        <fa:ImageAwesome Icon="Backward" Height="23" Width="23" Foreground="#FFEFEFEF" />
                    </Grid>
                    <Grid Width="3" />
                    <Grid x:Name="buttonPlayPause" Style="{StaticResource ControlButtonStyle}">
                        <fa:ImageAwesome Height="23" Width="23" Foreground="#FFEFEFEF">
                            <fa:ImageAwesome.Style>
                                <Style>
                                    <Setter Property="fa:ImageAwesome.Icon" Value="Pause" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsPlaying, ElementName=mediaElement}"
                                                     Value="False">
                                            <Setter Property="fa:ImageAwesome.Icon" Value="Play" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </fa:ImageAwesome.Style>
                        </fa:ImageAwesome>
                    </Grid>
                    <Grid Width="3" />
                    <Grid x:Name="buttonStop" Style="{StaticResource ControlButtonStyle}">
                        <fa:ImageAwesome Icon="Stop" Height="21" Width="21" Foreground="#FFEFEFEF" />
                    </Grid>
                    <Grid Width="3" />
                    <Grid x:Name="buttonForward" Style="{StaticResource ControlButtonStyle}">
                        <fa:ImageAwesome Icon="Forward" Height="23" Width="23" Foreground="#FFEFEFEF" />
                    </Grid>
                </StackPanel>
                <StackPanel Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center"
                            Orientation="Horizontal" Margin="0,0,10,0">
                    <TextBlock FontSize="14" Foreground="#FFEFEFEF"
                               Text="{Binding Position, StringFormat=hh\\:mm\\:ss, ElementName=mediaElement}" />
                    <TextBlock FontSize="14" Text=" / " Foreground="#FFEFEFEF" />
                    <TextBlock FontSize="14" Foreground="#FFEFEFEF"
                               Text="{Binding NaturalDuration, StringFormat=hh\\:mm\\:ss, ElementName=mediaElement, Converter={StaticResource DurationToTimeSpanConverter}}" />
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</UserControl>