Video player controls fade & player initializaing development started

FoxTube/FoxTube.csproj

@@ -302,6 +302,9 @@
     <PackageReference Include="Microsoft.Toolkit.Uwp.Notifications">
       <Version>2.2.0</Version>
     </PackageReference>
+    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls">
+      <Version>3.0.0</Version>
+    </PackageReference>
     <PackageReference Include="runtime.win10-arm64.runtime.native.System.IO.Compression">
       <Version>4.3.1</Version>
     </PackageReference>

FoxTube/MainPage.xaml.cs

@@ -386,7 +386,7 @@ namespace FoxTube
             XmlDocument doc = new XmlDocument();
             await Task.Run(() =>
             {
-                doc.Load(string.Format("http://suggestqueries.google.com/complete/search?output=toolbar&hl={0}&q={1}", "en", keyword));
+                doc.Load(string.Format("http://suggestqueries.google.com/complete/search?output=toolbar&hl={0}&q={1}", (settings.Values["region"] as string)[1] + (settings.Values["region"] as string)[2], keyword));
             });
 
             for (int k = 0; k < 5; k++)

FoxTube/VideoPlayer.xaml

@@ -12,10 +12,10 @@
     Tapped="UserControl_Tapped"
     PointerMoved="UserControl_PointerMoved">
 
-    <Grid>
+    <Grid Background="White">
-        <StackPanel Background="White"/>
+        <MediaElement AutoPlay="False" Name="videoSource" AreTransportControlsEnabled="False" PosterSource="ms-appx:///Assets/videoThumbSample.png"/>
         <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 Name="controls" Visibility="Visible">
             <Grid.RowDefinitions>
                 <RowDefinition Height="100"/>
                 <RowDefinition/>
@@ -25,7 +25,7 @@
                 <Grid.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                         <GradientStop Color="Black"/>
-                        <GradientStop Color="White" Offset="1"/>
+                        <GradientStop Color="Transparent" Offset="1"/>
                     </LinearGradientBrush>
                 </Grid.Background>
                 <Grid.RowDefinitions>
@@ -39,7 +39,7 @@
                         <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"/>
+                    <TextBlock Name="title" 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"/>
@@ -49,7 +49,7 @@
             <Grid Grid.Row="2">
                 <Grid.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
-                        <GradientStop Color="White"/>
+                        <GradientStop Color="Transparent"/>
                         <GradientStop Color="Black" Offset="1"/>
                     </LinearGradientBrush>
                 </Grid.Background>
@@ -120,7 +120,7 @@
                 </Grid>
             </Grid>
         </Grid>
-        <Grid Background="Gray" Name="meteredNotification">
+        <Grid Background="Gray" Name="meteredNotification" Visibility="Collapsed">
             <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                 <FontIcon FontFamily="Segoe MDL2 Assets" FontSize="72" Foreground="White" Glyph="&#xE8C7;"/>
                 <TextBlock Text="You are on a metered connection now. Additional charges may apply." FontSize="22" Foreground="White"/>

FoxTube/VideoPlayer.xaml.cs

@@ -15,6 +15,11 @@ using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
+using Microsoft.Toolkit.Uwp.UI.Animations;
+
+using Google.Apis.YouTube.v3.Data;
+using Google.Apis.YouTube.v3;
+using Windows.UI.Xaml.Media.Imaging;
 
 // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
 
@@ -22,24 +27,34 @@ namespace FoxTube
 {
     public sealed partial class VideoPlayer : UserControl
     {
+        public string videoId;
         ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;
-        Timer t = new Timer();
+        Timer t = new Timer()
+        {
+            Interval = 5000,
+            Enabled = true
+        };
 
         public VideoPlayer()
         {
             this.InitializeComponent();
-            try
+
-            {
+            volume.Value = Convert.ToDouble(settings.Values["volume"]);
-                volume.Value = (double)settings.Values["volume"];
-            }
-            catch
-            {
-                if (settings.Values["volume"] == null)
-                    settings.Values.Add("volume", (double)100);
-                else settings.Values["volume"] = (double)100;
-            }
             t.Elapsed += T_Elapsed;
-            UserControl_Tapped(this, null);
+        }
+
+        public async void Initialize(string id)
+        {
+            videoId = id;
+            VideosResource.ListRequest request = SecretsVault.YoutubeService.Videos.List("snippet,contentDetails,statistics");
+            request.Id = id;
+
+            VideoListResponse response = await request.ExecuteAsync();
+
+            var item = response.Items[0];
+
+            videoSource.PosterSource = new BitmapImage(new Uri(item.Snippet.Thumbnails.Maxres.Url));
+            //videoSource.Source = new Uri(item.FileDetails.)
         }
 
         private async void T_Elapsed(object sender, ElapsedEventArgs e)
@@ -47,12 +62,16 @@ namespace FoxTube
             await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, Elapsed);
         }
 
-        void Elapsed()
+        async void Elapsed()
         {
-            volumePane.IsOpen = false;
+            if(!volumePane.IsOpen && !qualityPane.IsOpen)
-            qualityPane.IsOpen = false;
+            {
-            controls.Visibility = Visibility.Collapsed;
+                await controls.Fade().StartAsync();
-            t.Stop();
+                volumePane.IsOpen = false;
+                qualityPane.IsOpen = false;
+                controls.Visibility = Visibility.Collapsed;
+                t.Stop();
+            }
         }
 
         private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
@@ -106,16 +125,25 @@ namespace FoxTube
 
         private void UserControl_Tapped(object sender, TappedRoutedEventArgs e)
         {
-            controls.Visibility = Visibility.Visible;
+            if (t.Enabled)
-            t.Interval = 5000;
+                Elapsed();
-            t.Stop();
+            else
-            t.Start();
+                ShowControls();
         }
 
         private void UserControl_PointerMoved(object sender, PointerRoutedEventArgs e)
         {
-            controls.Visibility = Visibility.Visible;
+            if(!volumePane.IsOpen && !qualityPane.IsOpen)
-            t.Interval = 3000;
+                ShowControls();
+        }
+
+        async void ShowControls()
+        {
+            if(controls.Visibility == Visibility.Collapsed)
+            {
+                controls.Visibility = Visibility.Visible;
+                await controls.Fade(value: 1).StartAsync();
+            }
             t.Stop();
             t.Start();
         }