video-server-frontend/src/app/pages/search/search.component.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Video } from '../../model/video';
import { VideoPreviewComponent } from '../../components/video-preview/video-preview.component';
import { catchError, map, Observable } from 'rxjs';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [HttpClientModule, VideoPreviewComponent],
  templateUrl: './search.component.html',
  styleUrl: './search.component.css'
})
export class SearchComponent implements OnInit {

  constructor(private http: HttpClient, private route: ActivatedRoute) {}

  searching: boolean = false;
  foundVideos: Video[] = [];

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      let query = params['query'];
      if (query) {
        this.performSearch(query);
      }
    });
  }

  performSearch(query: string): void {
    this.searching = true;
    const ws: WebSocketSubject<string> = webSocket<any>({
      url: `ws://192.168.0.100:8190/search?q=${query}`,
      deserializer: (e) => e.data,
      serializer: (value) => value,
    });

    ws.pipe(
      map((event: string) => {
        // Mapping to an array of videos
        const msgReceived: string = event;
        const msgs = msgReceived.split('\n');
        let videos: Video[] = [];
        msgs.forEach(msg => {
          if (msg) {
            const video = JSON.parse(msg);
            const title = video?.filename?.split('/').pop().replace('.mp4', '') ?? 'Unknown title';
            videos.push({ title: title, filepath: video.filename } as Video);
          }
        });

        return videos;        
      })
    ).subscribe({
      next: videos => {
        if (videos) {
          videos.forEach(video => this.foundVideos.unshift(video));
        }
      },
      error: err => {
        if (err instanceof CloseEvent) {
          console.log('WebSocket closed', err);
        }
        else {
          console.error('Error on the socket', err);
        }
        this.searching = false;
      }
    });
  }

}