refactor(backend): queue system presented

queue system is presented to be more scalable app and reliable download system

BREAKING CHANGE: redis is added and required now

close #5

src/frontend/package.json

@@ -11,14 +11,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/animations": "^19.0.6",
+    "@angular/common": "^19.0.6",
+    "@angular/compiler": "^19.0.6",
+    "@angular/core": "^19.0.6",
+    "@angular/forms": "^19.0.6",
+    "@angular/platform-browser": "^19.0.6",
+    "@angular/platform-browser-dynamic": "^19.0.6",
+    "@angular/router": "^19.0.6",
+    "@distube/ytdl-core": "^4.15.9",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@ngneat/elf": "^2.5.1",
     "@ngneat/elf-cli-ng": "^1.0.0",
@@ -32,12 +33,12 @@
     "ngx-socket-io": "^4.7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.3",
-    "@angular/cli": "^18.0.3",
-    "@angular/compiler-cli": "^18.0.0",
+    "@angular-devkit/build-angular": "^19.0.7",
+    "@angular/cli": "^19.0.7",
+    "@angular/compiler-cli": "^19.0.6",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
@@ -45,6 +46,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
+    "typescript": "~5.6.3"
   }
 }

src/frontend/src/app/app.component.ts

@@ -1,16 +1,15 @@
 import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
 import {FormsModule} from "@angular/forms";
 import {CommonModule, NgFor} from "@angular/common";
 import {PlaylistService, PlaylistStatusEnum} from "./services/playlist.service";
 import {PlaylistBoxComponent} from "./components/playlist-box/playlist-box.component";
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [CommonModule, RouterOutlet, FormsModule, NgFor, PlaylistBoxComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+    selector: 'app-root',
+    imports: [CommonModule, FormsModule, NgFor, PlaylistBoxComponent],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss',
+    standalone: true,
 })
 export class AppComponent {
 

src/frontend/src/app/components/playlist-box/playlist-box.component.html

@@ -11,7 +11,7 @@
           </ng-template>&nbsp;
           <a [href]="playlist.spotifyUrl"
              target="_blank"
-             class="is-color-black" title="Link to Spotify url to be download from">
+             class="has-text-black" title="Link to Spotify url to be download from">
             <i class="fa-brands fa-spotify"></i>
           </a>
         </span>

src/frontend/src/app/components/playlist-box/playlist-box.component.ts

@@ -14,17 +14,16 @@ const STATUS2CLASS = {
 }
 
 @Component({
-  selector: 'app-playlist-box',
-  standalone: true,
-  imports: [
-    CommonModule,
-    AsyncPipe,
-    NgForOf,
-    NgIf,
-    TrackListComponent
-  ],
-  templateUrl: './playlist-box.component.html',
-  styleUrl: './playlist-box.component.scss'
+    selector: 'app-playlist-box',
+    imports: [
+        CommonModule,
+        AsyncPipe,
+        NgIf,
+        TrackListComponent
+    ],
+    templateUrl: './playlist-box.component.html',
+    styleUrl: './playlist-box.component.scss',
+  standalone: true
 })
 export class PlaylistBoxComponent {
 

src/frontend/src/app/components/track-list/track-list.component.html

@@ -3,17 +3,17 @@
     <span>{{ track.artist }} - {{ track.name }}</span>&nbsp;
     <a [href]="track.spotifyUrl"
        target="_blank"
-       class="is-color-primary margin-left" title="Spotify preview of track that will be downloaded">
+       class="has-text-primary margin-left" title="Spotify preview of track that will be downloaded">
       <i class="fa-brands fa-spotify"></i>
     </a>&nbsp;
     <a [href]="track.youtubeUrl"
        target="_blank"
-       class="is-color-danger is-color-black" title="Youtube searched track that will be downloaded">
+       class="has-text-danger is-color-black" title="Youtube searched track that will be downloaded">
       <i class="fa-brands fa-youtube"></i>
     </a>&nbsp;
     <a *ngIf="track.status === trackStatuses.Completed"
        href="api/track/download/{{track.id}}"
-       class="is-color-info"
+       class="has-text-info"
        title="Download downloaded and locally saved file"
        download>
       <i class="fa-solid fa-download"></i>

src/frontend/src/app/components/track-list/track-list.component.ts

@@ -5,11 +5,11 @@ import {Observable} from "rxjs";
 import {Track, TrackStatusEnum} from "../../models/track";
 
 @Component({
-  selector: 'app-track-list',
+    selector: 'app-track-list',
+    imports: [CommonModule, NgFor, NgSwitch, NgSwitchCase],
+    templateUrl: './track-list.component.html',
+    styleUrl: './track-list.component.scss',
   standalone: true,
-  imports: [CommonModule, NgFor, NgSwitch, NgSwitchCase],
-  templateUrl: './track-list.component.html',
-  styleUrl: './track-list.component.scss'
 })
 export class TrackListComponent {