feat: add search functionality (#46)

Author: ittipatken

src/app/home/course/course.page.html

@@ -101,7 +101,19 @@
                 }
             </ion-col>
             <ion-col size="12" size-lg [ngClass]="currentVideo ? 'scroll-area' : ''">
-                @if (list$ | async; as list) {
+               <ion-searchbar
+                    (ionInput)="onSearchChange($event)"
+                    placeholder="Search videos by title or lecturer..."
+                    debounce="300">
+                </ion-searchbar>
+                @if (filteredList$ | async; as list) {
+                    @if (list.length === 0 && searchQuery) {
+                        <ion-card>
+                            <ion-card-content>
+                                No videos found matching "{{ searchQuery }}"
+                            </ion-card-content>
+                        </ion-card>
+                    }
                     <ion-list>
                         @for (lecture of list; track lecture.id) {
                             <ion-item button (click)="viewVideo(lecture)"

src/app/home/course/course.page.ts

@@ -25,6 +25,7 @@ import {
     IonListHeader,
     IonProgressBar,
     IonRow,
+    IonSearchbar,
     IonText,
     IonTitle,
     IonToolbar,
@@ -63,6 +64,7 @@ import {ModalEvaluationComponent} from './modal-evaluation.component';
         IonLabel,
         IonItem,
         IonIcon,
+        IonSearchbar,
         NgClass,
         IonProgressBar,
         AsyncPipe,
@@ -78,10 +80,13 @@ export class CoursePage implements OnInit, AfterViewInit, OnDestroy {
     course: string;
     courseId?: string;
     list$: Observable<Lecture[]>;
+    filteredList$: Observable<Lecture[]>;
     courseProgress = {
         viewed: 0,
         duration: 0
     };
+    searchQuery = '';
+    searchQuery$ = new Subject<string>();
     isAndroid = /Android/i.test(navigator.userAgent);
     isIos = /iPad/i.test(navigator.userAgent) || /iPhone/i.test(navigator.userAgent);
     lastPlayedVideoKey: number = null;
@@ -128,6 +133,10 @@ export class CoursePage implements OnInit, AfterViewInit, OnDestroy {
                 return EMPTY;
             })
         );
+
+        this.filteredList$ = combineLatest([this.list$, this.searchQuery$.pipe(startWith(''))]).pipe(
+            map(([videos, query]) => this.filterVideos(videos, query))
+        );
     }
 
     ngAfterViewInit() {
@@ -276,6 +285,23 @@ export class CoursePage implements OnInit, AfterViewInit, OnDestroy {
             : videoInfo;
     }
 
+    filterVideos(videos: Lecture[], query: string): Lecture[] {
+        if (!query.trim()) {
+            return videos;
+        }
+
+        const lowerQuery = query.toLowerCase();
+        return videos.filter(video =>
+            video.title.toLowerCase().includes(lowerQuery) ||
+            (video.lecturer && video.lecturer.toLowerCase().includes(lowerQuery))
+        );
+    }
+
+    onSearchChange(event: any) {
+        this.searchQuery = event.detail.value ?? '';
+        this.searchQuery$.next(this.searchQuery);
+    }
+
     viewVideo(video: Lecture) {
         video.sources = video.sources.filter(source => {
             if (source.type === 'video/youtube') {