fix(ui): correct imports, guard checks, logging and settings handling

apps/electron-backend/src/app/api/main.preload.ts

@@ -8,6 +8,10 @@ contextBridge.exposeInMainWorld('electron', {
     updatePlaylistFromFilePath: (filePath: string, title: string) =>
         ipcRenderer.invoke('update-playlist-from-file-path', filePath, title),
     openPlaylistFromFile: () => ipcRenderer.invoke('open-playlist-from-file'),
+    saveFileDialog: (defaultPath: string, filters?: { name: string; extensions: string[] }[]) =>
+        ipcRenderer.invoke('save-file-dialog', defaultPath, filters),
+    writeFile: (filePath: string, content: string) =>
+        ipcRenderer.invoke('write-file', filePath, content),
     setUserAgent: (userAgent: string, referer?: string) =>
         ipcRenderer.invoke('set-user-agent', userAgent, referer),
     openInMpv: (

apps/electron-backend/src/app/events/playlist.events.ts

@@ -7,7 +7,7 @@ import axios from 'axios';
 import { dialog, ipcMain } from 'electron';
 import { parse } from 'iptv-playlist-parser';
 import { createPlaylistObject, getFilenameFromUrl } from 'm3u-utils';
-import { readFile } from 'node:fs/promises';
+import { readFile, writeFile } from 'node:fs/promises';
 import { AUTO_UPDATE_PLAYLISTS } from 'shared-interfaces';
 
 export default class PlaylistEvents {
@@ -102,3 +102,33 @@ ipcMain.handle(AUTO_UPDATE_PLAYLISTS, async (event, playlistUrls) => {
         console.log(`Auto-updating playlist from ${url}`);
     }
 });
+
+ipcMain.handle('save-file-dialog', async (event, defaultPath, filters) => {
+    try {
+        const { canceled, filePath } = await dialog.showSaveDialog({
+            defaultPath,
+            filters: filters || [
+                { name: 'All Files', extensions: ['*'] },
+            ],
+        });
+
+        if (canceled || !filePath) {
+            return null;
+        }
+
+        return filePath;
+    } catch (error) {
+        console.error('Error showing save dialog:', error);
+        throw error;
+    }
+});
+
+ipcMain.handle('write-file', async (event, filePath, content) => {
+    try {
+        await writeFile(filePath, content, 'utf-8');
+        return { success: true };
+    } catch (error) {
+        console.error('Error writing file:', error);
+        throw error;
+    }
+});

apps/electron-backend/src/app/events/setttings.events.ts

@@ -1,6 +1,5 @@
 import { ipcMain } from 'electron';
 import {
-    MPV_PLAYER_PATH,
     MPV_REUSE_INSTANCE,
     store,
 } from '../services/store.service';
@@ -13,5 +12,9 @@ export default class SettingsEvents {
 
 ipcMain.handle('SETTINGS_UPDATE', (_event, arg) => {
     console.log('Received SETTINGS_UPDATE with data:', arg);
-    store.set(MPV_REUSE_INSTANCE, arg.mpvReuseInstance);
+    
+    // Only set values that are defined
+    if (arg.mpvReuseInstance !== undefined) {
+        store.set(MPV_REUSE_INSTANCE, arg.mpvReuseInstance);
+    }
 });

apps/web/src/app/app.component.ts

@@ -13,7 +13,6 @@ import {
     Language,
     OPEN_FILE,
     Settings,
-    SETTINGS_UPDATE,
     STORE_KEY,
     Theme,
     VIEW_ADD_PLAYLIST,
@@ -120,13 +119,12 @@ export class AppComponent implements OnInit, OnDestroy {
             .getValueFromLocalStorage(STORE_KEY.Settings)
             .subscribe((settings: Settings) => {
                 if (settings && Object.keys(settings).length > 0) {
-                    // Send settings to Electron main process
-                    if (window.electron) {
-                        window.electron.updateSettings(settings);
-                    }
-                    
+                    // No need to send settings to Electron on init
+                    // Settings are stored in IndexedDB and loaded by the settings store
+                    // Only specific Electron settings (MPV/VLC paths) are sent when changed in settings component
+
                     this.translate.use(settings.language ?? this.DEFAULT_LANG);
-                    
+
                     // Fetch EPG if URLs are configured
                     if (
                         window.electron &&

apps/web/src/app/settings/settings.component.ts

@@ -252,16 +252,20 @@ export class SettingsComponent implements OnInit {
     onSubmit(): void {
         this.settingsStore.updateSettings(this.settingsForm.value).then(() => {
             this.applyChangedSettings();
-            
+
             if (window.electron) {
                 window.electron.updateSettings(this.settingsForm.value);
-                
+
                 // Set player paths if using external players
                 if (this.settingsForm.value.mpvPlayerPath) {
-                    window.electron.setMpvPlayerPath(this.settingsForm.value.mpvPlayerPath);
+                    window.electron.setMpvPlayerPath(
+                        this.settingsForm.value.mpvPlayerPath
+                    );
                 }
                 if (this.settingsForm.value.vlcPlayerPath) {
-                    window.electron.setVlcPlayerPath(this.settingsForm.value.vlcPlayerPath);
+                    window.electron.setVlcPlayerPath(
+                        this.settingsForm.value.vlcPlayerPath
+                    );
                 }
             }
         });

apps/web/src/app/shared/components/mpv-player-bar/mpv-player-bar.component.html

@@ -1,4 +1,4 @@
-@if ((activeProcesses$ | async)?.length) {
+<!-- @if ((activeProcesses$ | async)?.length) {
   <div class="mpv-player-bar">
     @for (process of activeProcesses$ | async; track process.id) {
       <div class="player-item">
@@ -24,20 +24,6 @@
           </div>
         </div>
         <div class="player-controls">
-          <!-- <button
-          mat-icon-button
-          (click)="pauseStream(process.id)"
-          title="Pause"
-          >
-          <mat-icon>pause</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          (click)="playStream(process.id)"
-          title="Play"
-          >
-          <mat-icon>play_arrow</mat-icon>
-        </button> -->
         <button
           mat-icon-button
           (click)="closeStream(process.id)"
@@ -50,3 +36,4 @@
   }
 </div>
 }
+ -->

apps/web/src/app/shared/components/mpv-player-bar/mpv-player-bar.component.ts

@@ -1,30 +1,19 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { Observable } from 'rxjs';
-import {
-    MpvPlayerService,
-    MpvProcess,
-} from '../../services/mpv-player.service';
 
 @Component({
-    imports: [CommonModule, MatIconModule, MatButtonModule],
+    /* imports: [MatIcon, MatIconButton], */
     selector: 'app-mpv-player-bar',
     templateUrl: './mpv-player-bar.component.html',
-    styleUrls: ['./mpv-player-bar.component.scss']
+    styleUrls: ['./mpv-player-bar.component.scss'],
 })
 export class MpvPlayerBarComponent {
-    activeProcesses$: Observable<MpvProcess[]>;
-
-    constructor(private mpvPlayerService: MpvPlayerService) {
-        this.activeProcesses$ = this.mpvPlayerService.activeProcesses$;
-    }
+    /* private mpvPlayerService = inject(MpvPlayerService);
 
+    activeProcesses$ = this.mpvPlayerService.activeProcesses$;
+    
     async closeStream(processId: number): Promise<void> {
         await this.mpvPlayerService.closeStream(processId);
-    }
-
+    } */
     /* async playStream(processId: number): Promise<void> {
         await this.mpvPlayerService.playStream(processId);
     }

apps/web/src/app/shared/services/mpv-player.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+/* import { Injectable } from '@angular/core';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { BehaviorSubject } from 'rxjs';
@@ -75,3 +75,4 @@ export class MpvPlayerService {
         await invoke('close_mpv_process', { processId });
     }
 }
+ */