Add controls to the VideoPlayer

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/DoubleToHMSConverter.cs

@@ -0,0 +1,43 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace QuickLook.Plugin.VideoViewer
+{
+    public sealed class DecimalToTimeSpanConverter : DependencyObject, IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value == null)
+                return "00:00:00";
+
+            var time = TimeSpan.FromSeconds((double) (decimal) value);
+
+            return time.ToString(@"hh\:mm\:ss");
+        }
+
+        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+
+    public sealed class DoubleToTimeSpanConverter : DependencyObject, IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value == null)
+                return "00:00:00";
+
+            var time = TimeSpan.FromSeconds((double) value);
+
+            return time.ToString(@"hh\:mm\:ss");
+        }
+
+        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/HorizontalSliderStyle.xaml

@@ -0,0 +1,75 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="IsTabStop" Value="false" />
+        <Setter Property="Focusable" Value="false" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RepeatButton">
+                    <Border BorderThickness="1" BorderBrush="Gray" Background="Gray" Height="3" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RepeatButton">
+                    <Border SnapsToDevicePixels="True" Background="Gray" BorderThickness="1" BorderBrush="Gray"
+                            Height="3" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="SliderThumb" TargetType="Thumb">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Thumb">
+                    <Ellipse Height="12" Width="12" Fill="Gray" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <ControlTemplate x:Key="Slider" TargetType="Slider">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Track Grid.Row="1" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
+                </Track.DecreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb Style="{StaticResource SliderThumb}" />
+                </Track.Thumb>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
+                </Track.IncreaseRepeatButton>
+            </Track>
+        </Grid>
+    </ControlTemplate>
+
+    <Style x:Key="HorizontalSlider" TargetType="Slider">
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Style.Triggers>
+            <Trigger Property="Orientation" Value="Horizontal">
+                <Setter Property="MinHeight" Value="10" />
+                <Setter Property="MinWidth" Value="104" />
+                <Setter Property="Template" Value="{StaticResource Slider}" />
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+</ResourceDictionary>

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/PluginInterface.cs

@@ -34,6 +34,8 @@ namespace QuickLook.Plugin.VideoViewer
             using (var element = new MediaElement {Source = new Uri(path)})
             {
                 context.SetPreferredSizeFit(new Size(element.NaturalVideoWidth, element.NaturalVideoHeight), 0.6);
+                context.PreferredSize = new Size(context.PreferredSize.Width,
+                    context.PreferredSize.Height + 26); // add control bar
             }
         }
 
@@ -45,7 +47,8 @@ namespace QuickLook.Plugin.VideoViewer
 
             _vp.LoadAndPlay(path);
 
-            context.Title = $"{Path.GetFileName(path)} ({TimeSpan.FromSeconds(_vp.mediaElement.NaturalDuration).ToString(@"hh\:mm\:ss")}, {_vp.mediaElement.NaturalVideoWidth} × {_vp.mediaElement.NaturalVideoHeight} )";
+            context.Title =
+                $"{Path.GetFileName(path)} ({_vp.mediaElement.NaturalVideoWidth}×{_vp.mediaElement.NaturalVideoHeight})";
             context.IsBusy = false;
         }
 

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/Properties/AssemblyInfo.cs

@@ -1,6 +1,4 @@
 using System.Reflection;
-using System.Resources;
-using System.Runtime.CompilerServices;
 using System.Runtime.InteropServices;
 using System.Windows;
 
@@ -31,7 +29,7 @@ using System.Windows;
 //[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]
 
 
-[assembly:ThemeInfo(
+[assembly: ThemeInfo(
     ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
     //(used if a resource is not found in the page,
     // or application resource dictionaries)

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/Properties/Settings.Designer.cs

@@ -8,21 +8,17 @@
 // </auto-generated>
 //------------------------------------------------------------------------------
 
-namespace QuickLook.Plugin.VideoViewer.Properties
-{
+namespace QuickLook.Plugin.VideoViewer.Properties {
     
     
     [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
-    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "11.0.0.0")]
-    internal sealed partial class Settings : global::System.Configuration.ApplicationSettingsBase
-    {
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "15.1.0.0")]
+    internal sealed partial class Settings : global::System.Configuration.ApplicationSettingsBase {
         
         private static Settings defaultInstance = ((Settings)(global::System.Configuration.ApplicationSettingsBase.Synchronized(new Settings())));
         
-        public static Settings Default
-        {
-            get
-            {
+        public static Settings Default {
+            get {
                 return defaultInstance;
             }
         }

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/Properties/Settings.settings

@@ -1,4 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
+
 <SettingsFile xmlns="uri:settings" CurrentProfile="(Default)">
   <Profiles>
     <Profile Name="(Default)" />

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/QuickLook.Plugin.VideoViewer.csproj

@@ -35,14 +35,12 @@
     <AllowUnsafeBlocks>false</AllowUnsafeBlocks>
   </PropertyGroup>
   <ItemGroup>
+    <Reference Include="FontAwesome.WPF, Version=4.7.0.37774, Culture=neutral, PublicKeyToken=0758b07a11a4f466, processorArchitecture=MSIL">
+      <HintPath>..\..\packages\FontAwesome.WPF.4.7.0.9\lib\net40\FontAwesome.WPF.dll</HintPath>
+    </Reference>
     <Reference Include="System" />
-    <Reference Include="System.Data" />
     <Reference Include="System.Xml" />
-    <Reference Include="Microsoft.CSharp" />
     <Reference Include="System.Core" />
-    <Reference Include="System.Xml.Linq" />
-    <Reference Include="System.Data.DataSetExtensions" />
-    <Reference Include="System.Net.Http" />
     <Reference Include="System.Xaml">
       <RequiredTargetFramework>4.0</RequiredTargetFramework>
     </Reference>
@@ -54,10 +52,15 @@
     <Reference Include="PresentationFramework" />
   </ItemGroup>
   <ItemGroup>
+    <Page Include="HorizontalSliderStyle.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="ViewerPanel.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Compile Include="DoubleToHMSConverter.cs" />
     <Compile Include="PluginInterface.cs" />
     <Compile Include="ViewerPanel.xaml.cs">
       <DependentUpon>ViewerPanel.xaml</DependentUpon>
@@ -82,6 +85,7 @@
       <Generator>ResXFileCodeGenerator</Generator>
       <LastGenOutput>Resources.Designer.cs</LastGenOutput>
     </EmbeddedResource>
+    <None Include="packages.config" />
     <None Include="Properties\Settings.settings">
       <Generator>SettingsSingleFileGenerator</Generator>
       <LastGenOutput>Settings.Designer.cs</LastGenOutput>

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

@@ -3,13 +3,44 @@
              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.FFmpegMediaElement;assembly=Unosquare.FFmpegMediaElement"
              mc:Ignorable="d"
              d:DesignHeight="300" d:DesignWidth="300">
     <Grid>
+        <Grid.Resources>
+            <ResourceDictionary>
+                <local:DoubleToTimeSpanConverter x:Key="DoubleToTimeSpanConverter" />
+                <local:DecimalToTimeSpanConverter x:Key="DecimalToTimeSpanConverter" />
+                <ResourceDictionary.MergedDictionaries>
+                    <ResourceDictionary Source="HorizontalSliderStyle.xaml" />
+                </ResourceDictionary.MergedDictionaries>
+            </ResourceDictionary>
+        </Grid.Resources>
         <DockPanel>
-            <ffmpeg:MediaElement x:Name="mediaElement"></ffmpeg:MediaElement>
+            <DockPanel DockPanel.Dock="Bottom" Height="26" Margin="-1,0,0,0">
+                <fa:ImageAwesome DockPanel.Dock="Left" x:Name="buttonPlayPause" Icon="PauseCircleOutline"
+                                 Height="16" Width="16" Margin="5,5" Foreground="Gray"
+                                 Cursor="Hand" />
+                <StackPanel DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"
+                            Orientation="Horizontal" Margin="10,0,7,0">
+                    <TextBlock FontSize="14"
+                               Text="{Binding Position, ElementName=mediaElement,Converter={StaticResource DecimalToTimeSpanConverter}}" />
+                    <TextBlock FontSize="14" Text=" / " />
+                    <TextBlock FontSize="14"
+                               Text="{Binding NaturalDuration, StringFormat=hh:mm:ss, ElementName=mediaElement,Converter={StaticResource DoubleToTimeSpanConverter}}" />
+                </StackPanel>
+                <Slider x:Name="sliderProgress" Style="{StaticResource HorizontalSlider}"
+                        Margin="0,0,0,0" VerticalAlignment="Center"
+                        Value="{Binding Position, ElementName=mediaElement}"
+                        Maximum="{Binding NaturalDuration, ElementName=mediaElement, Mode=OneWay}" />
             </DockPanel>
+            <ffmpeg:MediaElement x:Name="mediaElement" />
+        </DockPanel>
+        <Label x:Name="errorOverlay" Visibility="Collapsed" Background="#CCAAAAAA" VerticalContentAlignment="Center"
+               HorizontalContentAlignment="Center">
+            Video load failed.
+        </Label>
     </Grid>
 </UserControl>

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

@@ -1,17 +1,10 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
+using System.ComponentModel;
 using System.Windows;
 using System.Windows.Controls;
-using System.Windows.Data;
-using System.Windows.Documents;
 using System.Windows.Input;
-using System.Windows.Media;
-using System.Windows.Media.Imaging;
-using System.Windows.Navigation;
-using System.Windows.Shapes;
+using FontAwesome.WPF;
+using Unosquare.FFmpegMediaElement;
 
 namespace QuickLook.Plugin.VideoViewer
 {
@@ -23,6 +16,42 @@ namespace QuickLook.Plugin.VideoViewer
         public ViewerPanel()
         {
             InitializeComponent();
+
+            buttonPlayPause.MouseLeftButtonUp += TogglePlayPause;
+
+            mediaElement.PropertyChanged += ChangePlayPauseButton;
+            mediaElement.MouseLeftButtonUp += TogglePlayPause;
+            mediaElement.MediaErrored += ShowErrorOverlay;
+            mediaElement.MediaFailed += ShowErrorOverlay;
+        }
+
+        public void Dispose()
+        {
+            mediaElement?.Dispose();
+        }
+
+        private void TogglePlayPause(object sender, MouseButtonEventArgs e)
+        {
+            if (mediaElement.IsPlaying)
+                mediaElement.Pause();
+            else
+                mediaElement.Play();
+        }
+
+        private void ChangePlayPauseButton(object sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName != "IsPlaying" && e.PropertyName != "HasMediaEnded")
+                return;
+
+            buttonPlayPause.Icon = mediaElement.IsPlaying
+                ? FontAwesomeIcon.PauseCircleOutline
+                : FontAwesomeIcon.PlayCircleOutline;
+        }
+
+        private void ShowErrorOverlay(object sender, MediaErrorRoutedEventArgs e)
+        {
+            mediaElement.Stop();
+            errorOverlay.Visibility = Visibility.Visible;
         }
 
         public void LoadAndPlay(string path)
@@ -36,10 +65,5 @@ namespace QuickLook.Plugin.VideoViewer
             GC.SuppressFinalize(this);
             Dispose();
         }
-
-        public void Dispose()
-        {
-            mediaElement?.Dispose();
-        }
     }
 }

QuickLook.Plugin/QuickLook.Plugin.VideoViewer/packages.config

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<packages>
+  <package id="FontAwesome.WPF" version="4.7.0.9" targetFramework="net452" />
+</packages>