Ads development

FoxTube/Assets/Data/Patchnotes.xml

@@ -1,21 +1,11 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <items>
-  <item time="2019-01-03" version="0.2.19011">
+  <item time="2019-01-05" version="0.2.19012">
     <content>
       <en-US>### What's new:
 
-- Loading thumbnail for cards in max resolution
+- Adverts are added (in items grid, in comments and chat)
-- Missynchronization fixed. Supporting all existing qualities
+- Long channel names on crads fixed
-- Livestreams support (including chat and live stats update)
-- Player fixes
-- New logo is added
-- Wrong elapsed and remaining displaying (if time span is greater than 1 hr) time fixed
-- Russian localization updated
-- Context menu for items cards
-- Small bug fixes
-- Settings storage system updated
-- Changelogs now will be here
-- Changelogs are multilingual now
 
 ### Known issues:
 
@@ -27,18 +17,8 @@
       </en-US>
       <ru-RU>### Что нового:
 
-- По умолчанию для карточек загружается максимальное разрешение картинки
+- Добавлена реклама (в сетку карточек, в комментарии и в чат)
-- Пофикшен рассинхрон и теперь поддерживаются все возможные разрешения
+- Исправлен баг с длинными именами каналов на карточках
-- Добавлена поддержка прямого эфира (включая чат и обновление зрителей в реальном времени)
-- Пофикшен плеер
-- Добавлен новый логотип
-- Исправлен баг неправильного отображения оставшегося времени если осталось больше часа
-- Обновлена локализация
-- Контекстное меню карточек
-- Мелкие багфиксы
-- Обновлена система хранения настроек
-- Теперь чейнджлоги будут здесь, а не в файле
-- Чейнджлог теперь ведется на двух языках
 
 ### Что по-прежнему не работает:
 

FoxTube/Classes/Methods.cs

@@ -1,5 +1,7 @@
-using FoxTube.Pages;
+using FoxTube.Controls.Adverts;
+using FoxTube.Pages;
 using Google.Apis.YouTube.v3;
+using Microsoft.Advertising.WinRT.UI;
 using System;
 using System.Collections.Generic;
 using System.Diagnostics;
@@ -34,6 +36,18 @@ namespace FoxTube
             get { return (Window.Current.Content as Frame).Content as MainPage; }
         }
 
+        public static CardAdvert CardAdvert { get; private set; }
+
+        public static void InitializeAds()
+        {
+            NativeAdsManagerV2 manager = new NativeAdsManagerV2(SecretsVault.AppId, SecretsVault.AdUnitId);
+            manager.AdReady += (s, e) =>
+            {
+                card = new CardAdvert(e.NativeAd);
+                e.NativeAd.RegisterAdContainer(card);
+            };
+        }
+
         public static void CloseApp()
         {
             CoreApplication.Exit();

FoxTube/Classes/SecretsVault.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Threading;
 using System.Threading.Tasks;
+using FoxTube.Controls.Adverts;
 using Google.Apis.Auth.OAuth2;
 using Google.Apis.Services;
 using Google.Apis.YouTube.v3;
@@ -36,6 +37,8 @@ namespace FoxTube
             ApplicationName = "FoxTube"
         };
         public static YouTubeService Service => IsAuthorized ? new YouTubeService(Initializer) : NoAuthService;
+        public static string AppId => "d25517cb-12d4-4699-8bdc-52040c712cab";
+        public static string AdUnitId => "test";
         public static bool AdsDisabled { get; private set; } = true;
 
         //User info

FoxTube/Controls/Adverts/CardAdvert.xaml

@@ -0,0 +1,44 @@
+<UserControl
+    x:Class="FoxTube.Controls.Adverts.CardAdvert"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    HorizontalAlignment="Stretch"
+    VerticalAlignment="Top"
+    SizeChanged="UserControl_SizeChanged"
+    d:DesignHeight="290"
+    d:DesignWidth="384">
+
+    <Button Padding="0" Background="Transparent" Name="btn">
+        <Grid Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="75"/>
+            </Grid.RowDefinitions>
+            <Image Name="image" Source="/Assets/videoThumbSample.png" Stretch="Fill"/>
+            <StackPanel Margin="0,0,5,5" Background="Orange" VerticalAlignment="Bottom" BorderBrush="OrangeRed" BorderThickness="1" HorizontalAlignment="Right" Padding="5,2,5,3">
+                <TextBlock Name="info" Text="SPONSORED CONTENT" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Gray" FontSize="12"/>
+            </StackPanel>
+            <Grid Grid.Row="1">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="20"/>
+                    <RowDefinition Height="55"/>
+                </Grid.RowDefinitions>
+                <Grid Name="contentGrid">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="60"/>
+                        <ColumnDefinition/>
+                    </Grid.ColumnDefinitions>
+                    <Ellipse Grid.Column="0" Height="50" Width="50" Margin="5,-30,5,10" Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
+                    <PersonPicture Name="icon" Grid.Column="0" Height="46" Margin="5,-30,5,0" BorderBrush="White" BorderThickness="10"/>
+
+                    <TextBlock Name="sponsor" HorizontalAlignment="Left" Grid.Column="1" Text="[Sponsored by]" TextTrimming="CharacterEllipsis" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
+                    <TextBlock Grid.Column="1" Name="desc" Text="[Description]" HorizontalAlignment="Right" Foreground="Gray" Margin="0,2,2,0" FontSize="12"/>
+                </Grid>
+                <TextBlock Grid.Row="1" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" Margin="5" MaxLines="2" TextTrimming="CharacterEllipsis"/>
+            </Grid>
+        </Grid>
+    </Button>
+</UserControl>

FoxTube/Controls/Adverts/CardAdvert.xaml.cs

@@ -0,0 +1,53 @@
+using System.Linq;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Microsoft.Advertising.WinRT.UI;
+using Windows.UI.Xaml.Media.Imaging;
+using System.Diagnostics;
+
+namespace FoxTube.Controls.Adverts
+{
+    /// <summary>
+    /// Advert which is looks similar to video cards
+    /// </summary>
+    public sealed partial class CardAdvert : UserControl
+    {
+        NativeAdV2 advert;
+        public CardAdvert(NativeAdV2 ad)
+        {
+            InitializeComponent();
+            advert = ad;
+            Initialize();
+        }
+
+        public void Initialize()
+        {
+            title.Text = advert.Title;
+            image.Source = new BitmapImage(advert.MainImages.First().Url.ToUri());
+            if (advert.AdIcon == null)
+                contentGrid.ColumnDefinitions[0].Width = new GridLength(0);
+            else
+                icon.ProfilePicture = advert.AdIcon.Source;
+
+            if (string.IsNullOrWhiteSpace(advert.SponsoredBy))
+                sponsor.Visibility = Visibility.Collapsed;
+            else
+                sponsor.Text = advert.SponsoredBy;
+
+            if (!string.IsNullOrWhiteSpace(advert.Rating))
+                info.Text += $" {advert.Rating}";
+
+            if (string.IsNullOrWhiteSpace(advert.CallToActionText) && string.IsNullOrWhiteSpace(advert.Price))
+                desc.Visibility = Visibility.Collapsed;
+            else if (!string.IsNullOrWhiteSpace(advert.CallToActionText))
+                desc.Text = advert.CallToActionText;
+            else
+                desc.Text = advert.Price;
+        }
+
+        private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            Height = e.NewSize.Width * 0.75;
+        }
+    }
+}

FoxTube/Controls/ChannelCard.xaml

@@ -36,7 +36,7 @@
                     <Ellipse Height="80" Width="80" Margin="0,-45,0,0" VerticalAlignment="Bottom" Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
                     <PersonPicture Name="avatar" Grid.Column="0" Height="74" Margin="3,-45,3,3" VerticalAlignment="Bottom" BorderBrush="White" BorderThickness="10"/>
 
-                    <TextBlock Name="title" Grid.Column="1" Text="[Channel name]" Margin="5" TextWrapping="WrapWholeWords" MaxLines="2"/>
+                    <TextBlock Name="title" Grid.Column="1" Text="[Channel name]" Margin="5" TextWrapping="WrapWholeWords" MaxLines="2" TextTrimming="CharacterEllipsis"/>
                     <StackPanel Grid.Column="2" Margin="5">
                         <TextBlock Name="subs" Text="[Subscribers counter]" Foreground="Gray"/>
                         <TextBlock Name="uploads" Text="[Uploads counter]" Foreground="Gray"/>

FoxTube/Controls/PlaylistCard.xaml

@@ -41,10 +41,10 @@
                     <Ellipse Grid.Column="0" Height="50" Width="50" Margin="5,-30,5,10" Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
                     <PersonPicture Name="avatar" Grid.Column="0" Height="46" Margin="5,-30,5,0" BorderBrush="White" BorderThickness="10"/>
 
-                    <TextBlock Name="channelName" Grid.Column="1" Text="[Channel name]" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
+                    <TextBlock HorizontalAlignment="Left" MaxWidth="200" TextTrimming="CharacterEllipsis" Name="channelName" Grid.Column="1" Text="[Channel name]" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
                     <TextBlock Grid.Column="1" Name="date" Text="[Published at]" HorizontalAlignment="Right" Foreground="Gray" Margin="0,2,2,0" FontSize="12"/>
                 </Grid>
-                <TextBlock Grid.Row="1" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" Margin="5" MaxLines="2"/>
+                <TextBlock Grid.Row="1" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" TextTrimming="CharacterEllipsis" Margin="5" MaxLines="2"/>
             </Grid>
         </Grid>
     </Button>

FoxTube/Controls/VideoCard.xaml

@@ -44,10 +44,10 @@
                     <Ellipse Grid.Column="0" Height="50" Width="50" Margin="5,-30,5,10" Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
                     <PersonPicture Name="avatar" Grid.Column="0" Height="46" Margin="5,-30,5,0" BorderBrush="White" BorderThickness="10"/>
 
-                    <TextBlock Name="channelName" Grid.Column="1" Text="[Channel name]" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
+                    <TextBlock MaxWidth="200" Name="channelName" HorizontalAlignment="Left" Grid.Column="1" Text="[Channel name]" TextTrimming="CharacterEllipsis" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
                     <TextBlock Grid.Column="1" Name="views" Text="[Views]" HorizontalAlignment="Right" Foreground="Gray" Margin="0,2,2,0" FontSize="12"/>
                 </Grid>
-                <TextBlock Grid.Row="1" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" Margin="5" MaxLines="2"/>
+                <TextBlock Grid.Row="1" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" Margin="5" MaxLines="2" TextTrimming="CharacterEllipsis"/>
             </Grid>
         </Grid>
     </Button>

FoxTube/FoxTube.csproj

@@ -112,6 +112,9 @@
     <Compile Include="Controls\Advert.xaml.cs">
       <DependentUpon>Advert.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\Adverts\CardAdvert.xaml.cs">
+      <DependentUpon>CardAdvert.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\ChannelCard.xaml.cs">
       <DependentUpon>ChannelCard.xaml</DependentUpon>
     </Compile>
@@ -283,6 +286,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\Adverts\CardAdvert.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\ChannelCard.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

FoxTube/Pages/VideoGrid.xaml.cs

@@ -1,39 +1,24 @@
-using System;
+using FoxTube.Controls.Adverts;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
-using Windows.UI.Xaml.Navigation;
-using System.Diagnostics;
-using System.Timers;
-using Windows.UI.Core;
-using Microsoft.Toolkit.Uwp.UI.Controls;
-
-// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
 
 namespace FoxTube.Pages
 {
     /// <summary>
-    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// Items cards container
     /// </summary>
     public sealed partial class VideoGrid : Page
     {
         public VideoGrid()
         {
-            this.InitializeComponent();
+            InitializeComponent();
         }
 
         public void Add(UIElement card)
         {
             list.Items.Add(card);
+            if (list.Items.Count % 5 == 0)
+                list.Items.Add(new CardAdvert());
             empty.Visibility = Visibility.Collapsed;
         }