added socket io for showing download progress on server & client

client/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "rxjs": "~7.8.0",
+    "socket.io-client": "^4.7.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },

client/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { DownloadService, MediaInfo } from '../services/download.service';
 import { CardComponent } from '../card/card.component';
 import { SearchFormComponent } from '../search-form/search-form.component';
 import { CommonModule } from '@angular/common';
+import { ProgressData } from '../services/socket.service';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +17,7 @@ export class AppComponent implements OnInit {
 
   constructor(private downloadservice: DownloadService) {}
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.downloadservice.loading$.subscribe((loading) => (this.loading = loading));
   }
 

client/src/card/card.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { DownloadService, MediaInfo, MediaType } from '../services/download.service';
 
-const errorMessage = 'Sorry, we could not download the requested file. Currently the maximum file size cannot exceed 4.5 Mb';
+const errorMessage = 'Sorry, we could not download the requested file.';
 
 @Component({
   selector: 'app-card',

client/src/environment/environment.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  serverUrl: 'https://0a40-5-147-251-186.ngrok-free.app',
+  // serverUrl: 'https://0a40-5-147-251-186.ngrok-free.app',
+  serverUrl: 'http://localhost:3000',
 };

client/src/search-form/search-form.component.html

@@ -32,11 +32,12 @@
     </div>
   </form>
 
-  <div [class]="'flex flex-col self-center p-6' + (loading ? 'hidden' : '')" *ngIf="loading">
+  <div [class]="'flex flex-col w-full align-middle self-center p-6' + (loading ? 'hidden' : '')" *ngIf="loading">
     <img alt="Loading..." src="assets/pacman.svg" width="50px" height="50px" class="self-center" />
-    <h2 class="font-bold text-center text-xl text-slate-700 font-display">
-      Please be patient, the server may take up to two minutes to respond
-    </h2>
+    <div *ngIf="socketService.getProgressData() | async as progressData" class="self-center flex justify-center">
+      <h2 class="font-bold text-xl text-slate-700">Downloading</h2>
+      <h2 class="font-bold text-xl text-slate-700 align-middle w-16 text-center">{{ convertToPercentage(progressData) }}%</h2>
+    </div>
   </div>
 
   <app-error *ngIf="errorMessage && !loading" class="self-center w-1/3" [message]="errorMessage"></app-error>

client/src/search-form/search-form.component.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { ErrorComponent } from '../error/error.component';
 import { Subject, takeUntil } from 'rxjs';
+import { ProgressData, SocketService } from '../services/socket.service';
 
 const errorMessage = 'Sorry, but the video could not be found.';
 
@@ -22,11 +23,15 @@ export class SearchFormComponent implements OnInit, OnDestroy {
 
   @Output() infoEmitter = new EventEmitter<MediaInfo>();
 
-  constructor(private downloadService: DownloadService) {}
+  constructor(
+    private downloadService: DownloadService,
+    public socketService: SocketService,
+  ) {}
 
   ngOnInit() {
     this.downloadService.loading$.pipe(takeUntil(this.destroy$)).subscribe((loading) => (this.loading = loading));
     this.downloadService.error$.pipe(takeUntil(this.destroy$)).subscribe((errorMessage) => (this.errorMessage = errorMessage));
+    this.socketService.connect();
   }
 
   ngOnDestroy() {
@@ -48,4 +53,8 @@ export class SearchFormComponent implements OnInit, OnDestroy {
       },
     });
   }
+
+  convertToPercentage(progress: ProgressData) {
+    return ((progress.totalDownloaded / progress.totalSize) * 100).toFixed(0);
+  }
 }

client/src/services/socket.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Socket, io } from 'socket.io-client';
+import { environment } from '../environment/environment';
+import { Observable } from 'rxjs';
+
+export interface ProgressData {
+  totalDownloaded: number;
+  totalSize: number;
+}
+
+const downloadEvent = 'download-progress';
+
+@Injectable({ providedIn: 'root' })
+export class SocketService {
+  private socket: Socket;
+  private progressData: Observable<ProgressData>;
+
+  constructor() {
+    this.socket = io(environment.serverUrl);
+    this.progressData = new Observable<ProgressData>((subscriber) => {
+      this.socket.on(downloadEvent, (data: ProgressData) => {
+        subscriber.next(data);
+      });
+    });
+  }
+
+  public connect() {
+    this.socket.connect();
+  }
+
+  public getProgressData() {
+    return this.progressData;
+  }
+}

server/Dockerfile

@@ -7,5 +7,4 @@ COPY package.json package-lock.json ./
 RUN npm install
 
 COPY . .
-EXPOSE 80
 CMD ["npm", "run", "start"]