using MahApps.Metro.Controls;
using MaterialDesignThemes.Wpf;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Tango.MachineStudio.UI.Notifications
{
    /// <summary>
    /// Interaction logic for TextInputBoxWindow.xaml
    /// </summary>
    public partial class TextInputBoxWindow : pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
<UserControl x:Class="Tango.MachineStudio.DataCapture.Views.MainView"
             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:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
             xmlns:visuals="clr-namespace:Tango.Visuals;assembly=Tango.Visuals"
             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
             xmlns:vm="clr-namespace:Tango.MachineStudio.DataCapture.ViewModels"
             xmlns:logging="clr-namespace:Tango.MachineStudio.Logging.Views;assembly=Tango.MachineStudio.Logging"
             xmlns:video="clr-namespace:Tango.Video.DirectCapture;assembly=Tango.Video"
             xmlns:global="clr-namespace:Tango.MachineStudio.DataCapture"
             xmlns:local="clr-namespace:Tango.MachineStudio.DataCapture.Views"
             mc:Ignorable="d" 
             d:DesignHeight="1080" d:DesignWidth="1920" Background="White" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">

    <UserControl.Resources>
        <converters:StringEllipsisConverter x:Key="StringEllipsisConverter" />
        <converters:BooleanToVisibilityInverseConverter x:Key="BooleanToVisibilityInverseConverter" />
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <converters:NumberToFileSizeConverter x:Key="NumberToFileSizeConverter"/>
        <converters:BooleanInverseConverter x:Key="BooleanInverseConverter" />
    </UserControl.Resources>

    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>

            <Grid>
                <DockPanel Margin="10">
                    <Grid DockPanel.Dock="Top">
                        <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
                            <Image Source="../Images/recordings.png" Width="42"></Image>
                            <TextBlock VerticalAlignment="Center" Margin="10 0 0 0" Foreground="DimGray" FontSize="16" FontWeight="SemiBold">RECORDINGS</TextBlock>
                        </StackPanel>

                        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeDashArray="5 5 5 5"></Rectangle>
                    </Grid>

                    <Grid Margin="0 10 0 0">
                        <ListBox IsEnabled="{Binding Player.IsPlaying,Converter={StaticResource BooleanInverseConverter}}" ItemsSource="{Binding Recordings}" SelectedItem="{Binding SelectedRecording}" HorizontalContentAlignment="Stretch">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid HorizontalAlignment="Stretch">
                                        <DockPanel>
                                            <Button DockPanel.Dock="Right" Style="{StaticResource MaterialDesignFlatButton}" Padding="0" Width="24" Height="24" Foreground="#FF6F6F" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.RemoveRecordingCommand}" CommandParameter="{Binding}">
                                                <materialDesign:PackIcon Kind="Delete" Width="20" Height="20" />
                                            </Button>

                                            <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
                                                <Image Source="../Images/tape.png" VerticalAlignment="Top" Width="32" Height="40" Stretch="Fill"></Image>
                                                <TextBlock VerticalAlignment="Top" Margin="5 5 0 0">
                                                <Run Text="{Binding Name,Mode=OneWay}"></Run>
                                                <LineBreak/>
                                                <Run Text="{Binding Date}" FontSize="10"></Run>
                                                </TextBlock>
                                            </StackPanel>
                                        </DockPanel>

                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </DockPanel>

                <Rectangle HorizontalAlignment="Right" VerticalAlignment="Stretch" Stroke="Gainsboro" StrokeDashArray="5 5 5 5" Margin="0 50 0 50"></Rectangle>
            </Grid>

            <Grid Grid.Column="1" Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="430"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>

                <Grid>
                    <DockPanel>
                        <StackPanel Orientation="Horizontal" Margin="0 0 0 10" DockPanel.Dock="Top" HorizontalAlignment="Center">
                            <Image Source="../Images/capture-device.png" Width="42"></Image>
                            <TextBlock VerticalAlignment="Center" Margin="10 10 0 0" Foreground="DimGray" FontSize="16" FontWeight="SemiBold">CAPTURE DEVICES</TextBlock>
                        </StackPanel>
                        <ItemsControl Margin="0 20 0 0" ItemsSource="{Binding CaptureDevices}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <UniformGrid Rows="1" Columns="{Binding CaptureDevices.Count}" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate DataType="{x:Type video:CaptureDevice}">
                                    <Border RenderOptions.BitmapScalingMode="Fant" Width="480">
                                        <Border.Background>
                                            <ImageBrush ImageSource="../Images/video-frame.png" Stretch="Fill"></ImageBrush>
                                        </Border.Background>

                                        <Grid>
                                            <Border Margin="33 32 33 55">
                                                <Grid>
                                                    <Border IsHitTestVisible="False" VerticalAlignment="Center" Padding="10" HorizontalAlignment="Center" Background="#20808080" CornerRadius="5">
                                                        <TextBlock FontSize="11" Text="{Binding Device.Name,Converter={StaticResource StringEllipsisConverter},ConverterParameter=30,FallbackValue='No Camera',TargetNullValue='No Camera'}"></TextBlock>
                                                    </Border>

                                                    <Image Source="{Binding VideoSource,Mode=OneWay,IsAsync=True}" Stretch="Fill">
                                                        <Image.Style>
                                                            <Style TargetType="Image">
                                                                <Setter Property="Visibility" Value="Hidden"></Setter>
                                                                <Style.Triggers>
                                                                    <DataTrigger Binding="{Binding IsStarted}" Value="True">
                                                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                                                    </DataTrigger>
                                                                    <DataTrigger Binding="{Binding IsStarted}" Value="False">
                                                                        <Setter Property="Visibility" Value="Hidden"></Setter>
                                                                    </DataTrigger>
                                                                    <DataTrigger Binding="{Binding EmulatedMode}" Value="True">
                                                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                                                    </DataTrigger>
                                                                </Style.Triggers>
                                                            </Style>
                                                        </Image.Style>
                                                    </Image>

                                                    <Grid Background="#83000000" Cursor="Hand" Visibility="{Binding EmulatedMode,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
                                                        <Grid.Style>
                                                            <Style TargetType="Grid">
                                                                <Setter Property="Opacity" Value="0"></Setter>
                                                                <Style.Triggers>
                                                                    <EventTrigger RoutedEvent="MouseEnter">
                                                                        <EventTrigger.Actions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard>
                                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:0.2"></DoubleAnimation>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </EventTrigger.Actions>
                                                                    </EventTrigger>
                                                                    <EventTrigger RoutedEvent="MouseLeave">
                                                                        <EventTrigger.Actions>
                                                                            <BeginStoryboard>
                                                                                <Storyboard>
                                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:0.2"></DoubleAnimation>
                                                                                </Storyboard>
                                                                            </BeginStoryboard>
                                                                        </EventTrigger.Actions>
                                                                    </EventTrigger>
                                                                </Style.Triggers>
                                                            </Style>
                                                        </Grid.Style>

                                                        <Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.ToggleCameraCommand}" CommandParameter="{Binding}" Style="{StaticResource MaterialDesignFloatingActionMiniButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="60" Height="60" Padding="0">
                                                            <materialDesign:PackIcon Width="40" Height="40">
                                                                <materialDesign:PackIcon.Style>
                                                                    <Style TargetType="materialDesign:PackIcon">
                                                                        <Setter Property="Kind" Value="Play"></Setter>
                                                                        <Style.Triggers>
                                                                            <DataTrigger Binding="{Binding IsStarted}" Value="True">
                                                                                <Setter Property="Kind" Value="Stop"></Setter>
                                                                            </DataTrigger>
                                                                            <DataTrigger Binding="{Binding IsStarted}" Value="False">
                                                                                <Setter Property="Kind" Value="Play"></Setter>
                                                                            </DataTrigger>
                                                                        </Style.Triggers>
                                                                    </Style>
                                                                </materialDesign:PackIcon.Style>
                                                            </materialDesign:PackIcon>
                                                        </Button>
                                                    </Grid>
                                                </Grid>
                                            </Border>
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DockPanel>

                    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeDashArray="5 5 5 5"></Rectangle>
                </Grid>

                <Grid Grid.Row="1">
                    <DockPanel>
                        <StackPanel VerticalAlignment="Bottom" Margin="0 10 0 0" DockPanel.Dock="Bottom">
                            <Grid Margin="50 0 0 0">
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                                    <Button Command="{Binding MediaSeekBackwardCommand}" Margin="0 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="60" Height="60" Background="Transparent">
                                        <materialDesign:PackIcon Width="40" Height="40" Kind="Rewind" Foreground="{StaticResource AccentColorBrush}" />
                                    </Button>
                                    <Button Command="{Binding MediaPlayPauseCommand}" Margin="20 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="80" Height="80" Background="Transparent">
                                        <materialDesign:PackIcon Width="60" Height="60" Foreground="{StaticResource AccentColorBrush}">
                                            <materialDesign:PackIcon.Style>
                                                <Style TargetType="materialDesign:PackIcon">
                                                    <Setter Property="Kind" Value="Play"></Setter>
                                                    <Style.Triggers>
                                                        <MultiDataTrigger>
                                                            <MultiDataTrigger.Conditions>
                                                                <Condition Binding="{Binding Player.IsPlaying}" Value="True" />
                                                                <Condition Binding="{Binding Player.IsPaused}" Value="False" />
                                                            </MultiDataTrigger.Conditions>
                                                            <Setter Property="Kind" Value="Pause"></Setter>
                                                        </MultiDataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </materialDesign:PackIcon.Style>
                                        </materialDesign:PackIcon>
                                    </Button>
                                    <Button Command="{Binding MediaStopCommand}" Margin="20 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="60" Height="60" Background="Transparent">
                                        <materialDesign:PackIcon Width="40" Height="40" Kind="Stop" Foreground="{StaticResource AccentColorBrush}" />
                                    </Button>
                                    <Button Command="{Binding MediaSeekForwardCommand}" Margin="20 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="60" Height="60" Background="Transparent">
                                        <materialDesign:PackIcon Width="40" Height="40" Kind="FastForward" Foreground="{StaticResource AccentColorBrush}" />
                                    </Button>
                                    <Button Command="{Binding MediaRecordingCommand}" Margin="20 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Foreground="#FF7A7A" BorderBrush="#FF8585" Padding="0" Width="50" Height="50" Background="Transparent" ToolTip="Start Recording">
                                        <materialDesign:PackIcon Width="30" Height="30" Kind="Record" />
                                    </Button>
                                </StackPanel>
                                <Grid>
                                    <Label Margin="0 0 15 0" VerticalAlignment="Center" HorizontalAlignment="Right" Foreground="#FF8585" FontSize="40" FontFamily="{StaticResource digital-7}">
                                        <Label.Style>
                                            <Style TargetType="Label">
                                                <Setter Property="Opacity" Value="1"></Setter>
                                                <Setter Property="Content">
                                                    <Setter.Value>
                                                        <TextBlock>
                                                    <Run Text="{Binding Player.CurrentTime,Mode=OneWay,StringFormat=hh\\:mm\\:ss,FallbackValue='00:00:00'}"/>
                                                    <Run>/</Run>
                                                    <Run Text="{Binding Player.TotalTime,Mode=OneWay,StringFormat=hh\\:mm\\:ss,FallbackValue='00:00:00'}"/>
                                                        </TextBlock>
                                                    </Setter.Value>
                                                </Setter>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Recorder.IsRecording}" Value="True">
                                                        <Setter Property="Content">
                                                            <Setter.Value>
                                                                <TextBlock>
                                                    <Run Text="{Binding Recorder.RecordingTime,Mode=OneWay,StringFormat=hh\\:mm\\:ss,FallbackValue='00:00:00'}"/>
                                                                </TextBlock>
                                                            </Setter.Value>
                                                        </Setter>
                                                        <DataTrigger.EnterActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Duration="00:00:01" RepeatBehavior="Forever">
                                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:0.5" Value="0" />
                                                                    </DoubleAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </DataTrigger.EnterActions>
                                                        <DataTrigger.ExitActions>
                                                            <BeginStoryboard>
                                                                <Storyboard>
                                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Duration="00:00:01">
                                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                                    </DoubleAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </BeginStoryboard>
                                                        </DataTrigger.ExitActions>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Label.Style>
                                    </Label>
                                </Grid>

                                <DockPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"  TextElement.FontSize="16" Visibility="{Binding Player.IsPlaying,Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock VerticalAlignment="Center">Speed</TextBlock>
                                        <visuals:Knob Margin="20 0" Width="70" Height="70" TicksHighlightBrush="{StaticResource AccentColorBrush}" TicksWidth="2" TicksHeight="5" Minimum="0.1" Maximum="2" Value="{Binding Player.Speed,Mode=TwoWay}"></visuals:Knob>
                                        <TextBlock VerticalAlignment="Center"><Run>x</Run><Run Text="{Binding Player.Speed,StringFormat=0.0}"></Run></TextBlock>
                                    </StackPanel>
                                </DockPanel>

                                <DockPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"  TextElement.FontSize="16" Visibility="{Binding Recorder.IsRecording,Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <TextBlock DockPanel.Dock="Left">
                                                                            <Run FontWeight="SemiBold" FontStyle="Italic">Total Frames:</Run>
                                                                            <Run FontStyle="Italic" Foreground="#545454" Text="{Binding Recorder.TotalFramesRecorded,StringFormat={}{0:N0},Mode=OneWay,TargetNullValue=0,FallbackValue=0}"></Run>
                                    </TextBlock>
                                    <TextBlock Margin="80 0 0 0" HorizontalAlignment="Right" Width="250">
                                                                            <Run FontWeight="SemiBold" FontStyle="Italic">File Size:</Run>
                                                                            <Run FontStyle="Italic" Foreground="#545454" Text="{Binding Recorder.TotalBytesRecorded,Mode=OneWay,Converter={StaticResource NumberToFileSizeConverter},TargetNullValue=0,FallbackValue=0}"></Run>
                                    </TextBlock>
                                </DockPanel>
                            </Grid>
                            <Slider x:Name="slider" Margin="0 10 20 0" Visibility="{Binding Recorder.IsRecording,Converter={StaticResource BooleanToVisibilityInverseConverter}}" Maximum="{Binding Player.TotalFrames}" Value="{Binding Player.CurrentFrame,Mode=OneWay}">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="PreviewMouseDown">
                                        <i:InvokeCommandAction Command="{Binding MediaSeekHoldCommand}"></i:InvokeCommandAction>
                                    </i:EventTrigger>
                                    <i:EventTrigger EventName="PreviewMouseUp">
                                        <i:InvokeCommandAction Command="{Binding MediaSeekCommand}" CommandParameter="{Binding ElementName=slider,Path=Value}"></i:InvokeCommandAction>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </Slider>
                        </StackPanel>

                        <logging:TimelineView RenderTransformOrigin="0.5,0.5" DataContext="{Binding TimelineViewVM}" Margin="0 0 0 10">
                            <FrameworkElement.Style>
                                <Style TargetType="FrameworkElement">
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="0" ScaleY="0" />
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Player.IsPlaying}" Value="True">
                                            <DataTrigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="00:00:0.2" />
                                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="00:00:0.2" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </DataTrigger.EnterActions>
                                            <DataTrigger.ExitActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="0" Duration="00:00:0.2" />
                                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="0" Duration="00:00:0.2" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </DataTrigger.ExitActions>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </FrameworkElement.Style>
                        </logging:TimelineView>
                    </DockPanel>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</UserControl>