<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>
