feat: implement file dialog for playlist uploads in FileUploadComponent

src/app/home/file-upload/file-upload.component.html

@@ -1,7 +1,7 @@
 <div
     class="file-upload"
     appDragDropFileUpload
-    (click)="fileField.click()"
+    (click)="openDialog(fileField)"
     (fileDropped)="upload($event)"
 >
     <mat-icon class="upload-icon">upload_file</mat-icon>

src/app/home/file-upload/file-upload.component.ts

@@ -1,6 +1,11 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Output } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
+import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
+import { isTauri } from '@tauri-apps/api/core';
+import { open } from '@tauri-apps/plugin-dialog';
+import { readTextFile } from '@tauri-apps/plugin-fs';
+import { parsePlaylist } from '../../state/actions';
 import { DragDropFileUploadDirective } from './drag-drop-file-upload.directive';
 
 @Component({
@@ -17,6 +22,9 @@ export class FileUploadComponent {
     }>();
     @Output() fileRejected = new EventEmitter<string>();
     @Output() addClicked = new EventEmitter<void>();
+    @Output() closeDialog = new EventEmitter<void>();
+
+    private readonly store = inject(Store);
 
     allowedContentTypes = [
         'application/mpegurl',
@@ -28,6 +36,35 @@ export class FileUploadComponent {
         'audio/mpegurl',
     ];
 
+    async openDialog(fileField: HTMLInputElement) {
+        if (isTauri()) {
+            await open({
+                multiple: false,
+                directory: false,
+                filters: [
+                    {
+                        name: 'Playlist files',
+                        extensions: ['m3u', 'm3u8'],
+                    },
+                ],
+            }).then(async (path) => {
+                const title = path.split('/').pop();
+                const fileContent = await readTextFile(path);
+                this.store.dispatch(
+                    parsePlaylist({
+                        uploadType: 'FILE',
+                        playlist: fileContent,
+                        title,
+                        path,
+                    })
+                );
+                this.closeDialog.emit();
+            });
+        } else {
+            fileField.click();
+        }
+    }
+
     upload(fileList: FileList) {
         if (!this.allowedContentTypes.includes(fileList[0].type)) {
             this.fileRejected.emit(fileList[0].name);

src/app/shared/components/add-playlist/add-playlist-dialog.component.html

@@ -6,6 +6,7 @@
         <app-file-upload
             (fileRejected)="rejectFile($event)"
             (fileSelected)="handlePlaylist($event)"
+            (closeDialog)="closeDialog()"
         />
     } @else if (playlistType === 'url') {
         <app-url-upload (urlAdded)="sendPlaylistsUrl($event)" />

src/app/shared/components/add-playlist/add-playlist-dialog.component.ts

@@ -54,7 +54,6 @@ export class AddPlaylistDialogComponent {
      * @param payload
      */
     handlePlaylist(payload: { uploadEvent: Event; file: File }): void {
-        // this.isLoading = true;
         const playlist = (payload.uploadEvent.target as FileReader)
             .result as string;
 
@@ -75,7 +74,6 @@ export class AddPlaylistDialogComponent {
                 filename,
             })
         );
-        // this.isLoading = false;
     }
 
     /**
@@ -83,7 +81,6 @@ export class AddPlaylistDialogComponent {
      * @param playlistUrl url of the added playlist
      */
     sendPlaylistsUrl(playlistUrl: string): void {
-        // this.isLoading = true;
         this.dataService.sendIpcEvent(PLAYLIST_PARSE_BY_URL, {
             title: getFilenameFromUrl(playlistUrl),
             url: playlistUrl,
@@ -96,7 +93,6 @@ export class AddPlaylistDialogComponent {
      * @param text playlist as string
      */
     uploadAsText(playlist: string): void {
-        // this.isLoading = true;
         this.store.dispatch(
             parsePlaylist({
                 uploadType: 'TEXT',