feat(frontend): modernize Angular app

ui/src/app/services/downloads.service.ts

@@ -0,0 +1,167 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { of, Subject } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { MeTubeSocket } from './metube-socket.service';
+import { Download, Status, State } from '../interfaces';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+@Injectable({
+  providedIn: 'root'
+})
+export class DownloadsService {
+  private http = inject(HttpClient);
+  private socket = inject(MeTubeSocket);
+  loading = true;
+  queue = new Map<string, Download>();
+  done = new Map<string, Download>();
+  queueChanged = new Subject();
+  doneChanged = new Subject();
+  customDirsChanged = new Subject();
+  ytdlOptionsChanged = new Subject();
+  configurationChanged = new Subject();
+  updated = new Subject();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  configuration: any = {};
+  customDirs = {};
+
+  constructor() {
+    this.socket.fromEvent('all')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      this.loading = false;
+      const data: [[[string, Download]], [[string, Download]]] = JSON.parse(strdata);
+      this.queue.clear();
+      data[0].forEach(entry => this.queue.set(...entry));
+      this.done.clear();
+      data[1].forEach(entry => this.done.set(...entry));
+      this.queueChanged.next(null);
+      this.doneChanged.next(null);
+    });
+    this.socket.fromEvent('added')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: Download = JSON.parse(strdata);
+      this.queue.set(data.url, data);
+      this.queueChanged.next(null);
+    });
+    this.socket.fromEvent('updated')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: Download = JSON.parse(strdata);
+      const dl: Download | undefined  = this.queue.get(data.url);
+      data.checked = !!dl?.checked;
+      data.deleting = !!dl?.deleting;
+      this.queue.set(data.url, data);
+      this.updated.next(null);
+    });
+    this.socket.fromEvent('completed')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: Download = JSON.parse(strdata);
+      this.queue.delete(data.url);
+      this.done.set(data.url, data);
+      this.queueChanged.next(null);
+      this.doneChanged.next(null);
+    });
+    this.socket.fromEvent('canceled')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: string = JSON.parse(strdata);
+      this.queue.delete(data);
+      this.queueChanged.next(null);
+    });
+    this.socket.fromEvent('cleared')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: string = JSON.parse(strdata);
+      this.done.delete(data);
+      this.doneChanged.next(null);
+    });
+    this.socket.fromEvent('configuration')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data = JSON.parse(strdata);
+      console.debug("got configuration:", data);
+      this.configuration = data;
+      this.configurationChanged.next(data);
+    });
+    this.socket.fromEvent('custom_dirs')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data = JSON.parse(strdata);
+      console.debug("got custom_dirs:", data);
+      this.customDirs = data;
+      this.customDirsChanged.next(data);
+    });
+    this.socket.fromEvent('ytdl_options_changed')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data = JSON.parse(strdata);
+      this.ytdlOptionsChanged.next(data);
+    });
+  }
+
+  handleHTTPError(error: HttpErrorResponse) {
+    const msg = error.error instanceof ErrorEvent ? error.error.message : error.error;
+    return of({status: 'error', msg: msg})
+  }
+
+  public add(url: string, quality: string, format: string, folder: string, customNamePrefix: string, playlistStrictMode: boolean, playlistItemLimit: number, autoStart: boolean) {
+    return this.http.post<Status>('add', {url: url, quality: quality, format: format, folder: folder, custom_name_prefix: customNamePrefix, playlist_strict_mode: playlistStrictMode, playlist_item_limit: playlistItemLimit, auto_start: autoStart}).pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
+
+  public startById(ids: string[]) {
+    return this.http.post('start', {ids: ids});
+  }
+
+  public delById(where: State, ids: string[]) {
+    ids.forEach(id => {
+      const obj = this[where].get(id)
+      if (obj) {
+        obj.deleting = true
+      }
+  });
+    return this.http.post('delete', {where: where, ids: ids});
+  }
+
+  public startByFilter(where: State, filter: (dl: Download) => boolean) {
+    const ids: string[] = [];
+    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
+    return this.startById(ids);
+  }
+
+  public delByFilter(where: State, filter: (dl: Download) => boolean) {
+    const ids: string[] = [];
+    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
+    return this.delById(where, ids);
+  }
+  public addDownloadByUrl(url: string): Promise<{
+    response: Status} | {
+    status: string;
+    msg?: string;
+  }> {
+    const defaultQuality = 'best';
+    const defaultFormat = 'mp4';
+    const defaultFolder = ''; 
+    const defaultCustomNamePrefix = '';
+    const defaultPlaylistStrictMode = false;
+    const defaultPlaylistItemLimit = 0;
+    const defaultAutoStart = true;
+    
+    return new Promise((resolve, reject) => {
+      this.add(url, defaultQuality, defaultFormat, defaultFolder, defaultCustomNamePrefix, defaultPlaylistStrictMode, defaultPlaylistItemLimit, defaultAutoStart)
+        .subscribe({
+          next: (response) => resolve(response),
+          error: (error) => reject(error)
+        });
+    });
+  }
+  public exportQueueUrls(): string[] {
+    return Array.from(this.queue.values()).map(download => download.url);
+  }
+  
+  
+}

ui/src/app/services/index.ts

@@ -0,0 +1,3 @@
+export { DownloadsService } from './downloads.service';
+export { SpeedService } from './speed.service';
+export { MeTubeSocket } from './metube-socket.service';

ui/src/app/services/metube-socket.service.ts

@@ -0,0 +1,17 @@
+import { Injectable, inject } from '@angular/core';
+import { ApplicationRef } from '@angular/core';
+import { Socket } from 'ngx-socket-io';
+
+@Injectable(
+  { providedIn: 'root' }
+)
+export class MeTubeSocket extends Socket {
+
+  constructor() {
+    const appRef = inject(ApplicationRef);
+
+    const path =
+      document.location.pathname.replace(/share-target/, '') + 'socket.io';
+    super({ url: '', options: { path } }, appRef);
+  }
+}

ui/src/app/services/speed.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, interval } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SpeedService {
+  private speedBuffer = new BehaviorSubject<number[]>([]);
+  private readonly BUFFER_SIZE = 10; // Keep last 10 measurements (1 second at 100ms intervals)
+
+  // Observable that emits the mean speed every second
+  public meanSpeed$: Observable<number>;
+
+  constructor() {
+    // Calculate mean speed every second
+    this.meanSpeed$ = interval(1000).pipe(
+      map(() => {
+        const speeds = this.speedBuffer.value;
+        if (speeds.length === 0) return 0;
+        return speeds.reduce((sum, speed) => sum + speed, 0) / speeds.length;
+      })
+    );
+  }
+
+  // Add a new speed measurement
+  public addSpeedMeasurement(speed: number) {
+    const currentBuffer = this.speedBuffer.value;
+    const newBuffer = [...currentBuffer, speed].slice(-this.BUFFER_SIZE);
+    this.speedBuffer.next(newBuffer);
+  }
+
+  // Get the current mean speed
+  public getCurrentMeanSpeed(): number {
+    const speeds = this.speedBuffer.value;
+    if (speeds.length === 0) return 0;
+    return speeds.reduce((sum, speed) => sum + speed, 0) / speeds.length;
+  }
+}