FoxTube/FoxTube/VideoPlayer.xaml

<UserControl
    x:Class="FoxTube.VideoPlayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FoxTube"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="1080"
    d:DesignWidth="1920"
    SizeChanged="UserControl_SizeChanged"
    Tapped="UserControl_Tapped"
    PointerMoved="UserControl_PointerMoved">

    <Grid>
        <StackPanel Background="White"/>
        <TextBox Name="subtitleCapture" Visibility="Collapsed" Text="This is subtitle capture" Background="#99000000" VerticalAlignment="Bottom" HorizontalAlignment="Center" Foreground="White" FontSize="24" Padding="10" Margin="0,0,0,100"/>
        <Grid Name="controls" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition/>
                <RowDefinition Height="100"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Grid.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE099;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Minimize"/>
                    <TextBlock Grid.Column="1" Text="This is Video title" Foreground="White" VerticalAlignment="Center" TextWrapping="WrapWholeWords" FontSize="20" Margin="10,0,0,0" MaxLines="1" ToolTipService.ToolTip="Title"/>
                    <StackPanel Orientation="Horizontal" Grid.Column="2">
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xEC15;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Cast to device"/>
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE2B3;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Picture-in-picture mode"/>
                    </StackPanel>
                </Grid>
            </Grid>
            <Grid Grid.Row="2">
                <Grid.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White"/>
                        <GradientStop Color="Black" Offset="1"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="252"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal">
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE768;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Play"/>
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE101;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Next video"/>
                        <Button Name="openVolume" Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE995;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Volume" Click="openVolume_Click"/>
                    </StackPanel>
                    <Popup Grid.Column="0" Margin="100,-200,50,0" IsOpen="False" IsLightDismissEnabled="True" Name="volumePane">
                        <StackPanel Background="#7F000000" Width="50" Height="200">
                            <Slider Orientation="Vertical" HorizontalAlignment="Center" Height="135" Margin="5,10,10,5" Name="volume" ValueChanged="volume_ValueChanged"/>
                            <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE995;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Mute" Name="muteBtn" Click="muteBtn_Click"/>
                        </StackPanel>
                    </Popup>

                    <TextBlock Foreground="White" Text="18:28" VerticalAlignment="Bottom" Grid.Column="1" HorizontalAlignment="Left" Margin="10,0,10,0" ToolTipService.ToolTip="Time elapsed"/>
                    <TextBlock Foreground="White" Text="18:28" VerticalAlignment="Bottom" Grid.Column="1" HorizontalAlignment="Right" Margin="10,0,10,0" ToolTipService.ToolTip="Time remaining"/>
                    <Slider Grid.Column="1" VerticalAlignment="Top" Margin="10,0,10,0" ToolTipService.ToolTip="Seek" IsThumbToolTipEnabled="False"/>
                    
                    <StackPanel Grid.Column="2" Orientation="Horizontal">
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xED3C;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Skip back for 10 seconds"/>
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xED3D;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Skip forward for 30 seconds"/>
                        
                        <Line Stroke="White" StrokeThickness="2" Y1="5" Y2="45"/>
                        
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE190;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Subtitles" Name="openSubs" Click="openSubs_Click"/>
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE713;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Video quality" Name="openSets" Click="openSets_Click"/>
                        <Button Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE740;" Foreground="White" Width="50" Height="50" FontSize="25" ToolTipService.ToolTip="Full screen"/>
                    </StackPanel>

                    <Popup Grid.Column="2" Margin="0,-100,50,0" IsOpen="False" IsLightDismissEnabled="True" Name="subsPane">
                        <StackPanel Background="#7F000000" Width="252" Height="100" Padding="10">
                            <ToggleSwitch Name="subsSwitch" Foreground="White" OffContent="Show subtitles" OnContent="Show subtitles"/>
                            <ComboBox Width="232" PlaceholderText="No subtitles are available"/>
                        </StackPanel>
                    </Popup>

                    <Popup Grid.Column="2" IsOpen="False" Margin="0,-73,0,0" IsLightDismissEnabled="True" Name="qualityPane">
                        <StackPanel Background="#7F000000" Width="252" Padding="10">
                            <TextBlock Text="Quality" Foreground="White"/>
                            <Line X1="0" X2="232" Stroke="White" StrokeThickness="2"/>
                            <ComboBox Width="232">
                                <ComboBoxItem Content="Auto"/>
                                <ComboBoxItem Content="4320p"/>
                                <ComboBoxItem Content="2160p"/>
                                <ComboBoxItem Content="1440p"/>
                                <ComboBoxItem Content="1080p60"/>
                                <ComboBoxItem Content="1080p30"/>
                                <ComboBoxItem Content="720p60"/>
                                <ComboBoxItem Content="720p30"/>
                                <ComboBoxItem Content="480p"/>
                                <ComboBoxItem Content="360p"/>
                                <ComboBoxItem Content="240p"/>
                                <ComboBoxItem Content="144p"/>
                            </ComboBox>
                        </StackPanel>
                    </Popup>
                </Grid>
            </Grid>
        </Grid>
        <Grid Background="#FF333333" Padding="25">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <StackPanel>
                <TextBlock Text="Warning! Mature content!" Foreground="White" FontSize="30"/>
                <Line Stroke="White" StrokeThickness="2" X1="0" X2="350"/>
            </StackPanel>
            <Grid Name="proceedMature" Visibility="Collapsed" Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock TextWrapping="WrapWholeWords" Foreground="White" Text="This content isn't advised for children. It can represent violance, blood or sexual scenes." FontSize="20"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="1" VerticalAlignment="Bottom">
                    <CheckBox Foreground="White">
                        <TextBlock Foreground="White" Text="Don't show me it again"/>
                    </CheckBox>
                    <Button Content="Continue" Margin="5,0,0,0" Foreground="White" Background="Gray"/>
                </StackPanel>
            </Grid>
            <Grid BorderBrush="OrangeRed" BorderThickness="5" Margin="0,10,0,0" Visibility="Visible" Name="signReq" Grid.Row="1" VerticalAlignment="Top">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE192;" FontSize="40" Foreground="OrangeRed" Margin="5"/>
                <StackPanel HorizontalAlignment="Stretch" Grid.Column="1">
                    <TextBlock Text="Sign in into your account to continue" Foreground="OrangeRed" FontWeight="Bold" FontSize="20"/>
                    <TextBlock Text="To watch this video you have to prove your age by sign in into your account which contains your age" Foreground="OrangeRed"/>
                </StackPanel>
                <Button Content="Sign in now" Foreground="White" Background="Gray" HorizontalAlignment="Right" Grid.Column="1" Margin="0,0,10,0"/>
            </Grid>
            <StackPanel Orientation="Horizontal" BorderBrush="OrangeRed" BorderThickness="5" Visibility="Collapsed" Margin="0,10,0,0" Name="denied" Grid.Row="1" VerticalAlignment="Top">
                <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xEB90;" FontSize="40" Foreground="OrangeRed" Margin="5"/>
                <StackPanel>
                    <TextBlock Text="Access denied" Foreground="OrangeRed" FontWeight="Bold" FontSize="20"/>
                    <TextBlock Text="Your age is below 18. Come back later." Foreground="OrangeRed"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>