VideoPage.xaml 23.7 KB
Newer Older
Nicolas Jager's avatar
Nicolas Jager committed
1 2 3 4 5
<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"
6 7
    xmlns:views="using:RingClientUWP.Views"
    xmlns:ctl="using:RingClientUWP.Controls"
Nicolas Jager's avatar
Nicolas Jager committed
8 9
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10 11
    mc:Ignorable="d"
    NavigationCacheMode="Enabled">
Nicolas Jager's avatar
Nicolas Jager committed
12 13

    <Page.Resources>
14
        <SolidColorBrush x:Key="SemiTransparentBlack" Color="#808080" Opacity="0.5"/>
Nicolas Jager's avatar
Nicolas Jager committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
        <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>
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
        <!-- bubble -->
        <views:BubbleBackground x:Key="_bubbleBackground_" />
        <views:BubbleHorizontalAlignement x:Key="_bubbleHorizontalAlignement_" />
        <DataTemplate x:Key="ConversationMessageTemplate"
                      x:DataType="local:ConversationMessage">
            <Grid Margin="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"
                                   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="LightBlue"
                                    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="LightBlue"
                                    Content="&#xE122;"
                                    IsTabStop="False"
                                    Grid.Column="1"
                                    Click="_sendBtn__Click"
                                    Visibility="Visible"
                                    MinWidth="34"
                                    FontSize="20"
                                    VerticalAlignment="Stretch"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
Nicolas Jager's avatar
Nicolas Jager committed
128 129 130 131 132 133 134
    </Page.Resources>

    <SplitView x:Name="_videoSplitView_" IsPaneOpen="False" OpenPaneLength="400" PanePlacement="Right">
        <SplitView.Pane>
            <Frame x:Name="_chatPanel_"/>
        </SplitView.Pane>
        <SplitView.Content>
135 136 137 138 139
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition x:Name="_rowChatBx_" Height="0"/>
                </Grid.RowDefinitions>
atraczyk's avatar
atraczyk committed
140 141 142
                <Grid   Background="#000000"
                        Grid.Row="0"
                        PointerMoved="_videoControl__PointerMoved">
143
                    <StackPanel x:Name="_headerBar_"
atraczyk's avatar
atraczyk committed
144 145 146 147 148 149 150 151
                                Background="{StaticResource SemiTransparentBlack}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Top"
                                Height="50">
                        <TextBlock  x:Name="_callee_"
                                    Text="callee"
                                    Foreground="White"
                                    Margin="20,10"/>
152
                    </StackPanel>
atraczyk's avatar
atraczyk committed
153 154 155 156 157 158 159 160 161 162 163 164 165 166

                    <!-- video -->
                    <Image Name="IncomingVideoImage"
                           Grid.Column="0"
                           Canvas.ZIndex="-1"/>

                    <!--camera preview-->
                    <CaptureElement Name="PreviewImage"
                                    Width="200"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Right"
                                    Stretch="Uniform"
                                    Grid.Column="0"/>

167
                    <StackPanel x:Name="_controlsBar_"
Nicolas Jager's avatar
Nicolas Jager committed
168 169 170
                            HorizontalAlignment="Center"
                            VerticalAlignment="Bottom"
                            Orientation="Horizontal">
171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
                        <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"
189
                                                                                           Storyboard.TargetName="ContentPresenter">
190
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
191
                                                                                        Value="Gray"/>
192 193
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
194
                                                                                           Storyboard.TargetName="ContentPresenter">
195
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
196
                                                                                        Value="White"/>
197 198
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
199
                                                                                           Storyboard.TargetName="ContentPresenter">
200
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
201
                                                                                        Value="White"/>
202 203 204 205 206 207
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Normal">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
208
                                                                                           Storyboard.TargetName="ContentPresenter">
209
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
210
                                                                                        Value="Black"/>
211 212
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
213
                                                                                           Storyboard.TargetName="ContentPresenter">
214
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
215
                                                                                        Value="White"/>
216 217
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
218
                                                                                           Storyboard.TargetName="ContentPresenter">
219
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
220
                                                                                        Value="Gray"/>
221 222 223 224 225 226 227
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
228
                                                                                           Storyboard.TargetName="ContentPresenter">
229
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
230
                                                                                        Value="White"/>
231 232
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
233
                                                                                           Storyboard.TargetName="ContentPresenter">
234
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
235
                                                                                        Value="Black"/>
236 237
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
238
                                                                                           Storyboard.TargetName="ContentPresenter">
239
                                                                    <DiscreteObjectKeyFrame KeyTime="0"
240
                                                                                        Value="Gray"/>
241 242 243 244 245 246 247
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <ContentPresenter x:Name="ContentPresenter"
248 249 250 251 252 253 254 255 256
                                                              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}"/>
257 258 259 260 261 262
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </StackPanel.Resources>
Nicolas Jager's avatar
Nicolas Jager committed
263

264
                        <Button x:Name="_btnHangUp_"
Nicolas Jager's avatar
Nicolas Jager committed
265 266 267
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
                            Tapped="_btnHangUp__Tapped">
268 269 270
                            <SymbolIcon Symbol="HangUp"/>
                        </Button>
                        <Button x:Name="_btnPause_"
Nicolas Jager's avatar
Nicolas Jager committed
271 272
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
273
                            Tapped="_btnPause__Tapped" Visibility="Collapsed">
274 275 276
                            <SymbolIcon Symbol="Pause"/>
                        </Button>
                        <Button x:Name="_btnChat_"
Nicolas Jager's avatar
Nicolas Jager committed
277 278 279
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
                            Tapped="_btnChat__Tapped">
280 281 282
                            <SymbolIcon Symbol="Message" HorizontalAlignment="Left" Width="20"/>
                        </Button>
                        <Button x:Name="_btnAddFriend_"
Nicolas Jager's avatar
Nicolas Jager committed
283 284
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
285
                            Tapped="_btnAddFriend__Tapped" Visibility="Collapsed">
286 287 288
                            <SymbolIcon Symbol="AddFriend"/>
                        </Button>
                        <Button x:Name="_btnSwitch_"
Nicolas Jager's avatar
Nicolas Jager committed
289 290
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
291
                            Tapped="_btnSwitch__Tapped" Visibility="Collapsed">
292 293 294
                            <SymbolIcon Symbol="Switch"/>
                        </Button>
                        <Button x:Name="_btnMicrophone_"
Nicolas Jager's avatar
Nicolas Jager committed
295 296
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
297
                            Tapped="_btnMicrophone__Tapped" Visibility="Collapsed">
298 299 300
                            <SymbolIcon Symbol="Microphone"/>
                        </Button>
                        <Button x:Name="_btnVideo_"
Nicolas Jager's avatar
Nicolas Jager committed
301 302
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
303
                            Tapped="_btnVideo__Tapped" Visibility="Collapsed">
304 305 306
                            <SymbolIcon Symbol="Video"/>
                        </Button>
                        <Button x:Name="_btnMemo_"
Nicolas Jager's avatar
Nicolas Jager committed
307 308
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
309
                            Tapped="_btnMemo__Tapped" Visibility="Collapsed">
310 311 312
                            <SymbolIcon Symbol="Memo"/>
                        </Button>
                        <Button x:Name="_btnHQ_"
Nicolas Jager's avatar
Nicolas Jager committed
313 314
                            PointerEntered="btnAny_entered"
                            PointerExited="btnAny_exited"
315
                            Tapped="_btnHQ__Tapped" Visibility="Collapsed">
316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353
                            <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">
                            <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>
Nicolas Jager's avatar
Nicolas Jager committed
354 355 356
            </Grid>
        </SplitView.Content>
    </SplitView>
357
</Page>