feat: export/import playlist from settings

src/app/services/playlists.service.ts

@@ -198,4 +198,14 @@ export class PlaylistsService {
             return playlist.playlist.header.raw + '\n' + playlist.playlist.items.map(item => item.raw).join('\n');
         }));
     }
+
+    getAllData() {
+        return this.dbService.getAll<Playlist>(DbStores.Playlists);
+    }
+
+    removeAll() {
+        this.dbService.clear(DbStores.Playlists).subscribe(data => {
+            console.log(data);
+        });
+    }
 }

src/app/settings/settings.component.html

@@ -167,6 +167,59 @@
                 {{ updateMessage }}
             </div>
         </div>
+        <mat-divider></mat-divider>
+        <div class="row">
+            <div class="column">
+                {{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}
+                <p>
+                    {{ 'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION' | translate }}
+                </p>
+            </div>
+            <div class="column">
+                <button
+                    mat-button
+                    (click)="
+                        $event.preventDefault();
+                        $event.stopPropagation();
+                        importData()
+                    "
+                >
+                    {{ 'SETTINGS.IMPORT_DATA' | translate }}
+                </button>
+                <button
+                    mat-button
+                    (click)="
+                        $event.preventDefault();
+                        $event.stopPropagation();
+                        exportData()
+                    "
+                >
+                    {{ 'SETTINGS.EXPORT_DATA' | translate }}
+                </button>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="column">
+                {{ 'SETTINGS.REMOVE_ALL' | translate }}
+                <p>
+                    {{ 'SETTINGS.REMOVE_ALL_DESCRIPTION' | translate }}
+                </p>
+            </div>
+            <div class="column">
+                <button
+                    mat-button
+                    (click)="
+                        $event.preventDefault();
+                        $event.stopPropagation();
+                        removeAll()
+                    "
+                    color="warn"
+                >
+                    {{ 'SETTINGS.REMOVE_ALL' | translate }}
+                </button>
+            </div>
+        </div>
 
         <div class="row" *ngIf="!isElectron">
             {{ 'SETTINGS.EPG_NOTE' | translate }}

src/app/settings/settings.component.ts

@@ -14,9 +14,12 @@ import { take } from 'rxjs';
 import * as semver from 'semver';
 import { EPG_FORCE_FETCH } from '../../../shared/ipc-commands';
 import { DataService } from '../services/data.service';
+import { DialogService } from '../services/dialog.service';
 import { EpgService } from '../services/epg.service';
+import { PlaylistsService } from '../services/playlists.service';
 import { STORE_KEY } from '../shared/enums/store-keys.enum';
 import { SharedModule } from '../shared/shared.module';
+import * as PlaylistActions from '../state/actions';
 import { selectIsEpgAvailable } from '../state/selectors';
 import { SettingsService } from './../services/settings.service';
 import { Language } from './language.enum';
@@ -77,13 +80,15 @@ export class SettingsComponent implements OnInit {
      * required dependencies into the component
      */
     constructor(
-        private store: Store,
+        private dialogService: DialogService,
         private electronService: DataService,
         private epgService: EpgService,
         private formBuilder: UntypedFormBuilder,
+        private playlistsService: PlaylistsService,
         private router: Router,
         private settingsService: SettingsService,
         private snackBar: MatSnackBar,
+        private store: Store,
         private translate: TranslateService
     ) {}
 
@@ -265,4 +270,61 @@ export class SettingsComponent implements OnInit {
         this.epgUrl.removeAt(index);
         this.settingsForm.markAsDirty();
     }
+
+    exportData() {
+        this.playlistsService
+            .getAllData()
+            .pipe(take(1))
+            .subscribe((data) => {
+                const blob = new Blob([JSON.stringify(data)], {
+                    type: 'text/plain',
+                });
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = 'playlists.json';
+                link.click();
+                window.URL.revokeObjectURL(url);
+            });
+    }
+
+    importData() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'application/json';
+
+        input.addEventListener('change', (event: Event) => {
+            const target = event.target as HTMLInputElement;
+            const file = target.files?.[0];
+
+            if (file) {
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const contents = reader.result;
+                        console.log(contents);
+
+                        const parsedPlaylists = JSON.parse(contents.toString());
+
+                        this.store.dispatch(
+                            PlaylistActions.addManyPlaylists({
+                                playlists: parsedPlaylists,
+                            })
+                        );
+                    };
+                    reader.readAsText(file);
+                }
+            }
+        });
+
+        input.click();
+    }
+
+    removeAll() {
+        this.dialogService.openConfirmDialog({
+            title: this.translate.instant('SETTINGS.REMOVE_DIALOG.TITLE'),
+            message: this.translate.instant('SETTINGS.REMOVE_DIALOG.MESSAGE'),
+            onConfirm: (): void => this.playlistsService.removeAll(),
+        });
+    }
 }

src/assets/i18n/en.json

@@ -89,7 +89,17 @@
         "SHOW_CAPTIONS_DESCRIPTION": "Show or hide subtitles by default",
         "VERSION_DESCRIPTION": "Current version of the application",
         "EPG_NOTE": "Currently EPG is available only in the electron-based version of IPTVnator.",
-        "EPG_NOTE_URL_TEXT": "Check it here"
+        "EPG_NOTE_URL_TEXT": "Check it here",
+        "IMPORT_EXPORT_DATA": "Import/Export playlists",
+        "IMPORT_EXPORT_DATA_DESCRIPTION": "E2xport and import playlists in the JSON format used within the application.",
+        "IMPORT_DATA": "Import playlists",
+        "EXPORT_DATA": "Export playlists",
+        "REMOVE_ALL": "Remove playlists",
+        "REMOVE_ALL_DESCRIPTION": "It will remove all existing playlists from the application.",
+        "REMOVE_DIALOG": {
+            "TITLE": "Remove all playlists",
+            "MESSAGE": "Are you sure you want to delete all playlist from the application?"
+        }
     },
     "THEMES": {
         "DARK_THEME": "Dark theme",