blob: 5a13ca7bf3df281b0b0e97fbd55953db7fbe8a39 [file] [log] [blame]
<!-- **********************************************************************
* Copyright (C) 2016 by Savoir-faire Linux *
* Author: Jäger Nicolas<nicolas.jager@savoirfairelinux.com> *
* Author: Traczyk Andreas<andreas.traczyk@savoirfairelinux.com> *
* *
* This program is free software; you can redistribute it and/or modify *
* it under the terms of the GNU General Public License as published by *
* the Free Software Foundation; either version 3 of the License, or *
* (at your option) any later version. *
* *
* This program is distributed in the hope that it will be useful, *
* but WITHOUT ANY WARRANTY; without even the implied warranty of *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
* GNU General Public License for more details. *
* *
* You should have received a copy of the GNU General Public License *
* along with this program. If not, see <http://www.gnu.org/licenses/> . *
*********************************************************************** -->
<Page
x:Class="RingClientUWP.Views.VideoPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RingClientUWP"
xmlns:views="using:RingClientUWP.Views"
xmlns:ctl="using:RingClientUWP.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
NavigationCacheMode="Enabled">
<Page.Resources>
<SolidColorBrush x:Key="SemiTransparentBlack" Color="#808080" Opacity="0.5"/>
<Storyboard x:Name="myStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_controlsBar_"
Storyboard.TargetProperty="Opacity"
Duration="0:0:4">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_headerBar_"
Storyboard.TargetProperty="Opacity"
Duration="0:0:4">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!-- bubble -->
<views:BubbleBackground x:Key="_bubbleBackground_" />
<views:BubbleHorizontalAlignement x:Key="_bubbleHorizontalAlignement_" />
<DataTemplate x:Key="ConversationMessageTemplate"
x:DataType="local:ConversationMessage">
<Grid Margin="6,0,12,0"
HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Border Background="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
CornerRadius="10"
Grid.Column="1"
Width="auto"
Height="auto"
Padding="5"
Margin="5" >
<ContentPresenter>
<!--Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."-->
<TextBlock x:Name="_msgContent_"
TextWrapping="Wrap"
IsTextSelectionEnabled="True"
Text="{x:Bind Payload}"
Foreground="White"/>
</ContentPresenter>
</Border>
</Grid>
</DataTemplate>
<!-- barre d'envoi de message -->
<Style TargetType="TextBox">
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="white" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="Padding" Value="4,4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border x:Name="BackgroundElement"
Grid.Row="1"
Background="{TemplateBinding Background}"
Margin="{TemplateBinding BorderThickness}"
Opacity="1"
Grid.ColumnSpan="2"
BorderBrush="#3bc1d3"
BorderThickness="1"
Grid.RowSpan="1"/>
<ScrollViewer x:Name="ContentElement"
Grid.Row="1"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
Margin="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
IsTabStop="False"
AutomationProperties.AccessibilityView="Raw"
ZoomMode="Disabled" />
<Button x:Name="_sendBtn_"
Background="Transparent"
Grid.Row="1"
FontFamily="Segoe MDL2 Assets"
Foreground="#3bc1d3"
Content="&#xE122;"
IsTabStop="False"
Grid.Column="1"
Click="_sendBtn__Click"
Visibility="Visible"
MinWidth="34"
FontSize="20"
VerticalAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<SplitView x:Name="_videoSplitView_" IsPaneOpen="False" OpenPaneLength="400" PanePlacement="Right">
<SplitView.Pane>
<Frame x:Name="_chatPanel_"/>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition x:Name="_rowChatBx_" Height="0"/>
</Grid.RowDefinitions>
<Grid Background="#000000"
Grid.Row="0"
PointerMoved="_videoControl__PointerMoved">
<StackPanel x:Name="_headerBar_"
Background="{StaticResource SemiTransparentBlack}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Height="50">
<TextBlock x:Name="_callee_"
Text="callee"
Foreground="White"
Margin="20,10"/>
</StackPanel>
<!-- video -->
<Image Name="IncomingVideoImage"
Grid.Column="0"
Canvas.ZIndex="-1"/>
<TextBlock Name="_callPaused_"
Grid.Column="0"
Text="&#xE769;"
Foreground="White"
FontSize="200"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
Visibility="Collapsed"
Canvas.ZIndex="-1"/>
<!--camera preview-->
<CaptureElement Name="PreviewImage"
Width="200"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Stretch="Uniform"
Grid.Column="0"/>
<StackPanel x:Name="_controlsBar_"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="10,30"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Gray"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Gray"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Black"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Gray"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
AutomationProperties.AccessibilityView="Raw"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button x:Name="_btnHangUp_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnHangUp__Tapped">
<SymbolIcon Symbol="HangUp"/>
</Button>
<Button x:Name="_btnPause_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnPause__Tapped">
<SymbolIcon Symbol="Pause"/>
</Button>
<Button x:Name="_btnChat_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnChat__Tapped">
<SymbolIcon Symbol="Message" HorizontalAlignment="Left" Width="20"/>
</Button>
<Button x:Name="_btnAddFriend_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnAddFriend__Tapped" Visibility="Collapsed">
<SymbolIcon Symbol="AddFriend"/>
</Button>
<Button x:Name="_btnSwitch_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnSwitch__Tapped" Visibility="Collapsed">
<SymbolIcon Symbol="Switch"/>
</Button>
<!--Tapped="_btnMicrophone__Tapped"-->
<Button x:Name="_btnMicrophone_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Click="_btnMicrophone__Click">
<Grid>
<SymbolIcon Symbol="Microphone"/>
<TextBlock x:Name="_txbkMicrophoneMuted_"
Text="&#xE25B;"
FontSize="16"
IsHitTestVisible="True"
Visibility="Collapsed"
Foreground="Red"
FontWeight="Bold"
FontFamily="Segoe MDL2 Assets">
<TextBlock.RenderTransform>
<TranslateTransform X="1" Y="2"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Button>
<!--Tapped="_btnVideo__Tapped"-->
<Button x:Name="_btnVideo_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Click="_btnVideo__Click">
<Grid>
<SymbolIcon Symbol="Video"/>
<TextBlock x:Name="_txbkVideoMuted_"
Text="&#xE25B;"
FontSize="16"
IsHitTestVisible="True"
Visibility="Collapsed"
Foreground="Red"
FontWeight="Bold"
FontFamily="Segoe MDL2 Assets">
<TextBlock.RenderTransform>
<TranslateTransform X="1" Y="2"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Button>
<Button x:Name="_btnMemo_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnMemo__Tapped" Visibility="Collapsed">
<SymbolIcon Symbol="Memo"/>
</Button>
<Button x:Name="_btnHQ_"
PointerEntered="btnAny_entered"
PointerExited="btnAny_exited"
Tapped="_btnHQ__Tapped" Visibility="Collapsed">
<TextBlock FontSize="12" Text="HQ"/>
</Button>
</StackPanel>
</Grid>
<!-- in call chat box -->
<Grid Grid.Row="1">
<Grid Background="#FFF2F2F2">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*"/>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="_scrollView_"
Grid.Row="1"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListBox x:Name="_messagesList_"
Margin="0"
Padding="0"
ItemContainerStyle="{StaticResource messageBubleStyle}"
ItemTemplate="{StaticResource ConversationMessageTemplate}">
</ListBox>
</StackPanel>
</ScrollViewer>
<Grid Height="50"
Grid.Row="2"
Margin="0"
Padding="0"
Background="#FFF2F2F2">
<TextBox x:Name="_messageTextBox_"
HorizontalAlignment="Stretch"
TextWrapping="NoWrap"
VerticalAlignment="Bottom"
Margin="10"
Background="White"
KeyDown="_messageTextBox__KeyDown"/>
</Grid>
</Grid>
</Grid>
</Grid>
</SplitView.Content>
</SplitView>
</Page>