feat(playlist-info): enhance playlist export functionality and integrate database updates

src/app/home/recent-playlists/playlist-info/playlist-info.component.html

@@ -100,13 +100,15 @@
         <button
             mat-flat-button
             color="accent"
+            type="button"
             (click)="exportPlaylist()"
             *ngIf="!playlist.serverUrl && !playlist.portalUrl"
         >
+            <mat-icon>download</mat-icon>
             {{ 'HOME.PLAYLISTS.INFO_DIALOG.EXPORT_PLAYLIST' | translate }}
         </button>
-        <div class="spacer"></div>
-        <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+        <span class="spacer"></span>
+        <button mat-button mat-dialog-close>
             {{ 'HOME.PLAYLISTS.INFO_DIALOG.CLOSE' | translate }}
         </button>
         <button

src/app/home/recent-playlists/playlist-info/playlist-info.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { CommonModule, DatePipe } from '@angular/common';
-import { Component, Inject } from '@angular/core';
+import { Component, inject, Inject } from '@angular/core';
 import {
     FormControl,
     ReactiveFormsModule,
@@ -13,15 +13,17 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { isTauri } from '@tauri-apps/api/core';
 import { firstValueFrom } from 'rxjs';
 import { Playlist } from '../../../../../shared/playlist.interface';
-import { DataService } from '../../../services/data.service';
+import { DatabaseService } from '../../../services/database.service';
 import { PlaylistsService } from '../../../services/playlists.service';
 import { PlaylistMeta } from '../../../shared/playlist-meta.type';
 import * as PlaylistActions from '../../../state/actions';
+import { XtreamStore } from '../../../xtream-tauri/xtream.store';
 
 @Component({
     selector: 'app-playlist-info',
@@ -33,7 +35,7 @@ import * as PlaylistActions from '../../../state/actions';
             }
         `,
     ],
-    providers: [DatePipe],
+    providers: [DatePipe, XtreamStore],
     imports: [
         TranslateModule,
         MatButtonModule,
@@ -50,26 +52,29 @@ export class PlaylistInfoComponent {
     isTauri = isTauri();
 
     /** Playlist object */
-    playlist: Playlist;
+    playlist: Playlist & { id: string };
 
     /** Form group with playlist details */
     playlistDetails: UntypedFormGroup;
+    xtreamStore = inject(XtreamStore);
 
     constructor(
         private datePipe: DatePipe,
         private formBuilder: UntypedFormBuilder,
-        private dataService: DataService,
-        @Inject(MAT_DIALOG_DATA) playlist: Playlist,
-        private playlistService: PlaylistsService,
-        private store: Store
+        private playlistsService: PlaylistsService,
+        @Inject(MAT_DIALOG_DATA) public playlistData: Playlist & { id: string },
+        private store: Store,
+        private databaseService: DatabaseService,
+        private snackBar: MatSnackBar
     ) {
-        this.playlist = playlist;
+        this.playlist = playlistData;
+        this.createForm();
     }
 
     /**
      * Create the form and set initial data on component init
      */
-    ngOnInit(): void {
+    createForm(): void {
         this.playlistDetails = this.formBuilder.group({
             _id: this.playlist._id,
             title: new FormControl(this.playlist.title, Validators.required),
@@ -103,13 +108,58 @@ export class PlaylistInfoComponent {
         });
     }
 
-    saveChanges(playlist: PlaylistMeta): void {
-        this.store.dispatch(PlaylistActions.updatePlaylistMeta({ playlist }));
+    async saveChanges(playlist: PlaylistMeta): Promise<void> {
+        try {
+            // if xtream
+            if (
+                this.playlist &&
+                this.playlist.username &&
+                this.playlist.password &&
+                this.playlist.serverUrl
+            ) {
+                const success =
+                    await this.databaseService.updateXtreamPlaylistDetails({
+                        id: this.playlist._id,
+                        title: playlist.title,
+                        username: playlist.username,
+                        password: playlist.password,
+                        serverUrl: playlist.serverUrl,
+                    });
+
+                if (!success) {
+                    throw new Error('Failed to update playlist in database');
+                }
+
+                // Update the currentPlaylist in XtreamStore
+                this.xtreamStore.updatePlaylist({
+                    name: playlist.title,
+                    username: playlist.username,
+                    password: playlist.password,
+                    serverUrl: playlist.serverUrl,
+                });
+            }
+
+            // Dispatch store action to update UI
+            this.store.dispatch(
+                PlaylistActions.updatePlaylistMeta({ playlist })
+            );
+
+            this.snackBar.open(
+                'Playlist details updated successfully',
+                'Close',
+                { duration: 3000 }
+            );
+        } catch (error) {
+            console.error('Error updating playlist:', error);
+            this.snackBar.open('Error updating playlist details', 'Close', {
+                duration: 3000,
+            });
+        }
     }
 
     async exportPlaylist() {
         const playlistAsString = await firstValueFrom(
-            this.playlistService.getRawPlaylistById(this.playlist._id)
+            this.playlistsService.getRawPlaylistById(this.playlist._id)
         );
         const element = document.createElement('a');
         element.setAttribute(

src/app/home/recent-playlists/recent-playlists.component.ts

@@ -31,6 +31,7 @@ import { GLOBAL_FAVORITES_PLAYLIST_ID } from '../../../../shared/constants';
 import { IpcCommand } from '../../../../shared/ipc-command.class';
 import { Playlist } from '../../../../shared/playlist.interface';
 import { DataService } from '../../services/data.service';
+import { DatabaseService } from '../../services/database.service';
 import * as PlaylistActions from '../../state/actions';
 import {
     selectActiveTypeFilters,
@@ -142,6 +143,7 @@ export class RecentPlaylistsComponent implements OnDestroy {
     ];
 
     constructor(
+        private databaseService: DatabaseService,
         private dialog: MatDialog,
         private dialogService: DialogService,
         private electronService: DataService,
@@ -229,7 +231,8 @@ export class RecentPlaylistsComponent implements OnDestroy {
      * Removes the provided playlist from the database
      * @param playlistId playlist id to remove
      */
-    removePlaylist(playlistId: string): void {
+    removePlaylist(playlistId: string) {
+        this.databaseService.deletePlaylist(playlistId);
         this.store.dispatch(PlaylistActions.removePlaylist({ playlistId }));
     }
 

src/app/player/components/info-overlay/info-overlay.component.scss

@@ -2,7 +2,6 @@
     position: absolute;
     bottom: 35px;
     width: 100%;
-    background: #2c2b2fdc;
     min-height: 130px;
     max-height: 165px;
     margin-left: auto;