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:vlc="clr-namespace:Meta.Vlc.Wpf;assembly=Meta.Vlc.Wpf"
             xmlns:local="clr-namespace:QuickLook.Plugin.VideoViewer"
             xmlns:glassLayer="clr-namespace:QuickLook.Controls.GlassLayer;assembly=QuickLook"
             mc:Ignorable="d"
             x:Name="viewerPanel"
             d:DesignHeight="300" d:DesignWidth="500">
    <UserControl.Resources>
        <ResourceDictionary>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
            <local:TimeSpanToShortStringConverter x:Key="TimeSpanToShortStringConverter" />
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <vlc:VlcPlayer x:Name="mediaElement" LibVlcPath="{Binding LibVlcPath, ElementName=viewerPanel}"
                       VlcOption="{Binding VlcOption, ElementName=viewerPanel}" />
        <Grid x:Name="coverArtPersenter" ClipToBounds="True" Background="{StaticResource MainWindowBackground}">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="Visibility" Value="Visible" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding HasVideo, ElementName=viewerPanel}" Value="True">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="6*" />
            </Grid.ColumnDefinitions>
            <Rectangle Margin="-50" Grid.Column="0" Grid.ColumnSpan="2">
                <Rectangle.Effect>
                    <BlurEffect Radius="100" />
                </Rectangle.Effect>
                <Rectangle.Fill>
                    <ImageBrush ImageSource="{Binding ElementName=imageCoverArt, Path=Source}" Stretch="UniformToFill" Opacity="0.9" />
                </Rectangle.Fill>
            </Rectangle>
            <Image Grid.Column="0" x:Name="imageCoverArt" Margin="20,40,20,40">
                <Image.Effect>
                    <DropShadowEffect Direction="0" BlurRadius="6" Color="#FF898989" ShadowDepth="0" />
                </Image.Effect>
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Source" Value="{Binding CoverArt, ElementName=viewerPanel}" />
                        <Style.Triggers>
                            <DataTrigger
                                Binding="{Binding CoverArt, ElementName=viewerPanel, FallbackValue=0, TargetNullValue=0}"
                                Value="0">
                                <Setter Property="Source" Value="Resources/compact-disc.png" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Grid Grid.Column="1">
                <Grid.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="2" Opacity="0.7" Color="#B2FFFFFF" />
                </Grid.Effect>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock x:Name="metaTitle" Grid.Row="1" FontSize="22" Padding="3"
                           TextWrapping="Wrap"
                           LineHeight="28" MaxHeight="80" TextTrimming="CharacterEllipsis" FontWeight="SemiBold">
                    ときめきポポロン♪
                </TextBlock>
                <TextBlock x:Name="metaArtists" Grid.Row="3" FontSize="14" Padding="3" TextTrimming="CharacterEllipsis" 
                           Foreground="{DynamicResource WindowTextForeground}">
                    チマメ隊
                </TextBlock>
                <TextBlock x:Name="metaAlbum" Grid.Row="4" FontSize="14" Padding="3" TextTrimming="CharacterEllipsis" 
                           Foreground="{DynamicResource WindowTextForeground}">
                    ときめきポポロン♪
                </TextBlock>
                <TextBlock x:Name="metaLength" Grid.Row="5" FontSize="14" Padding="3" TextTrimming="CharacterEllipsis" 
                           Foreground="{DynamicResource WindowTextForeground}"
                           Text="{Binding ElementName=mediaElement, Path=Length, Converter={StaticResource TimeSpanToShortStringConverter}}"/>
            </Grid>
        </Grid>

        <Grid x:Name="videoControlContainer" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="32">
            <Grid.Resources>
                <Storyboard x:Key="ShowControlStoryboard" Completed="AutoHideViedoControlContainer">
                    <DoubleAnimation
                        Storyboard.Target="{Binding Source={x:Reference videoControlContainer}}"
                        Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.05">
                    </DoubleAnimation>
                </Storyboard>
                <Storyboard x:Key="HideControlStoryboard">
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.Target="{Binding Source={x:Reference videoControlContainer}}"
                        Storyboard.TargetProperty="Opacity">
                        <DoubleAnimationUsingKeyFrames.KeyFrames>
                            <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3" />
                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:3.05" />
                        </DoubleAnimationUsingKeyFrames.KeyFrames>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <glassLayer:GlassLayer OverlayColor="{DynamicResource CaptionBackground}"
                                   GlassVisibility="{Binding ElementName=viewerPanel, Path=HasVideo,Converter={StaticResource BooleanToVisibilityConverter}}"
                                   ColorOverlayVisibility="{Binding ElementName=viewerPanel, Path=HasVideo,Converter={StaticResource BooleanToVisibilityConverter}}">
                <glassLayer:GlassLayer.Style>
                    <Style TargetType="glassLayer:GlassLayer">
                        <Setter Property="BlurredElement" Value="{Binding ElementName=viewerPanel}"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=viewerPanel,Path=HasVideo}" Value="True">
                                <Setter Property="BlurredElement" Value="{Binding ElementName=mediaElement}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </glassLayer:GlassLayer.Style>
            </glassLayer:GlassLayer>
            <DockPanel>
                <Button x:Name="buttonPlayPause" Style="{StaticResource ControlButtonStyle}" DockPanel.Dock="Left">
                    <fa:ImageAwesome Foreground="{DynamicResource CaptionButtonIconForeground}">
                        <fa:ImageAwesome.Style>
                            <Style>
                                <Setter Property="fa:ImageAwesome.Icon" Value="Pause" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsPlaying, ElementName=viewerPanel}"
                                                 Value="False">
                                        <Setter Property="fa:ImageAwesome.Icon" Value="Play" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </fa:ImageAwesome.Style>
                    </fa:ImageAwesome>
                </Button>
                <Button x:Name="buttonMute" Style="{StaticResource ControlButtonStyle}" DockPanel.Dock="Right">
                    <fa:ImageAwesome Icon="VolumeUp" Foreground="{DynamicResource CaptionButtonIconForeground}">
                        <fa:ImageAwesome.Style>
                            <Style TargetType="fa:ImageAwesome">
                                <Setter Property="Icon" Value="VolumeOff" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsMuted, ElementName=viewerPanel}"
                                                 Value="False">
                                        <Setter Property="Icon" Value="VolumeUp" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </fa:ImageAwesome.Style>
                    </fa:ImageAwesome>
                </Button>
                <Button Width="Auto" Style="{StaticResource ControlButtonStyle}" DockPanel.Dock="Right">
                    <TextBlock DockPanel.Dock="Right" VerticalAlignment="Center" FontSize="11"
                               Foreground="{DynamicResource CaptionButtonIconForeground}"
                               Text="{Binding ElementName=mediaElement, Path=Time, Converter={StaticResource TimeSpanToShortStringConverter}}" />
                </Button>
                <Slider x:Name="sliderProgress" Style="{StaticResource PositionSliderStyle}"
                        SmallChange="0.00001" LargeChange="0.01" Maximum="1"
                        Value="{Binding Position, ElementName=mediaElement}" />
            </DockPanel>
        </Grid>
    </Grid>
</UserControl>