Bomb Girao

Author: PrashantUnity

.github/workflows/dotnet.yml

@@ -20,6 +20,9 @@ jobs:
       - name: Publish Blazor WebAssembly project
         run: dotnet publish TomAndJerry.csproj -c Release -o release --nologo
 
+      - name: Change base-tag in index.html from / to TomAndJerry
+        run: sed -i 's/<base href="\/" \/>/<base href="\/TomAndJerry\/" \/>/g' release/wwwroot/index.html
+
       - name: Add 404.html (for GitHub Pages SPA fallback)
         run: cp release/wwwroot/index.html release/wwwroot/404.html
 

Component/AppBar.razor

@@ -73,6 +73,4 @@
         StateService.OnStateChanged -= StateHasChanged;
     }
 }
-
-
 

Component/ErrorPage.razor

@@ -24,6 +24,6 @@
 @code {
     void Home()
     {
-        Nav.NavigateTo("/");
+        Nav.NavigateTo("");
     }
 }

Component/RealTimeSearch.razor

@@ -4,7 +4,7 @@
 @inject NavigationManager NavigationManager
 @inject IJSRuntime JSRuntime
 
-<div class="relative">
+<div class="relative" @onclick:stopPropagation="true" data-search-component>
     <div class="flex items-center bg-white border border-gray-300 rounded-full shadow-sm hover:shadow-md transition-shadow">
         <input type="text"
                @bind="searchTerm"
@@ -22,7 +22,7 @@
     </div>
 
     <!-- Search Suggestions Dropdown -->
-    @if (showSuggestions && searchSuggestions.Any())
+    @if (showSuggestions && searchSuggestions.Any() && !searchResults.Any())
     {
         <div class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto">
             @foreach (var suggestion in searchSuggestions)
@@ -40,16 +40,45 @@
         </div>
     }
 
-    <!-- Search Results Count -->
+    <!-- Search Results Preview -->
     @if (!string.IsNullOrEmpty(searchTerm) && searchResults.Any())
     {
-        <div class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-40 p-3">
-            <div class="flex items-center justify-between text-sm text-gray-600">
-                <span>@searchResults.Count() results found</span>
-                <button class="text-red-600 hover:text-red-800 font-medium"
-                        @onclick="NavigateToSearchResults">
-                    View all results
-                </button>
+        <div class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-80 overflow-y-auto">
+            <div class="p-3 border-b border-gray-200">
+                <div class="flex items-center justify-between text-sm text-gray-600">
+                    <span>@searchResults.Count() results found</span>
+                    <button class="text-red-600 hover:text-red-800 font-medium"
+                            @onclick="NavigateToSearchResults">
+                        View all results
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Quick Results Preview -->
+            <div class="p-3 space-y-2">
+                @foreach (var video in searchResults.Take(3))
+                {
+                    <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded-lg cursor-pointer"
+                         @onclick="() => NavigateToVideo(video)">
+                        <div class="w-12 h-8 bg-gray-200 rounded overflow-hidden flex-shrink-0">
+                            <img src="@video.Thumbnail" alt="@video.Description" class="w-full h-full object-cover" />
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <p class="text-sm font-medium text-gray-900 truncate">@GetCleanTitle(video.Description)</p>
+                            <p class="text-xs text-gray-500">Tom & Jerry</p>
+                        </div>
+                    </div>
+                }
+                
+                @if (searchResults.Count() > 3)
+                {
+                    <div class="text-center pt-2">
+                        <button class="text-xs text-red-600 hover:text-red-800 font-medium"
+                                @onclick="NavigateToSearchResults">
+                            +@(searchResults.Count() - 3) more results
+                        </button>
+                    </div>
+                }
             </div>
         </div>
     }
@@ -62,17 +91,33 @@
     private bool showSuggestions = false;
     private Timer? searchTimer;
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JSRuntime.InvokeVoidAsync("addClickOutsideHandler", DotNetObjectReference.Create(this));
+        }
+    }
+
     protected override void OnInitialized()
     {
         SearchService.OnSearchResultsChanged += OnSearchResultsChanged;
 
-        // Initialize search timer for debouncing
+        // Initialize search timer for debouncing (reduced to 150ms for better responsiveness)
         searchTimer = new Timer(async _ => await DebouncedSearch(), null, Timeout.Infinite, Timeout.Infinite);
     }
 
     private void OnSearchResultsChanged(IEnumerable<TomAndJerry.Model.Video> results)
     {
         searchResults = results;
+        
+        // Clear suggestions when we have search results
+        if (searchResults.Any())
+        {
+            searchSuggestions = Enumerable.Empty<string>();
+            showSuggestions = false;
+        }
+        
         InvokeAsync(StateHasChanged);
     }
 
@@ -87,58 +132,96 @@
             return;
         }
 
-        // Get search suggestions
-        searchSuggestions = await SearchService.GetSearchSuggestionsAsync(searchTerm);
+        // Perform immediate search for preview
+        var immediateResults = await VideoService.SearchVideosAsync(searchTerm);
+        searchResults = immediateResults;
 
-        // Perform search
+        // Only show suggestions if no search results found and search term is long enough
+        if (!searchResults.Any() && searchTerm.Length >= 2)
+        {
+            searchSuggestions = await SearchService.GetSearchSuggestionsAsync(searchTerm);
+            showSuggestions = searchSuggestions.Any();
+        }
+        else
+        {
+            // Clear suggestions when we have results or search term is too short
+            searchSuggestions = Enumerable.Empty<string>();
+            showSuggestions = false;
+        }
+        
+        // Also trigger the debounced search for suggestions
         await SearchService.SearchAsync(searchTerm);
 
-        showSuggestions = searchSuggestions.Any();
         await InvokeAsync(StateHasChanged);
     }
 
-    private async Task HandleKeyDown(KeyboardEventArgs e)
+    private void HandleKeyDown(KeyboardEventArgs e)
     {
         if (e.Key == "Enter")
         {
             PerformSearch();
         }
         else if (e.Key == "Escape")
         {
-            showSuggestions = false;
-            await InvokeAsync(StateHasChanged);
+            CloseDropdown();
         }
         else
         {
-            // Debounce search input
-            searchTimer?.Change(300, Timeout.Infinite);
+            // Debounce search input (reduced to 150ms for better responsiveness)
+            searchTimer?.Change(150, Timeout.Infinite);
         }
     }
 
     private void PerformSearch()
     {
         if (!string.IsNullOrEmpty(searchTerm))
         {
+            CloseDropdown();
             NavigationManager.NavigateTo($"Search/{Uri.EscapeDataString(searchTerm)}");
         }
-        showSuggestions = false;
     }
 
     private void SelectSuggestion(string suggestion)
     {
         searchTerm = suggestion;
-        showSuggestions = false;
+        CloseDropdown();
         PerformSearch();
     }
 
     private void NavigateToSearchResults()
     {
         if (!string.IsNullOrEmpty(searchTerm))
         {
+            CloseDropdown();
             NavigationManager.NavigateTo($"Search/{Uri.EscapeDataString(searchTerm)}");
         }
     }
 
+    private void NavigateToVideo(TomAndJerry.Model.Video video)
+    {
+        CloseDropdown();
+        NavigationManager.NavigateTo($"playmedia/{video.Id}");
+    }
+
+    private void CloseDropdown()
+    {
+        showSuggestions = false;
+        searchSuggestions = Enumerable.Empty<string>();
+        searchResults = Enumerable.Empty<TomAndJerry.Model.Video>();
+        InvokeAsync(StateHasChanged);
+    }
+
+    private string GetCleanTitle(string description)
+    {
+        return string.Join(" ", description.Split(".").Where(x => x != "mkv").Select(x => x));
+    }
+
+    [JSInvokable]
+    public void OnClickOutside()
+    {
+        CloseDropdown();
+    }
+
     public void Dispose()
     {
         SearchService.OnSearchResultsChanged -= OnSearchResultsChanged;

Pages/Home.razor

@@ -3,6 +3,7 @@
 @inject NavigationManager nav
 @inject IVideoService VideoService
 @inject IStateService StateService
+@inject IJSRuntime JSRuntime
 <PageTitle>Home - Tom & Jerry</PageTitle>
 
 <div class="min-h-screen bg-gray-50">
@@ -20,6 +21,27 @@
                     The timeless adventures of the world's most famous cat and mouse duo
                 </p>
 
+                <!-- Hero Search Bar -->
+                <div class="max-w-md mx-auto mb-8">
+                    <div class="relative">
+                        <div class="flex items-center bg-white/10 backdrop-blur-sm border border-white/20 rounded-full shadow-lg">
+                            <input type="text"
+                                   @bind="heroSearchTerm"
+                                   @bind:event="oninput"
+                                   @onkeydown="HandleHeroSearchKeyDown"
+                                   class="flex-1 px-4 py-3 text-sm border-0 rounded-l-full focus:outline-none focus:ring-0 bg-transparent text-white placeholder-white/70"
+                                   placeholder="Search episodes...">
+                            
+                            <button class="px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-r-full transition-colors" 
+                                    @onclick="PerformHeroSearch">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
                 <!-- Stats -->
                 <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-md mx-auto">
                     <div class="text-center">
@@ -39,6 +61,26 @@
         </div>
     </div>
 
+    <!-- Call to Action Section -->
+    <div class="bg-white border-b border-gray-200">
+        <div class="max-w-7xl mx-auto px-4 py-6">
+            <div class="text-center">
+                <h2 class="text-2xl font-bold text-gray-900 mb-2">Start Watching Now</h2>
+                <p class="text-gray-600 mb-4">Discover your favorite Tom & Jerry episodes</p>
+                <div class="flex flex-col sm:flex-row gap-3 justify-center">
+                    <button @onclick="ScrollToFeatured" 
+                            class="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-1">
+                        Browse Episodes
+                    </button>
+                    <button @onclick="ScrollToAllEpisodes" 
+                            class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium">
+                        View All
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Main Content -->
     <div class="max-w-7xl mx-auto px-4 py-8">
         @if (StateService.IsLoading || !StateService.CurrentVideos.Any())
@@ -167,10 +209,10 @@
         else
         {
             <!-- Featured Section -->
-            <div class="mb-12">
+            <div id="featured" class="mb-12">
                 <div class="flex items-center justify-between mb-6">
                     <div class="flex items-center space-x-3">
-                        <div class="w-10 h-10 bg-red-600 rounded-full flex items-center justify-center">
+                        <div class="w-10 h-10 bg-gradient-to-r from-red-600 to-red-700 rounded-full flex items-center justify-center shadow-lg">
                             <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                             </svg>
@@ -180,6 +222,10 @@
                             <p class="text-gray-600">Handpicked classics that never get old</p>
                         </div>
                     </div>
+                    <div class="hidden md:flex items-center space-x-2">
+                        <span class="text-sm text-gray-500">Popular this week</span>
+                        <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
+                    </div>
                 </div>
 
                 <!-- Featured Video Grid -->
@@ -192,7 +238,7 @@
             </div>
 
             <!-- All Episodes Section -->
-            <div class="mb-12">
+            <div id="all-episodes" class="mb-12">
                 <div class="flex items-center justify-between mb-6">
                     <div class="flex items-center space-x-3">
                         <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
@@ -235,11 +281,44 @@
 
 @code
 {
+    private string heroSearchTerm = string.Empty;
+
     public void GoTOPage(Video video)
     {
         nav.NavigateTo($"playmedia/{video.Id}");
     }
 
+    private void PerformHeroSearch()
+    {
+        if (!string.IsNullOrEmpty(heroSearchTerm))
+        {
+            nav.NavigateTo($"Search/{Uri.EscapeDataString(heroSearchTerm)}");
+        }
+    }
+
+    private void HandleHeroSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter")
+        {
+            PerformHeroSearch();
+        }
+    }
+
+    private async Task ScrollToSection(string sectionId)
+    {
+        await JSRuntime.InvokeVoidAsync("scrollToElement", sectionId);
+    }
+
+    private async Task ScrollToFeatured()
+    {
+        await ScrollToSection("featured");
+    }
+
+    private async Task ScrollToAllEpisodes()
+    {
+        await ScrollToSection("all-episodes");
+    }
+
     protected override async Task OnInitializedAsync()
     {
         StateService.OnStateChanged += StateHasChanged;