Commit

src/MauiTubePlayer/MauiTubePlayer.csproj

@@ -91,6 +91,9 @@
 	  <MauiXaml Update="ViewControls\VideoCell.xaml">
 	    <SubType></SubType>
 	  </MauiXaml>
+	  <MauiXaml Update="Views\VideoDetailsPage.xaml">
+	    <SubType></SubType>
+	  </MauiXaml>
 	</ItemGroup>
 	<ItemGroup>
 	  <ProjectReference Include="..\Maui.Apps.Framework\Maui.Apps.Framework.csproj" />

src/MauiTubePlayer/ViewControls/VideoCell.xaml

@@ -12,6 +12,12 @@
         StrokeShape="RoundRectangle 12"
         Padding="6">
 
+        <Border.GestureRecognizers>
+            <TapGestureRecognizer
+                Command="{Binding Path=ParentContext.NavigateToVideoDetailsPageCommand, Source={x:Reference VideoCellRoot}, Mode=OneWay}"
+                CommandParameter="{Binding Id.VideoId}" />
+        </Border.GestureRecognizers>
+
         <Grid
             RowSpacing="12"
             RowDefinitions="*,Auto">

src/MauiTubePlayer/ViewControls/VideoCell.xaml.cs

@@ -2,7 +2,27 @@
 
 public partial class VideoCell : ContentView
 {
-	public VideoCell()
+    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();
 	}

src/MauiTubePlayer/ViewModels/StartPageViewModel.cs

@@ -8,6 +8,9 @@ public partial class StartPageViewModel : AppViewModelBase
     [ObservableProperty]
     private ObservableCollection<YoutubeVideo> youtubeVideos;
 
+    [ObservableProperty]
+    private bool isLoadingMore;
+
 
     public StartPageViewModel(IApiService appApiService) : base(appApiService)
 	{
@@ -16,10 +19,10 @@ public StartPageViewModel(IApiService appApiService) : base(appApiService)
 
     public override async void OnNavigatedTo(object parameters)
     {
-        Search();
+        await Search();
     }
 
-    private async void Search()
+    private async Task Search()
     {
         SetDataLodingIndicators(true);
 
@@ -30,7 +33,7 @@ private async void Search()
         try
         {
             //Search for videos
-            await GetYouTubeVideo();
+            await GetYouTubeVideos();
 
             this.DataLoaded = true;
         }
@@ -52,7 +55,7 @@ private async void Search()
         }
     }
 
-    private async Task GetYouTubeVideo()
+    private async Task GetYouTubeVideos()
     {
         //Search the videos
         var videoSearchResult = await _appApiService.SearchVideos(searchTerm, nextToken);
@@ -79,5 +82,33 @@ private async void OpenSettingPage()
     {
         await PageService.DisplayAlert("Setting", "This implemention is outside the scope of this course.", "Got it!");
     }
+
+    [RelayCommand]
+    private async Task LoadMoreVideos()
+    {
+        if (IsLoadingMore || string.IsNullOrEmpty(nextToken))
+            return;
+
+        IsLoadingMore = true;
+        await Task.Delay(2000);
+        await GetYouTubeVideos();
+        IsLoadingMore = false;
+    }
+
+    [RelayCommand]
+    private async Task SearchVideos(string searchQuery)
+    {
+        nextToken = string.Empty;
+        searchTerm = searchQuery.Trim();
+
+        await Search();
+    }
+
+    [RelayCommand]
+    private async Task NavigateToVideoDetailsPage(string videoID)
+    {
+        await NavigationService.PushAsync(new VideoDetailsPage(videoID));
+    }
+
 }
 

src/MauiTubePlayer/Views/StartPage.xaml

@@ -26,7 +26,9 @@
         <CollectionView
             x:Name="lstVideos"
             Margin="16,4,16,0"
-            ItemsSource="{Binding YoutubeVideos, Mode=OneWay}">
+            ItemsSource="{Binding YoutubeVideos, Mode=OneWay}"
+            RemainingItemsThreshold="1"
+            RemainingItemsThresholdReachedCommand="{Binding LoadMoreVideosCommand, Mode=OneWay}">
 
             <CollectionView.ItemsLayout>
                 <LinearItemsLayout
@@ -36,9 +38,56 @@
 
             <CollectionView.Header>
                 <ContentView>
-                    <Label
-                        Text="Search box will appear here"
-                        Style="{StaticResource RegularLightText16}" />
+
+                    <Border
+                        Padding="12,4"
+                        BackgroundColor="{StaticResource DarkColor}"
+                        Stroke="Transparent"
+                        HorizontalOptions="Fill"
+                        Margin="0,0,0,12"
+                        HeightRequest="40"
+                        StrokeShape="RoundRectangle 8">
+
+                        <Grid
+                            HorizontalOptions="Fill"
+                            VerticalOptions="Center"
+                            ColumnDefinitions="*,Auto"
+                            ColumnSpacing="16">
+
+                            <Image
+                                WidthRequest="18"
+                                HeightRequest="18"
+                                Source="icnsearch.png"
+                                Grid.Column="1"
+                                VerticalOptions="Center">
+
+                                <Image.GestureRecognizers>
+                                    <TapGestureRecognizer
+                                        Command="{Binding SearchVideosCommand}"
+                                        CommandParameter="{Binding Path=Text, Source={x:Reference txtSearchQuery}, Mode=OneWay}" />
+
+                                </Image.GestureRecognizers>
+
+                            </Image>
+
+                            <Entry
+                                x:Name="txtSearchQuery"
+                                Placeholder="Search..."
+                                PlaceholderColor="{StaticResource LightColor}"
+                                Grid.Column="0"
+                                VerticalOptions="Center"
+                                HorizontalOptions="Fill"
+                                BackgroundColor="Transparent"
+                                FontFamily="RegularFont"
+                                FontSize="16"
+                                TextColor="{StaticResource LightTextColor}"
+                                VerticalTextAlignment="Center"
+                                Completed="txtSearchQuery_Completed"
+                                />
+
+                        </Grid>
+
+                    </Border>
 
                 </ContentView>
             </CollectionView.Header>
@@ -48,12 +97,27 @@
                     x:DataType="models:YoutubeVideo">
 
                     <controls:VideoCell
+                        ParentContext="{Binding BindingContext, Source={x:Reference RootPage}}"
                         HorizontalOptions="Fill"
                         HeightRequest="{Binding ItemsHeight, Source={x:Reference RootPage}}"/>
 
                 </DataTemplate>
             </CollectionView.ItemTemplate>
 
+            <!-- Load More Indicator -->
+            <CollectionView.Footer>
+                <ContentView
+                    HeightRequest="56">
+                    <ActivityIndicator
+                        IsRunning="{Binding IsLoadingMore, Mode=OneWay}"
+                        WidthRequest="44"
+                        HeightRequest="44"
+                        HorizontalOptions="Center"
+                        Color="White"
+                        Scale="{OnPlatform iOS=1.3, Android=1.0}" />
+                </ContentView>
+            </CollectionView.Footer>
+
         </CollectionView>
 
     </baseviews:ViewBase.PageContent>

src/MauiTubePlayer/Views/StartPage.xaml.cs

@@ -27,4 +27,9 @@ protected override void OnSizeAllocated(double width, double height)
 
         ItemsHeight = 60d + (width - lstVideos.Margin.Right - lstVideos.Margin.Left) / 1.8d;
     }
+
+    async void txtSearchQuery_Completed(System.Object sender, System.EventArgs e)
+    {
+        ViewModel.SearchVideosCommand.Execute(txtSearchQuery.Text);
+    }
 }

src/MauiTubePlayer/Views/VideoDetailsPage.xaml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="MauiTubePlayer.Views.VideoDetailsPage"
+             Title="VideoDetailsPage">
+    <VerticalStackLayout>
+        <Label 
+            Text="Welcome to .NET MAUI!"
+            VerticalOptions="Center" 
+            HorizontalOptions="Center" />
+    </VerticalStackLayout>
+</ContentPage>

src/MauiTubePlayer/Views/VideoDetailsPage.xaml.cs

@@ -0,0 +1,9 @@
+namespace MauiTubePlayer.Views;
+
+public partial class VideoDetailsPage : ContentPage
+{
+	public VideoDetailsPage(string videoID)
+	{
+		InitializeComponent();
+	}
+}