From 1b05b415532bbc9652a710642d6e343add8bf24c Mon Sep 17 00:00:00 2001
From: Naweed Akram <naweed@xgeno.com>
Date: Sun, 28 Aug 2022 08:19:13 +0300
Subject: [PATCH] Commit

---
 src/MauiTubePlayer/MauiTubePlayer.csproj      |   3 +
 .../ViewControls/SmallVideoCell.xaml          |  63 +++++
 .../ViewControls/SmallVideoCell.xaml.cs       |   9 +
 .../ViewControls/VideoCell.xaml               |   3 +-
 .../ViewControls/VideoCell.xaml.cs            |  20 --
 .../ViewModels/VideoDetailsPageViewModel.cs   |  47 +++-
 src/MauiTubePlayer/Views/StartPage.xaml       |   1 -
 .../Views/VideoDetailsPage.xaml               | 263 +++++++++++++++++-
 .../Views/VideoDetailsPage.xaml.cs            |  70 ++++-
 9 files changed, 451 insertions(+), 28 deletions(-)
 create mode 100644 src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml
 create mode 100644 src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml.cs

diff --git a/src/MauiTubePlayer/MauiTubePlayer.csproj b/src/MauiTubePlayer/MauiTubePlayer.csproj
index c76382c..291a0d5 100644
--- a/src/MauiTubePlayer/MauiTubePlayer.csproj
+++ b/src/MauiTubePlayer/MauiTubePlayer.csproj
@@ -94,6 +94,9 @@
 	  <MauiXaml Update="Views\VideoDetailsPage.xaml">
 	    <SubType></SubType>
 	  </MauiXaml>
+	  <MauiXaml Update="ViewControls\SmallVideoCell.xaml">
+	    <SubType></SubType>
+	  </MauiXaml>
 	</ItemGroup>
 	<ItemGroup>
 	  <ProjectReference Include="..\Maui.Apps.Framework\Maui.Apps.Framework.csproj" />
diff --git a/src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml b/src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml
new file mode 100644
index 0000000..de3bebd
--- /dev/null
+++ b/src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:models="clr-namespace:MauiTubePlayer.Models"
+    x:DataType="models:YoutubeVideo"
+    xmlns:viewmodels="clr-namespace:MauiTubePlayer.ViewModels"
+
+    x:Class="MauiTubePlayer.ViewControls.SmallVideoCell">
+
+    <Border
+        BackgroundColor="{StaticResource DarkColor}"
+        StrokeShape="RoundRectangle 8"
+        Padding="6"
+        WidthRequest="130">
+
+        <Border.GestureRecognizers>
+            <TapGestureRecognizer
+                Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:VideoDetailsPageViewModel}}, Path=NavigateToVideoDetailsPageCommand, Mode=OneWay}"
+                CommandParameter="{Binding Id.VideoId}" />
+        </Border.GestureRecognizers>
+
+        <Grid
+            RowSpacing="6"
+            RowDefinitions="*,32">
+
+            <!-- Thumbnail -->
+            <Frame
+                Grid.Row="0"
+                HasShadow="True"
+                CornerRadius="6"
+                HorizontalOptions="Fill"
+                VerticalOptions="Fill"
+                IsClippedToBounds="True"
+                Padding="0"
+                Margin="0,0,2,2">
+                <Image
+                    HorizontalOptions="Fill"
+                    VerticalOptions="Fill"
+                    Aspect="AspectFill">
+                    <Image.Source>
+                        <UriImageSource
+                            Uri="{Binding Snippet.Thumbnails.Medium.Url, Mode=OneWay}"
+                            CacheValidity="1:00:00.0" />
+                    </Image.Source>
+                </Image>
+            </Frame>
+
+            <!-- Video Details -->
+            <Label
+                Style="{StaticResource RegularLightText12}"
+                Grid.Row="1"
+                LineBreakMode="WordWrap"
+                VerticalOptions="Fill"
+                MaxLines="2"
+                Text="{Binding Snippet.Title, Mode=OneWay}" />
+
+        </Grid>
+
+    </Border>
+
+</ContentView>
+
diff --git a/src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml.cs b/src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml.cs
new file mode 100644
index 0000000..72bcfa5
--- /dev/null
+++ b/src/MauiTubePlayer/ViewControls/SmallVideoCell.xaml.cs
@@ -0,0 +1,9 @@
+namespace MauiTubePlayer.ViewControls;
+
+public partial class SmallVideoCell : ContentView
+{
+	public SmallVideoCell()
+	{
+		InitializeComponent();
+	}
+}
diff --git a/src/MauiTubePlayer/ViewControls/VideoCell.xaml b/src/MauiTubePlayer/ViewControls/VideoCell.xaml
index 8b3a83a..ef9762b 100644
--- a/src/MauiTubePlayer/ViewControls/VideoCell.xaml
+++ b/src/MauiTubePlayer/ViewControls/VideoCell.xaml
@@ -3,6 +3,7 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:models="clr-namespace:MauiTubePlayer.Models"
+    xmlns:viewmodels="clr-namespace:MauiTubePlayer.ViewModels"
     x:DataType="models:YoutubeVideo"
     x:Name="VideoCellRoot"
     x:Class="MauiTubePlayer.ViewControls.VideoCell">
@@ -14,7 +15,7 @@
 
         <Border.GestureRecognizers>
             <TapGestureRecognizer
-                Command="{Binding Path=ParentContext.NavigateToVideoDetailsPageCommand, Source={x:Reference VideoCellRoot}, Mode=OneWay}"
+                Command="{Binding Path=NavigateToVideoDetailsPageCommand, Source={RelativeSource AncestorType={x:Type viewmodels:StartPageViewModel}}, Mode=OneWay}"
                 CommandParameter="{Binding Id.VideoId}" />
         </Border.GestureRecognizers>
 
diff --git a/src/MauiTubePlayer/ViewControls/VideoCell.xaml.cs b/src/MauiTubePlayer/ViewControls/VideoCell.xaml.cs
index 0d09c3b..8a83f52 100644
--- a/src/MauiTubePlayer/ViewControls/VideoCell.xaml.cs
+++ b/src/MauiTubePlayer/ViewControls/VideoCell.xaml.cs
@@ -2,26 +2,6 @@
 
 public partial class VideoCell : ContentView
 {
-    public static readonly BindableProperty ParentContextProperty = BindableProperty.Create(
-       "ParentContext",
-       typeof(object),
-       typeof(VideoCell),
-       null,
-       propertyChanged:
-       (bindableObject, oldValue, newValue) =>
-       {
-           if (newValue is not null && bindableObject is VideoCell cell && newValue != oldValue)
-           {
-               cell.ParentContext = newValue;
-           }
-       });
-
-    public object ParentContext
-    {
-        get { return GetValue(ParentContextProperty); }
-        set { SetValue(ParentContextProperty, value); }
-    }
-
     public VideoCell()
 	{
 		InitializeComponent();
diff --git a/src/MauiTubePlayer/ViewModels/VideoDetailsPageViewModel.cs b/src/MauiTubePlayer/ViewModels/VideoDetailsPageViewModel.cs
index 4a6ba5a..7f45cca 100644
--- a/src/MauiTubePlayer/ViewModels/VideoDetailsPageViewModel.cs
+++ b/src/MauiTubePlayer/ViewModels/VideoDetailsPageViewModel.cs
@@ -11,9 +11,6 @@ public partial class VideoDetailsPageViewModel : AppViewModelBase
     [ObservableProperty]
     private Channel theChannel;
 
-    [ObservableProperty]
-    private bool similarVideosAvailable;
-
     [ObservableProperty]
     private List<Comment> comments;
 
@@ -51,7 +48,6 @@ public override async void OnNavigatedTo(object parameters)
                 var similarVideosSearchResult = await _appApiService.SearchVideos(TheVideo.Snippet.Tags.First(), "");
 
                 SimilarVideos = similarVideosSearchResult.Items;
-                SimilarVideosAvailable = (SimilarVideos?.Count > 0);
             }
 
             //Get Comments
@@ -83,5 +79,48 @@ public override async void OnNavigatedTo(object parameters)
         }
     }
 
+    [RelayCommand]
+    private async Task UnlikeVideo()
+    {
+        await PageService.DisplayAlert("Coming Soon",
+            "The unlike option is coming soon, once we implement the OAuth login functionality.",
+            "OK");
+    }
+
+    [RelayCommand]
+    private async Task ShareVideo()
+    {
+        var textToShare =
+            $"Hey, I found this amazing video. check it out: https://www.youtube.com/watch?v={TheVideo.Id}";
+
+        //Share
+        await Share.RequestAsync(new ShareTextRequest
+        {
+            Text = textToShare,
+            Title = TheVideo.Snippet.Title
+        });
+    }
+
+    [RelayCommand]
+    private async Task DownloadVideo()
+    {
+    }
+
+    [RelayCommand]
+    private async Task SubscribeChannel()
+    {
+        await PageService.DisplayAlert(
+            "Coming Soon",
+            "The subscribe to channel option is coming soon, once we implement the OAuth login functionality.",
+            "OK");
+    }
+
+    [RelayCommand]
+    private async Task NavigateToVideoDetailsPage(string videoID)
+    {
+        await NavigationService.PushAsync(new VideoDetailsPage(videoID));
+    }
+
+
 }
 
diff --git a/src/MauiTubePlayer/Views/StartPage.xaml b/src/MauiTubePlayer/Views/StartPage.xaml
index 3dc824a..ee9a43e 100644
--- a/src/MauiTubePlayer/Views/StartPage.xaml
+++ b/src/MauiTubePlayer/Views/StartPage.xaml
@@ -97,7 +97,6 @@
                     x:DataType="models:YoutubeVideo">
 
                     <controls:VideoCell
-                        ParentContext="{Binding BindingContext, Source={x:Reference RootPage}}"
                         HorizontalOptions="Fill"
                         HeightRequest="{Binding ItemsHeight, Source={x:Reference RootPage}}"/>
 
diff --git a/src/MauiTubePlayer/Views/VideoDetailsPage.xaml b/src/MauiTubePlayer/Views/VideoDetailsPage.xaml
index 71b425f..8b0321b 100644
--- a/src/MauiTubePlayer/Views/VideoDetailsPage.xaml
+++ b/src/MauiTubePlayer/Views/VideoDetailsPage.xaml
@@ -6,6 +6,7 @@
     xmlns:viewmodels="clr-namespace:MauiTubePlayer.ViewModels"
     xmlns:models="clr-namespace:MauiTubePlayer.Models"
     xmlns:controls="clr-namespace:MauiTubePlayer.ViewControls"
+    xmlns:converters="clr-namespace:Maui.Apps.Framework.Converters;assembly=Maui.Apps.Framework"
     x:Class="MauiTubePlayer.Views.VideoDetailsPage"
     x:TypeArguments="viewmodels:VideoDetailsPageViewModel"
     x:DataType="viewmodels:VideoDetailsPageViewModel"
@@ -14,6 +15,10 @@
     ContentDisplayMode="NavigationBar"
     x:Name="RootPage">
 
+    <baseviews:ViewBase.Resources>
+        <converters:EnumerationContainsElementConverter x:Key="cvtVisibleOnItemCount"/>
+    </baseviews:ViewBase.Resources>
+
     <baseviews:ViewBase.PageContent>
 
         <Grid
@@ -23,7 +28,7 @@
             IsVisible="{Binding DataLoaded, Mode=OneWay}"
             IgnoreSafeArea="True">
 
-            <!-- Top are aith Poster -->
+            <!-- Top area aith Poster -->
             <Frame
                 HasShadow="True"
                 CornerRadius="8"
@@ -32,6 +37,7 @@
                 IsClippedToBounds="True"
                 Padding="0"
                 Grid.Row="0"
+                Opacity="0"
                 x:Name="HeaderView">
 
                 <Grid
@@ -78,6 +84,7 @@
                 x:Name="VideoTitle"
                 Grid.Row="1"
                 HorizontalOptions="Fill"
+                Opacity="0"
                 Spacing="2">
 
                 <Label
@@ -90,7 +97,261 @@
 
             </VerticalStackLayout>
 
+            <!-- Icons -->
+            <FlexLayout
+                x:Name="VideoIcons"
+                Grid.Row="2"
+                HorizontalOptions="Fill"
+                Opacity="0"
+                Direction="Row"
+                JustifyContent="SpaceBetween"
+                AlignContent="Stretch"
+                Margin="0,8">
+
+                <!-- Likes -->
+                <HorizontalStackLayout
+                    Spacing="6"
+                    VerticalOptions="Center">
+
+                    <Image
+                        Source="imglike.png"
+                        WidthRequest="16"
+                        HeightRequest="16" />
+
+                    <Label
+                        Style="{StaticResource RegularLightText14}"
+                        Text="{Binding TheVideo.LikesCount, Mode=OneWay}" />
+
+                </HorizontalStackLayout>
+
+                <!-- Dislikes -->
+                <HorizontalStackLayout
+                    Spacing="6"
+                    VerticalOptions="Center">
+
+                    <HorizontalStackLayout.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding UnlikeVideoCommand, Mode=OneWay}" />
+                    </HorizontalStackLayout.GestureRecognizers>
+
+                    <Image
+                        Source="imglike.png"
+                        Rotation="180"
+                        WidthRequest="16"
+                        HeightRequest="16" />
+
+                    <Label
+                        Style="{StaticResource RegularLightText14}"
+                        Text="Unlike" />
+
+                </HorizontalStackLayout>
+
+                <!-- Share -->
+                <HorizontalStackLayout
+                    Spacing="6"
+                    VerticalOptions="Center">
+
+                    <HorizontalStackLayout.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding ShareVideoCommand, Mode=OneWay}" />
+                    </HorizontalStackLayout.GestureRecognizers>
+
+                    <Image
+                        Source="imgshare.png"
+                        WidthRequest="16"
+                        HeightRequest="16" />
+
+                    <Label
+                        Style="{StaticResource RegularLightText14}"
+                        Text="Share" />
+
+                </HorizontalStackLayout>
+
+                <!-- Download -->
+                <HorizontalStackLayout
+                    Spacing="6"
+                    VerticalOptions="Center">
+
+                    <HorizontalStackLayout.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding DownloadVideoCommand, Mode=OneWay}" />
+                    </HorizontalStackLayout.GestureRecognizers>
+
+                    <Image
+                        Source="imgdownload.png"
+                        WidthRequest="16"
+                        HeightRequest="16" />
+
+                    <Label
+                        Style="{StaticResource RegularLightText14}"
+                        Text="Download" />
+
+                </HorizontalStackLayout>
+
+            </FlexLayout>
+
+            <!-- Channel Details -->
+            <Grid
+                x:Name="ChannelDetails"
+                Opacity="0"
+                Grid.Row="3"
+                ColumnSpacing="12"
+                ColumnDefinitions="Auto,*,Auto"
+                RowDefinitions="Auto,Auto">
+
+                <!-- Channel Pic -->
+                <Border
+                    WidthRequest="44"
+                    HeightRequest="44"
+                    VerticalOptions="Center"
+                    Stroke="{StaticResource LightBorderColor}"
+                    StrokeThickness="2"
+                    StrokeShape="RoundRectangle 22"
+                    Grid.Row="0"
+                    Grid.RowSpan="2"
+                    Grid.Column="0">
+
+                    <Image
+                        VerticalOptions="Center"
+                        HorizontalOptions="Center"
+                        WidthRequest="40"
+                        HeightRequest="40"
+                        Aspect="AspectFill">
+
+                        <Image.Clip>
+                            <EllipseGeometry
+                                Center="20,20"
+                                RadiusX="20"
+                                RadiusY="20"/>
+                        </Image.Clip>
+
+                        <Image.Source>
+                            <UriImageSource
+                                Uri="{Binding TheChannel.Snippet.Thumbnails.High.Url, Mode=OneWay}"
+                                CacheValidity="1:00:00.0" />
+                        </Image.Source>
+                    </Image>
+
+                </Border>
+
+                <!-- Channel Name -->
+                <Label
+                    Style="{StaticResource MediumLightText18}"
+                    Grid.Row="0"
+                    Grid.Column="1"
+                    Text="{Binding TheChannel.Snippet.Title, Mode=OneWay}" />
+
+                <!-- Subscriber Count -->
+                <Label
+                    Style="{StaticResource RegularLightText14}"
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    Text="{Binding TheChannel.SubscribersCount, Mode=OneWay}" />
+
+                <!-- Subscribe Button -->
+                <Button
+                    Grid.Row="0"
+                    Grid.RowSpan="2"
+                    Grid.Column="2"
+                    Padding="12,0"
+                    CornerRadius="6"
+                    HeightRequest="32"
+                    Text="Subscribe"
+                    TextColor="White"
+                    FontSize="12"
+                    FontFamily="MediumFont"
+                    Background="#FF0000"
+                    Command="{Binding SubscribeChannelCommand, Mode=OneWay}" />
 
+            </Grid>
+
+            <!-- Similar -->
+            <CollectionView
+                x:Name="SimilarVideos"
+                Grid.Row="5"
+                Opacity="0"
+                IsVisible="{Binding SimilarVideos, Mode=OneWay, Converter={StaticResource cvtVisibleOnItemCount}}"
+                HeightRequest="140"
+                ItemsSource="{Binding SimilarVideos, Mode=OneWay}">
+
+                <CollectionView.ItemsLayout>
+                    <LinearItemsLayout
+                        Orientation="Horizontal"
+                        ItemSpacing="8" />
+                </CollectionView.ItemsLayout>
+
+                <CollectionView.ItemTemplate>
+                    <DataTemplate>
+                        <Grid>
+                            <controls:SmallVideoCell
+                                HorizontalOptions="Fill"
+                                VerticalOptions="Fill" />
+                        </Grid>
+                    </DataTemplate>
+                </CollectionView.ItemTemplate>
+            </CollectionView>
+
+            <!-- Tags -->
+            <CollectionView
+                x:Name="TagsView"
+                Grid.Row="4"
+                Opacity="0"
+                IsVisible="{Binding TheVideo.Snippet.Tags, Mode=OneWay, Converter={StaticResource cvtVisibleOnItemCount}}"
+                HeightRequest="28"
+                ItemsSource="{Binding TheVideo.Snippet.Tags, Mode=OneWay}"
+                ItemSizingStrategy="MeasureAllItems">
+
+                <CollectionView.ItemsLayout>
+                    <LinearItemsLayout
+                        Orientation="Horizontal"
+                        ItemSpacing="16" />
+                </CollectionView.ItemsLayout>
+
+                <CollectionView.ItemTemplate>
+                    <DataTemplate>
+                        <Border
+                            BackgroundColor="{StaticResource DarkColor}"
+                            VerticalOptions="Fill"
+                            Stroke="{StaticResource LightBorderColor}"
+                            StrokeThickness="1"
+                            StrokeShape="RoundRectangle 14"
+                            Padding="16,0">
+                            <Label
+                                Text="{Binding .}"
+                                Style="{StaticResource RegularLightText16}"
+                                VerticalOptions="Center"
+                                VerticalTextAlignment="Center"/>
+                        </Border>
+                    </DataTemplate>
+                </CollectionView.ItemTemplate>
+            </CollectionView>
+
+            <!-- Description -->
+            <ScrollView
+                Grid.Row="6"
+                x:Name="DescriptionView"
+                Opacity="0">
+                <Label
+                    HorizontalOptions="Fill"
+                    Style="{StaticResource RegularLightText14}"
+                    LineBreakMode="WordWrap"
+                    Text="{Binding TheVideo.Snippet.Description, Mode=OneWay}"/>
+            </ScrollView>
+
+            <!-- Comments Button -->
+            <Button
+                x:Name="btnComments"
+                Grid.Row="7"
+                Opacity="0"
+                Padding="0"
+                Margin="0,0,0,16"
+                CornerRadius="8"
+                VerticalOptions="Fill"
+                HorizontalOptions="Fill"
+                Text="Comments"
+                TextColor="White"
+                FontSize="18"
+                FontFamily="MediumFont"
+                BorderColor="{StaticResource LightBorderColor}"
+                BorderWidth="0.5"
+                Background="{StaticResource DarkColor}"/>
 
         </Grid>
 
diff --git a/src/MauiTubePlayer/Views/VideoDetailsPage.xaml.cs b/src/MauiTubePlayer/Views/VideoDetailsPage.xaml.cs
index 9c90c32..eb1a2a8 100644
--- a/src/MauiTubePlayer/Views/VideoDetailsPage.xaml.cs
+++ b/src/MauiTubePlayer/Views/VideoDetailsPage.xaml.cs
@@ -5,5 +5,73 @@ public partial class VideoDetailsPage : ViewBase<VideoDetailsPageViewModel>
 	public VideoDetailsPage(object initParams) : base(initParams)
     {
         InitializeComponent();
-	}
+
+        this.ViewModelInitialized += (s, e) =>
+        {
+            (this.BindingContext as VideoDetailsPageViewModel).DownloadCompleted += VideoDetailsPage_DownloadCompleted;
+        };
+    }
+
+    protected override void OnDisappearing()
+    {
+        (this.BindingContext as VideoDetailsPageViewModel).DownloadCompleted -= VideoDetailsPage_DownloadCompleted;
+
+        base.OnDisappearing();
+    }
+
+    private void VideoDetailsPage_DownloadCompleted(object sender, EventArgs e)
+    {
+        //Video information downloaded. Start showing items.
+
+        if ((this.BindingContext as VideoDetailsPageViewModel).IsErrorState)
+            return;
+
+        if (this.AnimationIsRunning("TransitionAnimation"))
+            return;
+
+
+        var parentAnimation = new Animation();
+
+        //Poster Image Animation
+        parentAnimation.Add(0.0, 0.7,
+            new Animation(v => HeaderView.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Video Title Container Animation
+        parentAnimation.Add(0.4, 0.7,
+            new Animation(v => VideoTitle.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Video Icons Animation
+        parentAnimation.Add(0.5, 0.7,
+            new Animation(v => VideoIcons.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Channel Details Animation
+        parentAnimation.Add(0.6, 0.8,
+            new Animation(v => ChannelDetails.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Similar Videos Animation
+        parentAnimation.Add(0.7, 0.9,
+            new Animation(v => SimilarVideos.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Tags Animation
+        parentAnimation.Add(0.65, 0.85,
+            new Animation(v => TagsView.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Description View Animation
+        parentAnimation.Add(0.8, 1,
+            new Animation(v => DescriptionView.Opacity = v, 0, 1, Easing.CubicIn));
+
+        //Comments Button Animation
+        parentAnimation.Add(0.8, 1,
+            new Animation(v => btnComments.Opacity = v, 0, 1, Easing.CubicIn));
+
+
+
+        //Commit the animation
+        parentAnimation.Commit(this, "TransitionAnimation", 16, Constants.ExtraLongDuration, null,
+            (v, c) =>
+            {
+                //Action to perform on completion (if any)
+            });
+
+    }
 }