chore: back to electron + nx

apps/web/src/app/shared/components/header/header.component.ts

@@ -0,0 +1,195 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, Input, OnInit, effect } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { open } from '@tauri-apps/plugin-shell';
+import { NgxWhatsNewModule } from 'ngx-whats-new';
+import { HomeComponent } from '../../../home/home.component';
+import { DataService } from '../../../services/data.service';
+import { SortBy, SortOrder, SortService } from '../../../services/sort.service';
+import { WhatsNewService } from '../../../services/whats-new.service';
+import { setSelectedFilters } from '../../../state/actions';
+import { selectActiveTypeFilters } from '../../../state/selectors';
+import { AboutDialogComponent } from '../about-dialog/about-dialog.component';
+import {
+    AddPlaylistDialogComponent,
+    PlaylistType,
+} from '../add-playlist/add-playlist-dialog.component';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    imports: [
+        AsyncPipe,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        FormsModule,
+        NgxWhatsNewModule,
+        ReactiveFormsModule,
+        TranslateModule,
+    ],
+})
+export class HeaderComponent implements OnInit {
+    /** Title of the header */
+    @Input() title!: string;
+
+    /** Subtitle of the header */
+    @Input() subtitle!: string;
+
+    /** Environment flag */
+    isElectron = this.dataService.isElectron;
+
+    /** Environment flag for Tauri */
+    isTauri = this.dataService.getAppEnvironment() === 'tauri';
+
+    /** Visibility flag of the "what is new" modal dialog */
+    isDialogVisible$ = this.whatsNewService.dialogState$;
+
+    /** Dialog options */
+    options = this.whatsNewService.options;
+
+    /** Modals to show for the updated version of the application */
+    modals = this.whatsNewService.getLatestChanges();
+
+    isHome = true;
+
+    playlistTypes = [
+        {
+            title: 'M3U (local, url, text)',
+            id: 'm3u',
+            checked: true,
+        },
+        {
+            title: 'Xtream',
+            id: 'xtream',
+            checked: true,
+        },
+        {
+            title: 'Stalker',
+            id: 'stalker',
+            checked: true,
+        },
+    ];
+
+    selectedTypeFilters = this.store.selectSignal(selectActiveTypeFilters);
+
+    SortBy = SortBy;
+    SortOrder = SortOrder;
+    currentSortOptions: { by: SortBy; order: SortOrder };
+
+    constructor(
+        private activatedRoute: ActivatedRoute,
+        private dialog: MatDialog,
+        private dataService: DataService,
+        private router: Router,
+        private store: Store,
+        private whatsNewService: WhatsNewService,
+        private sortService: SortService
+    ) {
+        effect(() => {
+            if (this.selectedTypeFilters) {
+                this.playlistTypes = this.playlistTypes.map((type) => {
+                    type.checked = this.selectedTypeFilters().includes(type.id);
+                    return type;
+                });
+            }
+        });
+
+        this.sortService.getSortOptions().subscribe((options) => {
+            this.currentSortOptions = options;
+        });
+    }
+
+    ngOnInit() {
+        this.isHome =
+            this.activatedRoute.snapshot.component.name === HomeComponent.name;
+    }
+
+    /**
+     * Navigates to the settings page
+     */
+    openSettings(): void {
+        this.router.navigate(['/settings']);
+    }
+
+    /**
+     * Opens the provided URL string in new browser window
+     * @param url url to open
+     */
+    async openUrl(url: string): Promise<void> {
+        if (this.isTauri) {
+            await open(url);
+        } else {
+            window.open(url, '_blank');
+        }
+    }
+
+    /**
+     * Sets the visibility flag of the modal window
+     * @param visible show/hide window flag
+     */
+    setDialogVisibility(visible: boolean): void {
+        if (this.modals.length > 0) {
+            this.whatsNewService.changeDialogVisibleState(visible);
+        }
+    }
+
+    /**
+     * Opens the about dialog with description and version of
+     * the app
+     */
+    openAboutDialog(): void {
+        this.dialog.open(AboutDialogComponent, {
+            panelClass: 'about-dialog-overlay',
+            width: '600px',
+            data: this.dataService.getAppVersion(),
+        });
+    }
+
+    opedAddPlaylistDialog(type: PlaylistType) {
+        this.dialog.open<AddPlaylistDialogComponent, { type: PlaylistType }>(
+            AddPlaylistDialogComponent,
+            {
+                width: '600px',
+                data: { type },
+            }
+        );
+    }
+
+    onPlaylistFilterChange() {
+        this.store.dispatch(
+            setSelectedFilters({
+                selectedFilters: this.playlistTypes
+                    .filter((f) => f.checked)
+                    .map((f) => f.id),
+            })
+        );
+    }
+
+    setSortOptions(by: SortBy, order: SortOrder): void {
+        this.sortService.setSortOptions({ by, order });
+    }
+
+    isSortActive(by: SortBy, order: SortOrder): boolean {
+        return (
+            this.currentSortOptions?.by === by &&
+            this.currentSortOptions?.order === order
+        );
+    }
+}