Add playlists

src-angular/app/components/playlist/playlist-bar/playlist-bar.component.html

@@ -0,0 +1,53 @@
+<div class="border-t border-t-neutral p-2 flex gap-2 items-center max-w-full justify-between">
+	<div class="flex items-center gap-[8px]">
+		{{ (this.playlistService.tracks$ | async)?.length ?? 0 }} Songs
+
+		@if ((this.playlistService.selectedSongs$ | async)!.length > 0) {
+			<button class="btn btn-sm btn-primary" (click)="exportSelected()">Export Selected</button>
+		} @else {
+			<button class="btn btn-sm btn-primary" (click)="exportPlaylist()">Export</button>
+		}
+		<button class="btn btn-sm btn-primary" (click)="importPlaylist()">Import</button>
+		<input type="file" #fileInput accept=".setlist" class="hidden" (change)="onFileSelected($event)" />
+
+		@if ((this.playlistService.selectedSongs$ | async)!.length === 0) {
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.clearPlaylist()">
+				<i class="bi bi-trash"></i>
+				Delete all
+			</button>
+		} @else {
+			<button type="button" class="btn btn-sm min-w-[108px] hover:btn-error" (click)="this.playlistService.removeFromPlaylist()">
+				<i class="bi bi-trash"></i>
+				Delete selected
+			</button>
+		}
+	</div>
+	<div class="flex">
+		<div *ngIf="downloadService.downloadCount > 0" class="max-w-100 text-ellipsis text-nowrap overflow-hidden whitespace-nowrap flex items-center">
+			{{ downloadService.currentDownloadText }}
+		</div>
+		<div *ngIf="downloadService.downloadCount > 0" class="flex gap-2 items-center">
+			<button (click)="downloadsModal.showModal()" class="btn btn-sm btn-ghost w-[30vw] flex gap-2">
+				<div class="flex-1">
+					<progress
+						[attr.value]="downloadService.totalDownloadingPercent"
+						max="100"
+						class="progress h-3 rounded-md"
+						[class.progress-error]="downloadService.anyErrorsExist"></progress>
+				</div>
+				<div>
+					<i class="bi bi-info-circle text-xs"></i>
+				</div>
+			</button>
+		</div>
+	</div>
+</div>
+
+<dialog #downloadsModal class="modal whitespace-normal">
+	<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2 w-9/12 max-w-7xl min-h-0 overflow-y-clip">
+		<app-downloads-modal />
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>

src-angular/app/components/playlist/playlist-bar/playlist-bar.component.ts

@@ -0,0 +1,48 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { PlaylistService } from 'src-angular/app/core/services/playlist.service'
+import { DownloadService } from '../../../core/services/download.service'
+
+@Component({
+	selector: 'app-playlist-bar',
+	templateUrl: './playlist-bar.component.html',
+	standalone: false,
+})
+export class PlaylistBarComponent {
+	@ViewChild('fileInput', { static: false }) fileInput: ElementRef<HTMLInputElement>
+
+	constructor(public playlistService: PlaylistService, public downloadService: DownloadService) { }
+
+	exportPlaylist() {
+		this.playlistService.storePlaylist()
+	}
+
+	exportSelected() {
+		this.playlistService.storeSelectedSongs()
+	}
+
+	importPlaylist() {
+		this.fileInput.nativeElement.click()
+	}
+
+	onFileSelected(event: Event) {
+		const input = event.target as HTMLInputElement
+
+		if (input.files && input.files.length > 0) {
+			const file = input.files[0]
+			const reader = new FileReader()
+			reader.onload = () => {
+				try {
+					const importedTracks = JSON.parse(reader.result as string)
+					if (Array.isArray(importedTracks)) {
+						this.playlistService.downloadPlaylist(importedTracks)
+					} else {
+						console.error('Invalid file format')
+					}
+				} catch (error) {
+					console.error('Error parsing file:', error)
+				}
+			}
+			reader.readAsText(file)
+		}
+	}
+}