From 27b79b677e9b349852f3b453f967c7f175a71a8a Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 24 Dec 2024 00:59:54 +0100
Subject: [PATCH] feat(search-results): enhance search input handling and
 layout adjustments

---
 .../search-results.component.html             |  1 +
 .../search-results.component.scss             |  8 +++++++
 .../search-results.component.ts               | 22 +++++++++++++++----
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/app/xtream-tauri/search-results/search-results.component.html b/src/app/xtream-tauri/search-results/search-results.component.html
index 10ccdbf1e..690a55124 100644
--- a/src/app/xtream-tauri/search-results/search-results.component.html
+++ b/src/app/xtream-tauri/search-results/search-results.component.html
@@ -6,6 +6,7 @@
         <mat-form-field appearance="outline" class="search-field">
             <mat-label>Search content</mat-label>
             <input
+                #searchInput
                 matInput
                 spellcheck="false"
                 autofocus
diff --git a/src/app/xtream-tauri/search-results/search-results.component.scss b/src/app/xtream-tauri/search-results/search-results.component.scss
index 81a937403..17172744b 100644
--- a/src/app/xtream-tauri/search-results/search-results.component.scss
+++ b/src/app/xtream-tauri/search-results/search-results.component.scss
@@ -1,3 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+}
+
 .search-page {
     padding: 20px;
 }
diff --git a/src/app/xtream-tauri/search-results/search-results.component.ts b/src/app/xtream-tauri/search-results/search-results.component.ts
index 4e98d5266..4af0a22fa 100644
--- a/src/app/xtream-tauri/search-results/search-results.component.ts
+++ b/src/app/xtream-tauri/search-results/search-results.component.ts
@@ -1,4 +1,10 @@
-import { Component, inject } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    inject,
+    ViewChild,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -23,7 +29,8 @@ import { XtreamStore } from '../xtream.store';
     templateUrl: './search-results.component.html',
     styleUrls: ['./search-results.component.scss'],
 })
-export class SearchResultsComponent {
+export class SearchResultsComponent implements AfterViewInit {
+    @ViewChild('searchInput') searchInput!: ElementRef;
     readonly xtreamStore = inject(XtreamStore);
     readonly router = inject(Router);
     readonly activatedRoute = inject(ActivatedRoute);
@@ -34,6 +41,13 @@ export class SearchResultsComponent {
         series: true,
     };
 
+    ngAfterViewInit() {
+        this.xtreamStore.setSelectedContentType(undefined);
+        setTimeout(() => {
+            this.searchInput.nativeElement.focus();
+        });
+    }
+
     onSearch() {
         if (this.searchTerm.length >= 3) {
             const types = Object.entries(this.filters)
@@ -50,12 +64,12 @@ export class SearchResultsComponent {
         this.xtreamStore.setSelectedContentType(type);
 
         if (item.type === 'live') {
-            this.router.navigate(['..', 'live'], {
+            this.router.navigate(['..', type, item.category_id], {
                 relativeTo: this.activatedRoute,
             });
         } else {
             this.router.navigate(
-                ['..', item.category_id, type, item.xtream_id],
+                ['..', type, item.category_id, item.xtream_id],
                 {
                     relativeTo: this.activatedRoute,
                 }